Add: Option to select the style that is automatically applied (#16465)

Squashed commits:
[ffd16b5] Add unit tests
[51dd9dc] Refactor & changed the design
[3b9ac24] Add: Option to allow user to select the style that is automatically applied.

docs/designers-developers/developers/data/data-core-edit-post.md

@@ -459,4 +459,17 @@ _Returns_
 
 -   `Object`: Action object
 
+<a name="updatePreferredStyleVariations" href="#updatePreferredStyleVariations">#</a> **updatePreferredStyleVariations**
+
+Returns an action object used in signaling that a style should be auto-applied when a block is created.
+
+_Parameters_
+
+-   _blockName_ `string`: Name of the block.
+-   _blockStyle_ `?string`: Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <!-- END TOKEN(Autogenerated actions) -->

packages/block-editor/src/components/block-inspector/index.js

@@ -20,6 +20,7 @@ import InspectorControls from '../inspector-controls';
 import InspectorAdvancedControls from '../inspector-advanced-controls';
 import BlockStyles from '../block-styles';
 import MultiSelectionInspector from '../multi-selection-inspector';
+import DefaultStylePicker from '../default-style-picker';
 const BlockInspector = ( {
 	blockType,
 	count,
@@ -61,6 +62,7 @@ const BlockInspector = ( {
 						<BlockStyles
 							clientId={ selectedBlockClientId }
 						/>
+						<DefaultStylePicker blockName={ blockType.name } />
 					</PanelBody>
 				</div>
 			) }

packages/block-editor/src/components/default-style-picker/index.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+export default function DefaultStylePicker( { blockName } ) {
+	const {
+		preferredStyle,
+		onUpdatePreferredStyleVariations,
+		styles,
+	} = useSelect(
+		( select ) => {
+			const settings = select( 'core/block-editor' ).getSettings();
+			const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
+			return {
+				preferredStyle: get(
+					preferredStyleVariations,
+					[ 'value', blockName ]
+				),
+				onUpdatePreferredStyleVariations: get(
+					preferredStyleVariations,
+					[ 'onChange' ],
+					null
+				),
+				styles: select( 'core/blocks' ).getBlockStyles( blockName ),
+			};
+		},
+		[ blockName ]
+	);
+	const selectOptions = useMemo(
+		() => ( [
+			{ label: __( 'Not set' ), value: '' },
+			...styles.map( ( { label, name } ) => ( { label, value: name } ) ),
+		] ),
+		[ styles ],
+	);
+	const selectOnChange = useCallback(
+		( blockStyle ) => {
+			onUpdatePreferredStyleVariations( blockName, blockStyle );
+		},
+		[ blockName, onUpdatePreferredStyleVariations ]
+	);
+
+	return onUpdatePreferredStyleVariations && (
+		<SelectControl
+			options={ selectOptions }
+			value={ preferredStyle || '' }
+			label={ __( 'Default Style' ) }
+			onChange={ selectOnChange }
+		/>
+	);
+}

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,33 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
+function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
+	const preferredStyleVariations = get(
+		blockEditorSettings,
+		[ '__experimentalPreferredStyleVariations', 'value' ],
+		{}
+	);
+	return blocks.map( ( block ) => {
+		const blockName = block.name;
+		if ( ! preferredStyleVariations[ blockName ] ) {
+			return block;
+		}
+		const className = get( block, [ 'attributes', 'className' ] );
+		if ( includes( className, 'is-style-' ) ) {
+			return block;
+		}
+		const { attributes = {} } = block;
+		const blockStyle = preferredStyleVariations[ 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 +258,13 @@ export function toggleSelection( isSelectionEnabled = true ) {
  */
 export function* replaceBlocks( clientIds, blocks, indexToSelect ) {
 	clientIds = castArray( clientIds );
-	blocks = castArray( blocks );
+	blocks = getBlocksWithDefaultStylesApplied(
+		castArray( blocks ),
+		yield select(
+			'core/block-editor',
+			'getSettings',
+		)
+	);
 	const rootClientId = yield select(
 		'core/block-editor',
 		'getBlockRootClientId',
@@ -398,7 +431,13 @@ export function* insertBlocks(
 	rootClientId,
 	updateSelection = true
 ) {
-	blocks = castArray( blocks );
+	blocks = getBlocksWithDefaultStylesApplied(
+		castArray( blocks ),
+		yield select(
+			'core/block-editor',
+			'getSettings',
+		)
+	);
 	const allowedBlocks = [];
 	for ( const block of blocks ) {
 		const isValid = yield select(