From cd26001761b5f93143671ce1505b25732c51692e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 2 Dec 2024 05:51:31 -0800 Subject: [PATCH 01/21] =?UTF-8?q?Fix=20Meta=20boxes=20saving=20when=20they?= =?UTF-8?q?=E2=80=99re=20not=20present=20(#67254)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Initialize meta boxes whether or not they’re visible * Add hook for initialization of meta boxes * Minimize hook for meta boxes initialization * Name the export Co-authored-by: stokesman Co-authored-by: afercia Co-authored-by: t-hamano Co-authored-by: Mamaduka Co-authored-by: enricobattocchi --- .../edit-post/src/components/layout/index.js | 13 ++++--- .../src/components/meta-boxes/index.js | 37 ++----------------- .../meta-boxes/use-meta-box-initialization.js | 32 ++++++++++++++++ 3 files changed, 43 insertions(+), 39 deletions(-) create mode 100644 packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 5dcbfa2c82cea1..b8061571ec66cc 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -74,6 +74,7 @@ import useEditPostCommands from '../../commands/use-commands'; import { usePaddingAppender } from './use-padding-appender'; import { useShouldIframe } from './use-should-iframe'; import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record'; +import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization'; const { getLayoutStyles } = unlock( blockEditorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); @@ -413,6 +414,8 @@ function Layout( { const { isZoomOut } = unlock( select( blockEditorStore ) ); const { getEditorMode, getRenderingMode } = select( editorStore ); const isRenderingPostOnly = getRenderingMode() === 'post-only'; + const isNotDesignPostType = + ! DESIGN_POST_TYPES.includes( currentPostType ); return { mode: getEditorMode(), @@ -423,9 +426,7 @@ function Layout( { !! select( blockEditorStore ).getBlockSelectionStart(), showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), - showMetaBoxes: - ! DESIGN_POST_TYPES.includes( currentPostType ) && - ! isZoomOut(), + showMetaBoxes: isNotDesignPostType && ! isZoomOut(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), templateId: supportsTemplateMode && @@ -435,9 +436,7 @@ function Layout( { ? getTemplateId( currentPostType, currentPostId ) : null, enablePaddingAppender: - ! isZoomOut() && - isRenderingPostOnly && - ! DESIGN_POST_TYPES.includes( currentPostType ), + ! isZoomOut() && isRenderingPostOnly && isNotDesignPostType, }; }, [ @@ -447,6 +446,8 @@ function Layout( { settings.supportsTemplateMode, ] ); + useMetaBoxInitialization( hasActiveMetaboxes ); + const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender( enablePaddingAppender ); diff --git a/packages/edit-post/src/components/meta-boxes/index.js b/packages/edit-post/src/components/meta-boxes/index.js index 14728c97cf6b68..fdc74a5df4ce95 100644 --- a/packages/edit-post/src/components/meta-boxes/index.js +++ b/packages/edit-post/src/components/meta-boxes/index.js @@ -1,9 +1,7 @@ /** * WordPress dependencies */ -import { useSelect, useRegistry } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; -import { store as editorStore } from '@wordpress/editor'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -13,38 +11,11 @@ import MetaBoxVisibility from './meta-box-visibility'; import { store as editPostStore } from '../../store'; export default function MetaBoxes( { location } ) { - const registry = useRegistry(); - const { metaBoxes, areMetaBoxesInitialized, isEditorReady } = useSelect( - ( select ) => { - const { __unstableIsEditorReady } = select( editorStore ); - const { - getMetaBoxesPerLocation, - areMetaBoxesInitialized: _areMetaBoxesInitialized, - } = select( editPostStore ); - return { - metaBoxes: getMetaBoxesPerLocation( location ), - areMetaBoxesInitialized: _areMetaBoxesInitialized(), - isEditorReady: __unstableIsEditorReady(), - }; - }, - [ location ] + const metaBoxes = useSelect( + ( select ) => + select( editPostStore ).getMetaBoxesPerLocation[ location ] ); - const hasMetaBoxes = !! metaBoxes?.length; - - // When editor is ready, initialize postboxes (wp core script) and metabox - // saving. This initializes all meta box locations, not just this specific - // one. - useEffect( () => { - if ( isEditorReady && hasMetaBoxes && ! areMetaBoxesInitialized ) { - registry.dispatch( editPostStore ).initializeMetaBoxes(); - } - }, [ isEditorReady, hasMetaBoxes, areMetaBoxesInitialized ] ); - - if ( ! areMetaBoxesInitialized ) { - return null; - } - return ( <> { ( metaBoxes ?? [] ).map( ( { id } ) => ( diff --git a/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js new file mode 100644 index 00000000000000..4309d85e3c22bf --- /dev/null +++ b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { useDispatch, useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { store as editPostStore } from '../../store'; + +/** + * Initializes WordPress `postboxes` script and the logic for saving meta boxes. + * + * @param { boolean } enabled + */ +export const useMetaBoxInitialization = ( enabled ) => { + const isEnabledAndEditorReady = useSelect( + ( select ) => + enabled && select( editorStore ).__unstableIsEditorReady(), + [ enabled ] + ); + const { initializeMetaBoxes } = useDispatch( editPostStore ); + // The effect has to rerun when the editor is ready because initializeMetaBoxes + // will noop until then. + useEffect( () => { + if ( isEnabledAndEditorReady ) { + initializeMetaBoxes(); + } + }, [ isEnabledAndEditorReady, initializeMetaBoxes ] ); +}; From d0c372c881cb7d68bf56703df58f057614817c02 Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:06:19 +0100 Subject: [PATCH 02/21] Fix write mode persisting after disabling the experiment Co-authored-by: SantosGuillamot Co-authored-by: getdave --- packages/block-editor/src/store/selectors.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 75c43770f7e175..dc90f351732524 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -3041,9 +3041,7 @@ export const getBlockEditingMode = createRegistrySelector( clientId = ''; } - const isNavMode = - select( preferencesStore )?.get( 'core', 'editorTool' ) === - 'navigation'; + const isNavMode = isNavigationMode( state ); // If the editor is currently not in navigation mode, check if the clientId // has an editing mode set in the regular derived map. From 65fa4f3b0273afd7a7b578614a6e9ffd80d05de5 Mon Sep 17 00:00:00 2001 From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com> Date: Mon, 2 Dec 2024 20:11:50 +0530 Subject: [PATCH 03/21] NumberControl: Deprecate 36px default size (#66730) * Add the deprecation for 36px default size to number control * Add the changelog for the deprecation * Update unit test and supress warning for 40px default size warning from child component * Add the deperection changelog to unreleased section and updated the component to use __next40pxDefaultSize for NumberControl * Refactor the test for NumberControl component to reduce changes * Update box control files to use supress warning prop before default 40px prop * Supress the console warning for deprecation message from child component * Addressed the feedbacks on the PR and updated the component based on that --------- Co-authored-by: hbhalodia Co-authored-by: mirka <0mirka00@git.wordpress.org> --- .../src/components/line-height-control/index.js | 1 + packages/components/CHANGELOG.md | 1 + packages/components/src/angle-picker-control/index.tsx | 2 +- .../components/src/color-picker/input-with-slider.tsx | 2 +- packages/components/src/number-control/README.md | 3 ++- packages/components/src/number-control/index.tsx | 9 +++++++++ .../src/number-control/stories/index.story.tsx | 1 + packages/components/src/number-control/test/index.tsx | 6 +++++- packages/components/src/number-control/types.ts | 7 +++++++ packages/components/src/range-control/index.tsx | 1 + packages/components/src/unit-control/index.tsx | 1 + 11 files changed, 30 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index b2c99c03f87840..e6af602c2875ae 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -93,6 +93,7 @@ const LineHeightControl = ( {
} spinControls="none" - size="__unstable-large" /> { return ( {}; @@ -53,9 +54,17 @@ function UnforwardedNumberControl( size = 'default', suffix, onChange = noop, + __shouldNotWarnDeprecated36pxSize, ...restProps } = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props ); + maybeWarnDeprecated36pxSize( { + componentName: 'NumberControl', + size, + __next40pxDefaultSize: restProps.__next40pxDefaultSize, + __shouldNotWarnDeprecated36pxSize, + } ); + if ( hideHTMLArrows ) { deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', { alternative: 'spinControls="none"', diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx index 3feb0d63eadc2a..8710839fea6ea5 100644 --- a/packages/components/src/number-control/stories/index.story.tsx +++ b/packages/components/src/number-control/stories/index.story.tsx @@ -62,4 +62,5 @@ const Template: StoryFn< typeof NumberControl > = ( { export const Default = Template.bind( {} ); Default.args = { label: 'Value', + __next40pxDefaultSize: true, }; diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx index 3cf3368f1636ba..bf97b520673ea4 100644 --- a/packages/components/src/number-control/test/index.tsx +++ b/packages/components/src/number-control/test/index.tsx @@ -12,9 +12,13 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import NumberControl from '..'; +import _NumberControl from '..'; import type { NumberControlProps } from '../types'; +const NumberControl = ( + props: React.ComponentProps< typeof _NumberControl > +) => <_NumberControl __next40pxDefaultSize { ...props } />; + function StatefulNumberControl( props: NumberControlProps ) { const [ value, setValue ] = useState( props.value ); const handleOnChange = ( v: string | undefined ) => setValue( v ); diff --git a/packages/components/src/number-control/types.ts b/packages/components/src/number-control/types.ts index 8d198e777bd557..2a0fbf402d3569 100644 --- a/packages/components/src/number-control/types.ts +++ b/packages/components/src/number-control/types.ts @@ -91,4 +91,11 @@ export type NumberControlProps = Omit< * The value of the input. */ value?: number | string; + /** + * Do not throw a warning for the deprecated 36px default size. + * For internal components of other components that already throw the warning. + * + * @ignore + */ + __shouldNotWarnDeprecated36pxSize?: boolean; }; diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 916571c3ee0e05..89dd8248a1e614 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -350,6 +350,7 @@ function UnforwardedRangeControl( step={ step } // @ts-expect-error TODO: Investigate if the `null` value is necessary value={ inputSliderValue } + __shouldNotWarnDeprecated36pxSize /> ) } { allowReset && ( diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 9845c4eb04ef26..65e1e56cda3b3b 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -224,6 +224,7 @@ function UnforwardedUnitControl( return ( Date: Mon, 2 Dec 2024 16:07:57 +0100 Subject: [PATCH 04/21] useEditorTitle: fix wrong request without ID (#67475) Co-authored-by: ellatrix Co-authored-by: youknowriad --- .../src/components/editor/use-editor-title.js | 4 ++ test/e2e/specs/site-editor/preload.spec.js | 41 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 test/e2e/specs/site-editor/preload.spec.js diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js index 727b190117e02a..6f0b36f8e3b8b6 100644 --- a/packages/edit-site/src/components/editor/use-editor-title.js +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -22,6 +22,10 @@ function useEditorTitle( postType, postId ) { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); + if ( ! postId ) { + return { isLoaded: false }; + } + const _record = getEditedEntityRecord( 'postType', postType, diff --git a/test/e2e/specs/site-editor/preload.spec.js b/test/e2e/specs/site-editor/preload.spec.js new file mode 100644 index 00000000000000..1e93f783a8a91d --- /dev/null +++ b/test/e2e/specs/site-editor/preload.spec.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Preload', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test( 'Should make no requests before the iframe is loaded', async ( { + page, + admin, + } ) => { + // Do not use `visitSiteEditor` because it waits for the iframe to load. + await admin.visitAdminPage( 'site-editor.php' ); + + const requests = []; + let isLoaded = false; + + page.on( 'request', ( request ) => { + if ( request.resourceType() === 'document' ) { + // The iframe also "requests" a blob document. This is the most + // reliable way to wait for the iframe to start loading. + // `waitForSelector` is always a bit delayed, and we don't want + // to detect requests after the iframe mounts. + isLoaded = true; + } else if ( ! isLoaded && request.resourceType() === 'fetch' ) { + requests.push( request.url() ); + } + } ); + + await page.waitForFunction( ( _isLoaded ) => _isLoaded, [ isLoaded ] ); + + expect( requests ).toEqual( [] ); + } ); +} ); From 6689c778e6bbb9774dd4487c7f1c29e1ffd207f5 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 2 Dec 2024 17:02:52 +0100 Subject: [PATCH 05/21] SlotFill: remove explicit rerender from portal version (#67471) * SlotFill: remove explicit rerender from portal version * Add changelog entry Co-authored-by: jsnajdr Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 1 + .../src/slot-fill/bubbles-virtually/fill.tsx | 18 +++++++----------- .../bubbles-virtually/slot-fill-provider.tsx | 15 ++------------- .../src/slot-fill/bubbles-virtually/slot.tsx | 11 ++++------- packages/components/src/slot-fill/types.ts | 7 ++++--- 5 files changed, 18 insertions(+), 34 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 748525d6d9c15e..94dfd1b3c38113 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,6 +22,7 @@ - Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)). - Upgraded `@ariakit/react` (v0.4.15) and `@ariakit/test` (v0.4.7) ([#67404](https://github.com/WordPress/gutenberg/pull/67404)). - Exported the `WPCompleter` type as it was being used in block-editor/autocompleters ([#67410](https://github.com/WordPress/gutenberg/pull/67410)). +- `SlotFill`: remove manual rerenders from the portal `Fill` component ([#67471](https://github.com/WordPress/gutenberg/pull/67471)). ### Bug Fixes diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx index d5287adfab4178..ef7bc94ff540bd 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx +++ b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx @@ -4,7 +4,6 @@ import { useObservableValue } from '@wordpress/compose'; import { useContext, - useReducer, useRef, useEffect, createPortal, @@ -20,18 +19,15 @@ import type { FillComponentProps } from '../types'; export default function Fill( { name, children }: FillComponentProps ) { const registry = useContext( SlotFillContext ); const slot = useObservableValue( registry.slots, name ); - const [ , rerender ] = useReducer( () => [], [] ); - const ref = useRef( { rerender } ); + const instanceRef = useRef( {} ); + // We register fills so we can keep track of their existence. + // Slots can use the `useSlotFills` hook to know if there're already fills + // registered so they can choose to render themselves or not. useEffect( () => { - // We register fills so we can keep track of their existence. - // Some Slot implementations need to know if there're already fills - // registered so they can choose to render themselves or not. - const refValue = ref.current; - registry.registerFill( name, refValue ); - return () => { - registry.unregisterFill( name, refValue ); - }; + const instance = instanceRef.current; + registry.registerFill( name, instance ); + return () => registry.unregisterFill( name, instance ); }, [ registry, name ] ); if ( ! slot || ! slot.ref.current ) { diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx index 1dc5ef35ceccfe..cf692700eef79c 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx +++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx @@ -23,13 +23,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext { ref, fillProps ) => { - const slot = slots.get( name ); - - slots.set( name, { - ...slot, - ref: ref || slot?.ref, - fillProps: fillProps || slot?.fillProps || {}, - } ); + slots.set( name, { ref, fillProps } ); }; const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] = @@ -66,12 +60,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext { return; } - slot.fillProps = fillProps; - const slotFills = fills.get( name ); - if ( slotFills ) { - // Force update fills. - slotFills.forEach( ( fill ) => fill.rerender() ); - } + slots.set( name, { ref, fillProps } ); }; const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = ( diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx index b8ead7fc7ea8ba..e65c055c410a6b 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx @@ -39,8 +39,7 @@ function Slot( ...restProps } = props; - const { registerSlot, unregisterSlot, ...registry } = - useContext( SlotFillContext ); + const registry = useContext( SlotFillContext ); const ref = useRef< HTMLElement >( null ); @@ -54,11 +53,9 @@ function Slot( }, [ fillProps ] ); useLayoutEffect( () => { - registerSlot( name, ref, fillPropsRef.current ); - return () => { - unregisterSlot( name, ref ); - }; - }, [ registerSlot, unregisterSlot, name ] ); + registry.registerSlot( name, ref, fillPropsRef.current ); + return () => registry.unregisterSlot( name, ref ); + }, [ registry, name ] ); useLayoutEffect( () => { registry.updateSlot( name, ref, fillPropsRef.current ); diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts index 15f082cf3f7552..6668057323edd9 100644 --- a/packages/components/src/slot-fill/types.ts +++ b/packages/components/src/slot-fill/types.ts @@ -110,15 +110,16 @@ export type SlotFillProviderProps = { export type SlotRef = RefObject< HTMLElement >; export type Rerenderable = { rerender: () => void }; +export type FillInstance = {}; export type SlotFillBubblesVirtuallyContext = { slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >; - fills: ObservableMap< SlotKey, Rerenderable[] >; + fills: ObservableMap< SlotKey, FillInstance[] >; registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void; unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void; updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void; - registerFill: ( name: SlotKey, ref: Rerenderable ) => void; - unregisterFill: ( name: SlotKey, ref: Rerenderable ) => void; + registerFill: ( name: SlotKey, instance: FillInstance ) => void; + unregisterFill: ( name: SlotKey, instance: FillInstance ) => void; /** * This helps the provider know if it's using the default context value or not. From fa10d2fbd3faea76835374d6c850864d103a98c9 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 2 Dec 2024 17:07:55 +0100 Subject: [PATCH 06/21] Fix EntitiesSavedStates panel dialog props. (#67351) * Fix EntitiesSavedStates panel dialog props. * Remove renderDialog default value. Co-authored-by: afercia Co-authored-by: ntsekouras Co-authored-by: Mayank-Tripathi32 Co-authored-by: jameskoster --- .../edit-site/src/components/save-panel/index.js | 12 +++++++++--- packages/editor/README.md | 2 +- .../src/components/entities-saved-states/index.js | 15 ++++++--------- .../src/components/post-publish-button/index.js | 2 ++ .../src/components/save-publish-panels/index.js | 6 +++++- 5 files changed, 23 insertions(+), 14 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 81a0f99557df07..95ec9b9ffc8c46 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -31,7 +31,7 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } = unlock( privateApis ); const { useLocation } = unlock( routerPrivateApis ); -const EntitiesSavedStatesForPreview = ( { onClose } ) => { +const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => { const isDirtyProps = useEntitiesSavedStatesIsDirty(); let activateSaveLabel; if ( isDirtyProps.isDirty ) { @@ -75,14 +75,20 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => { onSave, saveEnabled: true, saveLabel: activateSaveLabel, + renderDialog, } } /> ); }; -const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => { +const _EntitiesSavedStates = ( { onClose, renderDialog } ) => { if ( isPreviewingTheme() ) { - return ; + return ( + + ); } return ( diff --git a/packages/editor/README.md b/packages/editor/README.md index 8b48d773acb268..dd7b53f421a1db 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -401,7 +401,7 @@ _Parameters_ - _props_ `Object`: The component props. - _props.close_ `Function`: The function to close the dialog. -- _props.renderDialog_ `Function`: The function to render the dialog. +- _props.renderDialog_ `boolean`: Whether to render the component with modal dialog behavior. _Returns_ diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index ea05bca522941b..ad584b0df75574 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -31,14 +31,11 @@ function identity( values ) { * * @param {Object} props The component props. * @param {Function} props.close The function to close the dialog. - * @param {Function} props.renderDialog The function to render the dialog. + * @param {boolean} props.renderDialog Whether to render the component with modal dialog behavior. * * @return {React.ReactNode} The rendered component. */ -export default function EntitiesSavedStates( { - close, - renderDialog = undefined, -} ) { +export default function EntitiesSavedStates( { close, renderDialog } ) { const isDirtyProps = useIsDirty(); return ( @@ -102,7 +103,10 @@ export default function SavePublishPanels( { return ( <> { isEntitiesSavedStatesOpen && ( - + ) } { ! isEntitiesSavedStatesOpen && unmountableContent } From 656110814c85d346669dd4fa2c9d3de670d35cbb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 2 Dec 2024 16:39:38 +0000 Subject: [PATCH 07/21] Correctly apply current-menu-ancestor class to
  • in Nav block #67169 Co-authored-by: getdave Co-authored-by: MaggieCabrera Co-authored-by: carolinan Co-authored-by: mrwweb Co-authored-by: juanfra Co-authored-by: draganescu Co-authored-by: bph Co-authored-by: jordesign Co-authored-by: webmandesign --- packages/block-library/src/navigation-submenu/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index 92b55e291606e8..d61dbb2426c240 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/packages/block-library/src/navigation-submenu/index.php @@ -222,7 +222,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) { if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) { $tag_processor = new WP_HTML_Tag_Processor( $html ); - while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item__content' ) ) ) { + while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) { $tag_processor->add_class( 'current-menu-ancestor' ); } $html = $tag_processor->get_updated_html(); From 1d06b35940ef1d255b08f51cf242ed776d0077b0 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:55:55 +0100 Subject: [PATCH 08/21] Site Editor: Pages: Preload template lookup (#66654) Co-authored-by: ellatrix Co-authored-by: Mamaduka Co-authored-by: jorgefilipecosta --- backport-changelog/6.8/7695.md | 2 ++ lib/compat/wordpress-6.8/preload.php | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/backport-changelog/6.8/7695.md b/backport-changelog/6.8/7695.md index f45b2039e30274..d69a59f2d67d12 100644 --- a/backport-changelog/6.8/7695.md +++ b/backport-changelog/6.8/7695.md @@ -2,3 +2,5 @@ https://github.com/WordPress/wordpress-develop/pull/7695 * https://github.com/WordPress/gutenberg/pull/66631 * https://github.com/WordPress/gutenberg/pull/67465 +* https://github.com/WordPress/gutenberg/pull/66579 +* https://github.com/WordPress/gutenberg/pull/66654 diff --git a/lib/compat/wordpress-6.8/preload.php b/lib/compat/wordpress-6.8/preload.php index 494e3ad32ec02e..879e263f5a1892 100644 --- a/lib/compat/wordpress-6.8/preload.php +++ b/lib/compat/wordpress-6.8/preload.php @@ -10,18 +10,26 @@ */ function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) { if ( 'core/edit-site' === $context->name ) { - $post_id = null; + $post = null; if ( isset( $_GET['postId'] ) && is_numeric( $_GET['postId'] ) ) { - $post_id = (int) $_GET['postId']; + $post = get_post( (int) $_GET['postId'] ); } if ( isset( $_GET['p'] ) && preg_match( '/^\/page\/(\d+)$/', $_GET['p'], $matches ) ) { - $post_id = (int) $matches[1]; + $post = get_post( (int) $matches[1] ); } - if ( $post_id ) { - $route_for_post = rest_get_route_for_post( $post_id ); + if ( $post ) { + $route_for_post = rest_get_route_for_post( $post ); if ( $route_for_post ) { $paths[] = add_query_arg( 'context', 'edit', $route_for_post ); + if ( 'page' === $post->post_type ) { + $paths[] = add_query_arg( + 'slug', + // @see https://github.com/WordPress/gutenberg/blob/489f6067c623926bce7151a76755bb68d8e22ea7/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js#L139-L140 + 'page-' . $post->post_name, + '/wp/v2/templates/lookup' + ); + } } } From d8a457b56b6671fa25dedf2b40841a13bdabe6f1 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 2 Dec 2024 19:02:59 +0200 Subject: [PATCH 09/21] Block Editor: Animate useScaleCanvas() only when toggling zoomed out mode (#67481) Co-authored-by: tyxla Co-authored-by: ellatrix --- .../src/components/iframe/use-scale-canvas.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js index c72266e82e2b0a..2d8cb217a3255c 100644 --- a/packages/block-editor/src/components/iframe/use-scale-canvas.js +++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { useEffect, useRef, useCallback } from '@wordpress/element'; -import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; +import { + usePrevious, + useReducedMotion, + useResizeObserver, +} from '@wordpress/compose'; /** * @typedef {Object} TransitionState @@ -280,6 +284,7 @@ export function useScaleCanvas( { transitionFromRef.current = transitionToRef.current; }, [ iframeDocument ] ); + const previousIsZoomedOut = usePrevious( isZoomedOut ); /** * Runs when zoom out mode is toggled, and sets the startAnimation flag * so the animation will start when the next useEffect runs. We _only_ @@ -287,7 +292,7 @@ export function useScaleCanvas( { * changes due to the container resizing. */ useEffect( () => { - if ( ! iframeDocument ) { + if ( ! iframeDocument || previousIsZoomedOut === isZoomedOut ) { return; } @@ -300,7 +305,7 @@ export function useScaleCanvas( { return () => { iframeDocument.documentElement.classList.remove( 'is-zoomed-out' ); }; - }, [ iframeDocument, isZoomedOut ] ); + }, [ iframeDocument, isZoomedOut, previousIsZoomedOut ] ); /** * This handles: From 232d14f33f57fcf6f0c07e52bdb5c52ba8f3dcae Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 3 Dec 2024 02:32:19 +0900 Subject: [PATCH 10/21] DropdownMenu: Increase option height to 40px (#67435) * DropdownMenu: Increase option height to 40px * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 3 +++ packages/components/src/dropdown-menu/index.tsx | 1 + packages/components/src/dropdown-menu/style.scss | 2 +- packages/components/src/menu-items-choice/style.scss | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 94dfd1b3c38113..b482a4801c2eaa 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,9 @@ ### Enhancements - `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)). +- `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). +- `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). +- `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). ### Experimental diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index 0e4501be4839c0..de83695978c2df 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -164,6 +164,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { { controlSets?.flatMap( ( controlSet, indexOfSet ) => controlSet.map( ( control, indexOfControl ) => ( ' @@ -15,8 +22,10 @@ function DeletedNavigationWarning( { onCreateNew, isNotice = false } ) { button: (