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

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -27,6 +27,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
+		canEditBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
 
@@ -53,17 +54,16 @@ function getBlockIconVariant( { select, clientIds } ) {
 			0
 	);
 	const canRemove = canRemoveBlocks( clientIds );
-
+	const canEdit = clientIds.every( ( clientId ) => canEditBlock( clientId ) );
 	const isDefaultEditingMode =
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
-	const _hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		hasPatternNameInSelection;
+	const _hideTransformsForSections = hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
 		( hasBlockStyles || canRemove ) &&
-		! hasTemplateLock;
+		! hasTemplateLock &&
+		canEdit;
 
 	const _showPatternOverrides = hasPatternOverrides && hasParentPattern;
 
@@ -84,11 +84,7 @@ function getBlockIcon( { select, clientIds } ) {
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
 	const blockAttributes = getBlockAttributes( firstClientId );
-	if (
-		_isSingleBlock &&
-		blockAttributes?.metadata?.patternName &&
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( _isSingleBlock && blockAttributes?.metadata?.patternName ) {
 		return symbol;
 	}
 

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

@@ -116,14 +116,8 @@ export function PrivateBlockToolbar( {
 		);
 
 		const _isZoomOut = isZoomOut();
-
 		const _isSectionBlock = isSectionBlock( selectedBlockClientId );
-
-		// The switch style button appears more prominently with the
-		// content only pattern experiment.
-		const _showSwitchSectionStyleButton =
-			window?.__experimentalContentOnlyPatternInsertion &&
-			( _isZoomOut || _isSectionBlock );
+		const _showSwitchSectionStyleButton = _isZoomOut || _isSectionBlock;
 
 		return {
 			blockClientId: selectedBlockClientId,

package/src/components/block-variation-transforms/index.js

@@ -205,10 +205,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	const hideVariationsForSections =
-		window?.__experimentalContentOnlyPatternInsertion && isSection;
-
-	if ( ! variations?.length || isContentOnly || hideVariationsForSections ) {
+	if ( ! variations?.length || isContentOnly || isSection ) {
 		return null;
 	}
 

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/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/index.js

@@ -101,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

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

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/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/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/custom-css.js

@@ -132,7 +132,7 @@ function useBlockProps( { style } ) {
 	}
 
 	return {
-		className: customCSSIdentifier,
+		className: `has-custom-css ${ customCSSIdentifier }`,
 	};
 }
 

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/index.js

@@ -32,7 +32,6 @@ 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';
@@ -53,7 +52,6 @@ createBlockEditFilter(
 		fitText,
 		position,
 		layout,
-		contentLockUI,
 		blockHooks,
 		blockBindingsPanel,
 		childLayout,

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,