Add: Option to allow user to select the style that is automatically a…

…pplied.
donmhico · Jul 27, 2019 · 3b9ac24 · 3b9ac24
1 parent a5dc5ae
commit 3b9ac24
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 63 deletions.
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, noop } from 'lodash';
+import { find, get, noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -11,8 +11,9 @@ import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import TokenList from '@wordpress/token-list';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
+import { CheckboxControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -65,6 +66,7 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
 }
 
 function BlockStyles( {
+	autoApplyStyle,
 	styles,
 	className,
 	onChangeClassName,
@@ -74,6 +76,7 @@ function BlockStyles( {
 	block,
 	onSwitch = noop,
 	onHoverClassName = noop,
+	onUpdateAutoApplyBlockStyles,
 } ) {
 	if ( ! styles || styles.length === 0 ) {
 		return null;
@@ -105,37 +108,57 @@ function BlockStyles( {
 				return (
 					<div
 						key={ style.name }
-						className={ classnames(
-							'editor-block-styles__item block-editor-block-styles__item', {
-								'is-active': activeStyle === style,
-							}
-						) }
-						onClick={ () => updateClassName( style ) }
-						onKeyDown={ ( event ) => {
-							if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-								event.preventDefault();
-								updateClassName( style );
-							}
-						} }
-						onMouseEnter={ () => onHoverClassName( styleClassName ) }
-						onMouseLeave={ () => onHoverClassName( null ) }
-						role="button"
-						tabIndex="0"
-						aria-label={ style.label || style.name }
+						className="block-editor-block-styles__item-container"
 					>
-						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
-							<BlockPreviewContent
-								name={ name }
-								attributes={ {
-									...attributes,
-									className: styleClassName,
+						<div
+							className={ classnames(
+								'editor-block-styles__item block-editor-block-styles__item', {
+									'is-active': activeStyle === style,
+								} ) }
+							onClick={ () => updateClassName( style ) }
+							onKeyDown={ ( event ) => {
+								if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+									event.preventDefault();
+									updateClassName( style );
+								}
+							} }
+							onMouseEnter={ () => onHoverClassName( styleClassName ) }
+							onMouseLeave={ () => onHoverClassName( null ) }
+							role="button"
+							tabIndex="0"
+							aria-label={ style.label || style.name }
+						>
+							<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
+								<BlockPreviewContent
+									name={ name }
+									attributes={ {
+										...attributes,
+										className: styleClassName,
+									} }
+									innerBlocks={ block.innerBlocks }
+								/>
+							</div>
+							<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
+								{ style.label || style.name }
+							</div>
+						</div>
+						{ onUpdateAutoApplyBlockStyles && (
+							<CheckboxControl
+								className="block-editor-block-styles__item-auto-apply"
+								label={ __( 'Auto apply' ) }
+								checked={ ( autoApplyStyle && autoApplyStyle === style.name ) ||
+									( ! autoApplyStyle && style.isDefault )
+								}
+								disabled={ ! autoApplyStyle && style.isDefault }
+								onChange={ ( state ) => {
+									if ( state ) {
+										onUpdateAutoApplyBlockStyles( block.name, style.isDefault ? undefined : style.name );
+										return;
+									}
+									onUpdateAutoApplyBlockStyles( block.name );
 								} }
-								innerBlocks={ block.innerBlocks }
 							/>
-						</div>
-						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
-							{ style.label || style.name }
-						</div>
+						) }
 					</div>
 				);
 			} ) }
@@ -145,10 +168,15 @@ function BlockStyles( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock } = select( 'core/block-editor' );
+		const {
+			getBlock,
+			getSettings,
+		} = select( 'core/block-editor' );
 		const { getBlockStyles } = select( 'core/blocks' );
 		const block = getBlock( clientId );
 		const blockType = getBlockType( block.name );
+		const settings = getSettings();
+		const autoApplyStyle = get( settings, [ 'autoApplyBlockStyles', block.name ] );
 
 		return {
 			block,
@@ -157,6 +185,8 @@ export default compose( [
 			className: block.attributes.className || '',
 			styles: getBlockStyles( block.name ),
 			type: blockType,
+			autoApplyStyle,
+			onUpdateAutoApplyBlockStyles: settings.onUpdateAutoApplyBlockStyles,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -4,8 +4,15 @@
 	justify-content: space-between;
 }
 
-.block-editor-block-styles__item {
+.block-editor-block-styles__item-container {
 	width: calc(50% - #{ $grid-size-small });
+}
+
+.block-editor-block-styles__item-auto-apply {
+	text-align: center;
+}
+
+.block-editor-block-styles__item {
 	margin: $grid-size-small 0;
 	flex-shrink: 0;
 	cursor: pointer;

diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, first } from 'lodash';
+import { castArray, first, get, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -218,6 +218,29 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
+function getBlocksWithAutoApplyStyles( blocks, blockEditorSettings ) {
+	return blocks.map( ( block ) => {
+		const autoApplyBlockStyles = get( blockEditorSettings, [ 'autoApplyBlockStyles' ], {} );
+		const blockName = block.name;
+		if ( ! autoApplyBlockStyles[ blockName ] ) {
+			return block;
+		}
+		const className = get( block, [ 'attributes', 'className' ] );
+		if ( includes( className, 'is-style-' ) ) {
+			return block;
+		}
+		const attributes = block.attributes || {};
+		const blockStyle = autoApplyBlockStyles[ blockName ];
+		return {
+			...block,
+			attributes: {
+				...attributes,
+				className: `${ ( className || '' ) } is-style-${ blockStyle }`.trim(),
+			},
+		};
+	} );
+}
+
 /**
  * Returns an action object signalling that a blocks should be replaced with
  * one or more replacement blocks.
@@ -231,7 +254,13 @@ export function toggleSelection( isSelectionEnabled = true ) {
  */
 export function* replaceBlocks( clientIds, blocks, indexToSelect ) {
 	clientIds = castArray( clientIds );
-	blocks = castArray( blocks );
+	blocks = getBlocksWithAutoApplyStyles(
+		castArray( blocks ),
+		yield select(
+			'core/block-editor',
+			'getSettings',
+		)
+	);
 	const rootClientId = yield select(
 		'core/block-editor',
 		'getBlockRootClientId',
@@ -392,7 +421,13 @@ export function* insertBlocks(
 	rootClientId,
 	updateSelection = true
 ) {
-	blocks = castArray( blocks );
+	blocks = getBlocksWithAutoApplyStyles(
+		castArray( blocks ),
+		yield select(
+			'core/block-editor',
+			'getSettings',
+		)
+	);
 	const allowedBlocks = [];
 	for ( const block of blocks ) {
 		const isValid = yield select(

diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
@@ -124,6 +124,14 @@ describe( 'actions', () => {
 			};
 
 			const replaceBlockGenerator = replaceBlock( 'chicken', block );
+			expect(
+				replaceBlockGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
 			expect(
 				replaceBlockGenerator.next().value,
 			).toEqual( {
@@ -180,6 +188,14 @@ describe( 'actions', () => {
 			} ];
 
 			const replaceBlockGenerator = replaceBlocks( [ 'chicken' ], blocks );
+			expect(
+				replaceBlockGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
 			expect(
 				replaceBlockGenerator.next().value,
 			).toEqual( {
@@ -225,6 +241,14 @@ describe( 'actions', () => {
 			} ];
 
 			const replaceBlockGenerator = replaceBlocks( [ 'chicken' ], blocks );
+			expect(
+				replaceBlockGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
 			expect(
 				replaceBlockGenerator.next().value,
 			).toEqual( {
@@ -287,9 +311,17 @@ describe( 'actions', () => {
 			};
 			const index = 5;
 
-			const inserBlockGenerator = insertBlock( block, index, 'testclientid', true );
+			const insertBlockGenerator = insertBlock( block, index, 'testclientid', true );
 			expect(
-				inserBlockGenerator.next().value
+				insertBlockGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
+			expect(
+				insertBlockGenerator.next().value
 			).toEqual( {
 				args: [ 'core/test-block', 'testclientid' ],
 				selectorName: 'canInsertBlockType',
@@ -298,7 +330,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( true ),
+				insertBlockGenerator.next( true ),
 			).toEqual( {
 				done: true,
 				value: {
@@ -333,10 +365,17 @@ describe( 'actions', () => {
 				chickenRibsBlock,
 			];
 
-			const inserBlockGenerator = insertBlocks( blocks, 5, 'testrootid', false );
-
+			const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+			expect(
+				insertBlocksGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
 			expect(
-				inserBlockGenerator.next().value
+				insertBlocksGenerator.next().value
 			).toEqual( {
 				args: [ 'core/test-ribs', 'testrootid' ],
 				selectorName: 'canInsertBlockType',
@@ -345,7 +384,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( true ).value
+				insertBlocksGenerator.next( true ).value
 			).toEqual( {
 				args: [ 'core/test-chicken', 'testrootid' ],
 				selectorName: 'canInsertBlockType',
@@ -354,7 +393,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( false ).value,
+				insertBlocksGenerator.next( false ).value,
 			).toEqual( {
 				args: [ 'core/test-chicken-ribs', 'testrootid' ],
 				selectorName: 'canInsertBlockType',
@@ -363,7 +402,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( true ),
+				insertBlocksGenerator.next( true ),
 			).toEqual( {
 				done: true,
 				value: {
@@ -391,10 +430,17 @@ describe( 'actions', () => {
 				chickenBlock,
 			];
 
-			const inserBlockGenerator = insertBlocks( blocks, 5, 'testrootid', false );
-
+			const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+			expect(
+				insertBlocksGenerator.next().value,
+			).toEqual( {
+				args: [],
+				selectorName: 'getSettings',
+				storeName: 'core/block-editor',
+				type: 'SELECT',
+			} );
 			expect(
-				inserBlockGenerator.next().value
+				insertBlocksGenerator.next().value
 			).toEqual( {
 				args: [ 'core/test-ribs', 'testrootid' ],
 				selectorName: 'canInsertBlockType',
@@ -403,7 +449,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( false ).value,
+				insertBlocksGenerator.next( false ).value,
 			).toEqual( {
 				args: [ 'core/test-chicken', 'testrootid' ],
 				selectorName: 'canInsertBlockType',
@@ -412,7 +458,7 @@ describe( 'actions', () => {
 			} );
 
 			expect(
-				inserBlockGenerator.next( false ),
+				insertBlocksGenerator.next( false ),
 			).toEqual( {
 				done: true,
 				value: undefined,