Conversation
Only display drop cap when block is not in focus.
blocks/editable/style.scss
Outdated
| } | ||
| } | ||
|
|
||
| .editor-visual-editor__block:not( .is-selected ) .blocks-editable.drop-cap-true { |
There was a problem hiding this comment.
Should we move this style into the text block stylesheet instead? (or create one)
There was a problem hiding this comment.
Also, I was expecting the style to trigger as soon as I toggle the inspector control. Why is it only for not selected blocks?
There was a problem hiding this comment.
contentEditable cannot handle styling :first-letter, also when editing it is nicer to be able to see the whole line.
Agreed on moving to styles. Having some conversations on how to go about front-end styles in general.
blocks/library/text/index.js
Outdated
| ), | ||
| focus && ( | ||
| <InspectorControls> | ||
| <Toggle checked={ !! dropCap } onChange={ toggleDropCap } /> |
There was a problem hiding this comment.
We probably need a label, Should we create an inspector ToggleControl (same as range and text)?
There was a problem hiding this comment.
@youknowriad I'll create one and submit a pull request.
| const { align, content, dropCap } = attributes; | ||
| const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } ); | ||
| return [ | ||
| focus && ( |
There was a problem hiding this comment.
Possible alternative to creating single combined focus condition:
focus && ...[
<BlockControls key="controls">
<AlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
</BlockControls>,
<InspectorControls key="inspector">
<div className="blocks-text__drop-cap" style={ { display: 'flex', justifyContent: 'space-between' } }>
<label htmlFor="blocks-text__drop-cap">{ __( 'Drop Cap' ) }</label>
<Toggle
checked={ !! dropCap }
onChange={ toggleDropCap }
id="blocks-text__drop-cap-toggle"
/>
</div>
</InspectorControls>
],There was a problem hiding this comment.
This is something we'll need to pick a model and apply consistently, because people will start using as examples. I personally don't like the arrays much and prefer a single element tree.
There was a problem hiding this comment.
In fairness, it's already an array 😄
blocks/library/text/index.js
Outdated
| import BlockControls from '../../block-controls'; | ||
| import Editable from '../../editable'; | ||
| import InspectorControls from '../../inspector-controls'; | ||
| import Toggle from 'components/form-toggle'; |
There was a problem hiding this comment.
This belongs in "WordPress dependencies"
| } } | ||
| onMerge={ mergeBlocks } | ||
| style={ { textAlign: align } } | ||
| className={ `drop-cap-${ dropCap }` } |
There was a problem hiding this comment.
Should this be a modifier class on Editable?
className={ classnames( { 'has-drop-cap': dropCap } ) }.blocks-editable.has-drop-cap .blocks-editable__tinymce:not( :focus ) {Or better yet, a prop on the component if it's Editable's own styles responsible for creating the effect?
There was a problem hiding this comment.
Indeed, plan is to turn it into has-drop-cap. I am not sure if it belong in editable, it feels like purely a text/paragraph addition. (Makes no sense in quotes, captions, etc.)
| ), | ||
| focus && ( | ||
| <InspectorControls key="inspector"> | ||
| <div className="blocks-text__drop-cap" style={ { display: 'flex', justifyContent: 'space-between' } }> |
There was a problem hiding this comment.
Why do we give this a className but then apply its styles inline? Should we move the styles to styles.scss?
I think elsewhere @youknowriad had mentioned creating better patterns for inspector sections with labels. Doesn't seem like it should be the responsibility of the block to make sure its inspector controls are aligned as desired.
There was a problem hiding this comment.
Just speed considering all these controls will be superseded by components in following iterations, properly absorbing the styles.

props @MichaelArestad