diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss index 0df75fbe87cddc..f371b082ccc6bb 100644 --- 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 index a3f3844def8234..c2b29e03ba1663 100644 --- 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 && ( @@ -44,6 +47,18 @@ registerBlockType( 'core/text', { /> ), + focus && ( + +
+ + +
+
+ ), , ]; },