@wordpress/block-editor 15.10.1-next.79a2f3cdd.0 → 15.10.1-next.ba3aee3a2.0

package/src/components/block-visibility/use-block-visibility.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+
+/**
+ * Determines if a block should be hidden based on visibility settings.
+ *
+ * Priority:
+ * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
+ * 2. Actual window size (Desktop mode) - uses viewport detection
+ *
+ * @param {Object}         options                 Parameters to avoid extra store subscriptions.
+ * @param {Object|boolean} options.blockVisibility Block visibility metadata.
+ * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
+ * @return {Object} Object with `isBlockCurrentlyHidden` boolean property.
+ */
+export function useBlockVisibility( options = {} ) {
+	const {
+		blockVisibility = undefined,
+		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+	} = options;
+
+	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
+	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
+
+	/*
+	 * When Desktop is selected, use actual viewport detection.
+	 * When Mobile/Tablet is selected, override with device type.
+	 */
+	const currentViewport = useMemo( () => {
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.value ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.value;
+		}
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.value ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.value;
+		}
+		if ( ! isLargerThanMobile ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.value;
+		}
+		if ( isLargerThanMobile && ! isLargerThanTablet ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.value;
+		}
+		return BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+	}, [ deviceType, isLargerThanMobile, isLargerThanTablet ] );
+
+	// Determine if block is currently hidden.
+	const isBlockCurrentlyHidden = useMemo( () => {
+		if ( blockVisibility === false ) {
+			return true;
+		}
+
+		if (
+			window.__experimentalHideBlocksBasedOnScreenSize &&
+			blockVisibility?.[ currentViewport ] === false
+		) {
+			return true;
+		}
+
+		return false;
+	}, [ blockVisibility, currentViewport ] );
+
+	return useMemo(
+		() => ( { isBlockCurrentlyHidden, currentViewport } ),
+		[ isBlockCurrentlyHidden, currentViewport ]
+	);
+}

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

@@ -15,7 +15,6 @@ const ContentTab = ( { contentClientIds } ) => {
 	}
 
 	const shouldShowBlockFields =
-		window?.__experimentalContentOnlyPatternInsertion &&
 		window?.__experimentalContentOnlyInspectorFields;
 
 	return (

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

@@ -19,7 +19,6 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {
 	useCallback,
-	useEffect,
 	useMemo,
 	useRef,
 	useReducer,
@@ -118,7 +117,8 @@ function ListViewComponent(
 		useListViewClientIds( { blocks, rootClientId } );
 	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
-	const { getBlock } = useSelect( blockEditorStore );
+	const { getBlock, getSelectedBlockClientIds } =
+		useSelect( blockEditorStore );
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } =
@@ -172,22 +172,26 @@ function ListViewComponent(
 		selectBlock: selectEditorBlock,
 	} );
 
+	const focusSelectedBlock = useCallback(
+		( node ) => {
+			const [ firstSelectedClientId ] = getSelectedBlockClientIds();
+			// If a blocks are already selected when the list view is initially
+			// mounted, shift focus to the first selected block.
+			if ( firstSelectedClientId && node ) {
+				focusListItem( firstSelectedClientId, node );
+			}
+		},
+		[ getSelectedBlockClientIds ]
+	);
+
 	const treeGridRef = useMergeRefs( [
 		clipBoardRef,
+		focusSelectedBlock,
 		elementRef,
 		dropZoneRef,
 		ref,
 	] );
 
-	useEffect( () => {
-		// If a blocks are already selected when the list view is initially
-		// mounted, shift focus to the first selected block.
-		if ( selectedClientIds?.length ) {
-			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
-		}
-		// Only focus on the selected item when the list view is mounted.
-	}, [] );
-
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {

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

@@ -81,33 +81,41 @@ export function getCommonDepthClientIds(
  * @param {?HTMLElement} treeGridElement The container element to search within.
  */
 export function focusListItem( focusClientId, treeGridElement ) {
-	const getFocusElement = () => {
-		const row = treeGridElement?.querySelector(
-			`[role=row][data-block="${ focusClientId }"]`
-		);
-		if ( ! row ) {
-			return null;
+	if ( ! treeGridElement ) {
+		return;
+	}
+
+	const selector = `[role=row][data-block="${ focusClientId }"]`;
+
+	return new Promise( ( resolve ) => {
+		if ( treeGridElement.querySelector( selector ) ) {
+			return resolve( treeGridElement.querySelector( selector ) );
 		}
-		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-		return focus.focusable.find( row )[ 0 ];
-	};
 
-	let focusElement = getFocusElement();
-	if ( focusElement ) {
-		focusElement.focus();
-	} else {
-		// The element hasn't been painted yet. Defer focusing on the next frame.
-		// This could happen when all blocks have been deleted and the default block
-		// hasn't been added to the editor yet.
-		window.requestAnimationFrame( () => {
-			focusElement = getFocusElement();
-
-			// Ignore if the element still doesn't exist.
-			if ( focusElement ) {
-				focusElement.focus();
+		let timer = null;
+		// Wait for the element to be added to the DOM.
+		const observer = new window.MutationObserver( () => {
+			if ( treeGridElement.querySelector( selector ) ) {
+				clearTimeout( timer );
+				observer.disconnect();
+				resolve( treeGridElement.querySelector( selector ) );
 			}
 		} );
-	}
+
+		observer.observe( treeGridElement, {
+			childList: true,
+			subtree: true,
+		} );
+
+		// Stop trying after 3 seconds.
+		timer = setTimeout( () => {
+			observer.disconnect();
+			resolve( null );
+		}, 3000 );
+	} ).then( ( element ) => {
+		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+		focus.focusable.find( element )?.[ 0 ]?.focus();
+	} );
 }
 
 /**

package/src/components/rich-text/event-listeners/input-rules.js

@@ -99,6 +99,7 @@ export default ( props ) => ( element ) => {
 			__unstableAllowPrefixTransformations,
 			formatTypes,
 			registry,
+			onReplace,
 		} = props.current;
 
 		// Only run input rules when inserting text.
@@ -111,6 +112,22 @@ export default ( props ) => ( element ) => {
 		}
 
 		const value = getValue();
+
+		const transforms = getBlockTransforms( 'from' ).filter(
+			( transform ) => transform.type === 'input'
+		);
+		const transformation = findTransform( transforms, ( item ) => {
+			return item.regExp.test( value.text );
+		} );
+
+		if ( transformation ) {
+			onReplace( transformation.transform() );
+			registry
+				.dispatch( blockEditorStore )
+				.__unstableMarkAutomaticChange();
+			return;
+		}
+
 		const transformed = formatTypes.reduce(
 			( accumulator, { __unstableInputRule } ) => {
 				if ( __unstableInputRule ) {

package/src/hooks/block-fields/index.js

@@ -348,7 +348,6 @@ const withBlockFields = createHigherOrderComponent(
 		} = useContext( PrivateBlockContext );
 
 		const shouldShowBlockFields =
-			window?.__experimentalContentOnlyPatternInsertion &&
 			window?.__experimentalContentOnlyInspectorFields;
 		const blockTypeFields = blockType?.[ fieldsKey ];
 

package/src/hooks/fit-text.js

@@ -13,7 +13,7 @@ import {
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 const EMPTY_OBJECT = {};
-const MIN_FONT_SIZE_FOR_WARNING = 6;
+const MIN_FONT_SIZE_FOR_WARNING = 12;
 
 /**
  * Internal dependencies