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

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-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

@@ -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/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/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/store/actions.js

@@ -248,6 +248,13 @@ export const selectPreviousBlock =
 			const firstParentClientId = select.getBlockRootClientId( clientId );
 			if ( firstParentClientId ) {
 				dispatch.selectBlock( firstParentClientId, -1 );
+			} else {
+				// Fallback to next block when no previous block and no parent
+				const nextBlockClientId =
+					select.getNextBlockClientId( clientId );
+				if ( nextBlockClientId ) {
+					dispatch.selectBlock( nextBlockClientId, 0 );
+				}
 			}
 		}
 	};

package/src/store/private-selectors.js

@@ -523,7 +523,6 @@ export function isSectionBlock( state, clientId ) {
 
 	if (
 		( attributes?.metadata?.patternName || isTemplatePart ) &&
-		!! window?.__experimentalContentOnlyPatternInsertion &&
 		! isIsolatedEditor
 	) {
 		return true;

package/src/store/reducer.js

@@ -2283,22 +2283,17 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 
 	// Use array.from for better back compat. Older versions of the iterator returned
 	// from `keys()` didn't have the `filter` method.
-	const unsyncedPatternClientIds =
-		!! window?.__experimentalContentOnlyPatternInsertion &&
-		! isIsolatedEditor
-			? Array.from( state.blocks.attributes.keys() ).filter(
-					( clientId ) =>
-						state.blocks.attributes.get( clientId )?.metadata
-							?.patternName
-			  )
-			: [];
+	const unsyncedPatternClientIds = isIsolatedEditor
+		? []
+		: Array.from( state.blocks.attributes.keys() ).filter(
+				( clientId ) =>
+					state.blocks.attributes.get( clientId )?.metadata
+						?.patternName
+		  );
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
-		...( window?.__experimentalContentOnlyPatternInsertion &&
-		! isIsolatedEditor
-			? templatePartClientIds
-			: [] ),
+		...( isIsolatedEditor ? [] : templatePartClientIds ),
 	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {
@@ -2323,11 +2318,9 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 				return;
 			}
 
-			// For the content only pattern experiment, disable blocks that are outside of the edited section.
-			if ( window?.__experimentalContentOnlyPatternInsertion ) {
-				derivedBlockEditingModes.set( clientId, 'disabled' );
-				return;
-			}
+			// Disable blocks that are outside of the edited section.
+			derivedBlockEditingModes.set( clientId, 'disabled' );
+			return;
 		}
 
 		// If the block already has an explicit block editing mode set,

package/src/store/selectors.js

@@ -1681,6 +1681,11 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
+	// Disable insertion in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	if ( ! isBlockVisibleInTheInserter( state, blockName, rootClientId ) ) {
 		return false;
 	}
@@ -1868,6 +1873,11 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
  * @return {boolean} Whether the given block is allowed to be removed.
  */
 export function canRemoveBlock( state, clientId ) {
+	// Disable removal in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1930,6 +1940,11 @@ export function canRemoveBlocks( state, clientIds ) {
  * @return {boolean} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId ) {
+	// Disable moving in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1991,6 +2006,11 @@ export function canMoveBlocks( state, clientIds ) {
  * @return {boolean} Whether the given block is allowed to be edited.
  */
 export function canEditBlock( state, clientId ) {
+	// Disable editing in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -2011,6 +2031,11 @@ export function canEditBlock( state, clientId ) {
  * @return {boolean} Whether a given block type can be locked/unlocked.
  */
 export function canLockBlockType( state, nameOrType ) {
+	// Disable locking in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	if ( ! hasBlockSupport( nameOrType, 'lock', true ) ) {
 		return false;
 	}