From c51f5242b32f3162e13743abb156314c57b31c35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 15 Jun 2017 13:25:37 +0200 Subject: [PATCH 1/6] Text: add support for dropCap. --- blocks/editable/style.scss | 13 +++++++++++++ blocks/library/text/index.js | 12 ++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss index 0df75fbe87cddc..d4c52537d5440e 100644 --- a/blocks/editable/style.scss +++ b/blocks/editable/style.scss @@ -56,6 +56,19 @@ } } +.blocks-editable.drop-cap-true { + p:first-child: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..e878923bc991b2 100644 --- a/blocks/library/text/index.js +++ b/blocks/library/text/index.js @@ -10,6 +10,8 @@ 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'; +import Toggle from 'components/form-toggle'; const { children } = query; @@ -31,8 +33,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 +46,11 @@ registerBlockType( 'core/text', { /> ), + focus && ( + + + + ), , ]; }, From f09458ea6a91dac3f75b377298fd2a5af2ce7146 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 15 Jun 2017 13:33:16 +0200 Subject: [PATCH 2/6] Get around contentEditable issues with first letter. Only display drop cap when block is not in focus. --- blocks/editable/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss index d4c52537d5440e..d838960af04ba9 100644 --- a/blocks/editable/style.scss +++ b/blocks/editable/style.scss @@ -56,7 +56,7 @@ } } -.blocks-editable.drop-cap-true { +.editor-visual-editor__block:not( .is-selected ) .blocks-editable.drop-cap-true { p:first-child:first-letter { float: left; font-size: 4.1em; From 49ac22df1f6b6e0e23a67aa0099ce91433e325fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 15 Jun 2017 13:47:55 +0200 Subject: [PATCH 3/6] Improve display of setting and add label. --- blocks/library/text/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js index e878923bc991b2..dc49a338d650a4 100644 --- a/blocks/library/text/index.js +++ b/blocks/library/text/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { Children, cloneElement } from 'element'; +import { __ } from 'i18n'; /** * Internal dependencies @@ -16,7 +17,7 @@ import Toggle from 'components/form-toggle'; const { children } = query; registerBlockType( 'core/text', { - title: wp.i18n.__( 'Text' ), + title: __( 'Text' ), icon: 'text', @@ -48,7 +49,14 @@ registerBlockType( 'core/text', { ), focus && ( - +
+ + +
), Date: Thu, 15 Jun 2017 15:45:51 +0200 Subject: [PATCH 4/6] Use focus instead of selected to hide dropcap --- blocks/editable/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss index d838960af04ba9..f371b082ccc6bb 100644 --- a/blocks/editable/style.scss +++ b/blocks/editable/style.scss @@ -56,8 +56,8 @@ } } -.editor-visual-editor__block:not( .is-selected ) .blocks-editable.drop-cap-true { - p:first-child:first-letter { +.drop-cap-true .blocks-editable__tinymce:not( :focus ) { + &:first-letter { float: left; font-size: 4.1em; line-height: 0.7; From 30dbbb1c3004ca69545d58c3cb904aa6d50e1bf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 15 Jun 2017 16:25:30 +0200 Subject: [PATCH 5/6] Fix missing key. --- blocks/library/text/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js index dc49a338d650a4..ca2e19ca4da129 100644 --- a/blocks/library/text/index.js +++ b/blocks/library/text/index.js @@ -48,7 +48,7 @@ registerBlockType( 'core/text', { ), focus && ( - +
Date: Thu, 15 Jun 2017 16:39:27 +0200 Subject: [PATCH 6/6] Move dependencies where they belong. --- blocks/library/text/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js index ca2e19ca4da129..c2b29e03ba1663 100644 --- a/blocks/library/text/index.js +++ b/blocks/library/text/index.js @@ -1,8 +1,9 @@ /** * WordPress dependencies */ -import { Children, cloneElement } from 'element'; import { __ } from 'i18n'; +import { Children, cloneElement } from 'element'; +import Toggle from 'components/form-toggle'; /** * Internal dependencies @@ -12,7 +13,6 @@ import AlignmentToolbar from '../../alignment-toolbar'; import BlockControls from '../../block-controls'; import Editable from '../../editable'; import InspectorControls from '../../inspector-controls'; -import Toggle from 'components/form-toggle'; const { children } = query;