@wordpress/block-editor 15.12.0 → 15.12.1-next.v.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.12.0",
+	"version": "15.12.1-next.v.0+5aba098fc",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.39.0",
-		"@wordpress/api-fetch": "^7.39.0",
-		"@wordpress/base-styles": "^6.15.0",
-		"@wordpress/blob": "^4.39.0",
-		"@wordpress/block-serialization-default-parser": "^5.39.0",
-		"@wordpress/blocks": "^15.12.0",
-		"@wordpress/commands": "^1.39.0",
-		"@wordpress/components": "^32.1.0",
-		"@wordpress/compose": "^7.39.0",
-		"@wordpress/data": "^10.39.0",
-		"@wordpress/dataviews": "^11.3.0",
-		"@wordpress/date": "^5.39.0",
-		"@wordpress/deprecated": "^4.39.0",
-		"@wordpress/dom": "^4.39.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/escape-html": "^3.39.0",
-		"@wordpress/global-styles-engine": "^1.6.0",
-		"@wordpress/hooks": "^4.39.0",
-		"@wordpress/html-entities": "^4.39.0",
-		"@wordpress/i18n": "^6.12.0",
-		"@wordpress/icons": "^11.6.0",
-		"@wordpress/image-cropper": "^1.3.0",
-		"@wordpress/interactivity": "^6.39.0",
-		"@wordpress/is-shallow-equal": "^5.39.0",
-		"@wordpress/keyboard-shortcuts": "^5.39.0",
-		"@wordpress/keycodes": "^4.39.0",
-		"@wordpress/notices": "^5.39.0",
-		"@wordpress/preferences": "^4.39.0",
-		"@wordpress/priority-queue": "^3.39.0",
-		"@wordpress/private-apis": "^1.39.0",
-		"@wordpress/rich-text": "^7.39.0",
-		"@wordpress/style-engine": "^2.39.0",
-		"@wordpress/token-list": "^3.39.0",
-		"@wordpress/upload-media": "^0.24.0",
-		"@wordpress/url": "^4.39.0",
-		"@wordpress/warning": "^3.39.0",
-		"@wordpress/wordcount": "^4.39.0",
+		"@wordpress/a11y": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/api-fetch": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/base-styles": "^6.15.1-next.v.0+5aba098fc",
+		"@wordpress/blob": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/block-serialization-default-parser": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/blocks": "^15.12.1-next.v.0+5aba098fc",
+		"@wordpress/commands": "^1.39.1-next.v.0+5aba098fc",
+		"@wordpress/components": "^32.1.1-next.v.0+5aba098fc",
+		"@wordpress/compose": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/data": "^10.39.1-next.v.0+5aba098fc",
+		"@wordpress/dataviews": "^11.4.1-next.v.0+5aba098fc",
+		"@wordpress/date": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/deprecated": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/dom": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/element": "^6.39.1-next.v.0+5aba098fc",
+		"@wordpress/escape-html": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/global-styles-engine": "^1.6.1-next.v.0+5aba098fc",
+		"@wordpress/hooks": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/html-entities": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/i18n": "^6.12.1-next.v.0+5aba098fc",
+		"@wordpress/icons": "^11.6.1-next.v.0+5aba098fc",
+		"@wordpress/image-cropper": "^1.3.1-next.v.0+5aba098fc",
+		"@wordpress/interactivity": "^6.39.1-next.v.0+5aba098fc",
+		"@wordpress/is-shallow-equal": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/keyboard-shortcuts": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/keycodes": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/notices": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/preferences": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/priority-queue": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/private-apis": "^1.39.1-next.v.0+5aba098fc",
+		"@wordpress/rich-text": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/style-engine": "^2.39.1-next.v.0+5aba098fc",
+		"@wordpress/token-list": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/upload-media": "^0.24.1-next.v.0+5aba098fc",
+		"@wordpress/url": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/warning": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/wordcount": "^4.39.1-next.v.0+5aba098fc",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
+	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
 }

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

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
+	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { __unstableMotion as motion } from '@wordpress/components';
@@ -24,6 +25,7 @@ import BlockStyles from '../block-styles';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
@@ -145,30 +147,29 @@ function BlockInspector() {
 				renderedBlockClientId
 			);
 
