From 2849506250eca4b3c39a1d4f57d48ecdb749b939 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 14 Apr 2017 12:03:32 +0200 Subject: [PATCH 1/5] Add basic heading block --- blocks/library/heading/index.js | 72 +++++++++++++++++++++++++++++++++ blocks/library/index.js | 1 + languages/gutenberg.pot | 27 ++++++++----- 3 files changed, 90 insertions(+), 10 deletions(-) create mode 100644 blocks/library/heading/index.js diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js new file mode 100644 index 0000000000000..3bd9a8c2ba097 --- /dev/null +++ b/blocks/library/heading/index.js @@ -0,0 +1,72 @@ +/** + * Internal dependencies + */ +import { registerBlock, query } from 'api'; +import Editable from 'components/editable'; + +const { html, prop } = query; + +registerBlock( 'core/heading', { + title: wp.i18n.__( 'Heading' ), + + icon: 'heading', + + category: 'common', + + attributes: { + content: html( 'h1,h2,h3,h4,h5,h6' ), + tag: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ), + align: prop( 'h1,h2,h3,h4,h5,h6', 'style.textAlign' ) + }, + + controls: [ + { + icon: 'editor-alignleft', + title: wp.i18n.__( 'Align left' ), + isActive: ( { align } ) => ! align || 'left' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: undefined } ); + } + }, + { + icon: 'editor-aligncenter', + title: wp.i18n.__( 'Align center' ), + isActive: ( { align } ) => 'center' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: 'center' } ); + } + }, + { + icon: 'editor-alignright', + title: wp.i18n.__( 'Align right' ), + isActive: ( { align } ) => 'right' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: 'right' } ); + } + } + ], + + edit( { attributes, setAttributes } ) { + const { content, tag, align } = attributes; + + return ( + setAttributes( { content: value } ) } + style={ align ? { textAlign: align } : null } + /> + ); + }, + + save( { attributes } ) { + const { align, tag, content } = attributes; + const Tag = tag; + + return ( + + ); + } +} ); diff --git a/blocks/library/index.js b/blocks/library/index.js index 3402384178f1e..7d399d8b6fd8f 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -1,4 +1,5 @@ import './freeform'; +import './heading'; import './image'; import './text'; import './list'; diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 08367fa806847..15ff3dde8f87d 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -7,33 +7,40 @@ msgstr "" msgid "Freeform" msgstr "" -#: blocks/library/image/index.js:10 -msgid "Image" -msgstr "" - -#: blocks/library/image/index.js:31 -msgid "Write caption…" -msgstr "" - -#: blocks/library/list/index.js:11 -msgid "List" +#: blocks/library/heading/index.js:10 +msgid "Heading" msgstr "" +#: blocks/library/heading/index.js:25 #: blocks/library/list/index.js:25 #: blocks/library/text/index.js:24 msgid "Align left" msgstr "" +#: blocks/library/heading/index.js:33 #: blocks/library/list/index.js:33 #: blocks/library/text/index.js:32 msgid "Align center" msgstr "" +#: blocks/library/heading/index.js:41 #: blocks/library/list/index.js:41 #: blocks/library/text/index.js:40 msgid "Align right" msgstr "" +#: blocks/library/image/index.js:10 +msgid "Image" +msgstr "" + +#: blocks/library/image/index.js:31 +msgid "Write caption…" +msgstr "" + +#: blocks/library/list/index.js:11 +msgid "List" +msgstr "" + #: blocks/library/list/index.js:49 msgid "Justify" msgstr "" From 8502267fbec65a8be3ca4af346b7a05a6a2db753 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 14 Apr 2017 13:37:18 +0200 Subject: [PATCH 2/5] Add buttons to change heading level --- blocks/components/editable/index.js | 4 ++- blocks/library/heading/index.js | 32 ++++++------------------ editor/components/icon-button/index.js | 3 ++- editor/components/icon-button/style.scss | 6 ++++- editor/components/toolbar/index.js | 1 + languages/gutenberg.pot | 20 +++++++++------ 6 files changed, 31 insertions(+), 35 deletions(-) diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index c2eebb4558541..ec157565fd11f 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -75,7 +75,9 @@ export default class Editable extends wp.element.Component { } componentDidUpdate( prevProps ) { - if ( this.props.value !== prevProps.value ) { + if ( this.props.tagName !== prevProps.tagName ) { + this.initialize(); + } else if ( this.props.value !== prevProps.value ) { this.updateContent(); } } diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 3bd9a8c2ba097..5fa1baf575777 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -20,30 +20,15 @@ registerBlock( 'core/heading', { }, controls: [ - { - icon: 'editor-alignleft', - title: wp.i18n.__( 'Align left' ), - isActive: ( { align } ) => ! align || 'left' === align, + ...'123456'.split( '' ).map( ( level ) => ( { + icon: 'editor-alignleft', // TODO + text: level, + title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ), + isActive: ( { tag } ) => 'H' + level === tag, onClick( attributes, setAttributes ) { - setAttributes( { align: undefined } ); + setAttributes( { tag: 'H' + level } ); } - }, - { - icon: 'editor-aligncenter', - title: wp.i18n.__( 'Align center' ), - isActive: ( { align } ) => 'center' === align, - onClick( attributes, setAttributes ) { - setAttributes( { align: 'center' } ); - } - }, - { - icon: 'editor-alignright', - title: wp.i18n.__( 'Align right' ), - isActive: ( { align } ) => 'right' === align, - onClick( attributes, setAttributes ) { - setAttributes( { align: 'right' } ); - } - } + } ) ) ], edit( { attributes, setAttributes } ) { @@ -60,8 +45,7 @@ registerBlock( 'core/heading', { }, save( { attributes } ) { - const { align, tag, content } = attributes; - const Tag = tag; + const { align, tag: Tag, content } = attributes; return ( + { text ? { text } : null } ); } diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss index afca56a6717d2..4834f49084d13 100644 --- a/editor/components/icon-button/style.scss +++ b/editor/components/icon-button/style.scss @@ -1,7 +1,7 @@ .editor-icon-button { display: flex; align-items: center; - width: 36px; + min-width: 36px; height: 36px; border: none; background: none; @@ -14,4 +14,8 @@ color: $blue-medium; } } + + span { + font-size: 12px; + } } diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index d9876da048e17..e7cbd22fa3944 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -20,6 +20,7 @@ function Toolbar( { controls } ) { { event.stopPropagation(); diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 15ff3dde8f87d..1ad38080c1417 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -11,6 +11,18 @@ msgstr "" msgid "Heading" msgstr "" +#: blocks/library/heading/index.js:26 +msgid "Heading %s" +msgstr "" + +#: blocks/library/image/index.js:10 +msgid "Image" +msgstr "" + +#: blocks/library/image/index.js:31 +msgid "Write caption…" +msgstr "" + #: blocks/library/heading/index.js:25 #: blocks/library/list/index.js:25 #: blocks/library/text/index.js:24 @@ -29,14 +41,6 @@ msgstr "" msgid "Align right" msgstr "" -#: blocks/library/image/index.js:10 -msgid "Image" -msgstr "" - -#: blocks/library/image/index.js:31 -msgid "Write caption…" -msgstr "" - #: blocks/library/list/index.js:11 msgid "List" msgstr "" From 6cc01160b1dabf2952b5df340125cff87b43592e Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 17 Apr 2017 10:49:37 +0200 Subject: [PATCH 3/5] Use heading icon --- blocks/library/heading/index.js | 2 +- languages/gutenberg.pot | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 5fa1baf575777..92780d1934ba3 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -21,7 +21,7 @@ registerBlock( 'core/heading', { controls: [ ...'123456'.split( '' ).map( ( level ) => ( { - icon: 'editor-alignleft', // TODO + icon: 'heading', text: level, title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ), isActive: ( { tag } ) => 'H' + level === tag, diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 1ad38080c1417..603e7c42589bc 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -23,28 +23,25 @@ msgstr "" msgid "Write caption…" msgstr "" -#: blocks/library/heading/index.js:25 +#: blocks/library/list/index.js:11 +msgid "List" +msgstr "" + #: blocks/library/list/index.js:25 #: blocks/library/text/index.js:24 msgid "Align left" msgstr "" -#: blocks/library/heading/index.js:33 #: blocks/library/list/index.js:33 #: blocks/library/text/index.js:32 msgid "Align center" msgstr "" -#: blocks/library/heading/index.js:41 #: blocks/library/list/index.js:41 #: blocks/library/text/index.js:40 msgid "Align right" msgstr "" -#: blocks/library/list/index.js:11 -msgid "List" -msgstr "" - #: blocks/library/list/index.js:49 msgid "Justify" msgstr "" From 1b0f6c44320ae32aa5a01d7922a7546b8754601e Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 17 Apr 2017 10:55:45 +0200 Subject: [PATCH 4/5] Use instead of for IconButton text --- editor/components/icon-button/index.js | 4 ++-- editor/components/toolbar/index.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/editor/components/icon-button/index.js b/editor/components/icon-button/index.js index 0a541e5bdf5f7..8af6b9a950fa2 100644 --- a/editor/components/icon-button/index.js +++ b/editor/components/icon-button/index.js @@ -10,13 +10,13 @@ import './style.scss'; import Button from '../button'; import Dashicon from '../dashicon'; -function IconButton( { icon, text, label, className, ...additionalProps } ) { +function IconButton( { icon, children, label, className, ...additionalProps } ) { const classes = classnames( 'editor-icon-button', className ); return ( ); } diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index e7cbd22fa3944..d2ea467aa3b7b 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -20,7 +20,6 @@ function Toolbar( { controls } ) { { event.stopPropagation(); @@ -28,7 +27,9 @@ function Toolbar( { controls } ) { } } className={ classNames( 'editor-toolbar__control', { 'is-active': control.isActive && control.isActive() - } ) } /> + } ) }> + { control.text } + ) ) } ); From f90d96eab1dd94714d60f6e970cb957e47b8e721 Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 17 Apr 2017 11:06:41 +0200 Subject: [PATCH 5/5] Remove editor instance when tags change --- blocks/components/editable/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index ec157565fd11f..ff37f8692f98a 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -68,6 +68,12 @@ export default class Editable extends wp.element.Component { this.editor.selection.moveToBookmark( bookmark ); } + componentWillUpdate( nextProps ) { + if ( this.editor && this.props.tagName !== nextProps.tagName ) { + this.editor.destroy(); + } + } + componentWillUnmount() { if ( this.editor ) { this.editor.destroy();