diff --git a/blocks/block-alignment-toolbar/index.js b/blocks/block-alignment-toolbar/index.js index 6055dc9633d96..92fc9155454aa 100644 --- 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 index 6ab9e081c1bce..868e147e45417 100644 --- 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', { diff --git a/blocks/library/cover-text/index.js b/blocks/library/cover-text/index.js index a3ac849e2e687..8e94bb0107349 100644 --- 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 } /> setAttributes( { columns: event.target.value } ); const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); @@ -90,7 +90,6 @@ registerBlockType( 'core/gallery', { { !! images.length && ( setAttributes( { alt: newAlt } ); const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); @@ -79,7 +79,6 @@ registerBlockType( 'core/image', { diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index c22e708ac1d69..4bf14944c1385 100644 --- 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 } /> diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js index 720685b88b903..f5db977f82939 100644 --- 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', { ), diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js index 101057707fa83..2f97adf310df4 100644 --- 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', { ), diff --git a/blocks/with-editor-settings/index.js b/blocks/with-editor-settings/index.js new file mode 100644 index 0000000000000..1d2335cb31ce8 --- /dev/null +++ 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 ( + + ); + } + } + + WrappedComponent.contextTypes = { + editor: noop, + }; + + return WrappedComponent; +}; + +export default withEditorSettings; diff --git a/editor/index.js b/editor/index.js index 6dd846b8446eb..73af84f311569 100644 --- 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 ) } > - + + + , diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index eccdc985dea89..6ad258fc469c2 100644 --- 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 index 22568c46145f3..d2a9651a00b1f 100644 --- 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 new file mode 100644 index 0000000000000..ed81e951c5799 --- /dev/null +++ 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 index 783d38a17774e..8af05ed38f810 100644 --- 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 index f2520d8817a5b..f266367b35e09 100644 --- 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 index 4c7203a0fe707..b1a8ee3b48acc 100644 --- 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 } ); - } ); - } ); } );