Move the editor settings into the editor's store

blocks/index.js

@@ -10,4 +10,3 @@
 export * from './api';
 
 export { default as editorMediaUpload } from './editor-media-upload';
-export { default as EditorSettings, withEditorSettings } from './editor-settings';

core-blocks/image/edit.js

@@ -15,7 +15,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, compose, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
 	Button,
@@ -28,10 +28,7 @@ import {
 	Toolbar,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import {
-	editorMediaUpload,
-	withEditorSettings,
-} from '@wordpress/blocks';
+import { editorMediaUpload } from '@wordpress/blocks';
 import {
 	RichText,
 	BlockControls,
@@ -170,7 +167,7 @@ class ImageEdit extends Component {
 	}
 
 	render() {
-		const { attributes, setAttributes, isSelected, className, settings, toggleSelection } = this.props;
+		const { attributes, setAttributes, isSelected, className, maxWidth, toggleSelection } = this.props;
 		const { url, alt, caption, align, id, href, width, height } = attributes;
 
 		const controls = (
@@ -344,9 +341,9 @@ class ImageEdit extends Component {
 											} : undefined
 										}
 										minWidth={ minWidth }
-										maxWidth={ settings.maxWidth }
+										maxWidth={ maxWidth }
 										minHeight={ minHeight }
-										maxHeight={ settings.maxWidth / ratio }
+										maxHeight={ maxWidth / ratio }
 										lockAspectRatio
 										handleClasses={ {
 											topRight: 'wp-block-image__resize-handler-top-right',
@@ -390,14 +387,14 @@ class ImageEdit extends Component {
 	}
 }
 
-export default compose( [
-	withEditorSettings(),
-	withSelect( ( select, props ) => {
-		const { getMedia } = select( 'core' );
-		const { id } = props.attributes;
-
-		return {
-			image: id ? getMedia( id ) : null,
-		};
-	} ),
-] )( ImageEdit );
+export default withSelect( ( select, props ) => {
+	const { getMedia } = select( 'core' );
+	const { getEditorSettings } = select( 'core/editor' );
+	const { id } = props.attributes;
+	const { maxWidth } = getEditorSettings();
+
+	return {
+		image: id ? getMedia( id ) : null,
+		maxWidth,
+	};
+} )( ImageEdit );

core-blocks/test/helpers/index.js

@@ -12,6 +12,8 @@ import {
 	getBlockType,
 	registerBlockType,
 } from '@wordpress/blocks';
+// Requiredd to register the editor's store
+import '@wordpress/editor';
 
 // Hack to avoid the wrapping HoCs.
 import { BlockEdit } from '../../../editor/components/block-edit';

docs/reference/deprecated.md

@@ -3,6 +3,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 ## 3.1.0
 
  - All components in `wp.blocks.*` are removed. Please use `wp.editor.*` instead.
+ - `wp.blocks.withEditorSettings` is removed. Please use the data module to access the editor settings `wp.data.select( "core/editor" ).getEditorSettings()`.
 
 ## 3.0.0
 

editor/components/block-alignment-toolbar/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
-import { withEditorSettings } from '@wordpress/blocks';
+import { withSelect } from '@wordpress/data';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
@@ -55,8 +55,8 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 	);
 }
 
-export default withEditorSettings(
-	( settings ) => ( {
-		wideControlsEnabled: settings.alignWide,
+export default withSelect(
+	( select ) => ( {
+		wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
 	} )
 )( BlockAlignmentToolbar );

editor/components/block-drop-zone/index.js

@@ -13,10 +13,9 @@ import {
 	cloneBlock,
 	getBlockTransforms,
 	findTransform,
-	withEditorSettings,
 } from '@wordpress/blocks';
 import { compose, Component } from '@wordpress/element';
-import { withDispatch } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -138,8 +137,8 @@ export default compose(
 			},
 		};
 	} ),
-	withEditorSettings( ( settings ) => {
-		const { templateLock } = settings;
+	withSelect( ( select ) => {
+		const { templateLock } = select( 'core/editor' ).getEditorSettings();
 
 		return {
 			isLocked: !! templateLock,

editor/components/block-list/block.js

@@ -23,7 +23,6 @@ import {
 	getSaveElement,
 	isSharedBlock,
 	isUnmodifiedDefaultBlock,
-	withEditorSettings,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -623,8 +622,11 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		isSelectionEnabled,
 		getSelectedBlocksInitialCaretPosition,
 		getBlockSelectionEnd,
+		getEditorSettings,
 	} = select( 'core/editor' );
 	const isSelected = isBlockSelected( uid );
+	const { templateLock, hasFixedToolbar } = getEditorSettings();
+
 	return {
 		previousBlockUid: getPreviousBlockUid( uid ),
 		nextBlockUid: getNextBlockUid( uid ),
@@ -642,6 +644,8 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		isSelectionEnabled: isSelectionEnabled(),
 		initialPosition: getSelectedBlocksInitialCaretPosition(),
 		isSelected,
+		isLocked: !! templateLock,
+		hasFixedToolbar,
 	};
 } );
 
@@ -699,14 +703,6 @@ export default compose(
 	applyWithSelect,
 	applyWithDispatch,
 	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withEditorSettings( ( settings ) => {
-		const { templateLock } = settings;
-
-		return {
-			isLocked: !! templateLock,
-			hasFixedToolbar: settings.hasFixedToolbar,
-		};
-	} ),
 	withFilters( 'editor.BlockListBlock' ),
 	withHoverAreas,
 )( BlockListBlock );

editor/components/block-list/insertion-point.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { isUnmodifiedDefaultBlock, withEditorSettings } from '@wordpress/blocks';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Component, compose } from '@wordpress/element';
 import { ifCondition } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -37,15 +37,14 @@ class BlockInsertionPoint extends Component {
 	}
 }
 export default compose(
-	withEditorSettings( ( { templateLock } ) => ( { templateLock } ) ),
-	ifCondition( ( { templateLock } ) => ! templateLock ),
 	withSelect( ( select, { uid, rootUID } ) => {
 		const {
 			getBlockIndex,
 			getBlockInsertionPoint,
 			getBlock,
 			isBlockInsertionPointVisible,
 			isTyping,
+			getEditorSettings,
 		} = select( 'core/editor' );
 		const blockIndex = uid ? getBlockIndex( uid, rootUID ) : -1;
 		const insertIndex = blockIndex;
@@ -59,11 +58,13 @@ export default compose(
 		);
 
 		return {
+			templateLock: getEditorSettings().templateLock,
 			showInserter: ! isTyping(),
 			index: insertIndex,
 			showInsertionPoint,
 		};
 	} ),
+	ifCondition( ( { templateLock } ) => ! templateLock ),
 	withDispatch( ( dispatch ) => {
 		const { insertDefaultBlock, startTyping } = dispatch( 'core/editor' );
 		return {

editor/components/block-list/with-hover-areas.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component, findDOMNode, createHigherOrderComponent } from '@wordpress/element';
-import { withEditorSettings } from '@wordpress/blocks';
+import { withSelect } from '@wordpress/data';
 
 const withHoverAreas = createHigherOrderComponent( ( WrappedComponent ) => {
 	class WithHoverAreasComponent extends Component {
@@ -58,9 +58,9 @@ const withHoverAreas = createHigherOrderComponent( ( WrappedComponent ) => {
 		}
 	}
 
-	return withEditorSettings( ( { isRTL } ) => {
+	return withSelect( ( select ) => {
 		return {
-			isRTL,
+			isRTL: select( 'core/editor' ).getEditorSettings().isRTL,
 		};
 	} )( WithHoverAreasComponent );
 } );

editor/components/block-mover/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton, withInstanceId } from '@wordpress/components';
-import { getBlockType, withEditorSettings } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 import { compose, Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 
@@ -107,13 +107,15 @@ export class BlockMover extends Component {
 
 export default compose(
 	withSelect( ( select, { uids, rootUID } ) => {
-		const { getBlock, getBlockIndex } = select( 'core/editor' );
+		const { getBlock, getBlockIndex, getEditorSettings } = select( 'core/editor' );
 		const firstUID = first( castArray( uids ) );
 		const block = getBlock( firstUID );
+		const { templateLock } = getEditorSettings();
 
 		return {
 			firstIndex: getBlockIndex( firstUID, rootUID ),
 			blockType: block ? getBlockType( block.name ) : null,
+			isLocked: templateLock === 'all',
 		};
 	} ),
 	withDispatch( ( dispatch, { uids, rootUID } ) => {
@@ -123,12 +125,5 @@ export default compose(
 			onMoveUp: partial( moveBlocksUp, uids, rootUID ),
 		};
 	} ),
-	withEditorSettings( ( settings ) => {
-		const { templateLock } = settings;
-
-		return {
-			isLocked: templateLock === 'all',
-		};
-	} ),
 	withInstanceId,
 )( BlockMover );