Framework: Hide The Editor Settings from the block author (#2119)

WordPress · Aug 3, 2017 · 2beeb4c · 2beeb4c
1 parent d709c8e
commit 2beeb4c
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 67 deletions.
diff --git a/blocks/block-alignment-toolbar/index.js b/blocks/block-alignment-toolbar/index.js
@@ -4,6 +4,11 @@
 import { __ } from 'i18n';
 import { Toolbar } from 'components';
 
+/**
+ * Internal dependencies
+ */
+import withEditorSettings from '../with-editor-settings';
+
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
 		icon: 'align-left',
@@ -30,7 +35,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
-export default function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) {
+function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
@@ -53,3 +58,9 @@ export default function BlockAlignmentToolbar( { value, onChange, controls = DEF
 		/>
 	);
 }
+
+export default withEditorSettings(
+	( settings ) => ( {
+		wideControlsEnabled: settings.wideImages,
+	} )
+)( BlockAlignmentToolbar );
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -45,7 +45,7 @@ registerBlockType( 'core/cover-image', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
 		const { url, title, align, id, hasParallax, hasBackgroundDim } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
@@ -56,7 +56,6 @@ registerBlockType( 'core/cover-image', {
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 
 					<Toolbar>

diff --git a/blocks/library/cover-text/index.js b/blocks/library/cover-text/index.js
@@ -65,7 +65,7 @@ registerBlockType( 'core/cover-text', {
 		};
 	},
 
-	edit( { attributes, setAttributes, className, focus, setFocus, mergeBlocks, settings } ) {
+	edit( { attributes, setAttributes, className, focus, setFocus, mergeBlocks } ) {
 		const { align, width, content, dropCap, placeholder, textColor, backgroundColor } = attributes;
 		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		return [
@@ -75,7 +75,6 @@ registerBlockType( 'core/cover-text', {
 						value={ width }
 						onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
 						controls={ [ 'center', 'wide', 'full' ] }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 					<AlignmentToolbar
 						value={ align }

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -77,7 +77,7 @@ registerBlockType( 'core/gallery', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, className } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
@@ -90,7 +90,6 @@ registerBlockType( 'core/gallery', {
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 					{ !! images.length && (
 						<Toolbar controls={ [ {

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -63,7 +63,7 @@ registerBlockType( 'core/image', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
 		const { url, alt, caption, align, id, href } = attributes;
 		const updateAlt = ( newAlt ) => setAttributes( { alt: newAlt } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
@@ -79,7 +79,6 @@ registerBlockType( 'core/image', {
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 
 					<Toolbar>

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
@@ -118,7 +118,7 @@ registerBlockType( 'core/latest-posts', {
 				latestPosts.splice( this.props.attributes.postsToShow, postsDifference );
 			}
 
-			const { focus, settings } = this.props;
+			const { focus } = this.props;
 			const { displayPostDate, align, layout, columns } = this.props.attributes;
 			const layoutControls = [
 				{
@@ -144,7 +144,6 @@ registerBlockType( 'core/latest-posts', {
 								setAttributes( { align: nextAlign } );
 							} }
 							controls={ [ 'center', 'wide', 'full' ] }
-							wideControlsEnabled={ settings.wideImages }
 						/>
 						<Toolbar controls={ layoutControls } />
 					</BlockControls>

diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js
@@ -40,7 +40,7 @@ registerBlockType( 'core/pullquote', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
 		const { value, citation, align } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 
@@ -50,7 +50,6 @@ registerBlockType( 'core/pullquote', {
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 				</BlockControls>
 			),

diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js
@@ -34,7 +34,7 @@ registerBlockType( 'core/table', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
 		const { content } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		return [
@@ -43,7 +43,6 @@ registerBlockType( 'core/table', {
 					<BlockAlignmentToolbar
 						value={ attributes.align }
 						onChange={ updateAlignment }
-						wideControlsEnabled={ settings.wideImages }
 					/>
 				</BlockControls>
 			),

diff --git a/blocks/with-editor-settings/index.js b/blocks/with-editor-settings/index.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+
+const withEditorSettings = ( mapSettingsToProps ) => ( OriginalComponent ) => {
+	class WrappedComponent extends Component {
+		render() {
+			const extraProps = mapSettingsToProps
+				? mapSettingsToProps( this.context.editor, this.props )
+				: this.context.editor;
+
+			return (
+				<OriginalComponent
+					{ ...this.props }
+					{ ...extraProps }
+				/>
+			);
+		}
+	}
+
+	WrappedComponent.contextTypes = {
+		editor: noop,
+	};
+
+	return WrappedComponent;
+};
+
+export default withEditorSettings;
diff --git a/editor/index.js b/editor/index.js
@@ -21,6 +21,7 @@ import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';
 import { undo } from './actions';
+import EditorSettingsProvider from './settings/provider';
 
 /**
  * The default editor settings
@@ -107,7 +108,9 @@ export function createEditorInstance( id, post, editorSettings = DEFAULT_SETTING
 						onUndo: undo,
 					}, store.dispatch ) }
 				>
-					<Layout settings={ editorSettings } />
+					<EditorSettingsProvider settings={ editorSettings }>
+						<Layout />
+					</EditorSettingsProvider>
 				</EditableProvider>
 			</SlotFillProvider>
 		</ReduxProvider>,

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -46,7 +46,6 @@ import {
 	isFirstMultiSelectedBlock,
 	isTyping,
 	getMultiSelectedBlockUids,
-	getEditorSettings,
 } from '../../selectors';
 
 function FirstChild( { children } ) {
@@ -305,7 +304,7 @@ class VisualEditorBlock extends Component {
 	}
 
 	render() {
-		const { block, multiSelectedBlockUids, settings } = this.props;
+		const { block, multiSelectedBlockUids } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -415,7 +414,6 @@ class VisualEditorBlock extends Component {
 							setFocus={ partial( onFocus, block.uid ) }
 							mergeBlocks={ this.mergeBlocks }
 							className={ className }
-							settings={ settings }
 							id={ block.uid }
 						/>
 					) }
@@ -447,7 +445,6 @@ export default connect(
 			isTyping: isTyping( state ),
 			order: getBlockIndex( state, ownProps.uid ),
 			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
-			settings: getEditorSettings( state ),
 		};
 	},
 	( dispatch, ownProps ) => ( {

diff --git a/editor/selectors.js b/editor/selectors.js
@@ -715,13 +715,3 @@ export function getRecentlyUsedBlocks( state ) {
 	// resolves the block names in the state to the block type settings
 	return state.userData.recentlyUsedBlocks.map( blockType => getBlockType( blockType ) );
 }
-
-/**
- * Get the editor settings.
- *
- * @param {Object} state Global application state
- * @return {Object}      The editor settings
- */
-export function getEditorSettings( state ) {
-	return state.settings;
-}
diff --git a/editor/settings/provider.js b/editor/settings/provider.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+
+/**
+ * The Editor Settings Provider allows any compoent to access the editor settings
+ */
+class EditorSettingsProvider extends Component {
+	getChildContext() {
+		return {
+			editor: this.props.settings,
+		};
+	}
+
+	render() {
+		return this.props.children;
+	}
+}
+
+EditorSettingsProvider.childContextTypes = {
+	editor: noop,
+};
+
+export default EditorSettingsProvider;
diff --git a/editor/state.js b/editor/state.js
@@ -529,15 +529,6 @@ export function notices( state = {}, action ) {
 	return state;
 }
 
-export function settings( state = {}, action ) {
-	switch ( action.type ) {
-		case 'SETUP_EDITOR':
-			return action.settings;
-	}
-
-	return state;
-}
-
 /**
  * Creates a new instance of a Redux store.
  *
@@ -558,7 +549,6 @@ export function createReduxStore() {
 		saving,
 		notices,
 		userData,
-		settings,
 	} ) );
 
 	const enhancers = [ applyMiddleware( refx( effects ) ) ];

diff --git a/editor/test/selectors.js b/editor/test/selectors.js
@@ -53,7 +53,6 @@ import {
 	didPostSaveRequestFail,
 	getSuggestedPostFormat,
 	getNotices,
-	getEditorSettings,
 } from '../selectors';
 
 /**
@@ -1336,18 +1335,4 @@ describe( 'selectors', () => {
 			] );
 		} );
 	} );
-
-	describe( 'getEditorSettings', () => {
-		it( 'should return the settings object', () => {
-			const state = {
-				settings: {
-					wideImages: true,
-				},
-			};
-
-			expect( getEditorSettings( state ) ).toEqual( {
-				wideImages: true,
-			} );
-		} );
-	} );
 } );
diff --git a/editor/test/state.js b/editor/test/state.js
@@ -26,7 +26,6 @@ import {
 	showInsertionPoint,
 	createReduxStore,
 	userData,
-	settings,
 } from '../state';
 
 describe( 'state', () => {
@@ -1088,15 +1087,4 @@ describe( 'state', () => {
 			expect( initial.recentlyUsedBlocks ).toEqual( expect.arrayContaining( [ 'core/test-block', 'core/text' ] ) );
 		} );
 	} );
-
-	describe( 'settings', () => {
-		it( 'should populate the editor settings', () => {
-			const state = settings( {}, {
-				type: 'SETUP_EDITOR',
-				settings: { wideImages: true },
-			} );
-
-			expect( state ).toEqual( { wideImages: true } );
-		} );
-	} );
 } );