Cherry-picked bug fixes for 6.5.1 (#60577)

* Font Library: Reset notices when navigating away from the collection (#59981)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>

* Pattern Explorer: Pass 'rootClientId' to the pattern list (#60014)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dsas <dsas@git.wordpress.org>

* 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 <artemiosans@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: justintadlock <greenshady@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jeherve <jeherve@git.wordpress.org>

* Only show inserter in document tools if DFM is off (#60426)

Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

* 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 <fabiankaegy@git.wordpress.org>
Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

* Fix experimental useHasRecursion deprecation (#60451)

Unlinked contributors: albanyacademy.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

* 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 <talldanwp@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

* 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 <colind@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: sethrubenstein <smrubenstein@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>

* Add context to 'Library' string (#60520)

Co-authored-by: ocean90 <ocean90@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

* 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 <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>

* Avoid overriding custom settings on font library save (#60438)

Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: desrosj <desrosj@git.wordpress.org>
Co-authored-by: estelaris <estelaris@git.wordpress.org>
Co-authored-by: YanCol <collet@git.wordpress.org>

---------

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dsas <dsas@git.wordpress.org>
Co-authored-by: Artemio Morales <artemio.morales@a8c.com>
Co-authored-by: artemiomorales <artemiosans@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: justintadlock <greenshady@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: jeherve <jeherve@git.wordpress.org>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: Fabian Kägy <mail@fabian-kaegy.de>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: colinduwe <colinduwe@gmail.com>
Co-authored-by: colinduwe <colind@git.wordpress.org>
Co-authored-by: sethrubenstein <smrubenstein@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>
Co-authored-by: ocean90 <ocean90@git.wordpress.org>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: desrosj <desrosj@git.wordpress.org>
Co-authored-by: estelaris <estelaris@git.wordpress.org>
Co-authored-by: YanCol <collet@git.wordpress.org>

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

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(

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 );
 };

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>
  ) }
  </>

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>
+ </>
  );
 }

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

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' );

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;

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;