Merge pull request #1189 from WordPress/add/drop-cap-support

Text: add drop cap support
WordPress · Jun 15, 2017 · c521550 · c521550
2 parents 5069c7d + d8a83c0
commit c521550
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
@@ -56,6 +56,19 @@
 	}
 }
 
+.drop-cap-true .blocks-editable__tinymce:not( :focus )  {
+	&:first-letter {
+		float: left;
+		font-size: 4.1em;
+		line-height: 0.7;
+		font-family: serif;
+		font-weight: bold;
+		margin: .07em .23em 0 0;
+		text-transform: uppercase;
+		font-style: normal;
+	}
+}
+
 .block-editable__inline-toolbar {
 	display: flex;
 	justify-content: center;

diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js
@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { __ } from 'i18n';
 import { Children, cloneElement } from 'element';
+import Toggle from 'components/form-toggle';
 
 /**
  * Internal dependencies
@@ -10,11 +12,12 @@ import { registerBlockType, createBlock, query, setDefaultBlock } from '../../ap
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockControls from '../../block-controls';
 import Editable from '../../editable';
+import InspectorControls from '../../inspector-controls';
 
 const { children } = query;
 
 registerBlockType( 'core/text', {
-	title: wp.i18n.__( 'Text' ),
+	title: __( 'Text' ),
 
 	icon: 'text',
 
@@ -31,8 +34,8 @@ registerBlockType( 'core/text', {
 	},
 
 	edit( { attributes, setAttributes, insertBlockAfter, focus, setFocus, mergeBlocks } ) {
-		const { align, content } = attributes;
-
+		const { align, content, dropCap } = attributes;
+		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		return [
 			focus && (
 				<BlockControls key="controls">
@@ -44,6 +47,18 @@ registerBlockType( 'core/text', {
 					/>
 				</BlockControls>
 			),
+			focus && (
+				<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>
+			),
 			<Editable
 				key="editable"
 				value={ content }
@@ -62,6 +77,7 @@ registerBlockType( 'core/text', {
 				} }
 				onMerge={ mergeBlocks }
 				style={ { textAlign: align } }
+				className={ `drop-cap-${ dropCap }` }
 			/>,
 		];
 	},