@wordpress/block-editor 15.23.0 → 16.0.0

package/src/components/text-indent-control/index.js

@@ -22,19 +22,17 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for line text indent.
  *
- * @param {Object}                  props                       Component props.
- * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
- * @param {string}                  props.value                 Currently selected text indent.
- * @param {Function}                props.onChange              Handles change in text indent selection.
- * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
- * @param {boolean}                 props.withSlider            Whether to show the slider control.
- * @param {boolean}                 props.hasBottomMargin       Whether to add bottom margin below the control.
- * @param {string}                  props.help                  Help text to display below the control.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected text indent.
+ * @param {Function}                props.onChange             Handles change in text indent selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {boolean}                 props.withSlider           Whether to show the slider control.
+ * @param {boolean}                 props.hasBottomMargin      Whether to add bottom margin below the control.
+ * @param {string}                  props.help                 Help text to display below the control.
  *
  * @return {Element} Text indent control.
  */
 export default function TextIndentControl( {
-	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -68,8 +66,6 @@ export default function TextIndentControl( {
 	if ( ! withSlider ) {
 		return (
 			<UnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				{ ...otherProps }
 				label={ __( 'Line indent' ) }
 				value={ value }
@@ -89,14 +85,11 @@ export default function TextIndentControl( {
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						__shouldNotWarnDeprecated36pxSize
 						label={ __( 'Line indent' ) }
 						labelPosition="top"
 						hideLabelFromVision
 						value={ value }
 						onChange={ onChange }
-						size={ otherProps.size }
 						units={ units }
 						__unstableInputWidth={ __unstableInputWidth }
 						min={ 0 }
@@ -106,8 +99,6 @@ export default function TextIndentControl( {
 					<FlexItem isBlock>
 						<Spacer marginX={ 2 } marginBottom={ 0 }>
 							<RangeControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Line indent' ) }
 								hideLabelFromVision
 								value={ valueQuantity }

package/src/components/text-transform-control/index.js

@@ -55,7 +55,6 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
 			className={ clsx(
 				'block-editor-text-transform-control',

package/src/components/typewriter/index.js

@@ -3,261 +3,265 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 import { computeCaretRect, getScrollContainer } from '@wordpress/dom';
-import { useSelect } from '@wordpress/data';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
 const isIE = window.navigator.userAgent.indexOf( 'Trident' ) !== -1;
 const arrowKeyCodes = new Set( [ UP, DOWN, LEFT, RIGHT ] );
 const initialTriggerPercentage = 0.75;
 
 export function useTypewriter() {
-	const hasSelectedBlock = useSelect(
-		( select ) => select( blockEditorStore ).hasSelectedBlock(),
-		[]
-	);
+	return useRefEffect( ( node ) => {
+		const { ownerDocument } = node;
+		const { defaultView } = ownerDocument;
 
-	return useRefEffect(
-		( node ) => {
-			if ( ! hasSelectedBlock ) {
+		let scrollResizeRafId;
+		let onKeyDownRafId;
+
+		let caretRect;
+
+		function onScrollResize() {
+			if ( scrollResizeRafId ) {
 				return;
 			}
 
-			const { ownerDocument } = node;
-			const { defaultView } = ownerDocument;
+			scrollResizeRafId = defaultView.requestAnimationFrame( () => {
+				computeCaretRectangle();
+				scrollResizeRafId = null;
+			} );
+		}
 
-			let scrollResizeRafId;
-			let onKeyDownRafId;
+		function onKeyDown( event ) {
+			// Ensure the any remaining request is cancelled.
+			if ( onKeyDownRafId ) {
+				defaultView.cancelAnimationFrame( onKeyDownRafId );
+			}
+
+			// Use an animation frame for a smooth result.
+			onKeyDownRafId = defaultView.requestAnimationFrame( () => {
+				maintainCaretPosition( event );
+				onKeyDownRafId = null;
+			} );
+		}
+
+		/**
+		 * Maintains the scroll position after a selection change caused by a
+		 * keyboard event.
+		 *
+		 * @param {KeyboardEvent} event Keyboard event.
+		 */
+		function maintainCaretPosition( { keyCode } ) {
+			if ( ! isSelectionEligibleForScroll() ) {
+				return;
+			}
 
-			let caretRect;
+			const currentCaretRect = computeCaretRect( defaultView );
+
+			if ( ! currentCaretRect ) {
+				return;
+			}
 
-			function onScrollResize() {
-				if ( scrollResizeRafId ) {
-					return;
-				}
+			// If for some reason there is no position set to be scrolled to, let
+			// this be the position to be scrolled to in the future.
+			if ( ! caretRect ) {
+				caretRect = currentCaretRect;
+				return;
+			}
 
-				scrollResizeRafId = defaultView.requestAnimationFrame( () => {
-					computeCaretRectangle();
-					scrollResizeRafId = null;
-				} );
+			// Even though enabling the typewriter effect for arrow keys results in
+			// a pleasant experience, it may not be the case for everyone, so, for
+			// now, let's disable it.
+			if ( arrowKeyCodes.has( keyCode ) ) {
+				// Reset the caret position to maintain.
+				caretRect = currentCaretRect;
+				return;
 			}
 
-			function onKeyDown( event ) {
-				// Ensure the any remaining request is cancelled.
-				if ( onKeyDownRafId ) {
-					defaultView.cancelAnimationFrame( onKeyDownRafId );
-				}
-
-				// Use an animation frame for a smooth result.
-				onKeyDownRafId = defaultView.requestAnimationFrame( () => {
-					maintainCaretPosition( event );
-					onKeyDownRafId = null;
-				} );
+			const diff = currentCaretRect.top - caretRect.top;
+
+			if ( diff === 0 ) {
+				return;
 			}
 
-			/**
-			 * Maintains the scroll position after a selection change caused by a
-			 * keyboard event.
-			 *
-			 * @param {KeyboardEvent} event Keyboard event.
-			 */
-			function maintainCaretPosition( { keyCode } ) {
-				if ( ! isSelectionEligibleForScroll() ) {
-					return;
-				}
-
-				const currentCaretRect = computeCaretRect( defaultView );
-
-				if ( ! currentCaretRect ) {
-					return;
-				}
-
-				// If for some reason there is no position set to be scrolled to, let
-				// this be the position to be scrolled to in the future.
-				if ( ! caretRect ) {
-					caretRect = currentCaretRect;
-					return;
-				}
-
-				// Even though enabling the typewriter effect for arrow keys results in
-				// a pleasant experience, it may not be the case for everyone, so, for
-				// now, let's disable it.
-				if ( arrowKeyCodes.has( keyCode ) ) {
-					// Reset the caret position to maintain.
-					caretRect = currentCaretRect;
-					return;
-				}
-
-				const diff = currentCaretRect.top - caretRect.top;
-
-				if ( diff === 0 ) {
-					return;
-				}
-
-				const scrollContainer = getScrollContainer( node );
-
-				// The page must be scrollable.
-				if ( ! scrollContainer ) {
-					return;
-				}
-
-				const windowScroll =
-					scrollContainer === ownerDocument.body ||
-					scrollContainer === ownerDocument.documentElement;
-				const scrollY = windowScroll
-					? defaultView.scrollY
-					: scrollContainer.scrollTop;
-				const scrollContainerY = windowScroll
-					? 0
-					: scrollContainer.getBoundingClientRect().top;
-				const relativeScrollPosition = windowScroll
-					? caretRect.top / defaultView.innerHeight
-					: ( caretRect.top - scrollContainerY ) /
-					  ( defaultView.innerHeight - scrollContainerY );
-
-				// If the scroll position is at the start, the active editable element
-				// is the last one, and the caret is positioned within the initial
-				// trigger percentage of the page, do not scroll the page.
-				// The typewriter effect should not kick in until an empty page has been
-				// filled with the initial trigger percentage or the user scrolls
-				// intentionally down.
-				if (
-					scrollY === 0 &&
-					relativeScrollPosition < initialTriggerPercentage &&
-					isLastEditableNode()
-				) {
-					// Reset the caret position to maintain.
-					caretRect = currentCaretRect;
-					return;
-				}
-
-				const scrollContainerHeight = windowScroll
-					? defaultView.innerHeight
-					: scrollContainer.clientHeight;
-
-				// Abort if the target scroll position would scroll the caret out of
-				// view.
-				if (
-					// The caret is under the lower fold.
-					caretRect.top + caretRect.height >
-						scrollContainerY + scrollContainerHeight ||
-					// The caret is above the upper fold.
-					caretRect.top < scrollContainerY
-				) {
-					// Reset the caret position to maintain.
-					caretRect = currentCaretRect;
-					return;
-				}
-
-				if ( windowScroll ) {
-					defaultView.scrollBy( 0, diff );
-				} else {
-					scrollContainer.scrollTop += diff;
-				}
+			const scrollContainer = getScrollContainer( node );
+
+			// The page must be scrollable.
+			if ( ! scrollContainer ) {
+				return;
 			}
 
-			/**
-			 * Adds a `selectionchange` listener to reset the scroll position to be
-			 * maintained.
-			 */
-			function addSelectionChangeListener() {
-				ownerDocument.addEventListener(
-					'selectionchange',
-					computeCaretRectOnSelectionChange
-				);
+			const windowScroll =
+				scrollContainer === ownerDocument.body ||
+				scrollContainer === ownerDocument.documentElement;
+			const scrollY = windowScroll
+				? defaultView.scrollY
+				: scrollContainer.scrollTop;
+			const scrollContainerY = windowScroll
+				? 0
+				: scrollContainer.getBoundingClientRect().top;
+			const relativeScrollPosition = windowScroll
+				? caretRect.top / defaultView.innerHeight
+				: ( caretRect.top - scrollContainerY ) /
+				  ( defaultView.innerHeight - scrollContainerY );
+
+			// If the scroll position is at the start, the active editable element
+			// is the last one, and the caret is positioned within the initial
+			// trigger percentage of the page, do not scroll the page.
+			// The typewriter effect should not kick in until an empty page has been
+			// filled with the initial trigger percentage or the user scrolls
+			// intentionally down.
+			if (
+				scrollY === 0 &&
+				relativeScrollPosition < initialTriggerPercentage &&
+				isLastEditableNode()
+			) {
+				// Reset the caret position to maintain.
+				caretRect = currentCaretRect;
+				return;
 			}
 
-			/**
-			 * Resets the scroll position to be maintained during a `selectionchange`
-			 * event. Also removes the listener, so it acts as a one-time listener.
-			 */
-			function computeCaretRectOnSelectionChange() {
-				ownerDocument.removeEventListener(
-					'selectionchange',
-					computeCaretRectOnSelectionChange
-				);
-				computeCaretRectangle();
+			const scrollContainerHeight = windowScroll
+				? defaultView.innerHeight
+				: scrollContainer.clientHeight;
+
+			// Abort if the target scroll position would scroll the caret out of
+			// view.
+			if (
+				// The caret is under the lower fold.
+				caretRect.top + caretRect.height >
+					scrollContainerY + scrollContainerHeight ||
+				// The caret is above the upper fold.
+				caretRect.top < scrollContainerY
+			) {
+				// Reset the caret position to maintain.
+				caretRect = currentCaretRect;
+				return;
 			}
 
-			/**
-			 * Resets the scroll position to be maintained.
-			 */
-			function computeCaretRectangle() {
-				if ( isSelectionEligibleForScroll() ) {
-					caretRect = computeCaretRect( defaultView );
-				}
+			if ( windowScroll ) {
+				defaultView.scrollBy( 0, diff );
+			} else {
+				scrollContainer.scrollTop += diff;
+			}
+		}
+
+		/**
+		 * Adds a `selectionchange` listener to reset the scroll position to be
+		 * maintained.
+		 */
+		function addSelectionChangeListener() {
+			ownerDocument.addEventListener(
+				'selectionchange',
+				computeCaretRectOnSelectionChange
+			);
+		}
+
+		/**
+		 * Resets the scroll position to be maintained during a `selectionchange`
+		 * event. Also removes the listener, so it acts as a one-time listener.
+		 */
+		function computeCaretRectOnSelectionChange() {
+			ownerDocument.removeEventListener(
+				'selectionchange',
+				computeCaretRectOnSelectionChange
+			);
+			computeCaretRectangle();
+		}
+
+		/**
+		 * Resets the scroll position to be maintained.
+		 */
+		function computeCaretRectangle() {
+			if ( isSelectionEligibleForScroll() ) {
+				caretRect = computeCaretRect( defaultView );
+			}
+		}
+
+		/**
+		 * Returns the editable element owning the selection: the active
+		 * element, or, when a focused editing host contains the node
+		 * (a selected block supports `editableRoot`), the editable
+		 * element containing the selection.
+		 */
+		function getActiveEditableElement() {
+			const { activeElement } = ownerDocument;
+
+			if ( ! activeElement ) {
+				return null;
 			}
 
-			/**
-			 * Checks if the current situation is eligible for scroll:
-			 * - There should be one and only one block selected.
-			 * - The component must contain the selection.
-			 * - The active element must be contenteditable.
-			 */
-			function isSelectionEligibleForScroll() {
-				return (
-					node.contains( ownerDocument.activeElement ) &&
-					ownerDocument.activeElement.isContentEditable
-				);
+			if (
+				! activeElement.isContentEditable ||
+				! activeElement.contains( node )
+			) {
+				return activeElement;
 			}
 
-			function isLastEditableNode() {
-				const editableNodes = node.querySelectorAll(
-					'[contenteditable="true"]'
-				);
-				const lastEditableNode =
-					editableNodes[ editableNodes.length - 1 ];
-				return lastEditableNode === ownerDocument.activeElement;
+			const { anchorNode } = defaultView.getSelection();
+
+			if ( ! anchorNode ) {
+				return null;
 			}
 
-			// When the user scrolls or resizes, the scroll position should be
-			// reset.
-			defaultView.addEventListener( 'scroll', onScrollResize, true );
-			defaultView.addEventListener( 'resize', onScrollResize, true );
-
-			node.addEventListener( 'keydown', onKeyDown );
-			node.addEventListener( 'keyup', maintainCaretPosition );
-			node.addEventListener( 'mousedown', addSelectionChangeListener );
-			node.addEventListener( 'touchstart', addSelectionChangeListener );
-
-			return () => {
-				defaultView.removeEventListener(
-					'scroll',
-					onScrollResize,
-					true
-				);
-				defaultView.removeEventListener(
-					'resize',
-					onScrollResize,
-					true
-				);
-
-				node.removeEventListener( 'keydown', onKeyDown );
-				node.removeEventListener( 'keyup', maintainCaretPosition );
-				node.removeEventListener(
-					'mousedown',
-					addSelectionChangeListener
-				);
-				node.removeEventListener(
-					'touchstart',
-					addSelectionChangeListener
-				);
-
-				ownerDocument.removeEventListener(
-					'selectionchange',
-					computeCaretRectOnSelectionChange
-				);
-
-				defaultView.cancelAnimationFrame( scrollResizeRafId );
-				defaultView.cancelAnimationFrame( onKeyDownRafId );
-			};
-		},
-		[ hasSelectedBlock ]
-	);
+			const element =
+				anchorNode.nodeType === anchorNode.ELEMENT_NODE
+					? anchorNode
+					: anchorNode.parentElement;
+			return element?.closest( '[contenteditable="true"]' ) ?? null;
+		}
+
+		/**
+		 * Checks if the current situation is eligible for scroll:
+		 * - The component must contain the selection.
+		 * - The active element must be contenteditable.
+		 */
+		function isSelectionEligibleForScroll() {
+			const activeEditableElement = getActiveEditableElement();
+			return (
+				!! activeEditableElement &&
+				node.contains( activeEditableElement ) &&
+				activeEditableElement.isContentEditable
+			);
+		}
+
+		function isLastEditableNode() {
+			const editableNodes = node.querySelectorAll(
+				'[contenteditable="true"]'
+			);
+			const lastEditableNode = editableNodes[ editableNodes.length - 1 ];
+			return lastEditableNode === getActiveEditableElement();
+		}
+
+		// When the user scrolls or resizes, the scroll position should be
+		// reset.
+		defaultView.addEventListener( 'scroll', onScrollResize, true );
+		defaultView.addEventListener( 'resize', onScrollResize, true );
+
+		node.addEventListener( 'keydown', onKeyDown );
+		node.addEventListener( 'keyup', maintainCaretPosition );
+		node.addEventListener( 'mousedown', addSelectionChangeListener );
+		node.addEventListener( 'touchstart', addSelectionChangeListener );
+
+		return () => {
+			defaultView.removeEventListener( 'scroll', onScrollResize, true );
+			defaultView.removeEventListener( 'resize', onScrollResize, true );
+
+			node.removeEventListener( 'keydown', onKeyDown );
+			node.removeEventListener( 'keyup', maintainCaretPosition );
+			node.removeEventListener( 'mousedown', addSelectionChangeListener );
+			node.removeEventListener(
+				'touchstart',
+				addSelectionChangeListener
+			);
+
+			ownerDocument.removeEventListener(
+				'selectionchange',
+				computeCaretRectOnSelectionChange
+			);
+
+			defaultView.cancelAnimationFrame( scrollResizeRafId );
+			defaultView.cancelAnimationFrame( onKeyDownRafId );
+		};
+	}, [] );
 }
 
 function Typewriter( { children } ) {

package/src/components/use-block-commands/index.js

@@ -150,23 +150,29 @@ const getTransformCommands = () =>
 
 const getQuickActionsCommands = () =>
 	function useQuickActionsCommands() {
-		const { clientIds, isUngroupable, isGroupable } = useSelect(
-			( select ) => {
-				const {
-					getSelectedBlockClientIds,
-					isUngroupable: _isUngroupable,
-					isGroupable: _isGroupable,
-				} = select( blockEditorStore );
-				const selectedBlockClientIds = getSelectedBlockClientIds();
+		const {
+			clientIds,
+			isUngroupable,
+			isGroupable,
+			blockVisibilitySetting,
+		} = useSelect( ( select ) => {
+			const {
+				getSelectedBlockClientIds,
+				getSettings,
+				isUngroupable: _isUngroupable,
+				isGroupable: _isGroupable,
+			} = select( blockEditorStore );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
 
-				return {
-					clientIds: selectedBlockClientIds,
-					isUngroupable: _isUngroupable(),
-					isGroupable: _isGroupable(),
-				};
-			},
-			[]
-		);
+			return {
+				clientIds: selectedBlockClientIds,
+				isUngroupable: _isUngroupable(),
+				isGroupable: _isGroupable(),
+				blockVisibilitySetting:
+					getSettings().__experimentalFeatures?.blockVisibility
+						?.allowEditing,
+			};
+		}, [] );
 		const {
 			canInsertBlockType,
 			getBlockRootClientId,
@@ -310,7 +316,11 @@ const getQuickActionsCommands = () =>
 			( id ) => getBlockEditingMode( id ) === 'default'
 		);
 
-		if ( supportsVisibility && allBlocksDefaultMode ) {
+		if (
+			supportsVisibility &&
+			allBlocksDefaultMode &&
+			blockVisibilitySetting !== false
+		) {
 			const hasHiddenBlock = clientIds.some( ( id ) =>
 				isBlockHiddenAnywhere( id )
 			);

package/src/components/use-block-display-information/index.js

@@ -16,7 +16,6 @@ import { symbol } from '@wordpress/icons';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { isIsolatedEditorKey } from '../../store/private-keys';
 
 /** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
 
@@ -78,8 +77,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			const {
 				getBlockName,
 				getBlockAttributes,
+				getBlock,
 				__experimentalGetParsedPattern,
-				getSettings,
 			} = blockEditorSelect;
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -89,20 +88,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
-			const { isWithinEditedContentOnlySection } =
-				unlock( blockEditorSelect );
-			const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+			const { isSectionBlock } = unlock( blockEditorSelect );
 
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
-			const isEditedContentOnlySection =
-				isWithinEditedContentOnlySection( clientId );
 
-			if (
-				patternName &&
-				! isEditedContentOnlySection &&
-				! isIsolatedEditor
-			) {
+			if ( patternName && isSectionBlock( clientId ) ) {
 				const pattern = __experimentalGetParsedPattern( patternName );
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {
@@ -118,7 +109,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				};
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const syncedTitle = isSynced