@wordpress/block-editor 15.11.0 → 15.11.1-next.v.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/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;
 		}
 

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/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/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/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'
 	);