@wordpress/block-editor 12.16.0 → 12.17.0

package/src/hooks/utils.js

@@ -174,6 +174,8 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
  */
 export function useBlockSettings( name, parentLayout ) {
 	const [
+		backgroundImage,
+		backgroundSize,
 		fontFamilies,
 		fontSizes,
 		customFontSize,
@@ -217,6 +219,8 @@ export function useBlockSettings( name, parentLayout ) {
 		isHeadingEnabled,
 		isButtonEnabled,
 	] = useSettings(
+		'background.backgroundImage',
+		'background.backgroundSize',
 		'typography.fontFamilies',
 		'typography.fontSizes',
 		'typography.customFontSize',
@@ -263,6 +267,10 @@ export function useBlockSettings( name, parentLayout ) {
 
 	const rawSettings = useMemo( () => {
 		return {
+			background: {
+				backgroundImage,
+				backgroundSize,
+			},
 			color: {
 				palette: {
 					custom: customColors,
@@ -330,6 +338,8 @@ export function useBlockSettings( name, parentLayout ) {
 			parentLayout,
 		};
 	}, [
+		backgroundImage,
+		backgroundSize,
 		fontFamilies,
 		fontSizes,
 		customFontSize,
@@ -418,12 +428,14 @@ export function createBlockEditFilter( features ) {
 							neededProps[ key ] = props.attributes[ key ];
 						}
 					}
+
 					return (
 						<Edit
 							// We can use the index because the array length
 							// is fixed per page load right now.
 							key={ i }
 							name={ props.name }
+							isSelected={ props.isSelected }
 							clientId={ props.clientId }
 							setAttributes={ props.setAttributes }
 							__unstableParentLayout={
@@ -488,10 +500,10 @@ export function createBlockListBlockFilter( features ) {
 					}
 
 					if (
-						! hasSupport( props.name ) ||
 						// Skip rendering if none of the needed attributes are
 						// set.
-						! Object.keys( neededProps ).length
+						! Object.keys( neededProps ).length ||
+						! hasSupport( props.name )
 					) {
 						return null;
 					}
@@ -543,3 +555,49 @@ export function createBlockListBlockFilter( features ) {
 		withBlockListBlockHooks
 	);
 }
+
+export function createBlockSaveFilter( features ) {
+	function extraPropsFromHooks( props, name, attributes ) {
+		return features.reduce( ( accu, feature ) => {
+			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
+
+			const neededAttributes = {};
+			for ( const key of attributeKeys ) {
+				if ( attributes[ key ] ) {
+					neededAttributes[ key ] = attributes[ key ];
+				}
+			}
+
+			if (
+				// Skip rendering if none of the needed attributes are
+				// set.
+				! Object.keys( neededAttributes ).length ||
+				! hasSupport( name )
+			) {
+				return accu;
+			}
+
+			return addSaveProps( accu, name, neededAttributes );
+		}, props );
+	}
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		extraPropsFromHooks,
+		0
+	);
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		( props ) => {
+			// Previously we had a filter deleting the className if it was an empty
+			// string. That filter is no longer running, so now we need to delete it
+			// here.
+			if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
+				delete props.className;
+			}
+
+			return props;
+		}
+	);
+}

package/src/private-apis.js

@@ -5,12 +5,11 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
-import { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
+import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -36,12 +35,11 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	kebabCase,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	useShouldContextualToolbarShow,
+	useCanBlockToolbarBeFocused,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,

package/src/private-apis.native.js

@@ -3,7 +3,6 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
-import { kebabCase } from './utils/object';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,6 +11,5 @@ import { lock } from './lock-unlock';
 export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
-	kebabCase,
 	ExperimentalBlockEditorProvider,
 } );

package/src/store/actions.js

@@ -1919,18 +1919,3 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
-
-/**
- * Action that sets the element that had focus when focus leaves the editor canvas.
- *
- * @param {Object} lastFocus The last focused element.
- *
- *
- * @return {Object} Action object.
- */
-export function setLastFocus( lastFocus = null ) {
-	return {
-		type: 'LAST_FOCUS',
-		lastFocus,
-	};
-}

package/src/store/private-actions.js

@@ -3,6 +3,11 @@
  */
 import { Platform } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { undoIgnoreBlocks } from './undo-ignore';
+
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -291,10 +296,45 @@ export function deleteStyleOverride( id ) {
 	};
 }
 
-export function syncDerivedBlockAttributes( clientId, attributes ) {
+/**
+ * A higher-order action that mark every change inside a callback as "non-persistent"
+ * and ignore pushing to the undo history stack. It's primarily used for synchronized
+ * derived updates from the block editor without affecting the undo history.
+ *
+ * @param {() => void} callback The synchronous callback to derive updates.
+ */
+export function syncDerivedUpdates( callback ) {
+	return ( { dispatch, select, registry } ) => {
+		registry.batch( () => {
+			// Mark every change in the `callback` as non-persistent.
+			dispatch( {
+				type: 'SET_EXPLICIT_PERSISTENT',
+				isPersistentChange: false,
+			} );
+			callback();
+			dispatch( {
+				type: 'SET_EXPLICIT_PERSISTENT',
+				isPersistentChange: undefined,
+			} );
+
+			// Ignore pushing undo stack for the updated blocks.
+			const updatedBlocks = select.getBlocks();
+			undoIgnoreBlocks.add( updatedBlocks );
+		} );
+	};
+}
+
+/**
+ * Action that sets the element that had focus when focus leaves the editor canvas.
+ *
+ * @param {Object} lastFocus The last focused element.
+ *
+ *
+ * @return {Object} Action object.
+ */
+export function setLastFocus( lastFocus = null ) {
 	return {
-		type: 'SYNC_DERIVED_BLOCK_ATTRIBUTES',
-		clientIds: [ clientId ],
-		attributes,
+		type: 'LAST_FOCUS',
+		lastFocus,
 	};
 }

package/src/store/private-selectors.js

@@ -281,3 +281,14 @@ export const hasAllowedPatterns = createSelector(
 		),
 	]
 );
+
+/**
+ * Returns the element of the last element that had focus when focus left the editor canvas.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {Object} Element.
+ */
+export function getLastFocus( state ) {
+	return state.lastFocus;
+}

package/src/store/reducer.js

@@ -453,14 +453,25 @@ const withBlockTree =
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
 	let markNextChangeAsNotPersistent = false;
+	let explicitPersistent;
 
 	return ( state, action ) => {
 		let nextState = reducer( state, action );
 
-		if ( action.type === 'SYNC_DERIVED_BLOCK_ATTRIBUTES' ) {
-			return nextState.isPersistentChange
-				? { ...nextState, isPersistentChange: false }
-				: nextState;
+		let nextIsPersistentChange;
+		if ( action.type === 'SET_EXPLICIT_PERSISTENT' ) {
+			explicitPersistent = action.isPersistentChange;
+			nextIsPersistentChange = state.isPersistentChange ?? true;
+		}
+
+		if ( explicitPersistent !== undefined ) {
+			nextIsPersistentChange = explicitPersistent;
+			return nextIsPersistentChange === nextState.isPersistentChange
+				? nextState
+				: {
+						...nextState,
+						isPersistentChange: nextIsPersistentChange,
+				  };
 		}
 
 		const isExplicitPersistentChange =
@@ -473,7 +484,7 @@ function withPersistentBlockChange( reducer ) {
 			markNextChangeAsNotPersistent =
 				action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
 
-			const nextIsPersistentChange = state?.isPersistentChange ?? true;
+			nextIsPersistentChange = state?.isPersistentChange ?? true;
 			if ( state.isPersistentChange === nextIsPersistentChange ) {
 				return state;
 			}

package/src/store/selectors.js

@@ -2742,8 +2742,11 @@ export const __unstableGetContentLockingParent = createSelector(
 		while ( state.blocks.parents.has( current ) ) {
 			current = state.blocks.parents.get( current );
 			if (
-				current &&
-				getTemplateLock( state, current ) === 'contentOnly'
+				( current &&
+					getBlockName( state, current ) === 'core/block' &&
+					window.__experimentalPatternPartialSyncing ) ||
+				( current &&
+					getTemplateLock( state, current ) === 'contentOnly' )
 			) {
 				result = current;
 			}
@@ -2943,14 +2946,3 @@ export const isGroupable = createRegistrySelector(
 			);
 		}
 );
-
-/**
- * Returns the element of the last element that had focus when focus left the editor canvas.
- *
- * @param {Object} state Block editor state.
- *
- * @return {Object} Element.
- */
-export function getLastFocus( state ) {
-	return state.lastFocus;
-}

package/src/store/undo-ignore.js

@@ -0,0 +1,4 @@
+// Keep track of the blocks that should not be pushing an additional
+// undo stack when editing the entity.
+// See the implementation of `syncDerivedUpdates` and `useBlockSync`.
+export const undoIgnoreBlocks = new WeakSet();

package/src/store/utils.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
 const EMPTY_ARRAY = [];
 
@@ -18,7 +18,7 @@ export function getUserPatterns( state ) {
 		return {
 			name: `core/block/${ userPattern.id }`,
 			id: userPattern.id,
-			type: PATTERN_TYPES.user,
+			type: INSERTER_PATTERN_TYPES.user,
 			title: userPattern.title.raw,
 			categories: userPattern.wp_pattern_category.map( ( catId ) =>
 				categories && categories.get( catId )

package/src/style.scss

@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-tools/style.scss";

package/src/utils/get-px-from-css-unit.js

@@ -0,0 +1,8 @@
+/**
+ * This function was accidentially exposed for mobile/native usage.
+ *
+ * @deprecated
+ *
+ * @return {string} Empty string.
+ */
+export default () => '';

package/src/utils/index.js

@@ -1,3 +1,3 @@
 export { default as transformStyles } from './transform-styles';
 export * from './block-variation-transforms';
-export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
+export { default as getPxFromCssUnit } from './get-px-from-css-unit';

package/src/utils/object.js

@@ -1,38 +1,3 @@
-/**
- * External dependencies
- */
-import { paramCase } from 'change-case';
-
-/**
- * Converts any string to kebab case.
- * Backwards compatible with Lodash's `_.kebabCase()`.
- * Backwards compatible with `_wp_to_kebab_case()`.
- *
- * @see https://lodash.com/docs/4.17.15#kebabCase
- * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
- *
- * @param {string} str String to convert.
- * @return {string} Kebab-cased string
- */
-export function kebabCase( str ) {
-	let input = str;
-	if ( typeof str !== 'string' ) {
-		input = str?.toString?.() ?? '';
-	}
-
-	// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
-	input = input.replace( /['\u2019]/, '' );
-
-	return paramCase( input, {
-		splitRegexp: [
-			/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
-			/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar
-			/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
-			/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
-		],
-	} );
-}
-
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a
  * new object. Treats nullish initial values as empty objects. Clones any

package/src/utils/test/object.js

@@ -1,102 +1,7 @@
 /**
  * Internal dependencies
  */
-import { kebabCase, setImmutably } from '../object';
-
-describe( 'kebabCase', () => {
-	it( 'separates lowercase letters, followed by uppercase letters', () => {
-		expect( kebabCase( 'fooBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'separates numbers, followed by uppercase letters', () => {
-		expect( kebabCase( '123FOO' ) ).toEqual( '123-foo' );
-	} );
-
-	it( 'separates numbers, followed by lowercase characters', () => {
-		expect( kebabCase( '123bar' ) ).toEqual( '123-bar' );
-	} );
-
-	it( 'separates uppercase letters, followed by numbers', () => {
-		expect( kebabCase( 'FOO123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates lowercase letters, followed by numbers', () => {
-		expect( kebabCase( 'foo123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates uppercase groups from capitalized groups', () => {
-		expect( kebabCase( 'FOOBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any non-dash special characters', () => {
-		expect(
-			kebabCase( 'foo±§!@#$%^&*()-_=+/?.>,<\\|{}[]`~\'";:bar' )
-		).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any spacing characters', () => {
-		expect( kebabCase( ' foo \t \n \r \f \v bar ' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'groups multiple dashes into a single one', () => {
-		expect( kebabCase( 'foo---bar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'returns an empty string unchanged', () => {
-		expect( kebabCase( '' ) ).toEqual( '' );
-	} );
-
-	it( 'returns an existing kebab case string unchanged', () => {
-		expect( kebabCase( 'foo-123-bar' ) ).toEqual( 'foo-123-bar' );
-	} );
-
-	it( 'returns an empty string if any nullish type is passed', () => {
-		expect( kebabCase( undefined ) ).toEqual( '' );
-		expect( kebabCase( null ) ).toEqual( '' );
-	} );
-
-	it( 'converts any unexpected non-nullish type to a string', () => {
-		expect( kebabCase( 12345 ) ).toEqual( '12345' );
-		expect( kebabCase( [] ) ).toEqual( '' );
-		expect( kebabCase( {} ) ).toEqual( 'object-object' );
-	} );
-
-	/**
-	 * Should cover all test cases of `_wp_to_kebab_case()`.
-	 *
-	 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
-	 * @see https://github.com/WordPress/wordpress-develop/blob/76376fdbc3dc0b3261de377dffc350677345e7ba/tests/phpunit/tests/functions/wpToKebabCase.php#L35-L62
-	 */
-	it.each( [
-		[ 'white', 'white' ],
-		[ 'white+black', 'white-black' ],
-		[ 'white:black', 'white-black' ],
-		[ 'white*black', 'white-black' ],
-		[ 'white.black', 'white-black' ],
-		[ 'white black', 'white-black' ],
-		[ 'white	black', 'white-black' ],
-		[ 'white-to-black', 'white-to-black' ],
-		[ 'white2white', 'white-2-white' ],
-		[ 'white2nd', 'white-2nd' ],
-		[ 'white2ndcolor', 'white-2-ndcolor' ],
-		[ 'white2ndColor', 'white-2nd-color' ],
-		[ 'white2nd_color', 'white-2nd-color' ],
-		[ 'white23color', 'white-23-color' ],
-		[ 'white23', 'white-23' ],
-		[ '23color', '23-color' ],
-		[ 'white4th', 'white-4th' ],
-		[ 'font2xl', 'font-2-xl' ],
-		[ 'whiteToWhite', 'white-to-white' ],
-		[ 'whiteTOwhite', 'white-t-owhite' ],
-		[ 'WHITEtoWHITE', 'whit-eto-white' ],
-		[ 42, '42' ],
-		[ "i've done", 'ive-done' ],
-		[ '#ffffff', 'ffffff' ],
-		[ '$ffffff', 'ffffff' ],
-	] )( 'converts %s properly to %s', ( input, expected ) => {
-		expect( kebabCase( input ) ).toEqual( expected );
-	} );
-} );
+import { setImmutably } from '../object';
 
 describe( 'setImmutably', () => {
 	describe( 'handling falsy values properly', () => {

package/src/utils/use-can-block-toolbar-be-focused.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Returns true if the block toolbar should be able to receive focus.
+ *
+ * @return {boolean} Whether the block toolbar should be able to receive focus
+ */
+export function useCanBlockToolbarBeFocused() {
+	return useSelect( ( select ) => {
+		const {
+			__unstableGetEditorMode,
+			getBlock,
+			getSettings,
+			getSelectedBlockClientId,
+			getFirstMultiSelectedBlockClientId,
+		} = unlock( select( blockEditorStore ) );
+
+		const selectedBlockId =
+			getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
+		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
+			getBlock( selectedBlockId ) || {}
+		);
+
+		// Fixed Toolbar can be focused when:
+		// - a block is selected
+		// - fixed toolbar is on
+		// Block Toolbar Popover can be focused when:
+		// - a block is selected
+		// - we are in edit mode
+		// - it is not an empty default block
+		return (
+			!! selectedBlockId &&
+			( getSettings().hasFixedToolbar ||
+				( __unstableGetEditorMode() === 'edit' &&
+					! isEmptyDefaultBlock ) )
+		);
+	}, [] );
+}

package/build/components/block-list/block-list-block-context.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlockListBlockContext = void 0;
-var _element = require("@wordpress/element");
-/**
- * WordPress dependencies
- */
-
-const BlockListBlockContext = (0, _element.createContext)(null);
-exports.BlockListBlockContext = BlockListBlockContext;
-//# sourceMappingURL=block-list-block-context.js.map

package/build/components/block-list/block-list-block-context.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","BlockListBlockContext","createContext","exports"],"sources":["@wordpress/block-editor/src/components/block-list/block-list-block-context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const BlockListBlockContext = createContext( null );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,qBAAqB,GAAG,IAAAC,sBAAa,EAAE,IAAK,CAAC;AAACC,OAAA,CAAAF,qBAAA,GAAAA,qBAAA"}