-			// Temporary workaround for issue #71991
-			// Exclude Navigation block children from Content sidebar until proper
-			// drill-down experience is implemented (see #65699)
-			// This prevents a poor UX where all Nav block sub-items are shown
-			// when the parent block is in contentOnly mode.
-			// Build a Set of all navigation block descendants for efficient lookup
-			const navigationDescendants = new Set();
+			// Exclude items from the content tab that are already present in the
+			// List View tab.
+			const listViewDescendants = new Set();
 			descendants.forEach( ( clientId ) => {
-				if ( getBlockName( clientId ) === 'core/navigation' ) {
-					const navChildren = getClientIdsOfDescendants( clientId );
-					navChildren.forEach( ( childId ) =>
-						navigationDescendants.add( childId )
+				const blockName = getBlockName( clientId );
+				// Navigation block doesn't have List View block support, but
+				// it does have a custom implementation that is shown within
+				// patterns, so it's included in this condition.
+				if (
+					blockName === 'core/navigation' ||
+					hasBlockSupport( blockName, 'listView' )
+				) {
+					const listViewChildren =
+						getClientIdsOfDescendants( clientId );
+					listViewChildren.forEach( ( childId ) =>
+						listViewDescendants.add( childId )
 					);
 				}
 			} );
 
 			return descendants.filter( ( current ) => {
-				// Exclude navigation block children
-				if ( navigationDescendants.has( current ) ) {
-					return false;
-				}
-
 				return (
-					getBlockName( current ) !== 'core/list-item' &&
+					! listViewDescendants.has( current ) &&
 					getBlockEditingMode( current ) === 'contentOnly'
 				);
 			} );
@@ -369,6 +370,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
+			<InspectorControlsLastItem.Slot />
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

package/src/components/inspector-controls/last-item.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( Symbol( 'InspectorControlsLastItem' ) );
+
+const InspectorControlsLastItem = ( props ) => {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+InspectorControlsLastItem.Slot = function InspectorControlsLastItemSlot(
+	props
+) {
+	return <Slot { ...props } />;
+};
+
+export default InspectorControlsLastItem;

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

@@ -23,14 +23,14 @@ function SectionBlockColorControls( {
 	const settings = useBlockSettings( blockName );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const { hasButton, hasHeading } = useSelect(
+	const { hasButtons, hasHeading } = useSelect(
 		( select ) => {
 			const blockNames =
 				select( blockEditorStore ).getBlockNamesByClientId(
 					contentClientIds
 				);
 			return {
-				hasButton: blockNames.includes( 'core/button' ),
+				hasButtons: blockNames.includes( 'core/buttons' ),
 				hasHeading: blockNames.includes( 'core/heading' ),
 			};
 		},
@@ -52,7 +52,7 @@ function SectionBlockColorControls( {
 			defaultControls={ {
 				text: true,
 				background: true,
-				button: hasButton,
+				button: hasButtons,
 				heading: hasHeading,
 			} }
 		/>

package/src/hooks/anchor.js

@@ -64,7 +64,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				help={
 					<>
 						{ __(
-							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
+							'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
 						) }
 						{ isWeb && (
 							<>

package/src/hooks/grid-visualizer.js

@@ -10,19 +10,24 @@ import { useSelect } from '@wordpress/data';
  */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
+import useBlockVisibility from '../components/block-visibility/use-block-visibility';
+import { deviceTypeKey } from '../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 function GridLayoutSync( props ) {
 	useGridLayoutSync( props );
 }
 
 function GridTools( { clientId, layout } ) {
-	const isVisible = useSelect(
+	const { isVisible, blockVisibility, deviceType } = useSelect(
 		( select ) => {
 			const {
 				isBlockSelected,
 				isDraggingBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
+				getBlockAttributes,
+				getSettings,
 			} = select( blockEditorStore );
 
 			// These calls are purposely ordered from least expensive to most expensive.
@@ -32,18 +37,32 @@ function GridTools( { clientId, layout } ) {
 				getTemplateLock( clientId ) ||
 				getBlockEditingMode( clientId ) !== 'default'
 			) {
-				return false;
+				return { isVisible: false };
 			}
 
-			return true;
+			const attributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+
+			return {
+				isVisible: true,
+				blockVisibility: attributes?.metadata?.blockVisibility,
+				deviceType:
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+			};
 		},
 		[ clientId ]
 	);
 
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />
-			{ isVisible && (
+			{ isVisible && ! isBlockCurrentlyHidden && (
 				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
 			) }
 		</>

package/src/hooks/layout-child.js

@@ -16,6 +16,9 @@ import {
 	GridItemResizer,
 	GridItemMovers,
 } from '../components/grid';
+import useBlockVisibility from '../components/block-visibility/use-block-visibility';
+import { deviceTypeKey } from '../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
@@ -199,12 +202,20 @@ function GridTools( {
 	isManualPlacement,
 	parentLayout,
 } ) {
-	const { rootClientId, isVisible } = useSelect(
+	const {
+		rootClientId,
+		isVisible,
+		parentBlockVisibility,
+		blockBlockVisibility,
+		deviceType,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getTemplateLock,
+				getBlockAttributes,
+				getSettings,
 			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( clientId );
@@ -219,21 +230,46 @@ function GridTools( {
 				};
 			}
 
+			const parentAttributes = getBlockAttributes( _rootClientId );
+			const blockAttributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+
 			return {
 				rootClientId: _rootClientId,
 				isVisible: true,
+				parentBlockVisibility:
+					parentAttributes?.metadata?.blockVisibility,
+				blockBlockVisibility:
+					blockAttributes?.metadata?.blockVisibility,
+				deviceType:
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
 			};
 		},
 		[ clientId ]
 	);
 
+	const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } =
+		useBlockVisibility( {
+			blockVisibility: parentBlockVisibility,
+			deviceType,
+		} );
+
+	const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } =
+		useBlockVisibility( {
+			blockVisibility: blockBlockVisibility,
+			deviceType,
+		} );
+
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
 	const [ resizerBounds, setResizerBounds ] = useState();
 
-	if ( ! isVisible ) {
+	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
 		return null;
 	}
 
+	const showResizer = allowSizingOnChildren && ! isBlockItselfCurrentlyHidden;
+
 	function updateLayout( layout ) {
 		setAttributes( {
 			style: {
@@ -253,7 +289,7 @@ function GridTools( {
 				contentRef={ setResizerBounds }
 				parentLayout={ parentLayout }
 			/>
-			{ allowSizingOnChildren && (
+			{ showResizer && (
 				<GridItemResizer
 					clientId={ clientId }
 					// Don't allow resizing beyond the grid visualizer.

package/src/private-apis.js

@@ -13,6 +13,7 @@ import {
 	normalizeString,
 } from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
+import InspectorControlsLastItem from './components/inspector-controls/last-item';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
@@ -79,6 +80,7 @@ lock( privateApis, {
 	normalizeString,
 	PrivateListView,
 	ResizableBoxPopover,
+	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
 	BlockQuickNavigation,