From 2239a6d6e56d7bbafccc1127381a0b66a6ca3237 Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 3 Apr 2017 16:45:52 +0200 Subject: [PATCH 1/6] Allow Editable to have variable node name. --- blocks/components/editable/index.js | 4 +++- editor/blocks/text/index.js | 7 ++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index 9a1638c4b6be3..a3e225f1de6d3 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -70,6 +70,8 @@ export default class Editable extends wp.element.Component { } render() { - return
; + return wp.element.createElement( this.props.tagName, { + ref: this.bindNode + } ); } } diff --git a/editor/blocks/text/index.js b/editor/blocks/text/index.js index 280c7bcc60937..2525e22fdeeec 100644 --- a/editor/blocks/text/index.js +++ b/editor/blocks/text/index.js @@ -1,4 +1,4 @@ -const { html } = wp.blocks.query; +const { html, query } = wp.blocks.query; const Editable = wp.blocks.Editable; wp.blocks.registerBlock( 'core/text', { @@ -9,13 +9,14 @@ wp.blocks.registerBlock( 'core/text', { category: 'common', attributes: { - value: html() + value: query( 'p', html() ) }, edit( { attributes, onChange } ) { return ( onChange( { value } ) } /> ); From 0f0a959c0908b82b5a3ce204e407829abdc943f6 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 5 Apr 2017 18:38:37 -0400 Subject: [PATCH 2/6] Specify default tagName of Editable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This method vs. defaultProps? Seems more future-proof… is defaultProps an uncertain API? --- blocks/components/editable/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index a3e225f1de6d3..c674f75a52494 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -70,8 +70,12 @@ export default class Editable extends wp.element.Component { } render() { - return wp.element.createElement( this.props.tagName, { - ref: this.bindNode - } ); + const { tagName: Tag = 'div' } = this.props; + + return ( + + ); } } From 45e8df0ee8d8a8f2df3f21cb2afc36c205735e09 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 5 Apr 2017 18:38:51 -0400 Subject: [PATCH 3/6] Extract single paragraph HTML from text block --- editor/blocks/text/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/blocks/text/index.js b/editor/blocks/text/index.js index 2525e22fdeeec..49fde5f357bf2 100644 --- a/editor/blocks/text/index.js +++ b/editor/blocks/text/index.js @@ -1,4 +1,4 @@ -const { html, query } = wp.blocks.query; +const { html } = wp.blocks.query; const Editable = wp.blocks.Editable; wp.blocks.registerBlock( 'core/text', { @@ -9,14 +9,14 @@ wp.blocks.registerBlock( 'core/text', { category: 'common', attributes: { - value: query( 'p', html() ) + value: html( 'p' ) }, edit( { attributes, onChange } ) { return ( onChange( { value } ) } /> ); From ac17bb517cacd6fbc57b1a517cad565a1ce9094f Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 5 Apr 2017 19:18:32 -0400 Subject: [PATCH 4/6] Move style imports to component script --- editor/assets/stylesheets/main.scss | 7 ------- editor/header/index.js | 1 + editor/header/mode-switcher/index.js | 1 + editor/inserter/index.js | 1 + editor/modes/text-editor/index.js | 5 +++++ editor/modes/visual-editor/index.js | 1 + languages/gutenberg.pot | 8 ++++---- webpack.config.js | 2 ++ 8 files changed, 15 insertions(+), 11 deletions(-) diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index d0e721b7cf61c..704fea52e1a4d 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -1,10 +1,3 @@ -@import './variables'; -@import '../../header/style'; -@import '../../header/mode-switcher/style'; -@import '../../inserter/style'; -@import '../../modes/text-editor/style'; -@import '../../modes/visual-editor/style'; - body.toplevel_page_gutenberg { background: #fff; diff --git a/editor/header/index.js b/editor/header/index.js index e9a608012d4c2..be6c69969c664 100644 --- a/editor/header/index.js +++ b/editor/header/index.js @@ -1,6 +1,7 @@ /** * Internal dependencies */ +import './style.scss'; import ModeSwitcher from './mode-switcher'; function Header() { diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index 9cc1889953039..9e07b70387be0 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -6,6 +6,7 @@ import { connect } from 'react-redux'; /** * Internal dependencies */ +import './style.scss'; import Dashicon from '../../components/dashicon'; class ModeSwitcher extends wp.element.Component { diff --git a/editor/inserter/index.js b/editor/inserter/index.js index 5ab88b1a6754d..7ec497dd7dcde 100644 --- a/editor/inserter/index.js +++ b/editor/inserter/index.js @@ -1,6 +1,7 @@ /** * Internal dependencies */ +import './style.scss'; import Dashicon from '../components/dashicon'; function Inserter() { diff --git a/editor/modes/text-editor/index.js b/editor/modes/text-editor/index.js index 0180918b18ae0..02e1dc6f6acb3 100644 --- a/editor/modes/text-editor/index.js +++ b/editor/modes/text-editor/index.js @@ -4,6 +4,11 @@ import { connect } from 'react-redux'; import Textarea from 'react-textarea-autosize'; +/** + * Internal dependencies + */ +import './style.scss'; + function TextEditor( { html, onChange } ) { const changeValue = ( event ) => { onChange( event.target.value ); diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js index 2a81eaeb02d6c..7fcecd5d6ea71 100644 --- a/editor/modes/visual-editor/index.js +++ b/editor/modes/visual-editor/index.js @@ -6,6 +6,7 @@ import { connect } from 'react-redux'; /** * Internal dependencies */ +import './style.scss'; import InserterButton from '../../inserter/button'; import VisualEditorBlock from './block'; diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 4090c0ff99d93..4348eb4857850 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -7,16 +7,16 @@ msgstr "" msgid "Freeform" msgstr "" -#: editor/header/mode-switcher/index.js:30 +#: editor/header/mode-switcher/index.js:31 msgctxt "Name for the Text editor tab (formerly HTML)" msgid "Text" msgstr "" -#: editor/header/mode-switcher/index.js:29 +#: editor/header/mode-switcher/index.js:30 msgid "Visual" msgstr "" -#: editor/header/mode-switcher/index.js:43 +#: editor/header/mode-switcher/index.js:44 msgid "Switch the editor mode" msgstr "" @@ -24,6 +24,6 @@ msgstr "" msgid "Add a block" msgstr "" -#: editor/inserter/index.js:39 +#: editor/inserter/index.js:40 msgid "Search…" msgstr "" \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 47d2497e11ee9..a28f3fad5600a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,6 +43,8 @@ const config = { { loader: 'sass-loader', query: { + includePaths: [ 'editor/assets/stylesheets' ], + data: '@import "variables";', outputStyle: 'production' === process.env.NODE_ENV ? 'compressed' : 'nested' } From c607602be1329cd516b89c7b0c38f43c239ffa00 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 5 Apr 2017 19:18:54 -0400 Subject: [PATCH 5/6] Quiet extract-text-webpack-plugin build output https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/35 --- webpack.config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index a28f3fad5600a..eda30a60388b3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,7 +67,10 @@ const config = { ] } } ) - ] + ], + stats: { + children: false + } }; switch ( process.env.NODE_ENV ) { From 9365a74cfd0bbcca48226feacef5d04da5d4ab89 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 5 Apr 2017 19:19:26 -0400 Subject: [PATCH 6/6] Remove focus outline from editable block Focus appearance managed by editor block renderer --- blocks/components/editable/index.js | 5 +++++ blocks/components/editable/style.scss | 3 +++ index.php | 4 +++- 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 blocks/components/editable/style.scss diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index c674f75a52494..7ae87e74d5087 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import './style.scss'; + export default class Editable extends wp.element.Component { constructor() { super( ...arguments ); diff --git a/blocks/components/editable/style.scss b/blocks/components/editable/style.scss new file mode 100644 index 0000000000000..1a143b68d8ea1 --- /dev/null +++ b/blocks/components/editable/style.scss @@ -0,0 +1,3 @@ +.blocks-editable:focus { + outline: none; +} diff --git a/index.php b/index.php index 1df607a008a89..829525655b7bc 100644 --- a/index.php +++ b/index.php @@ -43,6 +43,7 @@ function gutenberg_register_scripts() { wp_register_script( 'wp-i18n', plugins_url( 'i18n/build/index.js', __FILE__ ) ); wp_register_script( 'wp-element', plugins_url( 'element/build/index.js', __FILE__ ), array( 'react', 'react-dom' ) ); wp_register_script( 'wp-blocks', plugins_url( 'blocks/build/index.js', __FILE__ ), array( 'wp-element', 'tinymce-nightly' ) ); + wp_register_style( 'wp-blocks', plugins_url( 'blocks/build/style.css', __FILE__ ) ); } add_action( 'init', 'gutenberg_register_scripts' ); @@ -206,7 +207,8 @@ function gutenberg_scripts_and_styles( $hook ) { ); wp_enqueue_style( 'wp-editor', - plugins_url( 'editor/build/style.css', __FILE__ ) + plugins_url( 'editor/build/style.css', __FILE__ ), + array( 'wp-blocks' ) ); } add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' );