Merge pull request #347 from WordPress/try/variable-editable-name

Allow Editable to have variable node name.

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 <div ref={ this.bindNode } />;
+		const { tagName: Tag = 'div' } = this.props;
+
+		return (
+			<Tag
+				ref={ this.bindNode }
+				className="blocks-editable" />
+		);
 	}
 }

blocks/components/editable/style.scss

@@ -0,0 +1,3 @@
+.blocks-editable:focus {
+	outline: none;
+}

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;
 

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 (
 			<Editable
+				tagName="p"
 				value={ attributes.value }
 				onChange={ ( value ) => onChange( { value } ) }
 			/>

editor/header/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './style.scss';
 import ModeSwitcher from './mode-switcher';
 
 function Header() {

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 {

editor/inserter/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Dashicon from '../components/dashicon';
 
 function Inserter() {

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 );

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';
 

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' );

languages/gutenberg.pot

@@ -7,23 +7,23 @@ 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 ""
 
 #: editor/inserter/button.js:31
 msgid "Add a block"
 msgstr ""
 
-#: editor/inserter/index.js:39
+#: editor/inserter/index.js:40
 msgid "Search…"
 msgstr ""

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 ) {