Text: add drop cap support

[mtias]

props @MichaelArestad

[youknowriad]

Should we move this style into the text block stylesheet instead? (or create one)

[youknowriad]

Also, I was expecting the style to trigger as soon as I toggle the inspector control. Why is it only for not selected blocks?

[mtias]

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.

[youknowriad]

We probably need a label, Should we create an inspector ToggleControl (same as range and text)?

[paulwilde]

@youknowriad I'll create one and submit a pull request.

[aduth]

The float can cause some funny effects to the layout, particularly in short text blocks:

(Note Inserter misalignment)

Might need a clear on the block.

[aduth]

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>
],

[mtias]

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.

[aduth]

In fairness, it's already an array 😄

[aduth]

This belongs in "WordPress dependencies"

[aduth]

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?

[mtias]

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.)

[aduth]

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.

[mtias]

Just speed considering all these controls will be superseded by components in following iterations, properly absorbing the styles.