@wordpress/block-editor 15.11.0 → 15.12.0

package/src/components/global-styles/shadow-panel-components.js

@@ -136,7 +136,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 }
 
 function renderShadowToggle( shadow, onShadowChange ) {
-	return ( { onToggle, isOpen } ) => {
+	return function ShadowToggle( { onToggle, isOpen } ) {
 		const shadowButtonRef = useRef( undefined );
 
 		const toggleProps = {

package/src/components/global-styles/style.scss

@@ -100,11 +100,15 @@
 	}
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-input textarea {
-	font-family: $editor_html_font;
-	// CSS input is always LTR regardless of language.
-	/*rtl:ignore*/
-	direction: ltr;
+.block-editor-global-styles-advanced-panel__custom-css-input {
+	margin-bottom: $grid-unit-20;
+
+	textarea {
+		font-family: $editor_html_font;
+		// CSS input is always LTR regardless of language.
+		/*rtl:ignore*/
+		direction: ltr;
+	}
 }
 
 .block-editor-panel-duotone-settings__reset {

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

@@ -3,7 +3,10 @@
  */
 import { __experimentalUseGradient } from './use-gradient';
 
-export const withGradient = ( WrappedComponent ) => ( props ) => {
-	const { gradientValue } = __experimentalUseGradient();
-	return <WrappedComponent { ...props } gradientValue={ gradientValue } />;
-};
+export const withGradient = ( WrappedComponent ) =>
+	function WithGradient( props ) {
+		const { gradientValue } = __experimentalUseGradient();
+		return (
+			<WrappedComponent { ...props } gradientValue={ gradientValue } />
+		);
+	};

package/src/components/inner-blocks/test/index.js

@@ -27,6 +27,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should return element as string, with inner blocks', () => {
 		registerBlockType( 'core/fruit', {
+			apiVersion: 3,
 			category: 'text',
 
 			title: 'fruit',
@@ -62,6 +63,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should force serialize for invalid block with inner blocks', () => {
 		const blockType = {
+			apiVersion: 3,
 			attributes: {
 				throw: {
 					type: 'boolean',

package/src/components/inserter/index.js

@@ -176,6 +176,7 @@ class Inserter extends Component {
 				onSelect={ () => {
 					onClose();
 				} }
+				onClose={ onClose }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
 				isAppender={ isAppender }

package/src/components/inserter/stories/index.story.jsx

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+
 /**
  * Internal dependencies
  */
@@ -8,13 +13,17 @@ import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };
 
+// For the purpose of this story, we need to register the core blocks samples.
+registerCoreBlocks();
+
+const wrapperStyle = {
+	margin: '24px',
+	height: 400,
+	border: '1px solid #f3f3f3',
+	display: 'inline-block',
+};
+
 export const LibraryWithoutPatterns = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
 	return (
 		<ExperimentalBlockEditorProvider>
 			<div style={ wrapperStyle }>
@@ -25,12 +34,6 @@ export const LibraryWithoutPatterns = () => {
 };
 
 export const LibraryWithPatterns = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
 	return (
 		<ExperimentalBlockEditorProvider
 			settings={ {
@@ -46,12 +49,6 @@ export const LibraryWithPatterns = () => {
 };
 
 export const LibraryWithPatternsAndReusableBlocks = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
 	return (
 		<ExperimentalBlockEditorProvider
 			settings={ {
@@ -67,13 +64,23 @@ export const LibraryWithPatternsAndReusableBlocks = () => {
 	);
 };
 
+export const FullInserter = () => {
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<Inserter />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
 export const QuickInserter = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
 	return (
 		<ExperimentalBlockEditorProvider
 			settings={ {

package/src/components/inspector-controls/fill.js

@@ -19,6 +19,9 @@ import {
 } from '../block-edit/context';
 import groups from './groups';
 
+const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
+const TEMPLATE_PART_GROUPS = [ 'default', 'settings', 'advanced' ];
+
 export default function InspectorControlsFill( {
 	children,
 	group = 'default',
@@ -43,13 +46,30 @@ export default function InspectorControlsFill( {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	const shouldDisplayForPatternEditing =
-		context[ mayDisplayPatternEditingControlsKey ] &&
-		( group === 'list' || group === 'content' );
 
+	// During pattern editing:
+	// - All blocks can show pattern editing groups (content, list).
+	// - Template parts can show a settings tab (default, settings, advanced groups).
+	// - Other blocks cannot show a settings tab.
+	if ( context[ mayDisplayPatternEditingControlsKey ] ) {
+		// Template parts are allowed to show a settings tab to allow access to the
+		// 'Design' and 'Advanced' panels.
+		const isTemplatePart = context.name === 'core/template-part';
+		const isTemplatePartGroup = TEMPLATE_PART_GROUPS.includes( group );
+		const isPatternEditingGroup = PATTERN_EDITING_GROUPS.includes( group );
+
+		const canShowGroup =
+			( isTemplatePart && isTemplatePartGroup ) || isPatternEditingGroup;
+
+		if ( ! canShowGroup ) {
+			return null;
+		}
+	}
+
+	// Outside pattern editing, use the standard rules for displaying controls.
 	if (
-		! context[ mayDisplayControlsKey ] &&
-		! shouldDisplayForPatternEditing
+		! context[ mayDisplayPatternEditingControlsKey ] &&
+		! context[ mayDisplayControlsKey ]
 	) {
 		return null;
 	}

package/src/components/inspector-controls/index.js

@@ -12,7 +12,7 @@ InspectorControls.Slot = InspectorControlsSlot;
 export const InspectorAdvancedControls = ( props ) => {
 	return <InspectorControlsFill { ...props } group="advanced" />;
 };
-InspectorAdvancedControls.Slot = ( props ) => {
+InspectorAdvancedControls.Slot = function Slot( props ) {
 	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';

package/src/components/inspector-controls-tabs/index.js

@@ -44,7 +44,11 @@ export default function InspectorControlsTabs( {
 
 	// Auto-select first available tab unless user has made a selection
 	useEffect( () => {
-		if ( ! tabs?.length || hasUserSelectionRef.current ) {
+		if (
+			! tabs?.length ||
+			( hasUserSelectionRef.current &&
+				tabs.some( ( tab ) => tab.name === selectedTabId ) )
+		) {
 			return;
 		}
 
@@ -97,8 +101,8 @@ export default function InspectorControlsTabs( {
 					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
-					<InspectorControls.Slot group="content" />
 					<ContentTab contentClientIds={ contentClientIds } />
+					<InspectorControls.Slot group="content" />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -71,14 +71,13 @@ const StylesTab = ( {
 	return (
 		<>
 			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
-			{ isSectionBlock &&
-				window?.__experimentalContentOnlyPatternInsertion && (
-					<SectionBlockColorControls
-						blockName={ blockName }
-						clientId={ clientId }
-						contentClientIds={ contentClientIds }
-					/>
-				) }
+			{ isSectionBlock && (
+				<SectionBlockColorControls
+					blockName={ blockName }
+					clientId={ clientId }
+					contentClientIds={ contentClientIds }
+				/>
+			) }
 			{ ! isSectionBlock && (
 				<>
 					<InspectorControls.Slot

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -104,10 +104,9 @@ export default function useInspectorControlsTabs(
 	}
 
 	if (
-		( settingsFills.length ||
-			// Advanded fills who up in settings tab if available or they blend into the default tab, if there's only one tab.
-			( advancedFills.length && ( hasContentTab || hasListFills ) ) ) &&
-		! isSectionBlock
+		settingsFills.length ||
+		// Advanced fills show up in settings tab if available or they blend into the default tab, if there's only one tab.
+		( advancedFills.length && ( hasContentTab || hasListFills ) )
 	) {
 		tabs.push( TAB_SETTINGS );
 	}

package/src/components/link-control/test/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	fireEvent,
-	render,
+	render as baseRender,
 	screen,
 	waitFor,
 	within,
@@ -13,6 +13,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
+import { SlotFillProvider } from '@wordpress/components';
 import { useState, createElement } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -79,6 +80,10 @@ afterEach( () => {
 	mockFetchRichUrlData?.mockReset(); // Conditionally reset as it may NOT be a mock.
 } );
 
+function render( ui ) {
+	return baseRender( ui, { wrapper: SlotFillProvider } );
+}
+
 /**
  * Workaround to trigger an arrow up keypress event.
  *

package/src/components/list-view/block-select-button.js

@@ -21,7 +21,6 @@ import {
 } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -61,30 +60,22 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, hasPatternName } =
-		useSelect(
-			( select ) => {
-				const { getBlockName, getBlockAttributes } =
-					select( blockEditorStore );
-				const { areBlocksHiddenAnywhere } = unlock(
-					select( blockEditorStore )
-				);
-				const blockAttributes = getBlockAttributes( clientId );
-				return {
-					canToggleBlockVisibility: hasBlockSupport(
-						getBlockName( clientId ),
-						'visibility',
-						true
-					),
-					isBlockHidden: areBlocksHiddenAnywhere( [ clientId ] ),
-					hasPatternName: !! blockAttributes?.metadata?.patternName,
-				};
-			},
-			[ clientId ]
-		);
+	const { isBlockHidden, hasPatternName } = useSelect(
+		( select ) => {
+			const {
+				isBlockHiddenAnywhere: _isBlockHidden,
+				getBlockAttributes,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				isBlockHidden: _isBlockHidden( clientId ),
+				hasPatternName:
+					!! getBlockAttributes( clientId )?.metadata?.patternName,
+			};
+		},
+		[ clientId ]
+	);
+
 	const shouldShowLockIcon = isLocked;
-	const shouldShowBlockVisibilityIcon =
-		canToggleBlockVisibility && isBlockHidden;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
@@ -170,7 +161,7 @@ function ListViewBlockSelectButton(
 						) ) }
 					</span>
 				) : null }
-				{ shouldShowBlockVisibilityIcon && (
+				{ isBlockHidden && (
 					<span className="block-editor-list-view-block-select-button__block-visibility">
 						<Icon icon={ unseen } />
 					</span>

package/src/components/list-view/block.js

@@ -25,7 +25,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -53,8 +53,9 @@ import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
-import { cleanEmptyObject } from '../../hooks/utils';
-import { BlockVisibilityModal } from '../block-visibility';
+import { useBlockVisibility, BlockVisibilityModal } from '../block-visibility';
+import { deviceTypeKey } from '../../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../block-visibility/constants';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -98,7 +99,6 @@ function ListViewBlock( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	const debouncedToggleBlockHighlight = useDebounce(
@@ -125,29 +125,52 @@ function ListViewBlock( {
 
 	const pasteStyles = usePasteStyles();
 
-	const { block, blockName, allowRightClickOverrides, isBlockHidden } =
+	const { block, blockName, allowRightClickOverrides, selectedDeviceType } =
 		useSelect(
 			( select ) => {
-				const {
-					getBlock,
-					getBlockName: _getBlockName,
-					getSettings,
-				} = select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
+				const { getBlock, getBlockName, getSettings } = unlock(
 					select( blockEditorStore )
 				);
 
 				return {
 					block: getBlock( clientId ),
-					blockName: _getBlockName( clientId ),
+					blockName: getBlockName( clientId ),
 					allowRightClickOverrides:
 						getSettings().allowRightClickOverrides,
-					isBlockHidden: _isBlockHidden( clientId ),
+					selectedDeviceType:
+						getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
+						BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
 				};
 			},
 			[ clientId ]
 		);
 
+	// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)
+	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
+		blockVisibility: block?.attributes?.metadata?.blockVisibility,
+		deviceType: selectedDeviceType,
+	} );
+
+	// Determine label based on whether block or parent is hidden
+	const blockVisibilityDescription = useMemo( () => {
+		if ( isBlockCurrentlyHidden ) {
+			if ( block?.attributes?.metadata?.blockVisibility === false ) {
+				return __( 'Block is hidden' );
+			}
+			return sprintf(
+				/* translators: %s: viewport name (Desktop, Tablet, Mobile) */
+				__( 'Block is hidden on %s' ),
+				BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||
+					currentViewport
+			);
+		}
+		return null;
+	}, [
+		isBlockCurrentlyHidden,
+		block?.attributes?.metadata?.blockVisibility,
+		currentViewport,
+	] );
+
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
 		// since that menu is part of the toolbar in the editor canvas.
@@ -387,32 +410,8 @@ function ListViewBlock( {
 				return;
 			}
 
-			if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
-				// Open the visibility breakpoints modal.
-				setVisibilityModalClientIds( blocksToUpdate );
-			} else {
-				const hasHiddenBlock = blocks.some(
-					( blockToUpdate ) =>
-						blockToUpdate.attributes.metadata?.blockVisibility ===
-						false
-				);
-				const attributesByClientId = Object.fromEntries(
-					blocks.map( ( { clientId: mapClientId, attributes } ) => [
-						mapClientId,
-						{
-							metadata: cleanEmptyObject( {
-								...attributes?.metadata,
-								blockVisibility: hasHiddenBlock
-									? undefined
-									: false,
-							} ),
-						},
-					] )
-				);
-				updateBlockAttributes( blocksToUpdate, attributesByClientId, {
-					uniqueByBlock: true,
-				} );
-			}
+			// Open the visibility breakpoints modal.
+			setVisibilityModalClientIds( blocksToUpdate );
 		}
 	}
 
@@ -540,10 +539,6 @@ function ListViewBlock( {
 		isLocked
 	);
 
-	const blockVisibilityDescription = isBlockHidden
-		? __( 'Block is hidden.' )
-		: null;
-
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = clsx(

package/src/components/list-view/utils.js

@@ -113,8 +113,10 @@ export function focusListItem( focusClientId, treeGridElement ) {
 			resolve( null );
 		}, 3000 );
 	} ).then( ( element ) => {
-		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-		focus.focusable.find( element )?.[ 0 ]?.focus();
+		if ( element && element.isConnected ) {
+			// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+			focus.focusable.find( element )?.[ 0 ]?.focus();
+		}
 	} );
 }
 

package/src/components/media-replace-flow/index.js

@@ -239,6 +239,9 @@ const MediaReplaceFlow = ( {
 								{ __( 'Use featured image' ) }
 							</MenuItem>
 						) }
+						{ typeof children === 'function'
+							? children( { onClose } )
+							: children }
 						{ mediaURL && onReset && (
 							<MenuItem
 								onClick={ () => {
@@ -249,9 +252,6 @@ const MediaReplaceFlow = ( {
 								{ __( 'Reset' ) }
 							</MenuItem>
 						) }
-						{ typeof children === 'function'
-							? children( { onClose } )
-							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						<form className="block-editor-media-flow__url-input">

package/src/components/media-replace-flow/test/index.js

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-
+import { SlotFillProvider } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -19,16 +19,18 @@ const noop = () => {};
 function TestWrapper() {
 	const [ mediaURL, setMediaURL ] = useState( 'https://example.media' );
 	return (
-		<MediaReplaceFlow
-			mediaId={ 1 }
-			mediaURL={ mediaURL }
-			allowedTypes={ [ 'png' ] }
-			accept="image/*"
-			onSelect={ noop }
-			onSelectURL={ setMediaURL }
-			onError={ noop }
-			onCloseModal={ noop }
-		/>
+		<SlotFillProvider>
+			<MediaReplaceFlow
+				mediaId={ 1 }
+				mediaURL={ mediaURL }
+				allowedTypes={ [ 'png' ] }
+				accept="image/*"
+				onSelect={ noop }
+				onSelectURL={ setMediaURL }
+				onError={ noop }
+				onCloseModal={ noop }
+			/>
+		</SlotFillProvider>
 	);
 }
 

package/src/components/provider/index.js

@@ -71,18 +71,19 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const mediaUploadSettings = useMediaUploadSettings( _settings );
 
-		let settings = _settings;
-
-		if ( window.__experimentalMediaProcessing && _settings.mediaUpload ) {
-			// Create a new variable so that the original props.settings.mediaUpload is not modified.
-			settings = useMemo(
-				() => ( {
+		const settings = useMemo( () => {
+			if (
+				window.__experimentalMediaProcessing &&
+				_settings?.mediaUpload
+			) {
+				// Create a new object so that the original props.settings.mediaUpload is not modified.
+				return {
 					..._settings,
 					mediaUpload: mediaUpload.bind( null, registry ),
-				} ),
-				[ _settings, registry ]
-			);
-		}
+				};
+			}
+			return _settings;
+		}, [ _settings, registry ] );
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )

package/src/components/provider/test/use-block-sync.js

@@ -39,6 +39,7 @@ const TestWrapper = withRegistryProvider( ( props ) => {
 describe( 'useBlockSync hook', () => {
 	beforeAll( () => {
 		registerBlockType( 'test/test-block', {
+			apiVersion: 3,
 			title: 'Test block',
 			attributes: {
 				foo: { type: 'number' },

package/src/components/provider/with-registry-provider.js

@@ -26,7 +26,7 @@ function getSubRegistry( subRegistries, registry, useSubRegistry ) {
 
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		( { useSubRegistry = true, ...props } ) => {
+		function WithRegistryProvider( { useSubRegistry = true, ...props } ) {
 			const registry = useRegistry();
 			const [ subRegistries ] = useState( () => new WeakMap() );
 			const subRegistry = getSubRegistry(

package/src/components/rich-text/index.js

@@ -583,7 +583,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 				ref={ ref }
 				{ ...contentProps }
 				dangerouslySetInnerHTML={ {
-					__html: valueToHTMLString( value, multiline ),
+					__html: valueToHTMLString( value, multiline ) || '<br>',
 				} }
 			/>
 		);