@wordpress/block-editor 15.11.0 → 15.12.0

package/src/components/use-block-commands/index.js

@@ -16,8 +16,6 @@ import {
 	plus as add,
 	group,
 	ungroup,
-	seen,
-	unseen,
 } from '@wordpress/icons';
 
 /**
@@ -25,7 +23,6 @@ import {
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
-import { cleanEmptyObject } from '../../hooks/utils';
 
 const getTransformCommands = () =>
 	function useTransformCommands() {
@@ -160,7 +157,6 @@ const getQuickActionsCommands = () =>
 			getBlockRootClientId,
 			getBlocksByClientId,
 			canRemoveBlocks,
-			getBlockName,
 		} = useSelect( blockEditorStore );
 		const { getDefaultBlockName, getGroupingBlockName } =
 			useSelect( blocksStore );
@@ -173,7 +169,6 @@ const getQuickActionsCommands = () =>
 			duplicateBlocks,
 			insertAfterBlock,
 			insertBeforeBlock,
-			updateBlockAttributes,
 		} = useDispatch( blockEditorStore );
 
 		const onGroup = () => {
@@ -223,11 +218,6 @@ const getQuickActionsCommands = () =>
 		} );
 		const canRemove = canRemoveBlocks( clientIds );
 
-		const canToggleBlockVisibility =
-			blocks.every( ( { clientId } ) =>
-				hasBlockSupport( getBlockName( clientId ), 'visibility', true )
-			) && ! window.__experimentalHideBlocksBasedOnScreenSize;
-
 		const commands = [];
 
 		if ( canDuplicate ) {
@@ -293,37 +283,6 @@ const getQuickActionsCommands = () =>
 			} );
 		}
 
-		if ( canToggleBlockVisibility ) {
-			const hasHiddenBlock = blocks.some(
-				( block ) =>
-					block.attributes.metadata?.blockVisibility === false
-			);
-
-			commands.push( {
-				name: 'core/toggle-block-visibility',
-				label: hasHiddenBlock ? __( 'Show' ) : __( 'Hide' ),
-				callback: () => {
-					const attributesByClientId = Object.fromEntries(
-						blocks?.map( ( { clientId, attributes } ) => [
-							clientId,
-							{
-								metadata: cleanEmptyObject( {
-									...attributes?.metadata,
-									blockVisibility: hasHiddenBlock
-										? undefined
-										: false,
-								} ),
-							},
-						] )
-					);
-					updateBlockAttributes( clientIds, attributesByClientId, {
-						uniqueByBlock: true,
-					} );
-				},
-				icon: hasHiddenBlock ? seen : unseen,
-			} );
-		}
-
 		return {
 			isLoading: false,
 			commands: commands.map( ( command ) => ( {

package/src/components/use-block-display-information/index.js

@@ -89,12 +89,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
 
-			if (
-				patternName &&
-				window?.__experimentalContentOnlyPatternInsertion
-			) {
+			if ( patternName ) {
 				const pattern = __experimentalGetParsedPattern( patternName );
-
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {
 					isSynced: false,

package/src/components/writing-flow/index.js

@@ -17,6 +17,7 @@ import { forwardRef } from '@wordpress/element';
 import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
 import useArrowNav from './use-arrow-nav';
+import { usePreviewModeNav } from './use-preview-mode-nav';
 import useSelectAll from './use-select-all';
 import useDragSelection from './use-drag-selection';
 import useSelectionObserver from './use-selection-observer';
@@ -44,6 +45,7 @@ export function useWritingFlow() {
 			useMultiSelection(),
 			useSelectAll(),
 			useArrowNav(),
+			usePreviewModeNav(),
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = 0;

package/src/components/writing-flow/use-arrow-nav.js

@@ -209,6 +209,11 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// In preview mode, navigation is handled by useSelectableBlocksNav.
+			if ( getSettings().isPreviewMode ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {

package/src/components/writing-flow/use-drag-selection.js

@@ -30,6 +30,7 @@ export default function useDragSelection() {
 	const { startMultiSelect, stopMultiSelect } =
 		useDispatch( blockEditorStore );
 	const {
+		getSettings,
 		isSelectionEnabled,
 		hasSelectedBlock,
 		isDraggingBlocks,
@@ -123,7 +124,12 @@ export default function useDragSelection() {
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
 				// multi selecting when the mouse leaves the wrapper.
-				if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
+				// In preview mode, allow drag selection from blocks since they
+				// are not contenteditable.
+				if (
+					target.getAttribute( 'contenteditable' ) !== 'true' &&
+					! getSettings().isPreviewMode
+				) {
 					return;
 				}
 

package/src/components/writing-flow/use-preview-mode-nav.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { TAB, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * In preview mode, handles Tab and arrow key navigation to move only between
+ * block elements, skipping all other focusable content.
+ *
+ * @return {Function} Ref callback.
+ */
+export function usePreviewModeNav() {
+	const isPreviewMode = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().isPreviewMode,
+		[]
+	);
+
+	return useRefEffect(
+		( node ) => {
+			if ( ! isPreviewMode ) {
+				return;
+			}
+
+			function onKeyDown( event ) {
+				const { keyCode, shiftKey, target } = event;
+
+				const isTab = keyCode === TAB;
+				const isUp = keyCode === UP;
+				const isDown = keyCode === DOWN;
+				const isLeft = keyCode === LEFT;
+				const isRight = keyCode === RIGHT;
+				const isArrow = isUp || isDown || isLeft || isRight;
+
+				if ( ! isTab && ! isArrow ) {
+					return;
+				}
+
+				const isReverse = isTab ? shiftKey : isUp || isLeft;
+
+				const blocks = Array.from(
+					node.querySelectorAll( '[data-block]' )
+				);
+
+				if ( ! blocks.length ) {
+					return;
+				}
+
+				const currentBlock = target.closest( '[data-block]' );
+				const currentIndex = currentBlock
+					? blocks.indexOf( currentBlock )
+					: -1;
+
+				// If focus is not on a block, don't intercept navigation.
+				if ( currentIndex === -1 ) {
+					return;
+				}
+
+				// For Tab navigation, allow escaping the block list at boundaries.
+				// For arrow keys, wrap around.
+				if ( isTab ) {
+					if ( isReverse && currentIndex === 0 ) {
+						// At first block, Shift+Tab should exit the block list.
+						return;
+					}
+					if ( ! isReverse && currentIndex === blocks.length - 1 ) {
+						// At last block, Tab should exit the block list.
+						return;
+					}
+				}
+
+				let nextIndex;
+				if ( isReverse ) {
+					nextIndex =
+						currentIndex <= 0
+							? blocks.length - 1
+							: currentIndex - 1;
+				} else {
+					nextIndex =
+						currentIndex === -1 || currentIndex >= blocks.length - 1
+							? 0
+							: currentIndex + 1;
+				}
+
+				event.preventDefault();
+				blocks[ nextIndex ].focus();
+			}
+
+			node.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				node.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ isPreviewMode ]
+	);
+}

