Cherry-picked bug fixes for 6.5.1 (#60577)

* Font Library: Reset notices when navigating away from the collection (#59981) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: madhusudhand <[email protected]> * Pattern Explorer: Pass 'rootClientId' to the pattern list (#60014) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: dsas <[email protected]> * Fix lightbox UI disallow editing (#59890) * Check that lightbox can be edited before rendering lightbox UI * Refactor to reduce duplicate code * Fix and clarify component rendering logic Fix issue wherein lightbox popover was rendering erroneously when a link had been configured. * Reset lightbox attributes when removing link * Show lightbox UI if block-level override differs from default In some cases, such as when lightbox settings already exist for a block when global lightbox settings in theme.json change, we should allow users to see the lightbox UI and change the settings if they conflict with the global settings, even if the lightbox UI is disabled globally. This prevents a block from getting stuck with legacy lightbox settings and allows users to reset the block-level lightbox settings if need be in these edge cases. Note: We do not display the UI if the block-level settings exist and match the global settings, as the block will behave as expected in those circumstances and showing the UI in those circumstances would likely just be confusing. * Handle edge case of removing existing link when lightbox is fully enabled * Fix focus loss preventing end-to-end test from passing * Add link to PR in comment Co-authored-by: artemiomorales <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: justintadlock <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jeherve <[email protected]> * Only show inserter in document tools if DFM is off (#60426) Co-authored-by: draganescu <[email protected]> Co-authored-by: youknowriad <[email protected]> * only show inserter in document tools if DFM is off * remove useless CSS hiding the inserter in DFM whcih is not rendered anymore * Fix don't close overlay menu when focus leaves submenu (#60406) Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: c4rl0sbr4v0 <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: annezazu <[email protected]> * Fix experimental useHasRecursion deprecation (#60451) Unlinked contributors: albanyacademy. Co-authored-by: talldan <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> * Fix pattern block recursion handling (#60452) - Trigger recursion short circuit as early as possible before any other effects that can reason about inner blocks have run. - Use separate wrapper components to do this to satisfy the rule of hooks. Co-authored-by: talldan <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> * remove alpha from edit post header (#60431) * Update the query block to permit non-core interactive blocks (#60006) * updated the query block to permit non-core interactive blocks * updated logic to correctly check all blocks inside the query support interactivity * removed check for core blocks * updated variable names and modal message per feedback * renamed variable blockSupportsInteractivityBool to blockSupportsInteractivity Unlinked contributors: poof86. Co-authored-by: colinduwe <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: sethrubenstein <[email protected]> Co-authored-by: colorful-tones <[email protected]> * Add context to 'Library' string (#60520) Co-authored-by: ocean90 <[email protected]> Co-authored-by: t-hamano <[email protected]> * DateTimePicker: Change day button size back from 32px to 28px (#59990) * DateTimePicker: Change day button size back from 32px to 28px * Update changelog Co-authored-by: t-hamano <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: getdave <[email protected]> * Avoid overriding custom settings on font library save (#60438) Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: creativecoder <[email protected]> Co-authored-by: desrosj <[email protected]> Co-authored-by: estelaris <[email protected]> Co-authored-by: YanCol <[email protected]> --------- Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: madhusudhand <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: dsas <[email protected]> Co-authored-by: Artemio Morales <[email protected]> Co-authored-by: artemiomorales <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: justintadlock <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: jeherve <[email protected]> Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: Fabian Kägy <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: c4rl0sbr4v0 <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: colinduwe <[email protected]> Co-authored-by: colinduwe <[email protected]> Co-authored-by: sethrubenstein <[email protected]> Co-authored-by: colorful-tones <[email protected]> Co-authored-by: Dominik Schilling <[email protected]> Co-authored-by: ocean90 <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: creativecoder <[email protected]> Co-authored-by: desrosj <[email protected]> Co-authored-by: estelaris <[email protected]> Co-authored-by: YanCol <[email protected]>
WordPress · Apr 9, 2024 · a17fa12 · a17fa12
1 parent 16546be
commit a17fa12
Show file tree

Hide file tree

Showing 19 changed files with 297 additions and 175 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
@@ -41,6 +41,7 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				patternSourceFilter={ patternSourceFilter }
+				rootClientId={ rootClientId }
 			/>
 		</div>
 	);

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -47,10 +47,16 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	);
 }
 
