Merge pull request #507 from WordPress/update/editable-slot-fill

Try Slot & Fill pattern for rendering Editable formatting controls

Author: aduth

blocks/components/editable/index.js

@@ -2,32 +2,59 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { forEach, last } from 'lodash';
+import { last, isEqual } from 'lodash';
 import { Parser as HtmlToReactParser } from 'html-to-react';
+import { Fill } from 'react-slot-fill';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+ // TODO: We mustn't import by relative path traversing from blocks to editor
+ // as we're doing here; instead, we should consider a common components path.
+import Toolbar from '../../../editor/components/toolbar';
+
 const htmlToReactParser = new HtmlToReactParser();
 const formatMap = {
 	strong: 'bold',
 	em: 'italic',
 	del: 'strikethrough'
 };
 
+const formattingControls = [
+	{
+		icon: 'editor-bold',
+		title: wp.i18n.__( 'Bold' ),
+		format: 'bold'
+	},
+	{
+		icon: 'editor-italic',
+		title: wp.i18n.__( 'Italic' ),
+		format: 'italic'
+	},
+	{
+		icon: 'editor-strikethrough',
+		title: wp.i18n.__( 'Strikethrough' ),
+		format: 'strikethrough'
+	}
+];
+
 export default class Editable extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
+
 		this.onInit = this.onInit.bind( this );
 		this.onSetup = this.onSetup.bind( this );
 		this.onChange = this.onChange.bind( this );
 		this.onNewBlock = this.onNewBlock.bind( this );
