@wordpress/block-editor 8.0.12 → 8.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.0.12",
+	"version": "8.0.13",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/blob": "^3.2.2",
 		"@wordpress/block-serialization-default-parser": "^4.2.3",
 		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.1.6",
+		"@wordpress/components": "^19.2.0",
 		"@wordpress/compose": "^5.0.7",
 		"@wordpress/data": "^6.1.5",
 		"@wordpress/deprecated": "^3.2.3",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
+	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
 }

package/src/components/block-tools/index.js

@@ -95,6 +95,17 @@ export default function BlockTools( {
 		} else if (
 			isMatch( 'core/block-editor/delete-multi-selection', event )
 		) {
+			/**
+			 * Check if the target element is a text area, input or
+			 * event.defaultPrevented and return early. In all these
+			 * cases backspace could be handled elsewhere.
+			 */
+			if (
+				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
+				event.defaultPrevented
+			) {
+				return;
+			}
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {
 				event.preventDefault();

package/src/components/gradients/use-gradient.js

@@ -59,22 +59,22 @@ export function getGradientSlugByValue( gradients, value ) {
 	return gradient && gradient.slug;
 }
 
-const EMPTY_OBJECT = {};
-
 export function __experimentalUseGradient( {
 	gradientAttribute = 'gradient',
 	customGradientAttribute = 'customGradient',
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
 	const allGradients = useMemo(
 		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
+			...( userGradientPalette || [] ),
+			...( themeGradientPalette || [] ),
+			...( defaultGradientPalette || [] ),
 		],
-		[ gradientsPerOrigin ]
+		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
 	);
 	const { gradient, customGradient } = useSelect(
 		( select ) => {

package/src/hooks/color.js

@@ -32,8 +32,6 @@ import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const EMPTY_OBJECT = {};
-
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 	return (
@@ -232,7 +230,17 @@ export function ColorEdit( props ) {
 		],
 		[ userPalette, themePalette, defaultPalette ]
 	);
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const allGradients = useMemo(
+		() => [
+			...( userGradientPalette || [] ),
+			...( themeGradientPalette || [] ),
+			...( defaultGradientPalette || [] ),
+		],
+		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+	);
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
 	const isBackgroundEnabled = useSetting( 'color.background' );
@@ -244,17 +252,8 @@ export function ColorEdit( props ) {
 
 	const gradientsEnabled =
 		areCustomGradientsEnabled ||
-		! gradientsPerOrigin?.theme ||
-		gradientsPerOrigin?.theme?.length > 0;
-
-	const allGradients = useMemo(
-		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
-		],
-		[ gradientsPerOrigin ]
-	);
+		! themeGradientPalette ||
+		themeGradientPalette?.length > 0;
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground

package/src/hooks/layout.js

@@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						<LayoutStyle
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
+							style={ attributes?.style }
 						/>,
 						element
 					) }

package/src/hooks/style.js

@@ -74,6 +74,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Object} Flattened CSS variables declaration.
  */
 export function getInlineStyles( styles = {} ) {
+	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
 	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
 		const path = STYLE_PROPERTY[ propKey ].value;
@@ -93,7 +94,7 @@ export function getInlineStyles( styles = {} ) {
 						output[ name ] = compileStyleValue( value );
 					}
 				} );
-			} else {
+			} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
 				output[ propKey ] = compileStyleValue( get( styles, path ) );
 			}
 		}

package/src/hooks/test/style.js

@@ -30,7 +30,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			backgroundColor: 'black',
 			borderColor: '#21759b',
 			borderRadius: '10px',
@@ -104,7 +103,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			margin: '10px',
 			padding: '20px',
 		} );

package/src/layouts/flex.js

@@ -84,10 +84,12 @@ export default {
 			</BlockControls>
 		);
 	},
-	save: function FlexLayoutStyle( { selector, layout } ) {
+	save: function FlexLayoutStyle( { selector, layout, style } ) {
 		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -110,11 +112,7 @@ export default {
 			<style>{ `
 				${ appendSelectors( selector ) } {
 					display: flex;
-					gap: ${
-						hasBlockGapStylesSupport
-							? 'var( --wp--style--block-gap, 0.5em )'
-							: '0.5em'
-					};
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}

package/src/layouts/flow.js

@@ -105,12 +105,14 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+	save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
 
-		let style =
+		let output =
 			!! contentSize || !! wideSize
 				? `
 					${ appendSelectors( selector, '> *' ) } {
@@ -129,7 +131,7 @@ export default {
 				`
 				: '';
 
-		style += `
+		output += `
 			${ appendSelectors( selector, '> [data-align="left"]' ) } {
 				float: left;
 				margin-right: 2em;
@@ -143,18 +145,18 @@ export default {
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
-			style += `
+			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-top: 0;
 					margin-bottom: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: var( --wp--style--block-gap );
+					margin-top: ${ blockGapValue };
 				}
 			`;
 		}
 
-		return <style>{ style }</style>;
+		return <style>{ output }</style>;
 	},
 	getOrientation() {
 		return 'vertical';

package/src/store/selectors.js

@@ -30,6 +30,7 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 
 /**
@@ -826,6 +827,7 @@ export const isAncestorMultiSelected = createSelector(
 		state.selection.selectionEnd.clientId,
 	]
 );
+
 /**
  * Returns the client ID of the block which begins the multi-selection set, or
  * null if there is no multi-selection.
@@ -1259,15 +1261,43 @@ const canInsertBlockTypeUnmemoized = (
 		parentName
 	);
 
-	if ( hasParentAllowedBlock !== null && hasBlockAllowedParent !== null ) {
-		return hasParentAllowedBlock || hasBlockAllowedParent;
-	} else if ( hasParentAllowedBlock !== null ) {
-		return hasParentAllowedBlock;
-	} else if ( hasBlockAllowedParent !== null ) {
-		return hasBlockAllowedParent;
+	const canInsert =
+		( hasParentAllowedBlock === null && hasBlockAllowedParent === null ) ||
+		hasParentAllowedBlock === true ||
+		hasBlockAllowedParent === true;
+
+	if ( ! canInsert ) {
+		return canInsert;
 	}
 
-	return true;
+	/**
+	 * This filter is an ad-hoc solution to prevent adding template parts inside post content.
+	 * Conceptually, having a filter inside a selector is bad pattern so this code will be
+	 * replaced by a declarative API that doesn't the following drawbacks:
+	 *
+	 * Filters are not reactive: Upon switching between "template mode" and non "template mode",
+	 * the filter and selector won't necessarily be executed again. For now, it doesn't matter much
+	 * because you can't switch between the two modes while the inserter stays open.
+	 *
+	 * Filters are global: Once they're defined, they will affect all editor instances and all registries.
+	 * An ideal API would only affect specific editor instances.
+	 */
+	return applyFilters(
+		'blockEditor.__unstableCanInsertBlockType',
+		canInsert,
+		blockType,
+		rootClientId,
+		{
+			// Pass bound selectors of the current registry. If we're in a nested
+			// context, the data will differ from the one selected from the root
+			// registry.
+			getBlock: getBlock.bind( null, state ),
+			getBlockParentsByBlockName: getBlockParentsByBlockName.bind(
+				null,
+				state
+			),
+		}
+	);
 };
 
 /**