@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.10.0

package/src/hooks/background.js

@@ -177,6 +177,11 @@ export function BackgroundImagePanel( {
 		},
 	};
 
+	const defaultControls = getBlockSupport( name, [
+		BACKGROUND_SUPPORT_KEY,
+		'defaultControls',
+	] );
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedValue }
@@ -185,6 +190,7 @@ export function BackgroundImagePanel( {
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
+			defaultControls={ defaultControls }
 			value={ style }
 		/>
 	);

package/src/hooks/block-bindings.js

@@ -26,12 +26,12 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	canBindAttribute,
 	getBindableAttributes,
-} from '../hooks/use-bindings-attributes';
+	useBlockBindingsUtils,
+} from '../utils/block-bindings';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
 import { useBlockEditContext } from '../components/block-edit';
-import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { store as blockEditorStore } from '../store';
 
 const { Menu } = unlock( componentsPrivateApis );
@@ -51,7 +51,7 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+function BlockBindingsPanelMenuContent( { fieldsList, attribute, binding } ) {
 	const { clientId } = useBlockEditContext();
 	const registeredSources = getBlockBindingsSources();
 	const { updateBlockBindings } = useBlockBindingsUtils();
@@ -179,22 +179,21 @@ function EditableBlockBindingsPanelItems( {
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
-							gutter={ isMobile ? 8 : 36 }
-							trigger={
-								<Item>
-									<BlockBindingsAttribute
-										attribute={ attribute }
-										binding={ binding }
-										fieldsList={ fieldsList }
-									/>
-								</Item>
-							}
 						>
-							<BlockBindingsPanelDropdown
-								fieldsList={ fieldsList }
-								attribute={ attribute }
-								binding={ binding }
-							/>
+							<Menu.TriggerButton render={ <Item /> }>
+								<BlockBindingsAttribute
+									attribute={ attribute }
+									binding={ binding }
+									fieldsList={ fieldsList }
+								/>
+							</Menu.TriggerButton>
+							<Menu.Popover gutter={ isMobile ? 8 : 36 }>
+								<BlockBindingsPanelMenuContent
+									fieldsList={ fieldsList }
+									attribute={ attribute }
+									binding={ binding }
+								/>
+							</Menu.Popover>
 						</Menu>
 					</ToolsPanelItem>
 				);

package/src/hooks/border.js

@@ -31,7 +31,7 @@ import {
 import { store as blockEditorStore } from '../store';
 import { __ } from '@wordpress/i18n';
 
-export const BORDER_SUPPORT_KEY = 'border';
+export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';
 
 const getColorByProperty = ( colors, property, value ) => {
@@ -161,8 +161,14 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	}
 
 	const defaultControls = {
-		...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ),
-		...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ),
+		...getBlockSupport( name, [
+			BORDER_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
+		...getBlockSupport( name, [
+			SHADOW_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
 	};
 
 	return (

package/src/hooks/color.js

@@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 
 	const enableContrastChecking =

package/src/hooks/dimensions.js

@@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 	const defaultControls = {
 		...defaultDimensionsControls,

package/src/hooks/font-family.js

@@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
-export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 const { kebabCase } = unlock( componentsPrivateApis );
 
 /**

package/src/hooks/gap.js

@@ -8,7 +8,7 @@ import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/util
  * The string check is for backwards compatibility before Gutenberg supported
  * split gap values (row and column) and the value was a string n + unit.
  *
- * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
  * @return {Object|null}                    A value to pass to the BoxControl component.
  */
 export function getGapBoxControlValueFromStyle( blockGapValue ) {
@@ -26,7 +26,7 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 /**
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
- * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
  * @param {?string}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */

package/src/hooks/index.js

@@ -32,7 +32,6 @@ import './metadata';
 import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
 import './block-renaming';
-import './use-bindings-attributes';
 import './grid-visualizer';
 
 createBlockEditFilter(

package/src/hooks/index.native.js

@@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
+export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/style.js

@@ -98,16 +98,22 @@ function addAttribute( settings ) {
  * @type {Record<string, string[]>}
  */
 const skipSerializationPathsEdit = {
-	[ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ],
-	[ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ],
-	[ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [
+	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
+	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		COLOR_SUPPORT_KEY,
+	],
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
-	[ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [
+	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		DIMENSIONS_SUPPORT_KEY,
 	],
-	[ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ],
-	[ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ],
+	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		SPACING_SUPPORT_KEY,
+	],
+	[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		SHADOW_SUPPORT_KEY,
+	],
 };
 
 /**

package/src/hooks/supports.js

@@ -6,20 +6,20 @@ import { Platform } from '@wordpress/element';
 
 const ALIGN_SUPPORT_KEY = 'align';
 const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
-const BORDER_SUPPORT_KEY = 'border';
+const BORDER_SUPPORT_KEY = '__experimentalBorder';
 const COLOR_SUPPORT_KEY = 'color';
 const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
-const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 /**
  * Key within block settings' supports array indicating support for text
  * align e.g. settings found in `block.json`.
@@ -34,7 +34,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
 /**
  * Key within block settings' supports array indicating support for writing mode
  * e.g. settings found in `block.json`.
@@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 
 /**
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
  */
-const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const LAYOUT_SUPPORT_KEY = 'layout';
 const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,

package/src/hooks/test/font-size.js

@@ -19,6 +19,15 @@ import {
 import _fontSize from '../font-size';
 
 const noop = () => {};
+const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
+const fontSizes = [
+	{
+		name: 'A larger font',
+		size: '32px',
+		slug: 'larger',
+	},
+];
 
 function addUseSettingFilter( callback ) {
 	addFilter(
@@ -55,13 +64,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [
-					{
-						name: 'A larger font',
-						size: '32px',
-						slug: 'larger',
-					},
-				];
+				return fontSizes;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -69,7 +72,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;
@@ -95,7 +98,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [];
+				return EMPTY_ARRAY;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -103,7 +106,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;
@@ -132,7 +135,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [];
+				return EMPTY_ARRAY;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -140,7 +143,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;

package/src/hooks/test/style.js

@@ -133,7 +133,8 @@ describe( 'addSaveProps', () => {
 	const applySkipSerialization = ( features ) => {
 		const updatedSettings = { ...blockSettings };
 		Object.keys( features ).forEach( ( key ) => {
-			updatedSettings.supports[ key ].skipSerialization = features[ key ];
+			updatedSettings.supports[ key ].__experimentalSkipSerialization =
+				features[ key ];
 		} );
 		return updatedSettings;
 	};

package/src/hooks/typography.js

@@ -27,12 +27,12 @@ function omit( object, keys ) {
 	);
 }
 
-const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
-const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 
 	return (

package/src/hooks/use-zoom-out.js

@@ -2,42 +2,82 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * Concepts:
+ * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.
+ * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
-export function useZoomOut( zoomOut = true ) {
+export function useZoomOut( enabled = true ) {
+	const { postId } = useContext( BlockContext );
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
+
+	/**
+	 * We need access to both the value and the function. The value is to trigger a useEffect hook
+	 * and the function is to check zoom out within another hook without triggering a re-render.
+	 */
+	const { isZoomedOut, isZoomOut } = useSelect( ( select ) => {
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
+		return {
+			isZoomedOut: _isZoomOut(),
+			isZoomOut: _isZoomOut,
+		};
+	}, [] );
+
+	const controlZoomLevelRef = useRef( false );
+	const isEnabledRef = useRef( enabled );
+	const postIdRef = useRef( postId );
+
+	/**
+	 * This hook tracks if the zoom state was changed manually by the user via clicking
+	 * the zoom out button. We only want this to run when isZoomedOut changes, so we use
+	 * a ref to track the enabled state.
+	 */
+	useEffect( () => {
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means the user manually changed the zoom state while
+		// this hook was mounted, and we should no longer control the zoom state.
+		if ( isZoomedOut !== isEnabledRef.current ) {
+			controlZoomLevelRef.current = false;
+		}
+	}, [ isZoomedOut ] );
 
 	useEffect( () => {
-		const isZoomOutOnMount = isZoomOut();
+		isEnabledRef.current = enabled;
 
-		return () => {
-			if ( isZoomOutOnMount ) {
+		// If the user created a new post/page, we should take control of the zoom level.
+		if ( postIdRef.current !== postId ) {
+			controlZoomLevelRef.current = true;
+		}
+
+		if ( enabled !== isZoomOut() ) {
+			controlZoomLevelRef.current = true;
+
+			if ( enabled ) {
 				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
 			}
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( zoomOut ) {
-			setZoomLevel( 'auto-scaled' );
-		} else {
-			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+
+		return () => {
+			// If we are controlling zoom level and are zoomed out, reset the zoom level.
+			if ( controlZoomLevelRef.current && isZoomOut() ) {
+				resetZoomLevel();
+			}
+		};
+	}, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] );
 }

package/src/hooks/utils.js

@@ -124,7 +124,7 @@ export function shouldSkipSerialization(
 	feature
 ) {
 	const support = getBlockSupport( blockNameOrType, featureSet );
-	const skipSerialization = support?.skipSerialization;
+	const skipSerialization = support?.__experimentalSkipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
 		return skipSerialization.includes( feature );

package/src/store/private-actions.js

@@ -26,6 +26,7 @@ const castArray = ( maybeArray ) =>
 const privateSettings = [
 	'inserterMediaCategories',
 	'blockInspectorAnimation',
+	'mediaSideload',
 ];
 
 /**

package/src/store/private-selectors.js

@@ -502,13 +502,23 @@ export const getParentSectionBlock = ( state, clientId ) => {
  * @return {boolean} Whether the block is a content locking parent.
  */
 export function isSectionBlock( state, clientId ) {
+	const blockName = getBlockName( state, clientId );
+	if (
+		blockName === 'core/block' ||
+		getTemplateLock( state, clientId ) === 'contentOnly'
+	) {
+		return true;
+	}
+
+	// Template parts become sections in navigation mode.
+	const _isNavigationMode = isNavigationMode( state );
+	if ( _isNavigationMode && blockName === 'core/template-part' ) {
+		return true;
+	}
+
 	const sectionRootClientId = getSectionRootClientId( state );
 	const sectionClientIds = getBlockOrder( state, sectionRootClientId );
-	return (
-		getBlockName( state, clientId ) === 'core/block' ||
-		getTemplateLock( state, clientId ) === 'contentOnly' ||
-		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
-	);
+	return _isNavigationMode && sectionClientIds.includes( clientId );
 }
 
 /**