@wordpress/block-editor 15.11.0 → 15.11.1-next.v.0

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: 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,6 +27,7 @@ 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';
@@ -47,6 +48,7 @@ createBlockEditFilter(
 		anchor,
 		customClassName,
 		style,
+		customCSS,
 		duotone,
 		fitText,
 		position,
@@ -73,6 +75,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	fitText,
 	border,
+	customCSS,
 	position,
 	blockStyleVariation,
 	childLayout,
@@ -84,6 +87,7 @@ createBlockSaveFilter( [
 	ariaLabel,
 	customClassName,
 	border,
+	customCSS,
 	fitText,
 	color,
 	style,

package/src/hooks/layout.js

@@ -30,6 +30,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
+import { globalStylesDataKey } from '../store/private-keys';
 
 const layoutBlockSupportKey = 'layout';
 const { kebabCase } = unlock( componentsPrivateApis );
@@ -367,6 +368,7 @@ function BlockWithLayoutStyles( {
 	block: BlockListBlock,
 	props,
 	blockGapSupport,
+	globalBlockGapValue,
 	layoutClasses,
 } ) {
 	const { name, attributes } = props;
@@ -393,6 +395,7 @@ function BlockWithLayoutStyles( {
 		layout: usedLayout,
 		style: attributes?.style,
 		hasBlockGapSupport,
+		globalBlockGapValue,
 	} );
 
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
@@ -421,56 +424,65 @@ function BlockWithLayoutStyles( {
  * @return {Function} Wrapped component.
  */
 export const withLayoutStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { clientId, name, attributes } = props;
-		const blockSupportsLayout = hasLayoutBlockSupport( name );
-		const layoutClasses = useLayoutClasses( attributes, name );
-		const extraProps = useSelect(
-			( select ) => {
-				// The callback returns early to avoid block editor subscription.
-				if ( ! blockSupportsLayout ) {
-					return;
-				}
-
-				const { getSettings, getBlockSettings } = unlock(
-					select( blockEditorStore )
-				);
-				const { disableLayoutStyles } = getSettings();
+	( BlockListBlock ) =>
+		function WithLayoutStyles( props ) {
+			const { clientId, name, attributes } = props;
+			const blockSupportsLayout = hasLayoutBlockSupport( name );
+			const layoutClasses = useLayoutClasses( attributes, name );
+			const extraProps = useSelect(
+				( select ) => {
+					// The callback returns early to avoid block editor subscription.
+					if ( ! blockSupportsLayout ) {
+						return;
+					}
 
-				if ( disableLayoutStyles ) {
-					return;
-				}
+					const { getSettings, getBlockSettings } = unlock(
+						select( blockEditorStore )
+					);
+					const settings = getSettings();
+					const { disableLayoutStyles } = settings;
 
-				const [ blockGapSupport ] = getBlockSettings(
-					clientId,
-					'spacing.blockGap'
-				);
+					if ( disableLayoutStyles ) {
+						return;
+					}
 
-				return { blockGapSupport };
-			},
-			[ blockSupportsLayout, clientId ]
-		);
+					const [ blockGapSupport ] = getBlockSettings(
+						clientId,
+						'spacing.blockGap'
+					);
+
+					// Get default blockGap value from global styles for use in layouts like grid.
+					// Check block-specific styles first, then fall back to root styles.
+					const globalStyles = settings[ globalStylesDataKey ];
+					const globalBlockGapValue =
+						globalStyles?.blocks?.[ name ]?.spacing?.blockGap ??
+						globalStyles?.spacing?.blockGap;
+
+					return { blockGapSupport, globalBlockGapValue };
+				},
+				[ blockSupportsLayout, clientId ]
+			);
+
+			if ( ! extraProps ) {
+				return (
+					<BlockListBlock
+						{ ...props }
+						__unstableLayoutClassNames={
+							blockSupportsLayout ? layoutClasses : undefined
+						}
+					/>
+				);
+			}
 
-		if ( ! extraProps ) {
 			return (
-				<BlockListBlock
-					{ ...props }
-					__unstableLayoutClassNames={
-						blockSupportsLayout ? layoutClasses : undefined
-					}
+				<BlockWithLayoutStyles
+					block={ BlockListBlock }
+					props={ props }
+					layoutClasses={ layoutClasses }
+					{ ...extraProps }
 				/>
 			);
-		}
-
-		return (
-			<BlockWithLayoutStyles
-				block={ BlockListBlock }
-				props={ props }
-				layoutClasses={ layoutClasses }
-				{ ...extraProps }
-			/>
-		);
-	},
+		},
 	'withLayoutStyles'
 );
 

package/src/hooks/list-view.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '../store';
 import { PrivateListView } from '../components/list-view';
 import InspectorControls from '../components/inspector-controls/fill';
 import { PrivateBlockContext } from '../components/block-list/private-block-context';
+import useBlockDisplayTitle from '../components/block-title/use-block-display-title';
 
 export const LIST_VIEW_SUPPORT_KEY = 'listView';
 
@@ -39,7 +40,7 @@ export function ListViewPanel( { clientId, name } ) {
 	const { isSelectionWithinCurrentSection } =
 		useContext( PrivateBlockContext );
 	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, blockTitle, isNestedListView } = useSelect(
+	const { hasChildren, isNestedListView } = useSelect(
 		( select ) => {
 			const { getBlockCount, getBlockParents, getBlockName } =
 				select( blockEditorStore );
@@ -64,12 +65,15 @@ export function ListViewPanel( { clientId, name } ) {
 
 			return {
 				hasChildren: !! getBlockCount( clientId ),
-				blockTitle: select( blocksStore ).getBlockType( name )?.title,
 				isNestedListView: _isNestedListView,
 			};
 		},
-		[ clientId, name, isSelectionWithinCurrentSection ]
+		[ clientId, isSelectionWithinCurrentSection ]
 	);
+	const title = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 
 	if ( ! isEnabled || isNestedListView ) {
 		return null;
@@ -79,7 +83,7 @@ export function ListViewPanel( { clientId, name } ) {
 
 	return (
 		<InspectorControls group="list">
-			<PanelBody title={ showBlockTitle ? blockTitle : undefined }>
+			<PanelBody title={ showBlockTitle ? title : undefined }>
 				{ ! hasChildren && (
 					<p className="block-editor-block-inspector__no-blocks">
 						{ __( 'No items yet.' ) }
@@ -88,7 +92,7 @@ export function ListViewPanel( { clientId, name } ) {
 				<PrivateListView
 					rootClientId={ clientId }
 					isExpanded
-					description={ blockTitle }
+					description={ title }
 					showAppender
 				/>
 			</PanelBody>

package/src/hooks/test/align.js

@@ -17,6 +17,7 @@ const noop = () => {};
 
 describe( 'align', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: noop,
 		category: 'text',
 		title: 'block title',

package/src/hooks/test/allowed-blocks.js

@@ -22,6 +22,7 @@ describe( 'allowedBlocks', () => {
 	describe( 'addTransforms()', () => {
 		it( 'should not preserve allowedBlocks in wrapping transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -53,6 +54,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in one-to-many transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -83,6 +85,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-one transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -114,6 +117,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-many transforms with different counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -155,6 +159,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should preserve allowedBlocks in many-to-many transforms with same counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -194,6 +199,7 @@ describe( 'allowedBlocks', () => {
 
 		it( "should filter allowedBlocks based on destination block's allowedBlocks", () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 				allowedBlocks: [ 'core/paragraph' ],
@@ -227,6 +233,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not override existing allowedBlocks in target block', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -253,6 +260,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks when target block does not support allowedBlocks', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 

package/src/hooks/test/auto-inspector-controls.js

@@ -24,6 +24,7 @@ describe( 'auto-inspector-controls', () => {
 	describe( 'hasSupport()', () => {
 		it( 'should return false for blocks without __experimentalAutoInspectorControl markers', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {
@@ -42,6 +43,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return true for blocks with __experimentalAutoInspectorControl markers', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {
@@ -71,6 +73,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return false for blocks with no attributes', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				edit: () => null,
@@ -84,6 +87,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return true when at least one attribute has __experimentalAutoInspectorControl', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {

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

@@ -39,6 +39,7 @@ function addUseSettingFilter( callback ) {
 
 describe( 'useBlockProps', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: () => noop,
 		category: 'text',
 		title: 'font size title',

package/src/hooks/test/metadata.js

@@ -174,6 +174,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve custom name metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 			const source = [
@@ -199,6 +200,7 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve custom name metadata when target block does not support renaming', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
 					renaming: false,
@@ -226,6 +228,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve block visibility metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 
@@ -252,6 +255,7 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve block visibility metadata when target block does not support it', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
 					visibility: false,

package/src/hooks/test/text-align.js

@@ -16,6 +16,7 @@ const noop = () => {};
 
 describe( 'textAlign', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: noop,
 		category: 'text',
 		title: 'block title',