-		this.bindNode = this.bindNode.bind( this );
+		this.bindEditorNode = this.bindEditorNode.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.onNodeChange = this.onNodeChange.bind( this );
-		this.formats = {};
+
+		this.state = {
+			formats: {}
+		};
 	}
 
 	componentDidMount() {
@@ -36,7 +63,7 @@ export default class Editable extends wp.element.Component {
 
 	initialize() {
 		const config = {
-			target: this.node,
+			target: this.editorNode,
 			theme: false,
 			inline: true,
 			toolbar: false,
@@ -57,10 +84,7 @@ export default class Editable extends wp.element.Component {
 		editor.on( 'focusout', this.onChange );
 		editor.on( 'NewBlock', this.onNewBlock );
 		editor.on( 'focusin', this.onFocus );
-
-		if ( this.props.onFormatChange ) {
-			editor.on( 'nodechange', this.onNodeChange );
-		}
+		editor.on( 'nodechange', this.onNodeChange );
 	}
 
 	onInit() {
@@ -131,7 +155,7 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onNodeChange( { parents } ) {
-		this.formats = parents.reduce( ( result, node ) => {
+		const formats = parents.reduce( ( result, node ) => {
 			const tag = node.nodeName.toLowerCase();
 
 			if ( formatMap.hasOwnProperty( tag ) ) {
@@ -141,11 +165,13 @@ export default class Editable extends wp.element.Component {
 			return result;
 		}, {} );
 
-		this.props.onFormatChange( this.formats );
+		if ( ! isEqual( this.state.formats, formats ) ) {
+			this.setState( { formats } );
+		}
 	}
 
-	bindNode( ref ) {
-		this.node = ref;
+	bindEditorNode( ref ) {
+		this.editorNode = ref;
 	}
 
 	updateContent() {
@@ -208,31 +234,46 @@ export default class Editable extends wp.element.Component {
 		}
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		forEach( nextProps.formats, ( state, format ) => {
-			const currentState = this.formats[ format ] || false;
+	isFormatActive( format ) {
+		return !! this.state.formats[ format ];
+	}
 
-			if ( state !== currentState ) {
-				this.editor.focus();
+	toggleFormat( format ) {
+		this.editor.focus();
 
-				if ( state ) {
-					this.editor.formatter.apply( format );
-				} else {
-					this.editor.formatter.remove( format );
-				}
-			}
-		} );
+		if ( this.isFormatActive( format ) ) {
+			this.editor.formatter.remove( format );
+		} else {
+			this.editor.formatter.apply( format );
+		}
 	}
 
 	render() {
-		const { tagName: Tag = 'div', style, className } = this.props;
+		const { tagName: Tag = 'div', style, focus, className } = this.props;
 		const classes = classnames( 'blocks-editable', className );
 
-		return (
+		let element = (
 			<Tag
-				ref={ this.bindNode }
+				ref={ this.bindEditorNode }
 				style={ style }
-				className={ classes } />
+				className={ classes }
+				key="editor" />
 		);
+
+		if ( focus ) {
+			element = [
+				<Fill name="Formatting.Toolbar" key="fill">
+					<Toolbar
+						controls={ formattingControls.map( ( control ) => ( {
+							...control,
+							onClick: () => this.toggleFormat( control.format ),
+							isActive: this.isFormatActive( control.format )
+						} ) ) } />
+				</Fill>,
+				element
+			];
+		}
+
+		return element;
 	}
 }

blocks/library/text/index.js

@@ -44,7 +44,7 @@ registerBlock( 'core/text', {
 		}
 	],
 
-	edit( { attributes, setAttributes, insertBlockAfter, focus, setFocus, onFormatChange, formats } ) {
+	edit( { attributes, setAttributes, insertBlockAfter, focus, setFocus } ) {
 		const { content = <p />, align } = attributes;
 
 		return (
@@ -64,8 +64,6 @@ registerBlock( 'core/text', {
 						content: after
 					} ) );
 				} }
-				onFormatChange={ onFormatChange }
-				formats={ formats }
 			/>
 		);
 	},

editor/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Provider } from 'react-redux';
+import { Provider as ReduxProvider } from 'react-redux';
+import { Provider as SlotFillProvider } from 'react-slot-fill';
 
 /**
  * Internal dependencies
@@ -24,9 +25,11 @@ export function createEditorInstance( id, post ) {
 	} );
 
 	wp.element.render(
-		<Provider store={ store }>
-			<Layout />
-		</Provider>,
+		<ReduxProvider store={ store }>
+			<SlotFillProvider>
+				<Layout />
+			</SlotFillProvider>
+		</ReduxProvider>,
 		document.getElementById( id )
 	);
 }

editor/modes/visual-editor/block.js

@@ -3,6 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
+import { Slot } from 'react-slot-fill';
 
 /**
  * Internal dependencies
@@ -11,62 +12,20 @@ import Toolbar from 'components/toolbar';
 import BlockMover from 'components/block-mover';
 import BlockSwitcher from 'components/block-switcher';
 
-const formattingControls = [
-	{
-		icon: 'editor-bold',
-		title: wp.i18n.__( 'Bold' ),
-		format: 'bold'
-	},
-	{
-		icon: 'editor-italic',
-		title: wp.i18n.__( 'Italic' ),
-		format: 'italic'
-	},
-	{
-		icon: 'editor-strikethrough',
-		title: wp.i18n.__( 'Strikethrough' ),
-		format: 'strikethrough'
-	}
-];
-
 class VisualEditorBlock extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
 		this.bindBlockNode = this.bindBlockNode.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.maybeDeselect = this.maybeDeselect.bind( this );
 		this.maybeHover = this.maybeHover.bind( this );
-		this.onFormatChange = this.onFormatChange.bind( this );
-		this.toggleFormat = this.toggleFormat.bind( this );
 		this.previousOffset = null;
-		this.state = {
-			formats: {}
-		};
 	}
 
 	bindBlockNode( node ) {
 		this.node = node;
 	}
 
-	onFormatChange( formats ) {
-		if ( ! this.state.hasEditable ) {
-			this.setState( { hasEditable: true } );
-		}
-
-		this.setState( { formats } );
-	}
-
-	toggleFormat( format ) {
-		const { formats } = this.state;
-
-		this.setState( {
-			formats: {
-				...formats,
-				[ format ]: ! formats[ format ]
-			}
-		} );
-	}
-
 	componentWillReceiveProps( newProps ) {
 		if (
 			this.props.order !== newProps.order &&
@@ -169,14 +128,7 @@ class VisualEditorBlock extends wp.element.Component {
 									isActive: control.isActive( block.attributes )
 								} ) ) } />
 						) }
-						{ this.state.hasEditable && (
-							<Toolbar
-								controls={ formattingControls.map( ( control ) => ( {
-									...control,
-									onClick: () => this.toggleFormat( control.format ),
-									isActive: !! this.state.formats[ control.format ]
-								} ) ) } />
-						) }
+						<Slot name="Formatting.Toolbar" />
 					</div>
 				}
 				<BlockEdit
@@ -185,8 +137,6 @@ class VisualEditorBlock extends wp.element.Component {
 					setAttributes={ this.setAttributes }
 					insertBlockAfter={ onInsertAfter }
 					setFocus={ onFocus }
-					onFormatChange={ this.onFormatChange }
-					formats={ this.state.formats }
 				/>
 			</div>
 		);

languages/gutenberg.pot

@@ -3,6 +3,18 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "X-Generator: babel-plugin-wp-i18n\n"
 
+#: blocks/components/editable/index.js:28
+msgid "Bold"
+msgstr ""
+
+#: blocks/components/editable/index.js:33
+msgid "Italic"
+msgstr ""
+
+#: blocks/components/editable/index.js:38
+msgid "Strikethrough"
+msgstr ""
+
 #: blocks/library/embed/index.js:10
 msgid "Embed"
 msgstr ""
@@ -102,18 +114,6 @@ msgstr ""
 msgid "Publish"
 msgstr ""
 
-#: editor/modes/visual-editor/block.js:17
-msgid "Bold"
-msgstr ""
-
-#: editor/modes/visual-editor/block.js:22
-msgid "Italic"
-msgstr ""
-
-#: editor/modes/visual-editor/block.js:27
-msgid "Strikethrough"
-msgstr ""
-
 #: editor/header/mode-switcher/index.js:24
 msgctxt "Name for the Text editor tab (formerly HTML)"
 msgid "Text"

package.json

@@ -67,6 +67,7 @@
     "react-autosize-textarea": "^0.4.2",
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
+    "react-slot-fill": "^1.0.0-alpha.11",
     "redux": "^3.6.0",
     "uuid": "^3.0.1"
   }

webpack.config.js

@@ -25,6 +25,13 @@ const config = {
 		'react-dom': 'ReactDOM',
 		'react-dom/server': 'ReactDOMServer'
 	},
+	resolve: {
+		alias: {
+			// There are currently resolution errors on RSF's "mitt" dependency
+			// when imported as native ES module
+			'react-slot-fill': 'react-slot-fill/lib/rsf.js'
+		}
+	},
 	module: {
 		rules: [
 			{