-function PatternList( { searchValue, selectedCategory, patternCategories } ) {
+function PatternList( {
+	searchValue,
+	selectedCategory,
+	patternCategories,
+	rootClientId,
+} ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		rootClientId,
 		shouldFocusBlock: true,
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(

diff --git a/packages/block-editor/src/components/recursion-provider/index.js b/packages/block-editor/src/components/recursion-provider/index.js
@@ -92,10 +92,10 @@ export const DeprecatedExperimentalRecursionProvider = ( props ) => {
 	return <RecursionProvider { ...props } />;
 };
 
-export const DeprecatedExperimentalUseHasRecursion = ( props ) => {
+export const DeprecatedExperimentalUseHasRecursion = ( ...args ) => {
 	deprecated( 'wp.blockEditor.__experimentalUseHasRecursion', {
 		since: '6.5',
 		alternative: 'wp.blockEditor.useHasRecursion',
 	} );
-	return useHasRecursion( ...props );
+	return useHasRecursion( ...args );
 };
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -46,6 +46,7 @@ const ImageURLInputUI = ( {
 	showLightboxSetting,
 	lightboxEnabled,
 	onSetLightbox,
+	resetLightbox,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	// Use internal state instead of a ref to make sure that the component
@@ -241,14 +242,75 @@ const ImageURLInputUI = ( {
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
-	const showLinkEditor = ( ! linkEditorValue && ! lightboxEnabled ) === true;
+	const hideLightboxPanel =
+		! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );
+	const showLinkEditor = ! linkEditorValue && hideLightboxPanel;
 
 	const urlLabel = (
 		getLinkDestinations().find(
 			( destination ) => destination.linkDestination === linkDestination
 		) || {}
 	).title;
 
+	const PopoverChildren = () => {
+		if (
+			lightboxEnabled &&
+			showLightboxSetting &&
+			! url &&
+			! isEditingLink
+		) {
+			return (
+				<div className="block-editor-url-popover__expand-on-click">
+					<Icon icon={ fullscreen } />
+					<div className="text">
+						<p>{ __( 'Expand on click' ) }</p>
+						<p className="description">
+							{ __( 'Scales the image with a lightbox effect' ) }
+						</p>
+					</div>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Disable expand on click' ) }
+						onClick={ () => {
+							onSetLightbox( false );
+						} }
+						size="compact"
+					/>
+				</div>
+			);
+		} else if ( ! url || isEditingLink ) {
+			return (
+				<URLPopover.LinkEditor
+					className="block-editor-format-toolbar__link-container-content"
+					value={ linkEditorValue }
+					onChangeInputValue={ setUrlInput }
+					onSubmit={ onSubmitLinkChange() }
+					autocompleteRef={ autocompleteRef }
+				/>
+			);
+		} else if ( url && ! isEditingLink ) {
+			return (
+				<>
+					<URLPopover.LinkViewer
+						className="block-editor-format-toolbar__link-container-content"
+						url={ url }
+						onEditLinkClick={ startEditLink }
+						urlLabel={ urlLabel }
+					/>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Remove link' ) }
+						onClick={ () => {
+							onLinkRemove();
+							resetLightbox();
+						} }
+						size="compact"
+					/>
+				</>
+			);
+		}
+	};
+
 	return (
 		<>
 			<ToolbarButton
@@ -258,7 +320,9 @@ const ImageURLInputUI = ( {
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
-				isActive={ !! url || lightboxEnabled }
+				isActive={
+					!! url || ( lightboxEnabled && showLightboxSetting )
+				}
 			/>
 			{ isOpen && (
 				<URLPopover
@@ -267,7 +331,7 @@ const ImageURLInputUI = ( {
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={
-						! lightboxEnabled ? () => advancedOptions : null
+						hideLightboxPanel ? () => advancedOptions : null
 					}
 					additionalControls={
 						showLinkEditor && (
@@ -314,54 +378,7 @@ const ImageURLInputUI = ( {
 					}
 					offset={ 13 }
 				>
-					{ ( ! url || isEditingLink ) && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkEditor
-								className="block-editor-format-toolbar__link-container-content"
-								value={ linkEditorValue }
-								onChangeInputValue={ setUrlInput }
-								onSubmit={ onSubmitLinkChange() }
-								autocompleteRef={ autocompleteRef }
-							/>
-						</>
-					) }
-					{ url && ! isEditingLink && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkViewer
-								className="block-editor-format-toolbar__link-container-content"
-								url={ url }
-								onEditLinkClick={ startEditLink }
-								urlLabel={ urlLabel }
-							/>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Remove link' ) }
-								onClick={ onLinkRemove }
-								size="compact"
-							/>
-						</>
-					) }
-					{ ! url && ! isEditingLink && lightboxEnabled && (
-						<div className="block-editor-url-popover__expand-on-click">
-							<Icon icon={ fullscreen } />
-							<div className="text">
-								<p>{ __( 'Expand on click' ) }</p>
-								<p className="description">
-									{ __(
-										'Scales the image with a lightbox effect'
-									) }
-								</p>
-							</div>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Disable expand on click' ) }
-								onClick={ () => {
-									onSetLightbox( false );
-								} }
-								size="compact"
-							/>
-						</div>
-					) }
+					{ PopoverChildren() }
 				</URLPopover>
 			) }
 		</>

diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
@@ -229,15 +229,43 @@ function setBlockEditMode( setEditMode, blocks, mode ) {
 	} );
 }
 
-export default function ReusableBlockEdit( {
+function RecursionWarning() {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		</div>
+	);
+}
+
+// Wrap the main Edit function for the pattern block with a recursion wrapper
+// that allows short-circuiting rendering as early as possible, before any
+// of the other effects in the block edit have run.
+export default function ReusableBlockEditRecursionWrapper( props ) {
+	const { ref } = props.attributes;
+	const hasAlreadyRendered = useHasRecursion( ref );
+
+	if ( hasAlreadyRendered ) {
+		return <RecursionWarning />;
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			<ReusableBlockEdit { ...props } />
+		</RecursionProvider>
+	);
+}
+
+function ReusableBlockEdit( {
 	name,
 	attributes: { ref, content },
 	__unstableParentLayout: parentLayout,
 	clientId: patternClientId,
 	setAttributes,
 } ) {
 	const registry = useRegistry();
-	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, editedRecord, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -434,14 +462,6 @@ export default function ReusableBlockEdit( {
 
 	let children = null;
 
-	if ( hasAlreadyRendered ) {
-		children = (
-			<Warning>
-				{ __( 'Block cannot be rendered inside itself.' ) }
-			</Warning>
-		);
-	}
-
 	if ( isMissing ) {
 		children = (
 			<Warning>
@@ -459,7 +479,7 @@ export default function ReusableBlockEdit( {
 	}
 
 	return (
-		<RecursionProvider uniqueId={ ref }>
+		<>
 			{ userCanEdit && onNavigateToEntityRecord && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -489,6 +509,6 @@ export default function ReusableBlockEdit( {
 			) : (
 				<div { ...blockProps }>{ children }</div>
 			) }
-		</RecursionProvider>
+		</>
 	);
 }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -274,6 +274,22 @@ export default function Image( {
 		}
 	}
 
+	function resetLightbox() {
+		// When deleting a link from an image while lightbox settings
+		// are enabled by default, we should disable the lightbox,
+		// otherwise the resulting UX looks like a mistake.
+		// See https://github.com/WordPress/gutenberg/pull/59890/files#r1532286123.
+		if ( lightboxSetting?.enabled && lightboxSetting?.allowEditing ) {
+			setAttributes( {
+				lightbox: { enabled: false },
+			} );
+		} else {
+			setAttributes( {
+				lightbox: undefined,
+			} );
+		}
+	}
+
 	function onSetTitle( value ) {
 		// This is the HTML title attribute, separate from the media object
 		// title.
@@ -348,7 +364,10 @@ export default function Image( {
 	const [ lightboxSetting ] = useSettings( 'lightbox' );
 
 	const showLightboxSetting =
-		!! lightbox || lightboxSetting?.allowEditing === true;
+		// If a block-level override is set, we should give users the option to
+		// remove that override, even if the lightbox UI is disabled in the settings.
+		( !! lightbox && lightbox?.enabled !== lightboxSetting?.enabled ) ||
+		lightboxSetting?.allowEditing;
 
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
@@ -498,6 +517,7 @@ export default function Image( {
 							showLightboxSetting={ showLightboxSetting }
 							lightboxEnabled={ lightboxChecked }
 							onSetLightbox={ onSetLightbox }
+							resetLightbox={ resetLightbox }
 						/>
 					) }
 				{ allowCrop && (

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -137,7 +137,7 @@ const { state, actions } = store(
 				}
 			},
 			handleMenuFocusout( event ) {
-				const { modal } = getContext();
+				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu
 				// event.target === The element losing focus
 				// event.relatedTarget === The element receiving focus (if any)
@@ -148,7 +148,8 @@ const { state, actions } = store(
 				if (
 					event.relatedTarget === null ||
 					( ! modal?.contains( event.relatedTarget ) &&
-						event.target !== window.document.activeElement )
+						event.target !== window.document.activeElement &&
+						type === 'submenu' )
 				) {
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );

diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -43,7 +43,7 @@ export default function EnhancedPaginationModal( {
 	if ( hasBlocksFromPlugins ) {
 		notice =
 			__(
-				'Currently, avoiding full page reloads is not possible when blocks from plugins are present inside the Query block.'
+				'Currently, avoiding full page reloads is not possible when non-interactive or non-clientNavigation compatible blocks from plugins are present inside the Query block.'
 			) +
 			' ' +
 			notice;

diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
@@ -6,7 +6,11 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
+import {
+	cloneBlock,
+	getBlockSupport,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -373,7 +377,24 @@ export const useUnsupportedBlocks = ( clientId ) => {
 			getClientIdsOfDescendants( clientId ).forEach(
 				( descendantClientId ) => {
 					const blockName = getBlockName( descendantClientId );
-					if ( ! blockName.startsWith( 'core/' ) ) {
+					/*
+					 * Client side navigation can be true in two states:
+					 *  - supports.interactivity = true;
+					 *  - supports.interactivity.clientNavigation = true;
+					 */
+					const blockSupportsInteractivity = Object.is(
+						getBlockSupport( blockName, 'interactivity' ),
+						true
+					);
+					const blockSupportsInteractivityClientNavigation =
+						getBlockSupport(
+							blockName,
+							'interactivity.clientNavigation'
+						);
+					const blockInteractivity =
+						blockSupportsInteractivity ||
+						blockSupportsInteractivityClientNavigation;
+					if ( ! blockInteractivity ) {
 						blocks.hasBlocksFromPlugins = true;
 					} else if ( blockName === 'core/post-content' ) {
 						blocks.hasPostContentBlock = true;