diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index 9a1638c4b6be31..7ae87e74d5087a 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 ); @@ -70,6 +75,12 @@ export default class Editable extends wp.element.Component { } render() { - return
; + const { tagName: Tag = 'div' } = this.props; + + return ( + + ); } } diff --git a/blocks/components/editable/style.scss b/blocks/components/editable/style.scss new file mode 100644 index 00000000000000..1a143b68d8ea17 --- /dev/null +++ b/blocks/components/editable/style.scss @@ -0,0 +1,3 @@ +.blocks-editable:focus { + outline: none; +} diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index d0e721b7cf61c8..704fea52e1a4d0 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/blocks/text/index.js b/editor/blocks/text/index.js index 280c7bcc60937f..49fde5f357bf25 100644 --- a/editor/blocks/text/index.js +++ b/editor/blocks/text/index.js @@ -9,12 +9,13 @@ wp.blocks.registerBlock( 'core/text', { category: 'common', attributes: { - value: html() + value: html( 'p' ) }, edit( { attributes, onChange } ) { return ( onChange( { value } ) } /> diff --git a/editor/header/index.js b/editor/header/index.js index e9a608012d4c2a..be6c69969c6640 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 9cc1889953039e..9e07b70387be0f 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 5ab88b1a6754de..7ec497dd7dcde1 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 0180918b18ae0d..02e1dc6f6acb39 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 2a81eaeb02d6ca..7fcecd5d6ea711 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/index.php b/index.php index 1df607a008a892..829525655b7bcc 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' ); diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 4090c0ff99d937..4348eb4857850f 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 47d2497e11ee93..eda30a60388b3a 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' } @@ -65,7 +67,10 @@ const config = { ] } } ) - ] + ], + stats: { + children: false + } }; switch ( process.env.NODE_ENV ) {