package/src/hooks/block-renaming.js

@@ -28,8 +28,11 @@ export function addLabelCallback( settings ) {
 		settings.__experimentalLabel = ( attributes, { context } ) => {
 			const { metadata } = attributes;
 
-			// In the list view, use the block's name attribute as the label.
-			if ( context === 'list-view' && metadata?.name ) {
+			// In the list view and breadcrumb, use the block's name attribute as the label.
+			if (
+				( context === 'list-view' || context === 'breadcrumb' ) &&
+				metadata?.name
+			) {
 				return metadata.name;
 			}
 		};

package/src/hooks/cross-origin-isolation.js

@@ -113,25 +113,26 @@ if ( window.crossOriginIsolated ) {
 		'credentialless' in window.HTMLIFrameElement.prototype;
 
 	const disableEmbedPreviews = createHigherOrderComponent(
-		( BlockEdit ) => ( props ) => {
-			if ( 'core/embed' !== props.name ) {
-				return <BlockEdit { ...props } />;
-			}
-
-			// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.
-			const previewable =
-				supportsCredentialless &&
-				! [ 'facebook', 'smugmug' ].includes(
-					props.attributes.providerNameSlug
+		( BlockEdit ) =>
+			function DisableEmbedPreviews( props ) {
+				if ( 'core/embed' !== props.name ) {
+					return <BlockEdit { ...props } />;
+				}
+
+				// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.
+				const previewable =
+					supportsCredentialless &&
+					! [ 'facebook', 'smugmug' ].includes(
+						props.attributes.providerNameSlug
+					);
+
+				return (
+					<BlockEdit
+						{ ...props }
+						attributes={ { ...props.attributes, previewable } }
+					/>
 				);
-
-			return (
-				<BlockEdit
-					{ ...props }
-					attributes={ { ...props.attributes, previewable } }
-				/>
-			);
-		},
+			},
 		'withDisabledEmbedPreview'
 	);
 

package/src/hooks/custom-css.js

@@ -0,0 +1,176 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { __, sprintf } from '@wordpress/i18n';
+import { processCSSNesting } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import AdvancedPanel, {
+	validateCSS,
+} from '../components/global-styles/advanced-panel';
+import { cleanEmptyObject, useStyleOverride } from './utils';
+import { store as blockEditorStore } from '../store';
+
+// Stable reference for useInstanceId.
+const CUSTOM_CSS_INSTANCE_REFERENCE = {};
+
+// Stable empty object reference for useSelect.
+const EMPTY_STYLE = {};
+
+/**
+ * Inspector control for custom CSS.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.blockName     Block name.
+ * @param {Function} props.setAttributes Function to set block attributes.
+ * @param {Object}   props.style         Block style attribute.
+ */
+function CustomCSSControl( { blockName, setAttributes, style } ) {
+	const blockType = getBlockType( blockName );
+
+	function onChange( newStyle ) {
+		// Normalize whitespace-only CSS to undefined so it gets cleaned up.
+		const css = newStyle?.css?.trim() ? newStyle.css : undefined;
+		setAttributes( {
+			style: cleanEmptyObject( { ...newStyle, css } ),
+		} );
+	}
+
+	const cssHelpText = sprintf(
+		// translators: %s: is the name of a block e.g., 'Image' or 'Quote'.
+		__(
+			'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;.'
+		),
+		blockType?.title
+	);
+
+	return (
+		<InspectorControls group="advanced">
+			<AdvancedPanel
+				value={ style }
+				onChange={ onChange }
+				inheritedValue={ style }
+				help={ cssHelpText }
+			/>
+		</InspectorControls>
+	);
+}
+
+function CustomCSSEdit( { clientId, name, setAttributes } ) {
+	const { style, canEditCSS } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+			return {
+				style: getBlockAttributes( clientId )?.style || EMPTY_STYLE,
+				canEditCSS: getSettings().canEditCSS,
+			};
+		},
+		[ clientId ]
+	);
+
+	// Don't render the panel if user lacks edit_css capability.
+	if ( ! canEditCSS ) {
+		return null;
+	}
+
+	return (
+		<CustomCSSControl
+			blockName={ name }
+			setAttributes={ setAttributes }
+			style={ style }
+		/>
+	);
+}
+
+/**
+ * Hook to handle custom CSS for a block in the editor.
+ * Generates a unique class and applies scoped CSS via style override.
+ *
+ * @param {Object} props       Block props.
+ * @param {Object} props.style Block style attribute.
+ * @return {Object} Block props including className for custom CSS scoping.
+ */
+function useBlockProps( { style } ) {
+	const customCSS = style?.css;
+
+	// Validate CSS is non-empty and passes validation checks.
+	const isValidCSS =
+		typeof customCSS === 'string' &&
+		customCSS.trim().length > 0 &&
+		validateCSS( customCSS );
+
+	const customCSSIdentifier = useInstanceId(
+		CUSTOM_CSS_INSTANCE_REFERENCE,
+		'wp-custom-css'
+	);
+
+	const customCSSSelector = `.${ customCSSIdentifier }`;
+
+	// Transform the custom CSS using the same logic as global styles.
+	// Only process if CSS is valid (doesn't contain HTML markup).
+	const transformedCSS = useMemo( () => {
+		if ( ! isValidCSS ) {
+			return undefined;
+		}
+		return processCSSNesting( customCSS, customCSSSelector );
+	}, [ customCSS, customCSSSelector, isValidCSS ] );
+
+	// Inject the CSS via style override.
+	useStyleOverride( { css: transformedCSS } );
+
+	// Only add the class if there's valid custom CSS.
+	if ( ! isValidCSS ) {
+		return {};
+	}
+
+	return {
+		className: `has-custom-css ${ customCSSIdentifier }`,
+	};
+}
+
+/**
+ * Adds a marker class to blocks with custom CSS for server-side rendering.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type definition.
+ * @param {Object} attributes Block's attributes.
+ * @return {Object} Filtered props applied to save element.
+ */
+function addSaveProps( props, blockType, attributes ) {
+	if ( ! hasBlockSupport( blockType, 'customCSS', true ) ) {
+		return props;
+	}
+
+	if ( ! attributes?.style?.css?.trim() ) {
+		return props;
+	}
+
+	// Add a class to indicate this block has custom CSS.
+	// The actual CSS is rendered server-side using the render_block filter.
+	const className = props.className
+		? `${ props.className } has-custom-css`
+		: 'has-custom-css';
+
+	return {
+		...props,
+		className,
+	};
+}
+
+export default {
+	edit: CustomCSSEdit,
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customCSS', true );
+	},
+};

package/src/hooks/fit-text.js

@@ -68,18 +68,25 @@ function useFitText( { fitText, name, clientId } ) {
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
-	// Monitor block attribute changes, and parent changes.
+	// Monitor block attribute changes, parent changes, and block mode.
 	// Any attribute or parent change may change the available space.
-	const { blockAttributes, parentId } = useSelect(
+	// Block mode is needed to disable fit text when in HTML editing mode.
+	const { blockAttributes, parentId, blockMode } = useSelect(
 		( select ) => {
 			if ( ! clientId || ! hasFitTextSupport || ! fitText ) {
 				return EMPTY_OBJECT;
 			}
+			const _blockMode =
+				select( blockEditorStore ).getBlockMode( clientId );
+			if ( _blockMode === 'html' ) {
+				return { blockMode: _blockMode };
+			}
 			return {
 				blockAttributes:
 					select( blockEditorStore ).getBlockAttributes( clientId ),
 				parentId:
 					select( blockEditorStore ).getBlockRootClientId( clientId ),
+				blockMode: _blockMode,
 			};
 		},
 		[ clientId, hasFitTextSupport, fitText ]
@@ -118,7 +125,8 @@ function useFitText( { fitText, name, clientId } ) {
 			! fitText ||
 			! blockElement ||
 			! clientId ||
-			! hasFitTextSupport
+			! hasFitTextSupport ||
+			blockMode === 'html'
 		) {
 			return;
 		}
@@ -189,11 +197,17 @@ function useFitText( { fitText, name, clientId } ) {
 		applyFitText,
 		blockElement,
 		hasFitTextSupport,
+		blockMode,
 	] );
 
 	// Trigger fit text recalculation when content changes
 	useEffect( () => {
-		if ( fitText && blockElement && hasFitTextSupport ) {
+		if (
+			fitText &&
+			blockElement &&
+			hasFitTextSupport &&
+			blockMode !== 'html'
+		) {
 			// Wait for next frame to ensure DOM has updated after content changes
 			const frameId = window.requestAnimationFrame( () => {
 				if ( blockElement ) {
@@ -209,6 +223,7 @@ function useFitText( { fitText, name, clientId } ) {
 		applyFitText,
 		blockElement,
 		hasFitTextSupport,
+		blockMode,
 	] );
 
 	return { fontSize };
@@ -360,7 +375,7 @@ function WithFitTextFontSize( { fitText, name, clientId, children } ) {
  * `editor.BlockEdit` filter.
  */
 const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
+	return function AddFitTextControl( props ) {
 		const { name, attributes, clientId, isSelected, setAttributes } = props;
 		const { fitText } = attributes;
 		const supportsFitText = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );

package/src/hooks/grid-visualizer.js

@@ -51,21 +51,22 @@ function GridTools( { clientId, layout } ) {
 }
 
 const addGridVisualizerToBlockEdit = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( props.attributes.layout?.type !== 'grid' ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
+	( BlockEdit ) =>
+		function AddGridVisualizerToBlockEdit( props ) {
+			if ( props.attributes.layout?.type !== 'grid' ) {
+				return <BlockEdit key="edit" { ...props } />;
+			}
 
-		return (
-			<>
-				<GridTools
-					clientId={ props.clientId }
-					layout={ props.attributes.layout }
-				/>
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
-	},
+			return (
+				<>
+					<GridTools
+						clientId={ props.clientId }
+						layout={ props.attributes.layout }
+					/>
+					<BlockEdit key="edit" { ...props } />
+				</>
+			);
+		},
 	'addGridVisualizerToBlockEdit'
 );
 

package/src/hooks/index.js

@@ -27,11 +27,11 @@ import fontSize from './font-size';
 import textAlign from './text-align';
 import fitText from './fit-text';
 import border from './border';
+import customCSS from './custom-css';
 import position from './position';
 import blockStyleVariation from './block-style-variation';
 import layout from './layout';
 import childLayout from './layout-child';
-import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
@@ -47,11 +47,11 @@ createBlockEditFilter(
 		anchor,
 		customClassName,
 		style,
+		customCSS,
 		duotone,
 		fitText,
 		position,
 		layout,
-		contentLockUI,
 		blockHooks,
 		blockBindingsPanel,
 		childLayout,
@@ -73,6 +73,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	fitText,
 	border,
+	customCSS,
 	position,
 	blockStyleVariation,
 	childLayout,
@@ -84,6 +85,7 @@ createBlockSaveFilter( [
 	ariaLabel,
 	customClassName,
 	border,
+	customCSS,
 	fitText,
 	color,
 	style,