From 9e28f24d09d7b2f69f853a47ee9c286b4d6e5786 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 21 May 2024 15:42:38 +0100 Subject: [PATCH 01/94] Update grid layout on small screens (#61820) Co-authored-by: jameskoster Co-authored-by: jasmussen --- packages/dataviews/src/style.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index ae886842b2e9fd..07ba9174b51200 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -277,10 +277,14 @@ .dataviews-view-grid { margin-bottom: auto; - grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-template-rows: max-content; padding: 0 $grid-unit-40 $grid-unit-30; + @include break-mobile() { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency + } + @include break-xlarge() { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency } @@ -557,6 +561,11 @@ } line-height: 0; + flex-shrink: 0; + + .components-checkbox-control__input-container { + margin: 0; + } } .dataviews-filters__custom-menu-radio-item-prefix { From 7e24ae4f91ee565145b67cb3bd829d98548b1c5f Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Tue, 21 May 2024 16:46:26 +0200 Subject: [PATCH 02/94] E2E: Fix canvas waiter in visitSiteEditor (#61816) Co-authored-by: WunderBart Co-authored-by: ellatrix --- .../src/admin/visit-site-editor.ts | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts index 0c9da7b695be07..f0a7db5ad966ff 100644 --- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts +++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts @@ -37,31 +37,32 @@ export async function visitSiteEditor( query.set( 'canvas', canvas ); } - const canvasLoader = this.page.locator( - // Spinner was used instead of the progress bar in an earlier version of - // the site editor. - '.edit-site-canvas-loader, .edit-site-canvas-spinner' - ); - await this.visitAdminPage( 'site-editor.php', query.toString() ); - // Try waiting for the canvas loader to appear first, so that the locator - // that waits for it to disappear doesn't resolve prematurely. - await canvasLoader.waitFor().catch( () => {} ); - /** * @todo This is a workaround for the fact that the editor canvas is seen as * ready and visible before the loading spinner is hidden. Ideally, the * content underneath the loading overlay should be marked inert until the * loading is done. */ - await canvasLoader.waitFor( { - state: 'hidden', - // Bigger timeout is needed for larger entities, like the Large Post - // HTML fixture that we load for performance tests, which often doesn't - // make it under the default timeout value. - timeout: 60_000, - } ); + if ( ! query.size || postId || canvas === 'edit' ) { + const canvasLoader = this.page.locator( + // Spinner was used instead of the progress bar in an earlier + // version of the site editor. + '.edit-site-canvas-loader, .edit-site-canvas-spinner' + ); + + // Wait for the canvas loader to appear first, so that the locator that + // waits for the hidden state doesn't resolve prematurely. + await canvasLoader.waitFor( { state: 'visible' } ); + await canvasLoader.waitFor( { + state: 'hidden', + // Bigger timeout is needed for larger entities, like the Large Post + // HTML fixture that we load for performance tests, which often + // doesn't make it under the default timeout value. + timeout: 60_000, + } ); + } if ( ! options.showWelcomeGuide ) { await this.editor.setPreferences( 'core/edit-site', { From 474fdfd23540662bde5eb98a9192115800dcb685 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 21 May 2024 19:41:57 +0400 Subject: [PATCH 03/94] useBlockInspectorAnimationSettings: Remove unnecessary deps (#61822) Co-authored-by: Mamaduka Co-authored-by: ellatrix --- .../block-editor/src/components/block-inspector/index.js | 6 ++---- .../block-inspector/useBlockInspectorAnimationSettings.js | 7 ++----- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 6da035a883ffb1..e01cd095752696 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -111,10 +111,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { // displays based on the relationship between the selected block // and its parent, and only enable it if the parent is controlling // its children blocks. - const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings( - blockType, - selectedBlockClientId - ); + const blockInspectorAnimationSettings = + useBlockInspectorAnimationSettings( blockType ); const borderPanelLabel = useBorderPanelLabel( { blockName: selectedBlockName, diff --git a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js index 6be7d3fe18667e..d89639c4b9ac8c 100644 --- a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js +++ b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js @@ -8,10 +8,7 @@ import { useSelect } from '@wordpress/data'; */ import { store as blockEditorStore } from '../../store'; -export default function useBlockInspectorAnimationSettings( - blockType, - selectedBlockClientId -) { +export default function useBlockInspectorAnimationSettings( blockType ) { return useSelect( ( select ) => { if ( blockType ) { @@ -48,6 +45,6 @@ export default function useBlockInspectorAnimationSettings( } return null; }, - [ selectedBlockClientId, blockType ] + [ blockType ] ); } From e1aaee2eb146467c0b20f469c2b04f2adc7295ac Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 21 May 2024 18:04:09 +0100 Subject: [PATCH 04/94] Site Editor: Remove the details pages (#61741) Co-authored-by: youknowriad Co-authored-by: ntsekouras Co-authored-by: jsnajdr Co-authored-by: ellatrix Co-authored-by: draganescu Co-authored-by: jasmussen Co-authored-by: jameskoster Co-authored-by: richtabor --- .../src/site-editor-navigation-commands.js | 34 +-- .../src/components/add-new-pattern/index.js | 9 +- .../edit-site/src/components/editor/index.js | 6 +- .../edit-site/src/components/layout/router.js | 131 ++++++----- .../dataviews-pattern-actions.js | 35 +-- .../delete-category-menu-item.js | 3 +- .../src/components/page-patterns/header.js | 2 +- .../src/components/page-patterns/index.js | 39 +--- .../components/page-patterns/use-patterns.js | 19 +- .../src/components/pattern-modal/duplicate.js | 20 +- .../sidebar-dataviews/add-new-view.js | 4 +- .../custom-dataviews-list.js | 4 +- .../sidebar-dataviews/dataview-item.js | 4 +- .../src/components/sidebar-dataviews/index.js | 13 +- .../sidebar-navigation-item/index.js | 14 +- .../index.js | 8 +- .../sidebar-navigation-screen-main/index.js | 18 +- .../use-navigation-menu-handlers.js | 2 +- .../index.js | 2 +- .../leaf-more-menu.js | 2 + .../sidebar-navigation-screen-page/index.js | 204 ----------------- .../page-details.js | 161 -------------- .../status-label.js | 71 ------ .../sidebar-navigation-screen-page/style.scss | 69 ------ .../index.js | 57 ----- .../style.scss | 26 --- ...template-part-navigation-menu-list-item.js | 31 --- .../template-part-navigation-menu-list.js | 21 -- .../template-part-navigation-menu.js | 33 --- .../template-part-navigation-menus.js | 36 --- .../use-navigation-menu-content.js | 98 --------- .../use-navigation-menu-title.js | 32 --- .../use-pattern-details.js | 205 ------------------ .../category-item.js | 8 +- .../index.js | 20 +- .../home-template-details.js | 144 ------------ .../index.js | 134 ------------ .../style.scss | 53 ----- .../template-areas.js | 135 ------------ .../use-init-edited-entity-from-url.js | 41 ++-- .../src/hooks/commands/use-common-commands.js | 35 +-- .../hooks/commands/use-edit-mode-commands.js | 8 +- packages/edit-site/src/style.scss | 3 - .../edit-site/src/utils/get-is-list-page.js | 23 -- packages/router/src/router.js | 21 +- test/e2e/specs/editor/blocks/image.spec.js | 4 +- .../navigation-frontend-interactivity.spec.js | 8 +- .../editor/various/block-bindings.spec.js | 2 +- .../editor/various/pattern-overrides.spec.js | 3 +- .../specs/site-editor/block-removal.spec.js | 4 +- .../specs/site-editor/browser-history.spec.js | 2 +- .../site-editor/global-styles-sidebar.spec.js | 4 +- .../specs/site-editor/hybrid-theme.spec.js | 2 +- .../site-editor/iframe-rendering.spec.js | 1 + test/e2e/specs/site-editor/list-view.spec.js | 4 +- .../site-editor/multi-entity-saving.spec.js | 4 +- .../site-editor/new-templates-list.spec.js | 6 +- test/e2e/specs/site-editor/patterns.spec.js | 9 +- .../site-editor/push-to-global-styles.spec.js | 4 +- .../site-editor-url-navigation.spec.js | 5 +- .../site-editor/style-variations.spec.js | 14 +- .../specs/site-editor/template-part.spec.js | 10 +- .../specs/site-editor/writing-flow.spec.js | 4 +- test/performance/specs/site-editor.spec.js | 4 +- 64 files changed, 246 insertions(+), 1886 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js delete mode 100644 packages/edit-site/src/utils/get-is-list-page.js diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 6ef9be58b4d007..ba34fffd98824c 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -16,7 +16,7 @@ import { navigation, } from '@wordpress/icons'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url'; +import { addQueryArgs, getPath } from '@wordpress/url'; import { useDebounce } from '@wordpress/compose'; /** @@ -119,14 +119,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; return { ...command, @@ -134,7 +126,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const args = { postType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -195,15 +187,6 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const result = []; result.push( ...orderedRecords.map( ( record ) => { - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; - return { name: templateType + '-' + record.id, searchLabel: record.title?.rendered + ' ' + record.id, @@ -215,7 +198,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const args = { postType: templateType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -242,8 +225,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => icon: symbolFilled, callback: ( { close } ) => { const args = { - path: '/patterns', - categoryType: 'wp_template_part', + postType: 'wp_template_part', categoryId: 'all-parts', }; const targetUrl = addQueryArgs( @@ -296,7 +278,7 @@ function useSiteEditorBasicNavigationCommands() { icon: navigation, callback: ( { close } ) => { const args = { - path: '/navigation', + postType: 'wp_navigation', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -332,7 +314,7 @@ function useSiteEditorBasicNavigationCommands() { icon: page, callback: ( { close } ) => { const args = { - path: '/page', + post_type: 'page', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -350,7 +332,7 @@ function useSiteEditorBasicNavigationCommands() { icon: layout, callback: ( { close } ) => { const args = { - path: '/wp_template', + postType: 'wp_template', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -370,7 +352,7 @@ function useSiteEditorBasicNavigationCommands() { callback: ( { close } ) => { if ( canCreateTemplate ) { const args = { - path: '/patterns', + postType: 'wp_block', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index ce0ad6bbbccf48..00cc086183e57b 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -46,14 +46,12 @@ export default function AddNewPattern() { [] ); - function handleCreatePattern( { pattern, categoryId } ) { + function handleCreatePattern( { pattern } ) { setShowPatternModal( false ); history.push( { postId: pattern.id, postType: PATTERN_TYPES.user, - categoryType: PATTERN_TYPES.theme, - categoryId, canvas: 'edit', } ); } @@ -139,7 +137,7 @@ export default function AddNewPattern() { let currentCategoryId; // When we're not handling template parts, we should // add or create the proper pattern category. - if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) { + if ( params.postType !== TEMPLATE_PART_POST_TYPE ) { const currentCategory = categoryMap .values() .find( @@ -168,8 +166,7 @@ export default function AddNewPattern() { params.categoryId !== 'my-patterns' ) { history.push( { - path: `/patterns`, - categoryType: PATTERN_TYPES.theme, + postType: PATTERN_TYPES.user, categoryId: PATTERN_DEFAULT_CATEGORY, } ); } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7a215fdd9421ee..c521ea3d8e5c35 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -217,10 +217,7 @@ export default function Editor( { isLoading, onClick } ) { case 'move-to-trash': { history.push( { - path: '/' + items[ 0 ].type, - postId: undefined, - postType: undefined, - canvas: 'view', + postType: items[ 0 ].type, } ); } break; @@ -245,7 +242,6 @@ export default function Editor( { isLoading, onClick } ) { label: __( 'Edit' ), onClick: () => { history.push( { - path: undefined, postId: newItem.id, postType: newItem.type, canvas: 'edit', diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 8d9e14db92a9fa..50d8c84319e5e2 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -17,38 +17,74 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; -import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page'; import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; -import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template'; -import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern'; import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns'; import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu'; import DataViewsSidebarContent from '../sidebar-dataviews'; +import { + NAVIGATION_POST_TYPE, + PATTERN_TYPES, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../utils/constants'; const { useLocation, useHistory } = unlock( routerPrivateApis ); -export default function useLayoutAreas() { - const isSiteEditorLoading = useIsSiteEditorLoading(); +function useRedirectOldPaths() { const history = useHistory(); const { params } = useLocation(); - const { postType, postId, path, layout, isCustom, canvas } = params; - useEffect( () => { - // `/wp_template_part/all` path is no longer used and redirects to - // Patterns page for backward compatibility. + const { postType, path, categoryType, ...rest } = params; + if ( path === '/wp_template_part/all' ) { - history.replace( { path: '/patterns' } ); + history.replace( { postType: TEMPLATE_PART_POST_TYPE } ); + } + + if ( path === '/page' ) { + history.replace( { + postType: 'page', + ...rest, + } ); + } + + if ( path === '/wp_template' ) { + history.replace( { + postType: TEMPLATE_POST_TYPE, + ...rest, + } ); + } + + if ( path === '/patterns' ) { + history.replace( { + postType: + categoryType === TEMPLATE_PART_POST_TYPE + ? TEMPLATE_PART_POST_TYPE + : PATTERN_TYPES.user, + ...rest, + } ); + } + + if ( path === '/navigation' ) { + history.replace( { + postType: NAVIGATION_POST_TYPE, + ...rest, + } ); } - }, [ history, path ] ); + }, [ history, params ] ); +} - // Note: Since "sidebar" is not yet supported here, - // returning undefined from "mobile" means show the sidebar. +export default function useLayoutAreas() { + const isSiteEditorLoading = useIsSiteEditorLoading(); + const history = useHistory(); + const { params } = useLocation(); + const { postType, postId, path, layout, isCustom, canvas } = params; + useRedirectOldPaths(); // Page list - if ( path === '/page' ) { + if ( postType === 'page' ) { const isListLayout = layout === 'list' || ! layout; return { - key: 'pages-list', + key: 'pages', areas: { sidebar: ( ), content: , - preview: isListLayout && ( + preview: ( isListLayout || canvas === 'edit' ) && ( @@ -83,61 +119,17 @@ export default function useLayoutAreas() { }; } - // Regular other post types - if ( postType && postId ) { - let sidebar; - if ( postType === 'wp_template_part' || postType === 'wp_block' ) { - sidebar = ( - - ); - } else if ( postType === 'wp_template' ) { - sidebar = ( - - ); - } else if ( postType === 'page' ) { - sidebar = ( - - ); - } else { - sidebar = ( - - ); - } - return { - key: 'page', - areas: { - sidebar, - preview: , - mobile: canvas === 'edit' && ( - - ), - }, - }; - } - // Templates - if ( path === '/wp_template' ) { + if ( postType === TEMPLATE_POST_TYPE ) { const isListLayout = isCustom !== 'true' && layout === 'list'; return { - key: 'templates-list', + key: 'templates', areas: { sidebar: ( ), content: , - preview: isListLayout && ( + preview: ( isListLayout || canvas === 'edit' ) && ( ), mobile: , @@ -149,15 +141,18 @@ export default function useLayoutAreas() { } // Patterns - // `/wp_template_part/all` path is no longer used and redirects to - // Patterns page for backward compatibility. - if ( path === '/patterns' || path === '/wp_template_part/all' ) { + if ( + [ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType ) + ) { return { key: 'patterns', areas: { sidebar: , content: , mobile: , + preview: canvas === 'edit' && ( + + ), }, }; } @@ -179,14 +174,14 @@ export default function useLayoutAreas() { } // Navigation - if ( path === '/navigation' ) { + if ( postType === NAVIGATION_POST_TYPE ) { if ( postId ) { return { key: 'navigation', areas: { sidebar: ( ), preview: , diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js index a37ee426709cb7..e01dca97c3be46 100644 --- a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js +++ b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js @@ -5,21 +5,15 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { - PATTERN_TYPES, - TEMPLATE_PART_POST_TYPE, - PATTERN_DEFAULT_CATEGORY, -} from '../../utils/constants'; +import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; import { CreateTemplatePartModalContents } from '../create-template-part-modal'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); const { CreatePatternModalContents, useDuplicatePatternProps } = unlock( patternsPrivateApis ); @@ -30,23 +24,10 @@ export const duplicatePatternAction = { modalHeader: _x( 'Duplicate pattern', 'action label' ), RenderModal: ( { items, closeModal } ) => { const [ item ] = items; - const { - params: { categoryId = PATTERN_DEFAULT_CATEGORY }, - } = useLocation(); const isThemePattern = item.type === PATTERN_TYPES.theme; - const history = useHistory(); - function onPatternSuccess( { pattern } ) { - history.push( { - categoryType: PATTERN_TYPES.theme, - categoryId, - postType: PATTERN_TYPES.user, - postId: pattern.id, - } ); - closeModal(); - } const duplicatedProps = useDuplicatePatternProps( { pattern: isThemePattern ? item : item.patternPost, - onSuccess: onPatternSuccess, + onSuccess: () => closeModal(), } ); return ( { const [ item ] = items; const { createSuccessNotice } = useDispatch( noticesStore ); - const { - params: { categoryId = PATTERN_DEFAULT_CATEGORY }, - } = useLocation(); - const history = useHistory(); - function onTemplatePartSuccess( templatePart ) { + function onTemplatePartSuccess() { createSuccessNotice( sprintf( // translators: %s: The new template part's title e.g. 'Call to action (copy)'. @@ -79,12 +56,6 @@ export const duplicateTemplatePartAction = { ), { type: 'snackbar', id: 'edit-site-patterns-success' } ); - history.push( { - postType: TEMPLATE_PART_POST_TYPE, - postId: templatePart?.id, - categoryType: TEMPLATE_PART_POST_TYPE, - categoryId, - } ); closeModal(); } return ( diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js index adb33e71816e56..d366ed6fb3a0e5 100644 --- a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js +++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js @@ -60,8 +60,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) { onClose?.(); history.push( { - path: `/patterns`, - categoryType: PATTERN_TYPES.theme, + postType: PATTERN_TYPES.user, categoryId: PATTERN_DEFAULT_CATEGORY, } ); } catch ( error ) { diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index 85ca443cff3b5f..cdbec44f182f66 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -44,7 +44,7 @@ export default function PatternsHeader( { description = templatePartArea?.description || __( 'Includes every template part defined for any area.' ); - } else if ( type === PATTERN_TYPES.theme ) { + } else if ( type === PATTERN_TYPES.user && !! categoryId ) { patternCategory = patternCategories.find( ( category ) => category.name === categoryId ); diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index f8314d65f34ff5..e47ee70dc8e3e9 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -120,7 +120,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) { ); } -function Preview( { item, categoryId, viewType } ) { +function Preview( { item, viewType } ) { const descriptionId = useId(); const isUserPattern = item.type === PATTERN_TYPES.user; const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; @@ -130,8 +130,6 @@ function Preview( { item, categoryId, viewType } ) { const { onClick } = useLink( { postType: item.type, postId: isUserPattern ? item.id : item.name, - categoryId, - categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme, canvas: 'edit', } ); @@ -195,14 +193,11 @@ function Author( { item, viewType } ) { ); } -function Title( { item, categoryId } ) { +function Title( { item } ) { const isUserPattern = item.type === PATTERN_TYPES.user; - const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; const { onClick } = useLink( { postType: item.type, postId: isUserPattern ? item.id : item.name, - categoryId, - categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme, canvas: 'edit', } ); return ( @@ -245,25 +240,19 @@ function Title( { item, categoryId } ) { export default function DataviewsPatterns() { const { - params: { categoryType, categoryId: categoryIdFromURL }, + params: { postType, categoryId: categoryIdFromURL }, } = useLocation(); - const type = categoryType || PATTERN_TYPES.theme; + const type = postType || PATTERN_TYPES.user; const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY; const [ view, setView ] = useState( DEFAULT_VIEW ); - const isUncategorizedThemePatterns = - type === PATTERN_TYPES.theme && categoryId === 'uncategorized'; const previousCategoryId = usePrevious( categoryId ); const viewSyncStatus = view.filters?.find( ( { field } ) => field === 'sync-status' )?.value; - const { patterns, isResolving } = usePatterns( - type, - isUncategorizedThemePatterns ? '' : categoryId, - { - search: view.search, - syncStatus: viewSyncStatus, - } - ); + const { patterns, isResolving } = usePatterns( type, categoryId, { + search: view.search, + syncStatus: viewSyncStatus, + } ); const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, { per_page: -1, @@ -288,11 +277,7 @@ export default function DataviewsPatterns() { header: __( 'Preview' ), id: 'preview', render: ( { item } ) => ( - + ), enableSorting: false, enableHiding: false, @@ -301,14 +286,12 @@ export default function DataviewsPatterns() { { header: __( 'Title' ), id: 'title', - render: ( { item } ) => ( - - ), + render: ( { item } ) => <Title item={ item } />, enableHiding: false, }, ]; - if ( type === PATTERN_TYPES.theme ) { + if ( type === PATTERN_TYPES.user ) { _fields.push( { header: __( 'Sync status' ), id: 'sync-status', diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index 68c70d9447be89..32377edcd96842 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -291,21 +291,28 @@ const selectUserPatterns = createSelector( ); export const usePatterns = ( - categoryType, + postType, categoryId, { search = '', syncStatus } = {} ) => { return useSelect( ( select ) => { - if ( categoryType === TEMPLATE_PART_POST_TYPE ) { + if ( postType === TEMPLATE_PART_POST_TYPE ) { return selectTemplatePartsAsPatterns( select, categoryId, search ); - } else if ( categoryType === PATTERN_TYPES.theme ) { - return selectPatterns( select, categoryId, syncStatus, search ); - } else if ( categoryType === PATTERN_TYPES.user ) { + } else if ( postType === PATTERN_TYPES.user && !! categoryId ) { + const appliedCategory = + categoryId === 'uncategorized' ? '' : categoryId; + return selectPatterns( + select, + appliedCategory, + syncStatus, + search + ); + } else if ( postType === PATTERN_TYPES.user ) { return selectUserPatterns( select, syncStatus, search ); } return { @@ -313,7 +320,7 @@ export const usePatterns = ( isResolving: false, }; }, - [ categoryId, categoryType, search, syncStatus ] + [ categoryId, postType, search, syncStatus ] ); }; diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js index 18cef4a6133809..cf79dacef8d426 100644 --- a/packages/edit-site/src/components/pattern-modal/duplicate.js +++ b/packages/edit-site/src/components/pattern-modal/duplicate.js @@ -3,28 +3,21 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ import { PATTERN_MODALS } from './'; -import { PATTERN_TYPES } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; import useEditedEntityRecord from '../use-edited-entity-record'; const { DuplicatePatternModal } = unlock( patternsPrivateApis ); -const { useHistory, useLocation } = unlock( routerPrivateApis ); const { interfaceStore } = unlock( editorPrivateApis ); export default function PatternDuplicateModal() { const { record } = useEditedEntityRecord(); - const { - params: { categoryType, categoryId }, - } = useLocation(); const { closeModal } = useDispatch( interfaceStore ); - const history = useHistory(); const isActive = useSelect( ( select ) => select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate ) @@ -34,21 +27,10 @@ export default function PatternDuplicateModal() { return null; } - function onSuccess( { pattern: newPattern } ) { - history.push( { - categoryType, - categoryId, - postType: PATTERN_TYPES.user, - postId: newPattern.id, - } ); - - closeModal(); - } - return ( <DuplicatePatternModal onClose={ closeModal } - onSuccess={ onSuccess } + onSuccess={ () => closeModal() } pattern={ record } /> ); diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js index 4bf7a173525c90..92986912d29cb8 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js +++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js @@ -26,7 +26,7 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); function AddNewItemModalContent( { type, setIsAdding } ) { const { - params: { path }, + params: { postType }, } = useLocation(); const history = useHistory(); const { saveEntityRecord } = useDispatch( coreStore ); @@ -69,7 +69,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) { } ); history.push( { - path, + postType, activeView: savedRecord.id, isCustom: 'true', } ); diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js index ebc2f43d2e4a14..5c7b3d038e76d9 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js +++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js @@ -82,7 +82,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) { function CustomDataViewItem( { dataviewId, isActive } ) { const { - params: { path }, + params: { postType }, } = useLocation(); const history = useHistory(); const { dataview } = useSelect( @@ -146,7 +146,7 @@ function CustomDataViewItem( { dataviewId, isActive } ) { ); if ( isActive ) { history.replace( { - path, + postType, } ); } onClose(); diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js index 53d0f2984cb939..e6ebd5b1f8ee8b 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js +++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js @@ -29,14 +29,14 @@ export default function DataViewItem( { suffix, } ) { const { - params: { path, layout }, + params: { postType, layout }, } = useLocation(); const iconToUse = icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon; const linkInfo = useLink( { - path, + postType, layout, activeView: isCustom ? customViewId : slug, isCustom: isCustom ? 'true' : 'false', diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 73d7b56b80d00d..9362308172f89a 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/index.js +++ b/packages/edit-site/src/components/sidebar-dataviews/index.js @@ -14,24 +14,19 @@ const { useLocation } = unlock( routerPrivateApis ); import DataViewItem from './dataview-item'; import CustomDataViewsList from './custom-dataviews-list'; -const PATH_TO_TYPE = { - '/page': 'page', -}; - export default function DataViewsSidebarContent() { const { - params: { path, activeView = 'all', isCustom = 'false' }, + params: { postType, activeView = 'all', isCustom = 'false' }, } = useLocation(); - if ( ! path || ! PATH_TO_TYPE[ path ] ) { + if ( ! postType ) { return null; } const isCustomBoolean = isCustom === 'true'; - const type = PATH_TO_TYPE[ path ]; return ( <> <ItemGroup> - { DEFAULT_VIEWS[ type ].map( ( dataview ) => { + { DEFAULT_VIEWS[ postType ].map( ( dataview ) => { return ( <DataViewItem key={ dataview.slug } @@ -51,7 +46,7 @@ export default function DataViewsSidebarContent() { { window?.__experimentalCustomViews && ( <CustomDataViewsList activeView={ activeView } - type={ type } + type={ postType } isCustom /> ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js index 8e979e7ab8bde7..80f06d7e93133b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js @@ -29,23 +29,23 @@ export default function SidebarNavigationItem( { icon, withChevron = false, suffix, - path, + uid, + params, onClick, children, ...props } ) { const history = useHistory(); const { navigate } = useContext( SidebarNavigationContext ); - - // If there is no custom click handler, create one that navigates to `path`. + // If there is no custom click handler, create one that navigates to `params`. function handleClick( e ) { if ( onClick ) { onClick( e ); navigate( 'forward' ); - } else if ( path ) { + } else if ( params ) { e.preventDefault(); - history.push( { path } ); - navigate( 'forward', `[id="${ path }"]` ); + history.push( params ); + navigate( 'forward', `[id="${ uid }"]` ); } } @@ -57,7 +57,7 @@ export default function SidebarNavigationItem( { className ) } onClick={ handleClick } - id={ path } + id={ uid } { ...props } > <HStack justify="flex-start"> diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 87a7b6d9d15f27..31e359acb4027d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -45,7 +45,13 @@ export function SidebarNavigationItemGlobalStyles( props ) { [] ); if ( hasGlobalStyleVariations ) { - return <SidebarNavigationItem { ...props } path="/wp_global_styles" />; + return ( + <SidebarNavigationItem + { ...props } + params={ { path: '/wp_global_styles' } } + uid="global-styles-navigation-item" + /> + ); } return ( <SidebarNavigationItem diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 0859d64aa1a1c6..bdfb6ac93b51c4 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -15,6 +15,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; +import { + NAVIGATION_POST_TYPE, + TEMPLATE_POST_TYPE, + PATTERN_TYPES, +} from '../../utils/constants'; export default function SidebarNavigationScreenMain() { const { setEditorCanvasContainerView } = unlock( @@ -37,34 +42,39 @@ export default function SidebarNavigationScreenMain() { <> <ItemGroup> <SidebarNavigationItem - path="/navigation" + uid="navigation-navigation-item" + params={ { postType: NAVIGATION_POST_TYPE } } withChevron icon={ navigation } > { __( 'Navigation' ) } </SidebarNavigationItem> <SidebarNavigationItemGlobalStyles + uid="styles-navigation-item" withChevron icon={ styles } > { __( 'Styles' ) } </SidebarNavigationItemGlobalStyles> <SidebarNavigationItem - path="/page" + uid="page-navigation-item" + params={ { postType: 'page' } } withChevron icon={ page } > { __( 'Pages' ) } </SidebarNavigationItem> <SidebarNavigationItem - path="/wp_template" + uid="template-navigation-item" + params={ { postType: TEMPLATE_POST_TYPE } } withChevron icon={ layout } > { __( 'Templates' ) } </SidebarNavigationItem> <SidebarNavigationItem - path="/patterns" + uid="patterns-navigation-item" + params={ { postType: PATTERN_TYPES.user } } withChevron icon={ symbol } > diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js index ce75f3155f33e7..7009ddc6fc9278 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js @@ -42,7 +42,7 @@ function useDeleteNavigationMenu() { type: 'snackbar', } ); - history.push( { path: '/navigation' } ); + history.push( { postType: 'wp_navigation' } ); } catch ( error ) { createErrorNotice( sprintf( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index d5c3fa92c902f9..bc32b0a9061c1e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -156,7 +156,7 @@ export function SidebarNavigationScreenWrapper( { const NavMenuItem = ( { postId, ...props } ) => { const linkInfo = useLink( { postId, - path: '/navigation', + postType: 'wp_navigation', } ); return <SidebarNavigationItem { ...linkInfo } { ...props } />; }; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index bb34802ebbbc36..3749505c6b56fb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -64,6 +64,7 @@ export default function LeafMoreMenu( props ) { { postType: attributes.type, postId: attributes.id, + canvas: 'edit', }, { backPath: params, @@ -75,6 +76,7 @@ export default function LeafMoreMenu( props ) { { postType: 'page', postId: attributes.id, + canvas: 'edit', }, { backPath: params, diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js deleted file mode 100644 index 51251dcf846e66..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ /dev/null @@ -1,204 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { - __experimentalVStack as VStack, - ExternalLink, - __experimentalTruncate as Truncate, -} from '@wordpress/components'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; -import { decodeEntities } from '@wordpress/html-entities'; -import { pencil } from '@wordpress/icons'; -import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; -import { escapeAttribute } from '@wordpress/escape-html'; -import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url'; -import { useEffect, useCallback } from '@wordpress/element'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; -import { store as noticesStore } from '@wordpress/notices'; - -/** - * Internal dependencies - */ -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import SidebarButton from '../sidebar-button'; -import PageDetails from './page-details'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; - -const { useLocation, useHistory } = unlock( routerPrivateApis ); -const { PostActions } = unlock( editorPrivateApis ); - -export default function SidebarNavigationScreenPage( { backPath } ) { - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const history = useHistory(); - const { createSuccessNotice } = useDispatch( noticesStore ); - const { - params: { postId }, - } = useLocation(); - const { record, hasResolved } = useEntityRecord( - 'postType', - 'page', - postId - ); - - const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( - ( select ) => { - const { getEntityRecord } = select( coreStore ); - // Featured image. - const attachedMedia = record?.featured_media - ? getEntityRecord( - 'postType', - 'attachment', - record?.featured_media - ) - : null; - - return { - featuredMediaSourceUrl: - attachedMedia?.media_details.sizes?.medium?.source_url || - attachedMedia?.source_url, - featuredMediaAltText: escapeAttribute( - attachedMedia?.alt_text || - attachedMedia?.description?.raw || - '' - ), - }; - }, - [ record ] - ); - - // Redirect to the main pages navigation screen if the page is not found or has been deleted. - useEffect( () => { - if ( hasResolved && ! record ) { - history.push( { - path: '/page', - postId: undefined, - postType: undefined, - canvas: 'view', - } ); - } - }, [ hasResolved, record, history ] ); - - const onActionPerformed = useCallback( - ( actionId, items ) => { - switch ( actionId ) { - case 'move-to-trash': - { - history.push( { - path: '/' + items[ 0 ].type, - postId: undefined, - postType: undefined, - canvas: 'view', - } ); - } - break; - case 'duplicate-post': - { - const newItem = items[ 0 ]; - const title = - typeof newItem.title === 'string' - ? newItem.title - : newItem.title?.rendered; - createSuccessNotice( - sprintf( - // translators: %s: Title of the created post e.g: "Post 1". - __( '"%s" successfully created.' ), - title - ), - { - type: 'snackbar', - id: 'duplicate-post-action', - actions: [ - { - label: __( 'Edit' ), - onClick: () => { - history.push( { - path: undefined, - postId: newItem.id, - postType: newItem.type, - canvas: 'edit', - } ); - }, - }, - ], - } - ); - } - break; - } - }, - [ history, createSuccessNotice ] - ); - - const featureImageAltText = featuredMediaAltText - ? decodeEntities( featuredMediaAltText ) - : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - - return record ? ( - <SidebarNavigationScreen - backPath={ backPath } - title={ decodeEntities( - record?.title?.rendered || __( '(no title)' ) - ) } - actions={ - <> - <PostActions - onActionPerformed={ onActionPerformed } - buttonProps={ { size: 'default' } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - meta={ - <ExternalLink - className="edit-site-sidebar-navigation-screen__page-link" - href={ record.link } - > - { filterURLForDisplay( - safeDecodeURIComponent( record.link ) - ) } - </ExternalLink> - } - content={ - <> - { !! featuredMediaSourceUrl && ( - <VStack - className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper" - alignment="left" - spacing={ 2 } - > - <div className="edit-site-sidebar-navigation-screen-page__featured-image has-image"> - <img - alt={ featureImageAltText } - src={ featuredMediaSourceUrl } - /> - </div> - </VStack> - ) } - { !! record?.excerpt?.rendered && ( - <Truncate - className="edit-site-sidebar-navigation-screen-page__excerpt" - numberOfLines={ 3 } - > - { stripHTML( record.excerpt.rendered ) } - </Truncate> - ) } - <PageDetails id={ postId } /> - </> - } - footer={ - record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null - } - /> - ) : null; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js deleted file mode 100644 index 7fcedcf40ce134..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js +++ /dev/null @@ -1,161 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, _x, sprintf } from '@wordpress/i18n'; -import { __experimentalTruncate as Truncate } from '@wordpress/components'; -import { count as wordCount } from '@wordpress/wordcount'; -import { useSelect } from '@wordpress/data'; -import { decodeEntities } from '@wordpress/html-entities'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; -import { safeDecodeURIComponent } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import StatusLabel from './status-label'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, -} from '../sidebar-navigation-screen-details-panel'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; - -// Taken from packages/editor/src/components/time-to-read/index.js. -const AVERAGE_READING_RATE = 189; - -function getPageDetails( page ) { - if ( ! page ) { - return []; - } - - const details = [ - { - label: __( 'Status' ), - value: ( - <StatusLabel - status={ page?.password ? 'protected' : page.status } - date={ page?.date } - short - /> - ), - }, - { - label: __( 'Slug' ), - value: ( - <Truncate numberOfLines={ 1 }> - { safeDecodeURIComponent( - page.slug || page.generated_slug - ) } - </Truncate> - ), - }, - ]; - - if ( page?.templateTitle ) { - details.push( { - label: __( 'Template' ), - value: decodeEntities( page.templateTitle ), - } ); - } - - if ( page?.parentTitle ) { - details.push( { - label: __( 'Parent' ), - value: decodeEntities( page.parentTitle || __( '(no title)' ) ), - } ); - } - - /* - * translators: If your word count is based on single characters (e.g. East Asian characters), - * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. - * Do not translate into your own language. - */ - const wordCountType = _x( 'words', 'Word count type. Do not translate!' ); - const wordsCounted = page?.content?.rendered - ? wordCount( page.content.rendered, wordCountType ) - : 0; - const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE ); - - if ( wordsCounted && ! page?.isPostsPage ) { - details.push( - { - label: __( 'Words' ), - value: wordsCounted.toLocaleString() || __( 'Unknown' ), - }, - { - label: __( 'Time to read' ), - value: - readingTime > 1 - ? sprintf( - /* translators: %s: is the number of minutes. */ - __( '%s mins' ), - readingTime.toLocaleString() - ) - : __( '< 1 min' ), - } - ); - } - return details; -} - -export default function PageDetails( { id } ) { - const { record } = useEntityRecord( 'postType', 'page', id ); - const { parentTitle, templateTitle, isPostsPage } = useSelect( - ( select ) => { - const { getEditedPostId } = unlock( select( editSiteStore ) ); - const template = select( coreStore ).getEntityRecord( - 'postType', - TEMPLATE_POST_TYPE, - getEditedPostId() - ); - const _templateTitle = template?.title?.rendered; - - // Parent page title. - const _parentTitle = record?.parent - ? select( coreStore ).getEntityRecord( - 'postType', - 'page', - record.parent, - { - _fields: [ 'title' ], - } - )?.title?.rendered - : null; - - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); - - return { - parentTitle: _parentTitle, - templateTitle: _templateTitle, - isPostsPage: record?.id === siteSettings?.page_for_posts, - }; - }, - [ record?.parent, record?.id ] - ); - return ( - <SidebarNavigationScreenDetailsPanel - spacing={ 5 } - title={ __( 'Details' ) } - > - { getPageDetails( { - parentTitle, - templateTitle, - isPostsPage, - ...record, - } ).map( ( { label, value } ) => ( - <SidebarNavigationScreenDetailsPanelRow key={ label }> - <SidebarNavigationScreenDetailsPanelLabel> - { label } - </SidebarNavigationScreenDetailsPanelLabel> - <SidebarNavigationScreenDetailsPanelValue> - { value } - </SidebarNavigationScreenDetailsPanelValue> - </SidebarNavigationScreenDetailsPanelRow> - ) ) } - </SidebarNavigationScreenDetailsPanel> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js deleted file mode 100644 index 934289311b4851..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date'; -import { createInterpolateElement } from '@wordpress/element'; - -export default function StatusLabel( { status, date, short } ) { - const relateToNow = humanTimeDiff( date ); - let statusLabel = status; - switch ( status ) { - case 'publish': - statusLabel = date - ? createInterpolateElement( - sprintf( - /* translators: %s: is the relative time when the post was published. */ - __( 'Published <time>%s</time>' ), - relateToNow - ), - { time: <time dateTime={ date } /> } - ) - : __( 'Published' ); - break; - case 'future': - const formattedDate = dateI18n( - short ? 'M j' : 'F j', - getDate( date ) - ); - statusLabel = date - ? createInterpolateElement( - sprintf( - /* translators: %s: is the formatted date and time on which the post is scheduled to be published. */ - __( 'Scheduled: <time>%s</time>' ), - formattedDate - ), - { time: <time dateTime={ date } /> } - ) - : __( 'Scheduled' ); - break; - case 'draft': - statusLabel = __( 'Draft' ); - break; - case 'pending': - statusLabel = __( 'Pending' ); - break; - case 'private': - statusLabel = __( 'Private' ); - break; - case 'protected': - statusLabel = __( 'Password protected' ); - break; - } - - return ( - <div - className={ clsx( - 'edit-site-sidebar-navigation-screen-page__status', - { - [ `has-status has-${ status }-status` ]: !! status, - } - ) } - > - { statusLabel } - </div> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss deleted file mode 100644 index 0daf52740c649b..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss +++ /dev/null @@ -1,69 +0,0 @@ -.edit-site-sidebar-navigation-screen-page__featured-image-wrapper { - background-color: $gray-800; - margin-bottom: $grid-unit-20; - min-height: 128px; - border-radius: $grid-unit-05; -} - -.edit-site-sidebar-navigation-screen-page__featured-image { - border-radius: 2px; - height: 128px; - overflow: hidden; - width: 100%; - background-size: cover; - background-position: 50% 50%; - display: flex; - align-items: center; - justify-content: center; - color: $gray-600; - img { - object-fit: cover; - height: 100%; - width: 100%; - object-position: 50% 50%; - } -} - -.edit-site-sidebar-navigation-screen-page__featured-image-description { - font-size: $helptext-font-size; -} - -.edit-site-sidebar-navigation-screen-page__excerpt { - font-size: $helptext-font-size; - margin-bottom: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-page__modified { - margin: 0 0 $grid-unit-20 $grid-unit-20; - color: $gray-600; - .components-text { - color: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-page__status { - display: inline-flex; - - time { - display: contents; - } - - svg { - height: 16px; - width: 16px; - margin-right: $grid-unit-10; - fill: $alert-yellow; - } - - &.has-publish-status svg, - &.has-future-status svg { - fill: $alert-green; - } -} - -.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button { - color: inherit; - &:active { - color: inherit; - } -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js deleted file mode 100644 index 1b21466576f8ef..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { pencil } from '@wordpress/icons'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import SidebarButton from '../sidebar-button'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; -import usePatternDetails from './use-pattern-details'; -import { store as editSiteStore } from '../../store'; -import { unlock } from '../../lock-unlock'; -import TemplateActions from '../template-actions'; - -const { useLocation, useHistory } = unlock( routerPrivateApis ); - -export default function SidebarNavigationScreenPattern( { backPath } ) { - const history = useHistory(); - const location = useLocation(); - const { - params: { postType, postId }, - } = location; - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - - useInitEditedEntityFromURL(); - - const patternDetails = usePatternDetails( postType, postId ); - - return ( - <SidebarNavigationScreen - actions={ - <> - <TemplateActions - postType={ postType } - postId={ postId } - toggleProps={ { as: SidebarButton } } - onRemove={ () => { - history.push( backPath ); - } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - backPath={ backPath } - { ...patternDetails } - /> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss deleted file mode 100644 index 95a27ba5aa5fa5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.edit-site-sidebar-navigation-screen-pattern__added-by-description { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-pattern__added-by-description-author { - display: inline-flex; - align-items: center; - - img { - border-radius: $grid-unit-15; - } - - svg { - fill: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon { - width: 24px; - height: 24px; - margin-right: $grid-unit-10; -} - diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js deleted file mode 100644 index 22d9d841dc6fd5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import SidebarNavigationItem from '../sidebar-navigation-item'; -import useNavigationMenuTitle from './use-navigation-menu-title'; -import { useLink } from '../routes/link'; -import { NAVIGATION_POST_TYPE } from '../../utils/constants'; - -export default function TemplatePartNavigationMenuListItem( { id } ) { - const title = useNavigationMenuTitle( id ); - - const linkInfo = useLink( { - postId: id, - postType: NAVIGATION_POST_TYPE, - } ); - - if ( ! id || title === undefined ) { - return null; - } - - return ( - <SidebarNavigationItem withChevron { ...linkInfo }> - { title || __( '(no title)' ) } - </SidebarNavigationItem> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js deleted file mode 100644 index 4171b1e782575e..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; -/** - * Internal dependencies - */ -import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item'; - -export default function TemplatePartNavigationMenuList( { menus } ) { - return ( - <ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list"> - { menus.map( ( menuId ) => ( - <TemplatePartNavigationMenuListItem - key={ menuId } - id={ menuId } - /> - ) ) } - </ItemGroup> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js deleted file mode 100644 index 3d770cc4f7c26f..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalHeading as Heading } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor'; -import useNavigationMenuTitle from './use-navigation-menu-title'; - -export default function TemplatePartNavigationMenu( { id } ) { - const title = useNavigationMenuTitle( id ); - - if ( ! id || title === undefined ) { - return null; - } - - return ( - <> - <Heading - className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" - size="11" - upperCase - weight={ 500 } - > - { title || __( 'Navigation' ) } - </Heading> - <NavigationMenuEditor navigationMenuId={ id } /> - </> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js deleted file mode 100644 index d766d04b132ca1..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalHeading as Heading } from '@wordpress/components'; -/** - * Internal dependencies - */ -import TemplatePartNavigationMenu from './template-part-navigation-menu'; -import TemplatePartNavigationMenuList from './template-part-navigation-menu-list'; - -export default function TemplatePartNavigationMenus( { menus } ) { - if ( ! menus.length ) { - return null; - } - - // if there is a single menu then render TemplatePartNavigationMenu - if ( menus.length === 1 ) { - return <TemplatePartNavigationMenu id={ menus[ 0 ] } />; - } - - // if there are multiple menus then render TemplatePartNavigationMenuList - return ( - <> - <Heading - className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" - size="11" - upperCase - weight={ 500 } - > - { __( 'Navigation' ) } - </Heading> - <TemplatePartNavigationMenuList menus={ menus } /> - </> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js deleted file mode 100644 index 249124b1054cec..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * WordPress dependencies - */ -import { parse } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import TemplatePartNavigationMenus from './template-part-navigation-menus'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; - -function getBlocksFromRecord( record ) { - if ( record?.blocks ) { - return record?.blocks; - } - - return record?.content && typeof record.content !== 'function' - ? parse( record.content ) - : []; -} - -/** - * Retrieves a list of specific blocks from a given tree of blocks. - * - * @param {string} targetBlockType The name of the block type to find. - * @param {Array} blocks A list of blocks from a template part entity. - * - * @return {Array} A list of any navigation blocks found in the blocks. - */ -function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) { - if ( ! targetBlockType || ! blocks?.length ) { - return []; - } - - const findInBlocks = ( _blocks ) => { - if ( ! _blocks ) { - return []; - } - - const navigationBlocks = []; - - for ( const block of _blocks ) { - if ( block.name === targetBlockType ) { - navigationBlocks.push( block ); - } - - if ( block?.innerBlocks ) { - const innerNavigationBlocks = findInBlocks( block.innerBlocks ); - - if ( innerNavigationBlocks.length ) { - navigationBlocks.push( ...innerNavigationBlocks ); - } - } - } - - return navigationBlocks; - }; - - return findInBlocks( blocks ); -} - -export default function useNavigationMenuContent( postType, postId ) { - const { record } = useEditedEntityRecord( postType, postId ); - - // Only managing navigation menus in template parts is supported - // to match previous behaviour. This could potentially be expanded - // to patterns as well. - if ( postType !== TEMPLATE_PART_POST_TYPE ) { - return; - } - - const blocks = getBlocksFromRecord( record ); - const navigationBlocks = getBlocksOfTypeFromBlocks( - 'core/navigation', - blocks - ); - - if ( ! navigationBlocks.length ) { - return; - } - - const navigationMenuIds = navigationBlocks?.map( - ( block ) => block.attributes.ref - ); - - // Dedupe the Navigation blocks, as you can have multiple navigation blocks in the template. - // Also, filter out undefined values, as blocks don't have an id when initially added. - const uniqueNavigationMenuIds = [ ...new Set( navigationMenuIds ) ].filter( - ( menuId ) => menuId - ); - - if ( ! uniqueNavigationMenuIds?.length ) { - return; - } - - return <TemplatePartNavigationMenus menus={ uniqueNavigationMenuIds } />; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js deleted file mode 100644 index 4585c98ce3e1f5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import { NAVIGATION_POST_TYPE } from '../../utils/constants'; - -export default function useNavigationMenuTitle( id ) { - return useSelect( - ( select ) => { - if ( ! id ) { - return undefined; - } - - const editedRecord = select( coreStore ).getEditedEntityRecord( - 'postType', - NAVIGATION_POST_TYPE, - id - ); - - // Do not display a 'trashed' navigation menu. - return editedRecord.status === 'trash' - ? undefined - : editedRecord.title; - }, - [ id ] - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js deleted file mode 100644 index dfdfbd87d22008..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ /dev/null @@ -1,205 +0,0 @@ -/** - * External dependencies - */ -import { sentenceCase } from 'change-case'; - -/** - * WordPress dependencies - */ -import { __, _x, sprintf } from '@wordpress/i18n'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { useAddedBy } from '../page-templates/hooks'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import useNavigationMenuContent from './use-navigation-menu-content'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, -} from '../sidebar-navigation-screen-details-panel'; -import { - PATTERN_TYPES, - TEMPLATE_PART_POST_TYPE, - PATTERN_SYNC_TYPES, - TEMPLATE_ORIGINS, -} from '../../utils/constants'; - -export default function usePatternDetails( postType, postId ) { - const { getDescription, getTitle, record } = useEditedEntityRecord( - postType, - postId - ); - const templatePartAreas = useSelect( - ( select ) => - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), - [] - ); - const { currentTheme, userPatternCategories } = useSelect( ( select ) => { - const { getCurrentTheme, getUserPatternCategories } = - select( coreStore ); - - return { - currentTheme: getCurrentTheme(), - userPatternCategories: getUserPatternCategories(), - }; - }, [] ); - - const addedBy = useAddedBy( postType, postId ); - const isAddedByActiveTheme = - addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; - const title = getTitle(); - let description = getDescription(); - - if ( ! description && addedBy.text ) { - description = - postType === PATTERN_TYPES.user - ? sprintf( - // translators: %s: pattern title e.g: "Header". - __( 'This is the %s pattern.' ), - getTitle() - ) - : sprintf( - // translators: %s: template part title e.g: "Header". - __( 'This is the %s template part.' ), - getTitle() - ); - } - - if ( ! description && postType === PATTERN_TYPES.user && record?.title ) { - description = sprintf( - // translators: %s: user created pattern title e.g. "Footer". - __( 'This is the %s pattern.' ), - record.title - ); - } - - const footer = record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null; - - const details = []; - - if ( - postType === PATTERN_TYPES.user || - postType === TEMPLATE_PART_POST_TYPE - ) { - details.push( { - label: __( 'Syncing' ), - value: - record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced - ? _x( - 'Not synced', - 'Text that indicates that the pattern is not synchronized' - ) - : _x( - 'Synced', - 'Text that indicates that the pattern is synchronized' - ), - } ); - - if ( record.wp_pattern_category?.length === 0 ) { - details.push( { - label: __( 'Categories' ), - value: __( 'Uncategorized' ), - } ); - } - if ( record.wp_pattern_category?.length > 0 ) { - const patternCategories = new Map(); - userPatternCategories.forEach( ( userCategory ) => - patternCategories.set( userCategory.id, userCategory ) - ); - - const categories = record.wp_pattern_category - .filter( ( category ) => patternCategories.get( category ) ) - .map( ( category ) => patternCategories.get( category ).label ); - - details.push( { - label: __( 'Categories' ), - value: categories.length > 0 ? categories.join( ', ' ) : '', - } ); - } - } - - if ( postType === TEMPLATE_PART_POST_TYPE ) { - const templatePartArea = templatePartAreas.find( - ( area ) => area.area === record.area - ); - - let areaDetailValue = templatePartArea?.label; - - if ( ! areaDetailValue ) { - areaDetailValue = record.area - ? sprintf( - // translators: %s: Sentenced cased template part area e.g: "My custom area". - __( '%s (removed)' ), - sentenceCase( record.area ) - ) - : __( 'None' ); - } - - details.push( { label: __( 'Area' ), value: areaDetailValue } ); - } - - if ( - postType === TEMPLATE_PART_POST_TYPE && - addedBy.text && - ! isAddedByActiveTheme - ) { - details.push( { - label: __( 'Added by' ), - value: ( - <span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author"> - { addedBy.text } - </span> - ), - } ); - } - - if ( - postType === TEMPLATE_PART_POST_TYPE && - addedBy.text && - ( record.origin === TEMPLATE_ORIGINS.plugin || - record.has_theme_file === true ) - ) { - details.push( { - label: __( 'Customized' ), - value: ( - <span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized"> - { addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) } - </span> - ), - } ); - } - - const content = ( - <> - { useNavigationMenuContent( postType, postId ) } - { !! details.length && ( - <SidebarNavigationScreenDetailsPanel - spacing={ 5 } - title={ __( 'Details' ) } - > - { details.map( ( { label, value } ) => ( - <SidebarNavigationScreenDetailsPanelRow key={ label }> - <SidebarNavigationScreenDetailsPanelLabel> - { label } - </SidebarNavigationScreenDetailsPanelLabel> - <SidebarNavigationScreenDetailsPanelValue> - { value } - </SidebarNavigationScreenDetailsPanelValue> - </SidebarNavigationScreenDetailsPanelRow> - ) ) } - </SidebarNavigationScreenDetailsPanel> - ) } - </> - ); - - return { title, description, content, footer }; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js index 49274a0435bafa..092f090e3c152e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js @@ -3,6 +3,7 @@ */ import SidebarNavigationItem from '../sidebar-navigation-item'; import { useLink } from '../routes/link'; +import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants'; export default function CategoryItem( { count, @@ -11,12 +12,13 @@ export default function CategoryItem( { isActive, label, type, - path = '/patterns', } ) { const linkInfo = useLink( { - path, - categoryType: type, categoryId: id, + postType: + type === TEMPLATE_PART_POST_TYPE + ? TEMPLATE_PART_POST_TYPE + : PATTERN_TYPES.user, } ); if ( ! count ) { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index 9c8681b86dbf37..a5f559f185064e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -31,7 +31,6 @@ import { unlock } from '../../lock-unlock'; const { useLocation } = unlock( routerPrivateApis ); function CategoriesGroup( { - path, templatePartAreas, patternCategories, currentCategory, @@ -43,7 +42,6 @@ function CategoriesGroup( { <ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group"> <CategoryItem key="all" - path={ path } count={ Object.values( templatePartAreas ) .map( ( { templateParts } ) => templateParts?.length || 0 ) .reduce( ( acc, val ) => acc + val, 0 ) } @@ -60,7 +58,6 @@ function CategoriesGroup( { ( [ area, { label, templateParts } ] ) => ( <CategoryItem key={ area } - path={ path } count={ templateParts?.length } icon={ getTemplatePartIcon( area ) } label={ label } @@ -77,32 +74,28 @@ function CategoriesGroup( { { allPatterns && ( <CategoryItem key={ allPatterns.name } - path={ path } count={ allPatterns.count } label={ allPatterns.label } icon={ file } id={ allPatterns.name } - type="pattern" + type={ PATTERN_TYPES.user } isActive={ currentCategory === `${ allPatterns.name }` && - ( currentType === PATTERN_TYPES.theme || - currentType === PATTERN_TYPES.user ) + currentType === PATTERN_TYPES.user } /> ) } { otherPatterns.map( ( category ) => ( <CategoryItem key={ category.name } - path={ path } count={ category.count } label={ category.label } icon={ file } id={ category.name } - type="pattern" + type={ PATTERN_TYPES.user } isActive={ currentCategory === `${ category.name }` && - ( currentType === PATTERN_TYPES.theme || - currentType === PATTERN_TYPES.user ) + currentType === PATTERN_TYPES.user } /> ) ) } @@ -112,10 +105,10 @@ function CategoriesGroup( { export default function SidebarNavigationScreenPatterns( { backPath } ) { const { - params: { categoryType, categoryId, path }, + params: { postType, categoryId }, } = useLocation(); const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY; - const currentType = categoryType || PATTERN_TYPES.theme; + const currentType = postType || PATTERN_TYPES.user; const { templatePartAreas, hasTemplateParts, isLoading } = useTemplatePartAreas(); @@ -145,7 +138,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) { </ItemGroup> ) } <CategoriesGroup - path={ path } templatePartAreas={ templatePartAreas } patternCategories={ patternCategories } currentCategory={ currentCategory } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js deleted file mode 100644 index 57a13377617533..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js +++ /dev/null @@ -1,144 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { debounce } from '@wordpress/compose'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { - CheckboxControl, - __experimentalInputControl as InputControl, - __experimentalNumberControl as NumberControl, -} from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, -} from '../sidebar-navigation-screen-details-panel'; - -const EMPTY_OBJECT = {}; - -export default function HomeTemplateDetails() { - const { editEntityRecord } = useDispatch( coreStore ); - - const { - allowCommentsOnNewPosts, - postsPerPage, - postsPageTitle, - postsPageId, - } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); - const _postsPageRecord = siteSettings?.page_for_posts - ? getEntityRecord( - 'postType', - 'page', - siteSettings?.page_for_posts - ) - : EMPTY_OBJECT; - - return { - allowCommentsOnNewPosts: - siteSettings?.default_comment_status === 'open', - postsPageTitle: _postsPageRecord?.title?.rendered, - postsPageId: _postsPageRecord?.id, - postsPerPage: siteSettings?.posts_per_page, - }; - }, [] ); - - const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] = - useState( '' ); - const [ postsCountValue, setPostsCountValue ] = useState( 1 ); - const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' ); - - /* - * This hook serves to set the server-retrieved values, - * postsPageTitle, allowCommentsOnNewPosts, postsPerPage, - * to local state. - */ - useEffect( () => { - setCommentsOnNewPostsValue( allowCommentsOnNewPosts ); - setPostsPageTitleValue( postsPageTitle ); - setPostsCountValue( postsPerPage ); - }, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] ); - - const setAllowCommentsOnNewPosts = ( newValue ) => { - setCommentsOnNewPostsValue( newValue ); - editEntityRecord( 'root', 'site', undefined, { - default_comment_status: newValue ? 'open' : null, - } ); - }; - - const setPostsPageTitle = ( newValue ) => { - setPostsPageTitleValue( newValue ); - editEntityRecord( 'postType', 'page', postsPageId, { - title: newValue, - } ); - }; - - const setPostsPerPage = ( newValue ) => { - setPostsCountValue( newValue ); - editEntityRecord( 'root', 'site', undefined, { - posts_per_page: newValue, - } ); - }; - - return ( - <> - <SidebarNavigationScreenDetailsPanel spacing={ 6 }> - { postsPageId && ( - <SidebarNavigationScreenDetailsPanelRow> - <InputControl - className="edit-site-sidebar-navigation-screen__input-control" - placeholder={ __( 'No Title' ) } - size={ '__unstable-large' } - value={ postsPageTitleValue } - onChange={ debounce( setPostsPageTitle, 300 ) } - label={ __( 'Blog title' ) } - help={ __( - 'Set the Posts Page title. Appears in search results, and when the page is shared on social media.' - ) } - /> - </SidebarNavigationScreenDetailsPanelRow> - ) } - <SidebarNavigationScreenDetailsPanelRow> - <NumberControl - className="edit-site-sidebar-navigation-screen__input-control" - placeholder={ 0 } - value={ postsCountValue } - size={ '__unstable-large' } - spinControls="custom" - step="1" - min="1" - onChange={ setPostsPerPage } - label={ __( 'Posts per page' ) } - help={ __( - 'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.' - ) } - /> - </SidebarNavigationScreenDetailsPanelRow> - </SidebarNavigationScreenDetailsPanel> - - <SidebarNavigationScreenDetailsPanel - title={ __( 'Discussion' ) } - spacing={ 3 } - > - <SidebarNavigationScreenDetailsPanelRow> - <CheckboxControl - className="edit-site-sidebar-navigation-screen__input-control" - label={ __( 'Allow comments on new posts' ) } - help={ __( - 'Changes will apply to new posts only. Individual posts may override these settings.' - ) } - checked={ commentsOnNewPostsValue } - onChange={ setAllowCommentsOnNewPosts } - /> - </SidebarNavigationScreenDetailsPanelRow> - </SidebarNavigationScreenDetailsPanel> - </> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js deleted file mode 100644 index 76641f969fca79..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { pencil } from '@wordpress/icons'; -import { Icon } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import TemplateAreas from './template-areas'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import SidebarButton from '../sidebar-button'; -import { useAddedBy } from '../page-templates/hooks'; -import TemplateActions from '../template-actions'; -import HomeTemplateDetails from './home-template-details'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; - -const { useHistory, useLocation } = unlock( routerPrivateApis ); - -function useTemplateDetails( postType, postId ) { - const { getDescription, getTitle, record } = useEditedEntityRecord( - postType, - postId - ); - const currentTheme = useSelect( - ( select ) => select( coreStore ).getCurrentTheme(), - [] - ); - const addedBy = useAddedBy( postType, postId ); - const isAddedByActiveTheme = - addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; - const title = getTitle(); - let descriptionText = getDescription(); - - if ( ! descriptionText && addedBy.text ) { - descriptionText = __( - 'This is a custom template that can be applied manually to any Post or Page.' - ); - } - - const content = - record?.slug === 'home' || record?.slug === 'index' ? ( - <> - <HomeTemplateDetails /> - <TemplateAreas /> - </> - ) : ( - <TemplateAreas /> - ); - - const footer = record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null; - - const description = ( - <> - { descriptionText } - - { addedBy.text && ! isAddedByActiveTheme && ( - <span className="edit-site-sidebar-navigation-screen-template__added-by-description"> - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-author"> - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon"> - { addedBy.imageUrl ? ( - <img - src={ addedBy.imageUrl } - alt="" - width="24" - height="24" - /> - ) : ( - <Icon icon={ addedBy.icon } /> - ) } - </span> - { addedBy.text } - </span> - - { addedBy.isCustomized && ( - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized"> - { _x( '(Customized)', 'template' ) } - </span> - ) } - </span> - ) } - </> - ); - - return { title, description, content, footer }; -} - -export default function SidebarNavigationScreenTemplate( { backPath } ) { - const history = useHistory(); - const { - params: { postType, postId }, - } = useLocation(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { title, content, description, footer } = useTemplateDetails( - postType, - postId - ); - - return ( - <SidebarNavigationScreen - title={ title } - backPath={ backPath } - actions={ - <> - <TemplateActions - postType={ postType } - postId={ postId } - toggleProps={ { as: SidebarButton } } - onRemove={ () => { - history.push( { path: '/' + postType } ); - } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - description={ description } - content={ content } - footer={ footer } - /> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss deleted file mode 100644 index 4e6fcc3700fc4d..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss +++ /dev/null @@ -1,53 +0,0 @@ -.edit-site-sidebar-navigation-screen-template__added-by-description { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-template__added-by-description-author { - display: inline-flex; - align-items: center; - - img { - border-radius: $grid-unit-15; - width: 20px; - height: 20px; - } - - svg { - fill: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon { - width: 24px; - height: 24px; - margin-right: $grid-unit-05; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.edit-site-sidebar-navigation-screen-template__template-area-button { - color: $white; - display: flex; - align-items: center; - width: 100%; - flex-wrap: nowrap; - border-radius: 4px; - &:hover, - &:focus { - background: $gray-800; - color: $white; - } -} - -.edit-site-sidebar-navigation-screen-template__template-area-label-text { - margin: 0 $grid-unit-20 0 $grid-unit-05; - flex-grow: 1; -} - -.edit-site-sidebar-navigation-screen-template__template-icon { - display: flex; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js deleted file mode 100644 index db59f6886124be..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js +++ /dev/null @@ -1,135 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { - __experimentalTruncate as Truncate, - __experimentalItemGroup as ItemGroup, -} from '@wordpress/components'; -import { store as editorStore } from '@wordpress/editor'; -import { useMemo } from '@wordpress/element'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Internal dependencies - */ -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, -} from '../sidebar-navigation-screen-details-panel'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import { useLink } from '../routes/link'; -import SidebarNavigationItem from '../sidebar-navigation-item'; -import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; - -function TemplateAreaButton( { postId, area, title } ) { - const templatePartArea = useSelect( - ( select ) => { - const defaultAreas = - select( - editorStore - ).__experimentalGetDefaultTemplatePartAreas(); - - return defaultAreas.find( - ( defaultArea ) => defaultArea.area === area - ); - }, - [ area ] - ); - const linkInfo = useLink( { - postType: TEMPLATE_PART_POST_TYPE, - postId, - } ); - - return ( - <SidebarNavigationItem - className="edit-site-sidebar-navigation-screen-template__template-area-button" - { ...linkInfo } - icon={ templatePartArea?.icon } - withChevron - > - <Truncate - limit={ 20 } - ellipsizeMode="tail" - numberOfLines={ 1 } - className="edit-site-sidebar-navigation-screen-template__template-area-label-text" - > - { decodeEntities( title ) } - </Truncate> - </SidebarNavigationItem> - ); -} - -export default function TemplateAreas() { - const { templatePartAreas, currentTemplateParts } = useSelect( - ( select ) => { - const { getSettings, getCurrentTemplateTemplateParts } = unlock( - select( editSiteStore ) - ); - return { - templatePartAreas: getSettings()?.defaultTemplatePartAreas, - currentTemplateParts: getCurrentTemplateTemplateParts(), - }; - }, - [] - ); - - /* - * Merge data in currentTemplateParts with templatePartAreas, - * which contains the template icon and fallback labels - */ - const templateAreas = useMemo( () => { - // Keep track of template part IDs that have already been added to the array. - const templatePartIds = new Set(); - const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => { - // If the template part has already been added to the array, skip it. - if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) { - return; - } - // Add to the array of template part IDs. - templatePartIds.add( currentTemplatePart.templatePart.id ); - return currentTemplatePart; - }; - - return currentTemplateParts.length && templatePartAreas - ? currentTemplateParts - .filter( filterOutDuplicateTemplateParts ) - .map( ( { templatePart, block } ) => ( { - ...templatePartAreas?.find( - ( { area } ) => area === templatePart?.area - ), - ...templatePart, - clientId: block.clientId, - } ) ) - : []; - }, [ currentTemplateParts, templatePartAreas ] ); - - if ( ! templateAreas.length ) { - return null; - } - - return ( - <SidebarNavigationScreenDetailsPanel - title={ __( 'Areas' ) } - spacing={ 3 } - > - <ItemGroup> - { templateAreas.map( - ( { clientId, label, area, theme, slug, title } ) => ( - <SidebarNavigationScreenDetailsPanelRow - key={ clientId } - > - <TemplateAreaButton - postId={ `${ theme }//${ slug }` } - title={ title?.rendered || label } - area={ area } - /> - </SidebarNavigationScreenDetailsPanelRow> - ) - ) } - </ItemGroup> - </SidebarNavigationScreenDetailsPanel> - ); -} diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js index 1f9d71945f76cf..0b3eb147527877 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -27,7 +27,9 @@ const postTypesWithoutParentTemplate = [ PATTERN_TYPES.user, ]; -function useResolveEditedEntityAndContext( { path, postId, postType } ) { +const authorizedPostTypes = [ 'page' ]; + +function useResolveEditedEntityAndContext( { postId, postType } ) { const { hasLoadedAllDependencies, homepageId, @@ -81,7 +83,10 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { ( select ) => { // If we're rendering a post type that doesn't have a template // no need to resolve its template. - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( + postTypesWithoutParentTemplate.includes( postType ) && + postId + ) { return undefined; } @@ -168,16 +173,16 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { return undefined; } - // If we're rendering a specific page, post... we need to resolve its template. - if ( postType && postId ) { + // If we're rendering a specific page, we need to resolve its template. + // The site editor only supports pages for now, not other CPTs. + if ( + postType && + postId && + authorizedPostTypes.includes( postType ) + ) { return resolveTemplateForPostTypeAndId( postType, postId ); } - // Some URLs in list views are different - if ( path === '/page' && postId ) { - return resolveTemplateForPostTypeAndId( 'page', postId ); - } - // If we're rendering the home page, and we have a static home page, resolve its template. if ( homepageId ) { return resolveTemplateForPostTypeAndId( 'page', homepageId ); @@ -196,37 +201,27 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { url, postId, postType, - path, frontPageTemplateId, ] ); const context = useMemo( () => { - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) { return {}; } - if ( postType && postId ) { + if ( postType && postId && authorizedPostTypes.includes( postType ) ) { return { postType, postId }; } - // Some URLs in list views are different - if ( path === '/page' && postId ) { - return { postType: 'page', postId }; - } - if ( homepageId ) { return { postType: 'page', postId: homepageId }; } return {}; - }, [ homepageId, postType, postId, path ] ); - - if ( path === '/wp_template' && postId ) { - return { isReady: true, postType: 'wp_template', postId, context }; - } + }, [ homepageId, postType, postId ] ); - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) { return { isReady: true, postType, postId, context }; } diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js index fdea50d8afbddb..2b5d0d8614c954 100644 --- a/packages/edit-site/src/hooks/commands/use-common-commands.js +++ b/packages/edit-site/src/hooks/commands/use-common-commands.js @@ -18,14 +18,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as coreStore } from '@wordpress/core-data'; -import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import getIsListPage from '../../utils/get-is-list-page'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -35,8 +33,6 @@ function useGlobalStylesOpenStylesCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const history = useHistory(); @@ -55,13 +51,13 @@ function useGlobalStylesOpenStylesCommands() { label: __( 'Open styles' ), callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -73,9 +69,9 @@ function useGlobalStylesOpenStylesCommands() { history, openGeneralSidebar, setCanvasMode, - isEditorPage, getCanvasMode, isBlockBasedTheme, + params.postId, ] ); return { @@ -89,8 +85,6 @@ function useGlobalStylesToggleWelcomeGuideCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const { set } = useDispatch( preferencesStore ); @@ -110,13 +104,13 @@ function useGlobalStylesToggleWelcomeGuideCommands() { label: __( 'Learn about styles' ), callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -134,10 +128,10 @@ function useGlobalStylesToggleWelcomeGuideCommands() { history, openGeneralSidebar, setCanvasMode, - isEditorPage, getCanvasMode, isBlockBasedTheme, set, + params.postId, ] ); return { @@ -176,9 +170,6 @@ function useGlobalStylesOpenCssCommands() { const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isListPage = getIsListPage( params, isMobileViewport ); - const isEditorPage = ! isListPage; const history = useHistory(); const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -207,13 +198,13 @@ function useGlobalStylesOpenCssCommands() { icon: brush, callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -226,9 +217,9 @@ function useGlobalStylesOpenCssCommands() { openGeneralSidebar, setEditorCanvasContainerView, canEditCSS, - isEditorPage, getCanvasMode, setCanvasMode, + params.postId, ] ); return { isLoading: false, @@ -241,8 +232,6 @@ function useGlobalStylesOpenRevisionsCommands() { unlock( useDispatch( editSiteStore ) ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const history = useHistory(); const hasRevisions = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -266,13 +255,13 @@ function useGlobalStylesOpenRevisionsCommands() { icon: backup, callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -285,9 +274,9 @@ function useGlobalStylesOpenRevisionsCommands() { history, openGeneralSidebar, setEditorCanvasContainerView, - isEditorPage, getCanvasMode, setCanvasMode, + params.postId, ] ); return { diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 6afe4dcaa7ea97..1ca24b318a4448 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -32,7 +32,7 @@ import isTemplateRemovable from '../../utils/is-template-removable'; import isTemplateRevertable from '../../utils/is-template-revertable'; import { PATTERN_MODALS } from '../../components/pattern-modal'; import { unlock } from '../../lock-unlock'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants'; import { useLink } from '../../components/routes/link'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -153,8 +153,6 @@ function useManipulateDocumentCommands() { __( 'Delete template part: %s' ), decodeEntities( template.title ) ); - const path = - template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns'; commands.push( { name: 'core/remove-template', label, @@ -163,7 +161,7 @@ function useManipulateDocumentCommands() { removeTemplate( template ); // Navigate to the template list history.push( { - path, + postType: template.type, } ); close(); }, @@ -237,7 +235,7 @@ function usePatternCommands() { const commands = []; - if ( pattern?.type === 'wp_block' ) { + if ( pattern?.type === PATTERN_TYPES.user ) { commands.push( { name: 'core/rename-pattern', label: __( 'Rename pattern' ), diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index d8ee1c1d16dfa6..5b5acffd2596e4 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -25,11 +25,8 @@ @import "./components/sidebar-navigation-screen/style.scss"; @import "./components/sidebar-navigation-screen-details-footer/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menu/style.scss"; -@import "./components/sidebar-navigation-screen-page/style.scss"; @import "components/sidebar-navigation-screen-details-panel/style.scss"; -@import "./components/sidebar-navigation-screen-pattern/style.scss"; @import "./components/sidebar-navigation-screen-patterns/style.scss"; -@import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-dataviews/style.scss"; @import "./components/site-hub/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js deleted file mode 100644 index f7312ec3c1c292..00000000000000 --- a/packages/edit-site/src/utils/get-is-list-page.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Returns if the params match the list page route. - * - * @param {Object} params The url params. - * @param {string} params.path The current path. - * @param {string} [params.categoryType] The current category type. - * @param {string} [params.categoryId] The current category id. - * @param {boolean} isMobileViewport Is mobile viewport. - * - * @return {boolean} Is list page or not. - */ -export default function getIsListPage( - { path, categoryType, categoryId }, - isMobileViewport -) { - return ( - [ '/wp_template', '/pages' ].includes( path ) || - ( path === '/patterns' && - // Don't treat "/patterns" without categoryType and categoryId as a - // list page in mobile because the sidebar covers the whole page. - ( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) ) - ); -} diff --git a/packages/router/src/router.js b/packages/router/src/router.js index e5449cef54c6a0..233ee6962de763 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -3,9 +3,8 @@ */ import { createContext, - useState, - useEffect, useContext, + useSyncExternalStore, } from '@wordpress/element'; /** @@ -24,25 +23,27 @@ export function useHistory() { return useContext( HistoryContext ); } +const locationCache = new Map(); function getLocationWithParams( location ) { + if ( locationCache.get( location.search ) ) { + return locationCache.get( location.search ); + } const searchParams = new URLSearchParams( location.search ); - return { + const ret = { ...location, params: Object.fromEntries( searchParams.entries() ), }; + locationCache.clear(); + locationCache.set( location.search, ret ); + + return ret; } export function RouterProvider( { children } ) { - const [ location, setLocation ] = useState( () => + const location = useSyncExternalStore( history.listen, () => getLocationWithParams( history.location ) ); - useEffect( () => { - return history.listen( ( { location: updatedLocation } ) => { - setLocation( getLocationWithParams( updatedLocation ) ); - } ); - }, [] ); - return ( <HistoryContext.Provider value={ history }> <RoutesContext.Provider value={ location }> diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index f556cb973642e4..3cb1565c8d4160 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -946,12 +946,12 @@ test.describe( 'Image - Site editor', () => { await requestUtils.activateTheme( 'emptytheme' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test.afterEach( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js index 23a59faf498d35..b31533d0d17c24 100644 --- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js @@ -26,8 +26,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -138,8 +138,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -353,8 +353,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -449,8 +449,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Page list menu', content: ` diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index 586ce9252149a3..97b8579bb07ba6 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -41,8 +41,8 @@ test.describe( 'Block bindings', () => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.openDocumentSettingsSidebar(); } ); diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 8aa0c9c530609d..f9a4505cd22522 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -35,7 +35,7 @@ test.describe( 'Pattern Overrides', () => { const editableParagraphName = 'Editable Paragraph'; await test.step( 'Create a synced pattern and assign blocks to allow overrides', async () => { - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await page .getByRole( 'region', { name: 'Navigation' } ) @@ -727,7 +727,6 @@ test.describe( 'Pattern Overrides', () => { await admin.visitSiteEditor( { postId: id, postType: 'wp_block', - categoryType: 'pattern', canvas: 'edit', } ); diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index 7d656fbd2774ff..14f0ae422cc988 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -12,12 +12,12 @@ test.describe( 'Site editor block removal prompt', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should appear when attempting to remove Query Block', async ( { diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index 4476ce0aa7c0ac..eaafb3aad1b3fd 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -27,7 +27,7 @@ test.describe( 'Site editor browser history', () => { // Navigate back to the template list await page.goBack(); await expect( page ).toHaveURL( - '/wp-admin/site-editor.php?path=%2Fwp_template' + '/wp-admin/site-editor.php?postType=wp_template' ); // Navigate back to the dashboard diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js index f255640cb2f12f..257ebc38f3b4dd 100644 --- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js +++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js @@ -12,12 +12,12 @@ test.describe( 'Global styles sidebar', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should filter blocks list results', async ( { page } ) => { diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 1f73b6de6f486a..b568aaf4445b5c 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -33,7 +33,7 @@ test.describe( 'Hybrid theme', () => { ); await expect( page ).toHaveURL( - '/wp-admin/site-editor.php?path=%2Fpatterns' + '/wp-admin/site-editor.php?postType=wp_template_part' ); await expect( diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js index 4391f134a9f80b..9c25ef504637e4 100644 --- a/test/e2e/specs/site-editor/iframe-rendering.spec.js +++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js @@ -19,6 +19,7 @@ test.describe( 'Site editor iframe rendering mode', () => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); const compatMode = await editor.canvas .locator( ':root' ) diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index 9bccc7c56446a6..ba8a316ee10c4d 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -12,13 +12,13 @@ test.describe( 'Site Editor List View', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { // Select a template part with a few blocks. await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should open by default when preference is enabled', async ( { diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js index 0e79d96a2ad9e1..88a277b8c88f2c 100644 --- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -18,12 +18,12 @@ test.describe( 'Site Editor - Multi-entity save flow', () => { ] ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'save flow should work as expected', async ( { editor, page } ) => { diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index fc321a87e43650..ab37244df107c7 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -20,7 +20,7 @@ test.describe( 'Templates', () => { } ); test( 'Sorting', async ( { admin, page } ) => { - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -47,7 +47,7 @@ test.describe( 'Templates', () => { title: 'Date Archives', content: 'hi', } ); - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); const titles = page @@ -84,7 +84,7 @@ test.describe( 'Templates', () => { } ); test( 'Field visibility', async ( { admin, page } ) => { - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); await page.getByRole( 'button', { name: 'View options' } ).click(); await page.getByRole( 'menuitem', { name: 'Layout' } ).click(); diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js index b556be5621f3d5..fecca28b1f390c 100644 --- a/test/e2e/specs/site-editor/patterns.spec.js +++ b/test/e2e/specs/site-editor/patterns.spec.js @@ -33,7 +33,7 @@ test.describe( 'Patterns', () => { admin, patterns, } ) => { - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await expect( patterns.navigation.getByRole( 'heading', { name: 'Patterns', @@ -87,9 +87,6 @@ test.describe( 'Patterns', () => { ).toContainText( 'Pattern updated' ); await page.getByRole( 'button', { name: 'Open navigation' } ).click(); - await patterns.navigation - .getByRole( 'button', { name: 'Back' } ) - .click(); await expect( patterns.navigation.getByRole( 'button', { @@ -150,7 +147,7 @@ test.describe( 'Patterns', () => { } ), ] ); - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await expect( patterns.item ).toHaveCount( 3 ); const searchBox = patterns.content.getByRole( 'searchbox', { @@ -168,7 +165,7 @@ test.describe( 'Patterns', () => { await expect( patterns.content ).toContainText( 'No results' ); await patterns.content - .getByRole( 'button', { name: 'Reset', exact: true } ) + .getByRole( 'button', { name: 'Reset search', exact: true } ) .click(); await expect( searchBox ).toHaveValue( '' ); await expect( patterns.item ).toHaveCount( 3 ); diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index 71a57fd04e515a..26224a83e27ebd 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js @@ -12,12 +12,12 @@ test.describe( 'Push to Global Styles button', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should apply Heading block styles to all Heading blocks', async ( { diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js index 9a6fd11a56e3b8..7f55359547d6e5 100644 --- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js +++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js @@ -87,9 +87,8 @@ test.describe( 'Site editor url navigation', () => { page.getByRole( 'region', { name: 'Editor content' } ) ).toBeVisible(); await page.getByRole( 'button', { name: 'Open navigation' } ).click(); - await navigation.getByRole( 'button', { name: 'Back' } ).click(); await expect( - navigation.getByRole( 'button', { name: 'General' } ) - ).toHaveAttribute( 'aria-current', 'true' ); + navigation.getByRole( 'button', { name: 'All template parts' } ) + ).toBeVisible(); } ); } ); diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js index 9b12f37c0baa6b..f991b512e840df 100644 --- a/test/e2e/specs/site-editor/style-variations.spec.js +++ b/test/e2e/specs/site-editor/style-variations.spec.js @@ -33,13 +33,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); @@ -70,13 +69,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -107,13 +105,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -150,13 +147,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -185,8 +181,8 @@ test.describe( 'Global styles variations', () => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js index e74cd0bec4ed16..f1e317e171736c 100644 --- a/test/e2e/specs/site-editor/template-part.spec.js +++ b/test/e2e/specs/site-editor/template-part.spec.js @@ -27,8 +27,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Insert a new template block and 'start blank'. await editor.insertBlock( { name: 'core/template-part' } ); @@ -186,8 +186,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -229,8 +229,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Edit the header. await editor.insertBlock( { name: 'core/paragraph', @@ -264,8 +264,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -371,8 +371,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Select the site title block. const siteTitle = editor.canvas.getByRole( 'document', { diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index 75f8766891156b..ad661175b6bdfe 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -23,8 +23,8 @@ test.describe( 'Site editor writing flow', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Select the first site title block. const siteTitleBlock = editor.canvas.locator( 'role=document[name="Block: Site Title"i]' @@ -51,8 +51,8 @@ test.describe( 'Site editor writing flow', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Make sure the sidebar is open. await editor.openDocumentSettingsSidebar(); diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index e8a4e3529334dd..dd052db5035dbe 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -81,6 +81,7 @@ test.describe( 'Site Editor Performance', () => { await admin.visitSiteEditor( { postId: draftId, postType: 'page', + canvas: 'edit', } ); // Wait for the first block. @@ -131,11 +132,11 @@ test.describe( 'Site Editor Performance', () => { await admin.visitSiteEditor( { postId: draftId, postType: 'page', + canvas: 'edit', } ); // Enter edit mode (second click is needed for the legacy edit mode). const canvas = await perfUtils.getCanvas(); - await canvas.locator( 'body' ).click(); // Run the test with the sidebar closed const toggleSidebarButton = page @@ -211,6 +212,7 @@ test.describe( 'Site Editor Performance', () => { metrics, } ) => { await admin.visitSiteEditor( { + // The old URL is supported in both previous versions and new versions. path: '/wp_template', } ); From 49f3fe2e77034ad20f28ea0565e74cc04c81e216 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras <ntsekouras@outlook.com> Date: Tue, 21 May 2024 20:14:29 +0300 Subject: [PATCH 05/94] [Site Editor]: Add create pattern button in patterns page (#60302) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: pablohoneyhoney <pablohoneyhoney@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org> --- .../src/components/add-new-pattern/index.js | 51 ++++++++------- .../create-template-part-modal/index.js | 12 +++- .../src/components/page-pages/index.js | 31 +++++----- .../src/components/page-patterns/header.js | 62 ++++++++++--------- .../index.js | 2 - .../src/components/create-pattern-modal.js | 21 +++++-- .../block-editor-keyboard-shortcuts.spec.js | 2 +- .../editor/various/inserting-blocks.spec.js | 4 +- .../editor/various/pattern-overrides.spec.js | 12 ++-- .../e2e/specs/editor/various/patterns.spec.js | 18 +++--- test/e2e/specs/site-editor/patterns.spec.js | 24 ++++--- .../site-editor-url-navigation.spec.js | 6 +- 12 files changed, 135 insertions(+), 110 deletions(-) diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 00cc086183e57b..7ecbf640790a83 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -4,7 +4,7 @@ import { DropdownMenu } from '@wordpress/components'; import { useState, useRef } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { plus, symbol, symbolFilled, upload } from '@wordpress/icons'; +import { symbol, symbolFilled, upload } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { @@ -18,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import CreateTemplatePartModal from '../create-template-part-modal'; -import SidebarButton from '../sidebar-button'; import { unlock } from '../../lock-unlock'; import { PATTERN_TYPES, @@ -41,10 +40,17 @@ export default function AddNewPattern() { const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); const patternUploadInputRef = useRef(); - const isBlockBasedTheme = useSelect( - ( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme, - [] - ); + const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } = + useSelect( ( select ) => { + const { getCurrentTheme, getPostType } = select( coreStore ); + return { + isBlockBasedTheme: getCurrentTheme()?.is_block_theme, + addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels + ?.add_new_item, + addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE ) + ?.labels?.add_new_item, + }; + }, [] ); function handleCreatePattern( { pattern } ) { setShowPatternModal( false ); @@ -72,19 +78,19 @@ export default function AddNewPattern() { setShowTemplatePartModal( false ); } - const controls = []; - - controls.push( { - icon: symbol, - onClick: () => setShowPatternModal( true ), - title: __( 'Create pattern' ), - } ); + const controls = [ + { + icon: symbol, + onClick: () => setShowPatternModal( true ), + title: addNewPatternLabel, + }, + ]; if ( isBlockBasedTheme ) { controls.push( { icon: symbolFilled, onClick: () => setShowTemplatePartModal( true ), - title: __( 'Create template part' ), + title: addNewTemplatePartLabel, } ); } @@ -99,14 +105,15 @@ export default function AddNewPattern() { const { categoryMap, findOrCreateTerm } = useAddPatternCategory(); return ( <> - <DropdownMenu - controls={ controls } - toggleProps={ { - as: SidebarButton, - } } - icon={ plus } - label={ __( 'Create pattern' ) } - /> + { addNewPatternLabel && ( + <DropdownMenu + controls={ controls } + icon={ null } + toggleProps={ { variant: 'primary', showTooltip: false } } + text={ addNewPatternLabel } + label={ addNewPatternLabel } + /> + ) } { showPatternModal && ( <CreatePatternModal onClose={ () => setShowPatternModal( false ) } diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js index 376deae9d7321f..a74225dd81404f 100644 --- a/packages/edit-site/src/components/create-template-part-modal/index.js +++ b/packages/edit-site/src/components/create-template-part-modal/index.js @@ -39,12 +39,18 @@ import { } from '../../utils/template-part-create'; export default function CreateTemplatePartModal( { - modalTitle = __( 'Create template part' ), + modalTitle, ...restProps } ) { + const defaultModalTitle = useSelect( + ( select ) => + select( coreStore ).getPostType( TEMPLATE_PART_POST_TYPE )?.labels + ?.add_new_item, + [] + ); return ( <Modal - title={ modalTitle } + title={ modalTitle || defaultModalTitle } onRequestClose={ restProps.closeModal } overlayClassName="edit-site-create-template-part-modal" > @@ -56,7 +62,7 @@ export default function CreateTemplatePartModal( { export function CreateTemplatePartModalContents( { defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY, blocks = [], - confirmLabel = __( 'Create' ), + confirmLabel = __( 'Add' ), closeModal, onCreate, onError, diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 00d86ea942a37a..81f34e9ba59a89 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -273,13 +273,13 @@ export default function PagePages() { [ totalItems, totalPages ] ); - const { frontPageId, postsPageId } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); + const { frontPageId, postsPageId, addNewLabel } = useSelect( ( select ) => { + const { getEntityRecord, getPostType } = select( coreStore ); const siteSettings = getEntityRecord( 'root', 'site' ); - return { frontPageId: siteSettings?.page_on_front, postsPageId: siteSettings?.page_for_posts, + addNewLabel: getPostType( 'page' )?.labels?.add_new_item, }; } ); @@ -488,22 +488,23 @@ export default function PagePages() { closeModal(); }; - // TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`. return ( <Page title={ __( 'Pages' ) } actions={ - <> - <Button variant="primary" onClick={ openModal }> - { __( 'Add new page' ) } - </Button> - { showAddPageModal && ( - <AddNewPageModal - onSave={ handleNewPage } - onClose={ closeModal } - /> - ) } - </> + addNewLabel && ( + <> + <Button variant="primary" onClick={ openModal }> + { addNewLabel } + </Button> + { showAddPageModal && ( + <AddNewPageModal + onSave={ handleNewPage } + onClose={ closeModal } + /> + ) } + </> + ) } > <DataViews diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index cdbec44f182f66..ebb4a647f28ad9 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -17,6 +17,7 @@ import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies */ +import AddNewPattern from '../add-new-pattern'; import RenameCategoryMenuItem from './rename-category-menu-item'; import DeleteCategoryMenuItem from './delete-category-menu-item'; import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories'; @@ -57,39 +58,42 @@ export default function PatternsHeader( { } return ( - <VStack className="edit-site-patterns__section-header"> + <VStack className="edit-site-patterns__section-header" gap={ 3 }> <HStack justify="space-between"> <Heading as="h2" level={ 4 } id={ titleId }> { title } </Heading> - { !! patternCategory?.id && ( - <DropdownMenu - icon={ moreVertical } - label={ __( 'Actions' ) } - toggleProps={ { - className: 'edit-site-patterns__button', - describedBy: sprintf( - /* translators: %s: pattern category name */ - __( 'Action menu for %s pattern category' ), - title - ), - size: 'compact', - } } - > - { ( { onClose } ) => ( - <MenuGroup> - <RenameCategoryMenuItem - category={ patternCategory } - onClose={ onClose } - /> - <DeleteCategoryMenuItem - category={ patternCategory } - onClose={ onClose } - /> - </MenuGroup> - ) } - </DropdownMenu> - ) } + <HStack expanded={ false }> + <AddNewPattern /> + { !! patternCategory?.id && ( + <DropdownMenu + icon={ moreVertical } + label={ __( 'Actions' ) } + toggleProps={ { + className: 'edit-site-patterns__button', + describedBy: sprintf( + /* translators: %s: pattern category name */ + __( 'Action menu for %s pattern category' ), + title + ), + size: 'compact', + } } + > + { ( { onClose } ) => ( + <MenuGroup> + <RenameCategoryMenuItem + category={ patternCategory } + onClose={ onClose } + /> + <DeleteCategoryMenuItem + category={ patternCategory } + onClose={ onClose } + /> + </MenuGroup> + ) } + </DropdownMenu> + ) } + </HStack> </HStack> { description ? ( <Text variant="muted" as="p" id={ descriptionId }> diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index a5f559f185064e..e0d085812ba53c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import AddNewPattern from '../add-new-pattern'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import CategoryItem from './category-item'; import { @@ -126,7 +125,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) { 'Manage what patterns are available when editing the site.' ) } backPath={ backPath } - actions={ <AddNewPattern /> } content={ <> { isLoading && __( 'Loading items…' ) } diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js index 9576e50309e237..16ae706bf18f1d 100644 --- a/packages/patterns/src/components/create-pattern-modal.js +++ b/packages/patterns/src/components/create-pattern-modal.js @@ -11,13 +11,18 @@ import { } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants'; +import { + PATTERN_DEFAULT_CATEGORY, + PATTERN_SYNC_TYPES, + PATTERN_TYPES, +} from '../constants'; import { store as patternsStore } from '../store'; import CategorySelector from './category-selector'; import { useAddPatternCategory } from '../private-hooks'; @@ -25,12 +30,18 @@ import { unlock } from '../lock-unlock'; export default function CreatePatternModal( { className = 'patterns-menu-items__convert-modal', - modalTitle = __( 'Create pattern' ), + modalTitle, ...restProps } ) { + const defaultModalTitle = useSelect( + ( select ) => + select( coreStore ).getPostType( PATTERN_TYPES.user )?.labels + ?.add_new_item, + [] + ); return ( <Modal - title={ modalTitle } + title={ modalTitle || defaultModalTitle } onRequestClose={ restProps.onClose } overlayClassName={ className } > @@ -40,7 +51,7 @@ export default function CreatePatternModal( { } export function CreatePatternModalContents( { - confirmLabel = __( 'Create' ), + confirmLabel = __( 'Add' ), defaultCategories = [], content, onClose, diff --git a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js index 1962e2bc4202ae..967baccfcbe4ef 100644 --- a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js +++ b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js @@ -192,7 +192,7 @@ test.describe( 'Block editor keyboard shortcuts', () => { .getByRole( 'menuitem', { name: 'Create pattern' } ) .click(); await page - .getByRole( 'dialog', { name: 'Create pattern' } ) + .getByRole( 'dialog', { name: 'add new pattern' } ) .getByRole( 'textbox', { name: 'Name' } ) .fill( 'hi' ); diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index b3ff3ae1b72e5d..1a443152800dec 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -265,7 +265,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { .click(); await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -274,7 +274,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); const patternBlock = page.getByRole( 'document', { name: 'Block: Pattern', diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index f9a4505cd22522..706ddabd5a35dc 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -38,17 +38,17 @@ test.describe( 'Pattern Overrides', () => { await admin.visitSiteEditor( { postType: 'wp_block' } ); await page - .getByRole( 'region', { name: 'Navigation' } ) - .getByRole( 'button', { name: 'Create pattern' } ) + .getByRole( 'region', { name: 'Patterns content' } ) + .getByRole( 'button', { name: 'add new pattern' } ) .click(); await page - .getByRole( 'menu', { name: 'Create pattern' } ) - .getByRole( 'menuitem', { name: 'Create pattern' } ) + .getByRole( 'menu', { name: 'add new pattern' } ) + .getByRole( 'menuitem', { name: 'add new pattern' } ) .click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -57,7 +57,7 @@ test.describe( 'Pattern Overrides', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await editor.canvas diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js index 48eaf9e08c9b94..77f97ee3004a9e 100644 --- a/test/e2e/specs/editor/various/patterns.spec.js +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -37,7 +37,7 @@ test.describe( 'Unsynced pattern', () => { await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -136,7 +136,7 @@ test.describe( 'Synced pattern', () => { await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -150,7 +150,7 @@ test.describe( 'Synced pattern', () => { .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); // Check the pattern is focused. @@ -376,7 +376,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -385,7 +385,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await admin.createNewPost(); @@ -419,7 +419,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = editor.page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -428,7 +428,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); // Wait until the pattern is created. @@ -603,7 +603,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = editor.page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -612,7 +612,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await expect( diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js index fecca28b1f390c..0b0fada39c2622 100644 --- a/test/e2e/specs/site-editor/patterns.spec.js +++ b/test/e2e/specs/site-editor/patterns.spec.js @@ -42,24 +42,22 @@ test.describe( 'Patterns', () => { ).toBeVisible(); await expect( patterns.content ).toContainText( 'No results' ); - await patterns.navigation - .getByRole( 'button', { name: 'Create pattern' } ) + await patterns.content + .getByRole( 'button', { name: 'add new pattern' } ) .click(); - const createPatternMenu = page.getByRole( 'menu', { - name: 'Create pattern', - } ); - await expect( - createPatternMenu.getByRole( 'menuitem', { - name: 'Create pattern', + const addNewMenuItem = page + .getByRole( 'menu', { + name: 'add new pattern', } ) - ).toBeFocused(); - await createPatternMenu - .getByRole( 'menuitem', { name: 'Create pattern' } ) - .click(); + .getByRole( 'menuitem', { + name: 'add new pattern', + } ); + await expect( addNewMenuItem ).toBeFocused(); + await addNewMenuItem.click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js index 7f55359547d6e5..337c26315c8a3f 100644 --- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js +++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js @@ -54,10 +54,10 @@ test.describe( 'Site editor url navigation', () => { } ) => { await admin.visitSiteEditor(); await page.click( 'role=button[name="Patterns"i]' ); - await page.click( 'role=button[name="Create pattern"i]' ); + await page.click( 'role=button[name="add new pattern"i]' ); await page - .getByRole( 'menu', { name: 'Create pattern' } ) - .getByRole( 'menuitem', { name: 'Create template part' } ) + .getByRole( 'menu', { name: 'add new pattern' } ) + .getByRole( 'menuitem', { name: 'add new template part' } ) .click(); // Fill in a name in the dialog that pops up. await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Demo' ); From 6ee8d10d7068ce40f3ec7980be1f529aa5a256b0 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Tue, 21 May 2024 18:44:45 +0100 Subject: [PATCH 06/94] DataViews: Type all the filters components (#61795) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org> --- .../src/{add-filter.js => add-filter.tsx} | 18 +++++++- packages/dataviews/src/constants.ts | 7 ++- .../{filter-summary.js => filter-summary.tsx} | 41 ++++++++++++++--- .../dataviews/src/{filters.js => filters.tsx} | 19 ++++++-- .../{reset-filters.js => reset-filters.tsx} | 19 +++++++- .../{search-widget.js => search-widget.tsx} | 34 +++++++++++--- packages/dataviews/src/types.ts | 46 +++++++++++++++++-- packages/dataviews/src/utils.ts | 11 ----- 8 files changed, 157 insertions(+), 38 deletions(-) rename packages/dataviews/src/{add-filter.js => add-filter.tsx} (79%) rename packages/dataviews/src/{filter-summary.js => filter-summary.tsx} (89%) rename packages/dataviews/src/{filters.js => filters.tsx} (82%) rename packages/dataviews/src/{reset-filters.js => reset-filters.tsx} (66%) rename packages/dataviews/src/{search-widget.js => search-widget.tsx} (91%) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.tsx similarity index 79% rename from packages/dataviews/src/add-filter.js rename to packages/dataviews/src/add-filter.tsx index 37c057201a6164..b9fc6e9c504c87 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { Ref } from 'react'; + /** * WordPress dependencies */ @@ -12,6 +17,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { unlock } from './lock-unlock'; +import type { NormalizedFilter, View } from './types'; const { DropdownMenuV2: DropdownMenu, @@ -19,7 +25,17 @@ const { DropdownMenuItemLabelV2: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); -function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) { +interface AddFilterProps { + filters: NormalizedFilter[]; + view: View; + onChangeView: ( view: View ) => void; + setOpenedFilter: ( filter: string | null ) => void; +} + +function AddFilter( + { filters, view, onChangeView, setOpenedFilter }: AddFilterProps, + ref: Ref< HTMLButtonElement > +) { if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) { return null; } diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts index b9ed8caff9e940..48753470280d0c 100644 --- a/packages/dataviews/src/constants.ts +++ b/packages/dataviews/src/constants.ts @@ -3,6 +3,11 @@ */ import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import type { Operator } from './types'; + // Filter operators. export const OPERATOR_IS = 'is'; export const OPERATOR_IS_NOT = 'isNot'; @@ -19,7 +24,7 @@ export const ALL_OPERATORS = [ OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL, ]; -export const OPERATORS = { +export const OPERATORS: Record< Operator, { key: string; label: string } > = { [ OPERATOR_IS ]: { key: 'is-filter', label: __( 'Is' ), diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.tsx similarity index 89% rename from packages/dataviews/src/filter-summary.js rename to packages/dataviews/src/filter-summary.tsx index f8251c7d1e15ec..da4b2e840a297f 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.tsx @@ -2,6 +2,7 @@ * External dependencies */ import clsx from 'clsx'; +import type { RefObject } from 'react'; /** * WordPress dependencies @@ -35,8 +36,30 @@ import { OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL, } from './constants'; +import type { Filter, NormalizedFilter, Operator, Option, View } from './types'; -const FilterText = ( { activeElements, filterInView, filter } ) => { +interface FilterTextProps { + activeElements: Option[]; + filterInView?: Filter; + filter: NormalizedFilter; +} + +interface OperatorSelectorProps { + filter: NormalizedFilter; + view: View; + onChangeView: ( view: View ) => void; +} + +interface FilterSummaryProps extends OperatorSelectorProps { + addFilterRef: RefObject< HTMLButtonElement >; + openedFilter: string | null; +} + +const FilterText = ( { + activeElements, + filterInView, + filter, +}: FilterTextProps ) => { if ( activeElements === undefined || activeElements.length === 0 ) { return filter.name; } @@ -125,7 +148,11 @@ const FilterText = ( { activeElements, filterInView, filter } ) => { ); }; -function OperatorSelector( { filter, view, onChangeView } ) { +function OperatorSelector( { + filter, + view, + onChangeView, +}: OperatorSelectorProps ) { const operatorOptions = filter.operators?.map( ( operator ) => ( { value: operator, label: OPERATORS[ operator ]?.label, @@ -150,13 +177,14 @@ function OperatorSelector( { filter, view, onChangeView } ) { value={ value } options={ operatorOptions } onChange={ ( newValue ) => { + const operator = newValue as Operator; const newFilters = currentFilter ? [ ...view.filters.map( ( _filter ) => { if ( _filter.field === filter.field ) { return { ..._filter, - operator: newValue, + operator, }; } return _filter; @@ -166,7 +194,8 @@ function OperatorSelector( { filter, view, onChangeView } ) { ...view.filters, { field: filter.field, - operator: newValue, + operator, + value: undefined, }, ]; onChangeView( { @@ -188,8 +217,8 @@ export default function FilterSummary( { addFilterRef, openedFilter, ...commonProps -} ) { - const toggleRef = useRef(); +}: FilterSummaryProps ) { + const toggleRef = useRef< HTMLDivElement >( null ); const { filter, view, onChangeView } = commonProps; const filterInView = view.filters.find( ( f ) => f.field === filter.field ); const activeElements = filter.elements.filter( ( element ) => { diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.tsx similarity index 82% rename from packages/dataviews/src/filters.js rename to packages/dataviews/src/filters.tsx index aae4d3871ab1ee..df7a13b2953f16 100644 --- a/packages/dataviews/src/filters.js +++ b/packages/dataviews/src/filters.tsx @@ -2,6 +2,7 @@ * WordPress dependencies */ import { memo, useRef } from '@wordpress/element'; +import { __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -11,17 +12,25 @@ import AddFilter from './add-filter'; import ResetFilters from './reset-filters'; import { sanitizeOperators } from './utils'; import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants'; -import { __experimentalHStack as HStack } from '@wordpress/components'; +import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types'; + +interface FiltersProps< Item extends AnyItem > { + fields: NormalizedField< Item >[]; + view: View; + onChangeView: ( view: View ) => void; + openedFilter: string | null; + setOpenedFilter: ( openedFilter: string | null ) => void; +} -const Filters = memo( function Filters( { +const Filters = memo( function Filters< Item extends AnyItem >( { fields, view, onChangeView, openedFilter, setOpenedFilter, -} ) { - const addFilterRef = useRef(); - const filters = []; +}: FiltersProps< Item > ) { + const addFilterRef = useRef< HTMLButtonElement >( null ); + const filters: NormalizedFilter[] = []; fields.forEach( ( field ) => { if ( ! field.elements?.length ) { return; diff --git a/packages/dataviews/src/reset-filters.js b/packages/dataviews/src/reset-filters.tsx similarity index 66% rename from packages/dataviews/src/reset-filters.js rename to packages/dataviews/src/reset-filters.tsx index d7143599c443bf..74570b49d9548c 100644 --- a/packages/dataviews/src/reset-filters.js +++ b/packages/dataviews/src/reset-filters.tsx @@ -4,8 +4,23 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -export default function ResetFilter( { filters, view, onChangeView } ) { - const isPrimary = ( field ) => +/** + * Internal dependencies + */ +import type { NormalizedFilter, View } from './types'; + +interface ResetFilterProps { + filters: NormalizedFilter[]; + view: View; + onChangeView: ( view: View ) => void; +} + +export default function ResetFilter( { + filters, + view, + onChangeView, +}: ResetFilterProps ) { + const isPrimary = ( field: string ) => filters.some( ( _filter ) => _filter.field === field && _filter.isPrimary ); diff --git a/packages/dataviews/src/search-widget.js b/packages/dataviews/src/search-widget.tsx similarity index 91% rename from packages/dataviews/src/search-widget.js rename to packages/dataviews/src/search-widget.tsx index 080859b15ff8e5..6a5f4b6644f677 100644 --- a/packages/dataviews/src/search-widget.js +++ b/packages/dataviews/src/search-widget.tsx @@ -22,6 +22,7 @@ import { SVG, Circle } from '@wordpress/primitives'; * Internal dependencies */ import { unlock } from './lock-unlock'; +import type { Filter, NormalizedFilter, View } from './types'; const { CompositeV2: Composite, @@ -29,6 +30,12 @@ const { useCompositeStoreV2: useCompositeStore, } = unlock( componentsPrivateApis ); +interface SearchWidgetProps { + view: View; + filter: NormalizedFilter; + onChangeView: ( view: View ) => void; +} + const radioCheck = ( <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle> @@ -39,8 +46,11 @@ function normalizeSearchInput( input = '' ) { return removeAccents( input.trim().toLowerCase() ); } -const EMPTY_ARRAY = []; -const getCurrentValue = ( filterDefinition, currentFilter ) => { +const EMPTY_ARRAY: [] = []; +const getCurrentValue = ( + filterDefinition: NormalizedFilter, + currentFilter?: Filter +) => { if ( filterDefinition.singleSelection ) { return currentFilter?.value; } @@ -56,7 +66,11 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => { return EMPTY_ARRAY; }; -const getNewValue = ( filterDefinition, currentFilter, value ) => { +const getNewValue = ( + filterDefinition: NormalizedFilter, + currentFilter: Filter | undefined, + value: any +) => { if ( filterDefinition.singleSelection ) { return value; } @@ -70,7 +84,7 @@ const getNewValue = ( filterDefinition, currentFilter, value ) => { return [ value ]; }; -function ListBox( { view, filter, onChangeView } ) { +function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) { const compositeStore = useCompositeStore( { virtualFocus: true, focusLoop: true, @@ -184,7 +198,7 @@ function ListBox( { view, filter, onChangeView } ) { ); } -function ComboboxList( { view, filter, onChangeView } ) { +function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) { const [ searchValue, setSearchValue ] = useState( '' ); const deferredSearchValue = useDeferredValue( searchValue ); const currentFilter = view.filters.find( @@ -234,7 +248,13 @@ function ComboboxList( { view, filter, onChangeView } ) { setValue={ setSearchValue } > <div className="dataviews-search-widget-filter-combobox__wrapper"> - <Ariakit.ComboboxLabel render={ <VisuallyHidden /> }> + <Ariakit.ComboboxLabel + render={ + <VisuallyHidden> + { __( 'Search items' ) } + </VisuallyHidden> + } + > { __( 'Search items' ) } </Ariakit.ComboboxLabel> <Ariakit.Combobox @@ -290,7 +310,7 @@ function ComboboxList( { view, filter, onChangeView } ) { ); } -export default function SearchWidget( props ) { +export default function SearchWidget( props: SearchWidgetProps ) { const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox; return <Widget { ...props } />; } diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index e4bcb3440f5854..58b0bffc922966 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -8,9 +8,10 @@ export type SortDirection = 'asc' | 'desc'; /** * Generic option type. */ -interface Option< Value extends any = any > { +export interface Option< Value extends any = any > { value: Value; label: string; + description?: string; } interface FilterByConfig { @@ -28,15 +29,13 @@ interface FilterByConfig { isPrimary?: boolean; } -type DeprecatedOperator = 'in' | 'notIn'; -type Operator = +export type Operator = | 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' - | 'isNotAll' - | DeprecatedOperator; + | 'isNotAll'; export type AnyItem = Record< string, any >; @@ -136,6 +135,43 @@ export interface Filter { value: any; } +export interface NormalizedFilter { + /** + * The field to filter by. + */ + field: string; + + /** + * The field name. + */ + name: string; + + /** + * The list of options to pick from when using the field as a filter. + */ + elements: Option[]; + + /** + * Is a single selection filter. + */ + singleSelection: boolean; + + /** + * The list of operators supported by the field. + */ + operators: Operator[]; + + /** + * Whether the filter is visible. + */ + isVisible: boolean; + + /** + * Whether it is a primary filter. + */ + isPrimary: boolean; +} + interface ViewBase { /** * The layout of the view. diff --git a/packages/dataviews/src/utils.ts b/packages/dataviews/src/utils.ts index 8321b96b9d07b1..d895289318da03 100644 --- a/packages/dataviews/src/utils.ts +++ b/packages/dataviews/src/utils.ts @@ -20,17 +20,6 @@ export function sanitizeOperators< Item extends AnyItem >( operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ]; } - // Transform legacy in, notIn operators to is, isNot. - // To be removed in the future. - if ( operators.includes( 'in' ) ) { - operators = operators.filter( ( operator ) => operator !== 'is' ); - operators.push( 'is' ); - } - if ( operators.includes( 'notIn' ) ) { - operators = operators.filter( ( operator ) => operator !== 'notIn' ); - operators.push( 'isNot' ); - } - // Make sure only valid operators are used. operators = operators.filter( ( operator ) => ALL_OPERATORS.includes( operator ) From f22e423a63f46257547230a964d83f6035a437ad Mon Sep 17 00:00:00 2001 From: Taylor Gorman <taylor@thegorman.group> Date: Tue, 21 May 2024 13:20:08 -0500 Subject: [PATCH 07/94] Fix: Typo in Extending the Query Loop documentation (#61830) Co-authored-by: taylorgorman <taylorgorman@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> --- .../block-tutorial/extending-the-query-loop-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md index d3628d991f872f..bf48c5db4e9bb9 100644 --- a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md +++ b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md @@ -178,7 +178,7 @@ As of Gutenberg version 14.2, the following controls are available: - `sticky` - Shows a dropdown to select how to handle sticky posts. - `taxQuery` - Shows available taxonomies filters for the currently selected post type. - `author` - Shows an input field to filter the query by author. -- `search` - Shows an input filed to filter the query by keywords. +- `search` - Shows an input field to filter the query by keywords. In our case, the property would look like this: From 538f18dc7fcfc6c06a9332e2c674fa8762d95976 Mon Sep 17 00:00:00 2001 From: Kellen Mace <kellen.mace@gmail.com> Date: Tue, 21 May 2024 17:40:05 -0400 Subject: [PATCH 08/94] Documentation: Add PostURL component docs (#61737) * Add JSDoc dockblock for PostURL component * Refine PostURL JSDocs * Add PostURLPanel JSDocs * Add PostURLLabel JSDocs * Add PostURLCheck JSDocs * Auto-generate editor docs for PostURL updates --------- Co-authored-by: Damon Cook <damonacook@gmail.com> --- packages/editor/README.md | 45 ++++++++++++++++--- .../editor/src/components/post-url/check.js | 8 ++++ .../editor/src/components/post-url/index.js | 12 +++++ .../editor/src/components/post-url/label.js | 10 +++++ .../editor/src/components/post-url/panel.js | 5 +++ 5 files changed, 75 insertions(+), 5 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 1fdb1d0918f5a6..2997ac0c2d420a 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -1207,19 +1207,50 @@ _Returns_ ### PostURL -Undocumented declaration. +Renders the `PostURL` component. + +_Usage_ + +```jsx +<PostURL /> +``` + +_Parameters_ + +- _onClose_ `Function`: Callback function to be executed when the popover is closed. + +_Returns_ + +- `Component`: The rendered PostURL component. ### PostURLCheck -Undocumented declaration. +Check if the post URL is valid and visible. + +_Parameters_ + +- _props_ `Object`: The component props. +- _props.children_ `Element`: The child components. + +_Returns_ + +- `Component|null`: The child components if the post URL is valid and visible, otherwise null. ### PostURLLabel -Undocumented declaration. +Represents a label component for a post URL. + +_Returns_ + +- `Component`: The PostURLLabel component. ### PostURLPanel -Undocumented declaration. +Renders the `PostURLPanel` component. + +_Returns_ + +- `JSX.Element`: The rendered PostURLPanel component. ### PostVisibility @@ -1362,7 +1393,11 @@ _Returns_ ### usePostURLLabel -Undocumented declaration. +Custom hook to get the label for the post URL. + +_Returns_ + +- `string`: The filtered and decoded post URL label. ### usePostVisibilityLabel diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js index 65c54846a702b1..7eb390472bdd7d 100644 --- a/packages/editor/src/components/post-url/check.js +++ b/packages/editor/src/components/post-url/check.js @@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data'; */ import { store as editorStore } from '../../store'; +/** + * Check if the post URL is valid and visible. + * + * @param {Object} props The component props. + * @param {Element} props.children The child components. + * + * @return {Component|null} The child components if the post URL is valid and visible, otherwise null. + */ export default function PostURLCheck( { children } ) { const isVisible = useSelect( ( select ) => { const postTypeSlug = select( editorStore ).getCurrentPostType(); diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index cf55e30473329d..9453977a23bf05 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -24,6 +24,18 @@ import { useCopyToClipboard } from '@wordpress/compose'; import { usePostURLLabel } from './label'; import { store as editorStore } from '../../store'; +/** + * Renders the `PostURL` component. + * + * @example + * ```jsx + * <PostURL /> + * ``` + * + * @param {Function} onClose Callback function to be executed when the popover is closed. + * + * @return {Component} The rendered PostURL component. + */ export default function PostURL( { onClose } ) { const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js index 5c233dfd549467..4f03e2bce0d05f 100644 --- a/packages/editor/src/components/post-url/label.js +++ b/packages/editor/src/components/post-url/label.js @@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url'; */ import { store as editorStore } from '../../store'; +/** + * Represents a label component for a post URL. + * + * @return {Component} The PostURLLabel component. + */ export default function PostURLLabel() { return usePostURLLabel(); } +/** + * Custom hook to get the label for the post URL. + * + * @return {string} The filtered and decoded post URL label. + */ export function usePostURLLabel() { const postLink = useSelect( ( select ) => select( editorStore ).getPermalink(), diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js index c4a1cbba935c7d..fbf174cc28bf36 100644 --- a/packages/editor/src/components/post-url/panel.js +++ b/packages/editor/src/components/post-url/panel.js @@ -15,6 +15,11 @@ import PostURL from './index'; import PostPanelRow from '../post-panel-row'; import { store as editorStore } from '../../store'; +/** + * Renders the `PostURLPanel` component. + * + * @return {JSX.Element} The rendered PostURLPanel component. + */ export default function PostURLPanel() { // Use internal state instead of a ref to make sure that the component // re-renders when the popover's anchor updates. From dd4e2dd85536661bf069db7aa44cdda54360ae44 Mon Sep 17 00:00:00 2001 From: sanjucta <sanjuctab@gmail.com> Date: Wed, 22 May 2024 03:21:59 +0530 Subject: [PATCH 09/94] Add docblock to PostTitle and PostTitleRaw component (#61740) * Add docblock to PostTitle component * Refine PostTitle component JSDocs * Add PostTitleRaw component JSDocs * Add usePostTitle JSDocs * Add usePostTitleFocus JSDocs * Auto-generate editor docs for PostTitle updates --------- Co-authored-by: Damon Cook <damonacook@gmail.com> --- packages/editor/README.md | 11 ++++++++++- packages/editor/src/components/post-title/index.js | 9 ++++++++- .../src/components/post-title/post-title-raw.js | 8 ++++++++ .../src/components/post-title/use-post-title-focus.js | 7 +++++++ .../src/components/post-title/use-post-title.js | 5 +++++ 5 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 2997ac0c2d420a..341cda77474e0d 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -1177,7 +1177,16 @@ Undocumented declaration. ### PostTitle -Undocumented declaration. +Renders the `PostTitle` component. + +_Parameters_ + +- \_\_\_ `Object`: Unused parameter. +- _forwardedRef_ `Element`: Forwarded ref for the component. + +_Returns_ + +- `Component`: The rendered PostTitle component. ### PostTitleRaw diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index b307b2467b869b..57ab39f0061615 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -2,7 +2,6 @@ * External dependencies */ import clsx from 'clsx'; - /** * WordPress dependencies */ @@ -211,4 +210,12 @@ function PostTitle( _, forwardedRef ) { ); } +/** + * Renders the `PostTitle` component. + * + * @param {Object} _ Unused parameter. + * @param {Element} forwardedRef Forwarded ref for the component. + * + * @return {Component} The rendered PostTitle component. + */ export default forwardRef( PostTitle ); diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js index a9510bc136c231..a4c9713a094925 100644 --- a/packages/editor/src/components/post-title/post-title-raw.js +++ b/packages/editor/src/components/post-title/post-title-raw.js @@ -20,6 +20,14 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants'; import usePostTitleFocus from './use-post-title-focus'; import usePostTitle from './use-post-title'; +/** + * Renders a raw post title input field. + * + * @param {Object} _ Unused parameter. + * @param {Element} forwardedRef Reference to the component's DOM node. + * + * @return {Component} The rendered component. + */ function PostTitleRaw( _, forwardedRef ) { const { placeholder, hasFixedToolbar } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); diff --git a/packages/editor/src/components/post-title/use-post-title-focus.js b/packages/editor/src/components/post-title/use-post-title-focus.js index effac53f2670a2..127b7661462ba9 100644 --- a/packages/editor/src/components/post-title/use-post-title-focus.js +++ b/packages/editor/src/components/post-title/use-post-title-focus.js @@ -9,6 +9,13 @@ import { useSelect } from '@wordpress/data'; */ import { store as editorStore } from '../../store'; +/** + * Custom hook that manages the focus behavior of the post title input field. + * + * @param {Element} forwardedRef - The forwarded ref for the input field. + * + * @return {Object} - The ref object. + */ export default function usePostTitleFocus( forwardedRef ) { const ref = useRef(); diff --git a/packages/editor/src/components/post-title/use-post-title.js b/packages/editor/src/components/post-title/use-post-title.js index 65bd67af6fb4c8..d335064a523549 100644 --- a/packages/editor/src/components/post-title/use-post-title.js +++ b/packages/editor/src/components/post-title/use-post-title.js @@ -7,6 +7,11 @@ import { useSelect, useDispatch } from '@wordpress/data'; */ import { store as editorStore } from '../../store'; +/** + * Custom hook for managing the post title in the editor. + * + * @return {Object} An object containing the current title and a function to update the title. + */ export default function usePostTitle() { const { editPost } = useDispatch( editorStore ); const { title } = useSelect( ( select ) => { From af0061937965a5bc7caeb40ffeae24c358d1e958 Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Wed, 22 May 2024 03:32:14 +0530 Subject: [PATCH 10/94] Added doc for PostFeaturedImage components (#61165) --- packages/editor/README.md | 40 +++++++++++++++++-- .../components/post-featured-image/check.js | 9 +++++ .../components/post-featured-image/index.js | 15 +++++++ .../components/post-featured-image/panel.js | 9 +++++ 4 files changed, 70 insertions(+), 3 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 341cda77474e0d..91072345f10605 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -974,15 +974,49 @@ Undocumented declaration. ### PostFeaturedImage -Undocumented declaration. +Renders the component for managing the featured image of a post. + +_Parameters_ + +- _props_ `Object`: Props. +- _props.currentPostId_ `number`: ID of the current post. +- _props.featuredImageId_ `number`: ID of the featured image. +- _props.onUpdateImage_ `Function`: Function to call when the image is updated. +- _props.onRemoveImage_ `Function`: Function to call when the image is removed. +- _props.media_ `Object`: The media object representing the featured image. +- _props.postType_ `string`: Post type. +- _props.noticeUI_ `Element`: UI for displaying notices. +- _props.noticeOperations_ `Object`: Operations for managing notices. + +_Returns_ + +- `Element`: Component to be rendered . ### PostFeaturedImageCheck -Undocumented declaration. +Wrapper component that renders its children only if the post type supports a featured image and the theme supports post thumbnails. + +_Parameters_ + +- _props_ `Object`: Props. +- _props.children_ `Element`: Children to be rendered. + +_Returns_ + +- `Component`: The component to be rendered. ### PostFeaturedImagePanel -Undocumented declaration. +Renders the panel for the post featured image. + +_Parameters_ + +- _props_ `Object`: Props. +- _props.withPanelBody_ `boolean`: Whether to include the panel body. Default true. + +_Returns_ + +- `Component|null`: The component to be rendered. Return Null if the editor panel is disabled for featured image. ### PostFormat diff --git a/packages/editor/src/components/post-featured-image/check.js b/packages/editor/src/components/post-featured-image/check.js index 24a9f80058ddcc..823559f766bc35 100644 --- a/packages/editor/src/components/post-featured-image/check.js +++ b/packages/editor/src/components/post-featured-image/check.js @@ -4,6 +4,15 @@ import PostTypeSupportCheck from '../post-type-support-check'; import ThemeSupportCheck from '../theme-support-check'; +/** + * Wrapper component that renders its children only if the post type supports a featured image + * and the theme supports post thumbnails. + * + * @param {Object} props Props. + * @param {Element} props.children Children to be rendered. + * + * @return {Component} The component to be rendered. + */ function PostFeaturedImageCheck( { children } ) { return ( <ThemeSupportCheck supportKeys="post-thumbnails"> diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 5407cac15b5422..63c89669435d5e 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -266,6 +266,21 @@ const applyWithDispatch = withDispatch( } ); +/** + * Renders the component for managing the featured image of a post. + * + * @param {Object} props Props. + * @param {number} props.currentPostId ID of the current post. + * @param {number} props.featuredImageId ID of the featured image. + * @param {Function} props.onUpdateImage Function to call when the image is updated. + * @param {Function} props.onRemoveImage Function to call when the image is removed. + * @param {Object} props.media The media object representing the featured image. + * @param {string} props.postType Post type. + * @param {Element} props.noticeUI UI for displaying notices. + * @param {Object} props.noticeOperations Operations for managing notices. + * + * @return {Element} Component to be rendered . + */ export default compose( withNotices, applyWithSelect, diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js index 87d80dda4a7c1f..dd2a1527152ddf 100644 --- a/packages/editor/src/components/post-featured-image/panel.js +++ b/packages/editor/src/components/post-featured-image/panel.js @@ -15,6 +15,15 @@ import PostFeaturedImageCheck from './check'; const PANEL_NAME = 'featured-image'; +/** + * Renders the panel for the post featured image. + * + * @param {Object} props Props. + * @param {boolean} props.withPanelBody Whether to include the panel body. Default true. + * + * @return {Component|null} The component to be rendered. + * Return Null if the editor panel is disabled for featured image. + */ export default function PostFeaturedImagePanel( { withPanelBody = true } ) { const { postType, isEnabled, isOpened } = useSelect( ( select ) => { const { From 76702814603ae8d88bcc3ecc763b597280f97b4a Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Wed, 22 May 2024 03:36:00 +0530 Subject: [PATCH 11/94] Added doc for PostLastRevision components (#61166) --- packages/editor/README.md | 23 ++++++++++++++++--- .../components/post-last-revision/check.js | 8 +++++++ .../components/post-last-revision/index.js | 9 ++++++-- .../components/post-last-revision/panel.js | 5 ++++ 4 files changed, 40 insertions(+), 5 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 91072345f10605..64e28992ee2c3a 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -1047,15 +1047,32 @@ _Returns_ ### PostLastRevision -Undocumented declaration. +Renders the component for displaying the last revision of a post. + +_Returns_ + +- `Component`: The component to be rendered. ### PostLastRevisionCheck -Undocumented declaration. +Wrapper component that renders its children if the post has more than one revision. + +_Parameters_ + +- _props_ `Object`: Props. +- _props.children_ `Element`: Children to be rendered. + +_Returns_ + +- `Component|null`: Rendered child components if post has more than one revision, otherwise null. ### PostLastRevisionPanel -Undocumented declaration. +Renders the panel for displaying the last revision of a post. + +_Returns_ + +- `Component`: The component to be rendered. ### PostLockedModal diff --git a/packages/editor/src/components/post-last-revision/check.js b/packages/editor/src/components/post-last-revision/check.js index 44f96b9cf7acb0..c570f5e42cdc32 100644 --- a/packages/editor/src/components/post-last-revision/check.js +++ b/packages/editor/src/components/post-last-revision/check.js @@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data'; import PostTypeSupportCheck from '../post-type-support-check'; import { store as editorStore } from '../../store'; +/** + * Wrapper component that renders its children if the post has more than one revision. + * + * @param {Object} props Props. + * @param {Element} props.children Children to be rendered. + * + * @return {Component|null} Rendered child components if post has more than one revision, otherwise null. + */ function PostLastRevisionCheck( { children } ) { const { lastRevisionId, revisionsCount } = useSelect( ( select ) => { const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } = diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js index e747befefe44e0..97031106772ada 100644 --- a/packages/editor/src/components/post-last-revision/index.js +++ b/packages/editor/src/components/post-last-revision/index.js @@ -13,7 +13,12 @@ import { addQueryArgs } from '@wordpress/url'; import PostLastRevisionCheck from './check'; import { store as editorStore } from '../../store'; -function LastRevision() { +/** + * Renders the component for displaying the last revision of a post. + * + * @return {Component} The component to be rendered. + */ +function PostLastRevision() { const { lastRevisionId, revisionsCount } = useSelect( ( select ) => { const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } = select( editorStore ); @@ -42,4 +47,4 @@ function LastRevision() { ); } -export default LastRevision; +export default PostLastRevision; diff --git a/packages/editor/src/components/post-last-revision/panel.js b/packages/editor/src/components/post-last-revision/panel.js index de0aee0ab77503..e87475cc2b34e9 100644 --- a/packages/editor/src/components/post-last-revision/panel.js +++ b/packages/editor/src/components/post-last-revision/panel.js @@ -9,6 +9,11 @@ import { PanelBody } from '@wordpress/components'; import PostLastRevision from './'; import PostLastRevisionCheck from './check'; +/** + * Renders the panel for displaying the last revision of a post. + * + * @return {Component} The component to be rendered. + */ function PostLastRevisionPanel() { return ( <PostLastRevisionCheck> From f3069783fec48ebc4ac3b0e550b2e491d2f0eab7 Mon Sep 17 00:00:00 2001 From: Ramon <ramonjd@users.noreply.github.com> Date: Tue, 21 May 2024 16:49:37 -0700 Subject: [PATCH 12/94] Workflows: test to check for label and skip backport changelog (#61808) * Test to check for label and skip check Test PHP change Action * Added extra label check * Sentence case for the label: No Core Sync Required Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> --- .github/workflows/check-backport-changelog.yml | 3 ++- lib/class-wp-rest-global-styles-controller-gutenberg.php | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml index 0d7025474d715d..dd3fe28fbfd59f 100644 --- a/.github/workflows/check-backport-changelog.yml +++ b/.github/workflows/check-backport-changelog.yml @@ -2,7 +2,7 @@ name: Verify Core Backport Changlog on: pull_request: - types: [opened, synchronize] + types: [opened, synchronize, labeled, unlabeled] paths: - 'lib/**' - '!lib/load.php' @@ -31,6 +31,7 @@ jobs: - name: 'Fetch relevant history from origin' run: git fetch origin ${{ github.event.pull_request.base.ref }} - name: Check CHANGELOG status + if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }} env: PR_NUMBER: ${{ github.event.number }} run: | diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php index 3c960564a8fe0a..9bbca1ffcab404 100644 --- a/lib/class-wp-rest-global-styles-controller-gutenberg.php +++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php @@ -1,6 +1,6 @@ <?php /** - * REST API: Try: bundle WP_Theme_JSON class instead of inheriting per WordPress version class + * REST API: Bundle WP_Theme_JSON class instead of inheriting per WordPress version class * * Changes to this class should be synced to the corresponding class * in WordPress core: src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php. From f937eddef6a270d0e62f2a9e3c79d297ee6e1ac0 Mon Sep 17 00:00:00 2001 From: Kellen Mace <kellen.mace@gmail.com> Date: Wed, 22 May 2024 00:51:20 -0400 Subject: [PATCH 13/94] Fix an issue causing wp-scripts commands to fail if the file path contained a space character (#61748) * Add test file * Add test JS file with new package version * Bump lint-staged npm package version to fix issue where wp-scripts commands would fail if the file path contained a space * Remove test files Co-authored-by: kellenmace <kellenmace@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ndiego <ndiego@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> --- package-lock.json | 31 ++++++++++++++++++++++++------- package.json | 2 +- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35ea50b60b7ada..5caa380f4749bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -206,7 +206,7 @@ "jest-message-util": "29.6.2", "jest-watch-typeahead": "2.2.2", "lerna": "7.1.4", - "lint-staged": "10.0.1", + "lint-staged": "10.0.2", "make-dir": "3.0.0", "mkdirp": "3.0.1", "mock-match-media": "0.4.2", @@ -35256,9 +35256,9 @@ } }, "node_modules/lint-staged": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz", - "integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz", + "integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==", "dev": true, "dependencies": { "chalk": "^3.0.0", @@ -35272,6 +35272,7 @@ "micromatch": "^4.0.2", "normalize-path": "^3.0.0", "please-upgrade-node": "^3.2.0", + "string-argv": "0.3.1", "stringify-object": "^3.3.0" }, "bin": { @@ -47781,6 +47782,15 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/string-argv": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", + "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", + "dev": true, + "engines": { + "node": ">=0.6.19" + } + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -83177,9 +83187,9 @@ } }, "lint-staged": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz", - "integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz", + "integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==", "dev": true, "requires": { "chalk": "^3.0.0", @@ -83193,6 +83203,7 @@ "micromatch": "^4.0.2", "normalize-path": "^3.0.0", "please-upgrade-node": "^3.2.0", + "string-argv": "0.3.1", "stringify-object": "^3.3.0" }, "dependencies": { @@ -92808,6 +92819,12 @@ "safe-buffer": "~5.1.0" } }, + "string-argv": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", + "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", + "dev": true + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index 7995d6a9755a7e..77dce7cb5a5e72 100644 --- a/package.json +++ b/package.json @@ -218,7 +218,7 @@ "jest-message-util": "29.6.2", "jest-watch-typeahead": "2.2.2", "lerna": "7.1.4", - "lint-staged": "10.0.1", + "lint-staged": "10.0.2", "make-dir": "3.0.0", "mkdirp": "3.0.1", "mock-match-media": "0.4.2", From c70633dabadb1c9ea846663d4d2b086394993035 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr <jsnajdr@gmail.com> Date: Wed, 22 May 2024 09:54:05 +0200 Subject: [PATCH 14/94] History: add getLocationWithParams method (#61823) * History: add getLocationWithParams method * Fix effect loop in pages dataview --- .../src/components/add-new-pattern/index.js | 16 +++++++------- .../src/components/page-pages/index.js | 18 +++++++++------ .../sidebar-dataviews/add-new-view.js | 8 +++---- .../custom-dataviews-list.js | 12 +++++----- .../leaf-more-menu.js | 7 +++--- .../edit-site/src/utils/use-activate-theme.js | 4 ++-- packages/router/src/history.js | 17 ++++++++++++++ packages/router/src/router.js | 22 ++++--------------- 8 files changed, 55 insertions(+), 49 deletions(-) diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 7ecbf640790a83..bca37df9715004 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -25,14 +25,13 @@ import { TEMPLATE_PART_POST_TYPE, } from '../../utils/constants'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); const { CreatePatternModal, useAddPatternCategory } = unlock( editPatternsPrivateApis ); export default function AddNewPattern() { const history = useHistory(); - const { params } = useLocation(); const [ showPatternModal, setShowPatternModal ] = useState( false ); const [ showTemplatePartModal, setShowTemplatePartModal ] = useState( false ); @@ -141,16 +140,17 @@ export default function AddNewPattern() { return; } try { + const { + params: { postType, categoryId }, + } = history.getLocationWithParams(); let currentCategoryId; // When we're not handling template parts, we should // add or create the proper pattern category. - if ( params.postType !== TEMPLATE_PART_POST_TYPE ) { + if ( postType !== TEMPLATE_PART_POST_TYPE ) { const currentCategory = categoryMap .values() - .find( - ( term ) => term.name === params.categoryId - ); - if ( !! currentCategory ) { + .find( ( term ) => term.name === categoryId ); + if ( currentCategory ) { currentCategoryId = currentCategory.id || ( await findOrCreateTerm( @@ -170,7 +170,7 @@ export default function AddNewPattern() { // category. if ( ! currentCategoryId && - params.categoryId !== 'my-patterns' + categoryId !== 'my-patterns' ) { history.push( { postType: PATTERN_TYPES.user, diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 81f34e9ba59a89..391db38fbc51b6 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -51,8 +51,9 @@ const getFormattedDate = ( dateToDisplay ) => ); function useView( postType ) { - const { params } = useLocation(); - const { activeView = 'all', isCustom = 'false', layout } = params; + const { + params: { activeView = 'all', isCustom = 'false', layout }, + } = useLocation(); const history = useHistory(); const selectedDefaultView = useMemo( () => { const defaultView = @@ -128,6 +129,7 @@ function useView( postType ) { const setDefaultViewAndUpdateUrl = useCallback( ( viewToSet ) => { if ( viewToSet.type !== view?.type ) { + const { params } = history.getLocationWithParams(); history.push( { ...params, layout: viewToSet.type, @@ -135,7 +137,7 @@ function useView( postType ) { } setView( viewToSet ); }, - [ params, view?.type, history ] + [ history, view?.type ] ); if ( isCustom === 'false' ) { @@ -203,19 +205,21 @@ export default function PagePages() { const postType = 'page'; const [ view, setView ] = useView( postType ); const history = useHistory(); - const { params } = useLocation(); - const { isCustom = 'false' } = params; const onSelectionChange = useCallback( ( items ) => { - if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) { + const { params } = history.getLocationWithParams(); + if ( + ( params.isCustom ?? 'false' ) === 'false' && + view?.type === LAYOUT_LIST + ) { history.push( { ...params, postId: items.length === 1 ? items[ 0 ].id : undefined, } ); } }, - [ history, params, view?.type, isCustom ] + [ history, view?.type ] ); const queryArgs = useMemo( () => { diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js index 92986912d29cb8..ffddddb9cad292 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js +++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js @@ -22,12 +22,9 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { DEFAULT_VIEWS } from './default-views'; import { unlock } from '../../lock-unlock'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); function AddNewItemModalContent( { type, setIsAdding } ) { - const { - params: { postType }, - } = useLocation(); const history = useHistory(); const { saveEntityRecord } = useDispatch( coreStore ); const [ title, setTitle ] = useState( '' ); @@ -68,6 +65,9 @@ function AddNewItemModalContent( { type, setIsAdding } ) { ), } ); + const { + params: { postType }, + } = history.getLocationWithParams(); history.push( { postType, activeView: savedRecord.id, diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js index 5c7b3d038e76d9..5b8ccb4b69e6da 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js +++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js @@ -27,7 +27,7 @@ import DataViewItem from './dataview-item'; import AddNewItem from './add-new-view'; import { unlock } from '../../lock-unlock'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); const EMPTY_ARRAY = []; @@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) { } function CustomDataViewItem( { dataviewId, isActive } ) { - const { - params: { postType }, - } = useLocation(); const history = useHistory(); const { dataview } = useSelect( ( select ) => { @@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) { } ); if ( isActive ) { - history.replace( { - postType, - } ); + const { + params: { postType }, + } = history.getLocationWithParams(); + history.replace( { postType } ); } onClose(); } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 3749505c6b56fb..568ec291f9ed11 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -20,10 +20,9 @@ const POPOVER_PROPS = { */ import { unlock } from '../../lock-unlock'; -const { useLocation, useHistory } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); export default function LeafMoreMenu( props ) { - const { params } = useLocation(); const history = useHistory(); const { block } = props; const { clientId } = block; @@ -60,6 +59,7 @@ export default function LeafMoreMenu( props ) { attributes.type && history ) { + const { params } = history.getLocationWithParams(); history.push( { postType: attributes.type, @@ -72,6 +72,7 @@ export default function LeafMoreMenu( props ) { ); } if ( name === 'core/page-list-item' && attributes.id && history ) { + const { params } = history.getLocationWithParams(); history.push( { postType: 'page', @@ -84,7 +85,7 @@ export default function LeafMoreMenu( props ) { ); } }, - [ history, params ] + [ history ] ); return ( diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js index e5f9488a3edd8b..0dafd88340ba75 100644 --- a/packages/edit-site/src/utils/use-activate-theme.js +++ b/packages/edit-site/src/utils/use-activate-theme.js @@ -14,7 +14,7 @@ import { currentlyPreviewingTheme, } from './is-previewing-theme'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); /** * This should be refactored to use the REST API, once the REST API can activate themes. @@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); */ export function useActivateTheme() { const history = useHistory(); - const { params } = useLocation(); const { startResolution, finishResolution } = useDispatch( coreStore ); return async () => { @@ -38,6 +37,7 @@ export function useActivateTheme() { finishResolution( 'activateTheme' ); // Remove the wp_theme_preview query param: we've finished activating // the queue and are switching to normal Site Editor. + const { params } = history.getLocationWithParams(); history.replace( { ...params, wp_theme_preview: undefined } ); } }; diff --git a/packages/router/src/history.js b/packages/router/src/history.js index 56c85914a5453f..3a04745923a817 100644 --- a/packages/router/src/history.js +++ b/packages/router/src/history.js @@ -38,7 +38,24 @@ function replace( params, state ) { return originalHistoryReplace.call( history, { search }, state ); } +const locationMemo = new WeakMap(); +function getLocationWithParams() { + const location = history.location; + let locationWithParams = locationMemo.get( location ); + if ( ! locationWithParams ) { + locationWithParams = { + ...location, + params: Object.fromEntries( + new URLSearchParams( location.search ) + ), + }; + locationMemo.set( location, locationWithParams ); + } + return locationWithParams; +} + history.push = push; history.replace = replace; +history.getLocationWithParams = getLocationWithParams; export default history; diff --git a/packages/router/src/router.js b/packages/router/src/router.js index 233ee6962de763..55807175a5bdd9 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -23,25 +23,11 @@ export function useHistory() { return useContext( HistoryContext ); } -const locationCache = new Map(); -function getLocationWithParams( location ) { - if ( locationCache.get( location.search ) ) { - return locationCache.get( location.search ); - } - const searchParams = new URLSearchParams( location.search ); - const ret = { - ...location, - params: Object.fromEntries( searchParams.entries() ), - }; - locationCache.clear(); - locationCache.set( location.search, ret ); - - return ret; -} - export function RouterProvider( { children } ) { - const location = useSyncExternalStore( history.listen, () => - getLocationWithParams( history.location ) + const location = useSyncExternalStore( + history.listen, + history.getLocationWithParams, + history.getLocationWithParams ); return ( From f306096741fe61a76833dbf66b64993678f8d84f Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Wed, 22 May 2024 10:01:49 +0100 Subject: [PATCH 15/94] React: Upgrade to the new JSX transform (#61692) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: kevin940726 <kevin940726@git.wordpress.org> --- lib/client-assets.php | 8 ++++ package-lock.json | 15 +----- package.json | 3 +- packages/babel-preset-default/CHANGELOG.md | 4 ++ packages/babel-preset-default/index.js | 13 +---- packages/babel-preset-default/package.json | 1 - .../components/global-styles/color-panel.js | 29 +++++++----- packages/components/CHANGELOG.md | 4 ++ .../src/custom-select-control/index.js | 3 +- .../components/src/form-token-field/index.tsx | 2 +- .../lib/util.js | 7 +++ packages/interactivity/src/directives.tsx | 23 ++++----- packages/interactivity/src/hooks.tsx | 22 ++++----- packages/scripts/CHANGELOG.md | 4 ++ tools/webpack/packages.js | 31 +----------- tools/webpack/vendors.js | 47 +++++++++++++++++++ webpack.config.js | 2 + 17 files changed, 117 insertions(+), 101 deletions(-) create mode 100644 tools/webpack/vendors.js diff --git a/lib/client-assets.php b/lib/client-assets.php index 13884f90fb3ea5..a159bc53e6a591 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) { array( 'react' ), '18' ); + + gutenberg_override_script( + $scripts, + 'react-jsx-runtime', + gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ), + array( 'react' ), + '18' + ); } add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' ); diff --git a/package-lock.json b/package-lock.json index 5caa380f4749bb..18e04972eec1f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,8 +80,7 @@ "@wordpress/warning": "file:packages/warning", "@wordpress/widgets": "file:packages/widgets", "@wordpress/wordcount": "file:packages/wordcount", - "es-module-shims": "^1.8.2", - "wicg-inert": "3.1.2" + "es-module-shims": "^1.8.2" }, "devDependencies": { "@actions/core": "1.9.1", @@ -52381,11 +52380,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/wicg-inert": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", - "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" - }, "node_modules/wide-align": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", @@ -53173,7 +53167,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", @@ -68520,7 +68513,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", @@ -96269,11 +96261,6 @@ "has-tostringtag": "^1.0.0" } }, - "wicg-inert": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", - "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" - }, "wide-align": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", diff --git a/package.json b/package.json index 77dce7cb5a5e72..0902b172c9319c 100644 --- a/package.json +++ b/package.json @@ -92,8 +92,7 @@ "@wordpress/warning": "file:packages/warning", "@wordpress/widgets": "file:packages/widgets", "@wordpress/wordcount": "file:packages/wordcount", - "es-module-shims": "^1.8.2", - "wicg-inert": "3.1.2" + "es-module-shims": "^1.8.2" }, "devDependencies": { "@actions/core": "1.9.1", diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 5735008dd472dc..15ced9c9dde12c 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 7.42.0 (2024-05-16) ## 7.41.0 (2024-05-02) diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 40f7c31bb3c25b..45ec6473be3cbc 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -75,21 +75,10 @@ module.exports = ( api ) => { ], plugins: [ require.resolve( '@wordpress/warning/babel-plugin' ), - [ - require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ), - { - scopeVariable: 'createElement', - scopeVariableFrag: 'Fragment', - source: 'react', - isDefault: false, - }, - ], [ require.resolve( '@babel/plugin-transform-react-jsx' ), { - pragma: 'createElement', - pragmaFrag: 'Fragment', - useSpread: true, + runtime: 'automatic', }, ], maybeGetPluginTransformRuntime(), diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index 4b12101565b45c..438cce0f47b96b 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -35,7 +35,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index 33aec0979a3c4d..baa5a0779cfd05 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -710,19 +710,22 @@ export default function ColorPanel( { onChange={ onChange } panelId={ panelId } > - { items.map( ( item ) => ( - <ColorPanelDropdown - key={ item.key } - { ...item } - colorGradientControlSettings={ { - colors, - disableCustomColors: ! areCustomSolidsEnabled, - gradients, - disableCustomGradients: ! areCustomGradientsEnabled, - } } - panelId={ panelId } - /> - ) ) } + { items.map( ( item ) => { + const { key, ...restItem } = item; + return ( + <ColorPanelDropdown + key={ key } + { ...restItem } + colorGradientControlSettings={ { + colors, + disableCustomColors: ! areCustomSolidsEnabled, + gradients, + disableCustomGradients: ! areCustomGradientsEnabled, + } } + panelId={ panelId } + /> + ); + } ) } { children } </Wrapper> ); diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7ada9626797d45..4e965c7960b8e3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). +### Internal + +- Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 27.6.0 (2024-05-16) ### Internal diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 46bc4f4d9a4fb1..979aa0f7bdff8d 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -185,12 +185,11 @@ export default function CustomSelectControl( props ) { <ul { ...menuProps } onKeyDown={ onKeyDownHandler }> { isOpen && items.map( ( item, index ) => ( - // eslint-disable-next-line react/jsx-key <li + key={ item.key } { ...getItemProps( { item, index, - key: item.key, className: clsx( item.className, 'components-custom-select-control__item', diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index d89080b4410c41..9fa3d3b7323df2 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) { autoCapitalize, autoComplete, placeholder: value.length === 0 ? placeholder : '', - key: 'input', disabled, value: incompleteTokenValue, onBlur, @@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { return ( <TokenInput + key="input" { ...inputProps } onChange={ ! ( maxLength && value.length >= maxLength ) diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 92fdcff11612ea..55a908c31a7ab9 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -42,6 +42,10 @@ function defaultRequestToExternal( request ) { case 'react-dom': return 'ReactDOM'; + + case 'react/jsx-runtime': + case 'react/jsx-dev-runtime': + return 'ReactJSXRuntime'; } if ( request.includes( 'react-refresh/runtime' ) ) { @@ -117,6 +121,9 @@ function defaultRequestToHandle( request ) { case 'lodash-es': return 'lodash'; + + case 'react/jsx-runtime': + return 'react-jsx-runtime'; } if ( request.includes( 'react-refresh/runtime' ) ) { diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx index b0b78bb27efe50..d0619bb37d4c7f 100644 --- a/packages/interactivity/src/directives.tsx +++ b/packages/interactivity/src/directives.tsx @@ -1,8 +1,6 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable react-hooks/exhaustive-deps */ -/* @jsx createElement */ - /** * External dependencies */ @@ -231,6 +229,7 @@ export default () => { // data-wp-context directive( 'context', + // @ts-ignore-next-line ( { directives: { context }, props: { children }, @@ -260,7 +259,7 @@ export default () => { return proxifyContext( currentValue.current, inheritedValue ); }, [ defaultEntry, inheritedValue ] ); - return <Provider value={ contextStack }>{ children }</Provider>; + return createElement( Provider, { value: contextStack }, children ); }, { priority: 5 } ); @@ -481,12 +480,10 @@ export default () => { } ) => { // Preserve the initial inner HTML. const cached = useMemo( () => innerHTML, [] ); - return ( - <Type - dangerouslySetInnerHTML={ { __html: cached } } - { ...rest } - /> - ); + return createElement( Type, { + dangerouslySetInnerHTML: { __html: cached }, + ...rest, + } ); } ); @@ -549,10 +546,10 @@ export default () => { ? getEvaluate( { scope } )( eachKey[ 0 ] ) : item; - return ( - <Provider value={ mergedContext } key={ key }> - { element.props.content } - </Provider> + return createElement( + Provider, + { value: mergedContext, key }, + element.props.content ); } ); }, diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx index 735ed26aabc8cc..4d4e2d6d6f6629 100644 --- a/packages/interactivity/src/hooks.tsx +++ b/packages/interactivity/src/hooks.tsx @@ -1,5 +1,3 @@ -/* @jsx createElement */ - // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable react-hooks/exhaustive-deps */ @@ -352,17 +350,15 @@ const Directives = ( { // Recursively render the wrapper for the next priority level. const children = - nextPriorityLevels.length > 0 ? ( - <Directives - directives={ directives } - priorityLevels={ nextPriorityLevels } - element={ element } - originalProps={ originalProps } - previousScope={ scope } - /> - ) : ( - element - ); + nextPriorityLevels.length > 0 + ? createElement( Directives, { + directives, + priorityLevels: nextPriorityLevels, + element, + originalProps, + previousScope: scope, + } ) + : element; const props = { ...originalProps, children }; const directiveArgs = { diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 8bc3319e52836c..8c5aa8c623ef09 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 27.9.0 (2024-05-16) ### New Features diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 0a4b8cef574464..899ee36ec93813 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -102,34 +102,6 @@ const exportDefaultPackages = [ 'warning', ]; -const vendors = { - react: [ - 'react/umd/react.development.js', - 'react/umd/react.production.min.js', - ], - 'react-dom': [ - 'react-dom/umd/react-dom.development.js', - 'react-dom/umd/react-dom.production.min.js', - ], - 'inert-polyfill': [ - 'wicg-inert/dist/inert.js', - 'wicg-inert/dist/inert.min.js', - ], -}; -const vendorsCopyConfig = Object.entries( vendors ).flatMap( - ( [ key, [ devFilename, prodFilename ] ] ) => { - return [ - { - from: `node_modules/${ devFilename }`, - to: `build/vendors/${ key }.js`, - }, - { - from: `node_modules/${ prodFilename }`, - to: `build/vendors/${ key }.min.js`, - }, - ]; - } -); module.exports = { ...baseConfig, name: 'packages', @@ -176,8 +148,7 @@ module.exports = { transform: stylesTransform, noErrorOnMissing: true, } ) ) - .concat( bundledPackagesPhpConfig ) - .concat( vendorsCopyConfig ), + .concat( bundledPackagesPhpConfig ), } ), new MomentTimezoneDataPlugin( { startYear: 2000, diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js new file mode 100644 index 00000000000000..d21c029f6c3971 --- /dev/null +++ b/tools/webpack/vendors.js @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +const { join } = require( 'path' ); + +const importedVendors = { + react: { import: 'react', global: 'React' }, + 'react-dom': { import: 'react-dom', global: 'ReactDOM' }, + 'react-jsx-runtime': { + import: 'react/jsx-runtime', + global: 'ReactJSXRuntime', + }, +}; + +module.exports = [ + ...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => { + return [ 'production', 'development' ].map( ( mode ) => { + return { + mode, + target: 'browserslist', + output: { + filename: + mode === 'development' + ? `vendors/[name].js` + : `vendors/[name].min.js`, + path: join( __dirname, '..', '..', 'build' ), + }, + entry: { + [ name ]: { + import: config.import, + library: { + name: config.global, + type: 'window', + }, + }, + }, + + externals: + name === 'react' + ? {} + : { + react: 'React', + }, + }; + } ); + } ), +]; diff --git a/webpack.config.js b/webpack.config.js index 8558707f4bc9fa..45b22cc5354dcf 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,10 +5,12 @@ const blocksConfig = require( './tools/webpack/blocks' ); const developmentConfigs = require( './tools/webpack/development' ); const interactivity = require( './tools/webpack/interactivity' ); const packagesConfig = require( './tools/webpack/packages' ); +const vendorsConfig = require( './tools/webpack/vendors' ); module.exports = [ ...blocksConfig, interactivity, packagesConfig, ...developmentConfigs, + ...vendorsConfig, ]; From 448e855ba1e649ba7f511732b4970d9b91e5428e Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Wed, 22 May 2024 13:13:51 +0400 Subject: [PATCH 16/94] Style Book: Use state to initialize examples (#61848) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> --- packages/edit-site/src/components/style-book/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 900fa47beb99c2..0d699544613209 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -190,7 +190,7 @@ function StyleBook( { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); - const examples = useMemo( getExamples, [] ); + const [ examples ] = useState( getExamples ); const tabs = useMemo( () => getCategories() From 25c9ddfe61fe4374014e19fc0850891199a20d4e Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Wed, 22 May 2024 10:41:35 +0100 Subject: [PATCH 17/94] DataViews: Remove non-used file (#61853) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> --- .../dataviews/src/dropdown-menu-helper.js | 61 ------------------- 1 file changed, 61 deletions(-) delete mode 100644 packages/dataviews/src/dropdown-menu-helper.js diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js deleted file mode 100644 index ce0ace8f61e551..00000000000000 --- a/packages/dataviews/src/dropdown-menu-helper.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * WordPress dependencies - */ -import { - Icon, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; -import { forwardRef } from '@wordpress/element'; -import { SVG, Circle } from '@wordpress/primitives'; - -/** - * Internal dependencies - */ -import { unlock } from './lock-unlock'; - -const { DropdownMenuItemV2: DropdownMenuItem } = unlock( - componentsPrivateApis -); - -const radioCheck = ( - <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> - <Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle> - </SVG> -); - -/** - * A custom implementation of a radio menu item using the standard menu item - * component, which allows deselecting selected values. - */ -export const DropdownMenuRadioItemCustom = forwardRef( - function DropdownMenuRadioItemCustom( - { checked, name, value, hideOnClick, onChange, onClick, ...props }, - ref - ) { - const onClickHandler = ( e ) => { - onClick?.( e ); - onChange?.( { ...e, target: { ...e.target, value } } ); - }; - return ( - <DropdownMenuItem - ref={ ref } - role="menuitemradio" - name={ name } - aria-checked={ checked } - hideOnClick={ !! hideOnClick } - prefix={ - checked ? ( - <Icon icon={ radioCheck } /> - ) : ( - <span - className="dataviews-filters__custom-menu-radio-item-prefix" - aria-hidden="true" - ></span> - ) - } - onClick={ onClickHandler } - { ...props } - /> - ); - } -); From cef484e5f6fa1a1ea408ed797d3ec3a474f63136 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu <me@andreidraganescu.info> Date: Wed, 22 May 2024 12:53:44 +0300 Subject: [PATCH 18/94] Zoom out: Render in-between inserters when selected (#61559) --- .../src/components/block-tools/zoom-out-mode-inserters.js | 4 +++- test/e2e/specs/site-editor/zoom-out.spec.js | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index 4396f54b19707b..ca27fd8ad37857 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -21,6 +21,7 @@ function ZoomOutModeInserters() { sectionRootClientId, insertionPoint, setInserterIsOpened, + selectedSection, } = useSelect( ( select ) => { const { getSettings, getBlockOrder } = select( blockEditorStore ); const { sectionRootClientId: root } = unlock( getSettings() ); @@ -32,6 +33,7 @@ function ZoomOutModeInserters() { // eslint-disable-next-line @wordpress/data-no-store-string-literals const editor = select( 'core/editor' ); return { + selectedSection: editor.getSelectedBlock(), blockOrder: getBlockOrder( root ), insertionPoint: unlock( editor ).getInsertionPoint(), sectionRootClientId: root, @@ -62,7 +64,7 @@ function ZoomOutModeInserters() { }; }, [] ); - if ( ! isReady ) { + if ( ! isReady || ! selectedSection ) { return null; } diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 63ad58b2e18a59..2cd0db8b1ebe22 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -24,6 +24,12 @@ test.describe( 'Zoom Out', () => { await page.getByRole( 'button', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Browse styles' } ).click(); + // select the 1st pattern + await page + .frameLocator( 'iframe[name="editor-canvas"]' ) + .locator( 'header' ) + .click(); + await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 ); await page.getByLabel( 'Add pattern' ).first().click(); await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 ); From e7eb60a1176c923a2e20ce025e7531a0ccb1ed21 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr <jsnajdr@gmail.com> Date: Wed, 22 May 2024 13:10:53 +0200 Subject: [PATCH 19/94] withRegistryProvider: prevent intermediate state with no children (#61859) Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> --- .../provider/with-registry-provider.js | 71 +++++++++---------- .../provider/with-registry-provider.js | 63 ++++++++-------- 2 files changed, 65 insertions(+), 69 deletions(-) diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js index 5c00da6e93eabc..582a9bd547f20e 100644 --- a/packages/block-editor/src/components/provider/with-registry-provider.js +++ b/packages/block-editor/src/components/provider/with-registry-provider.js @@ -1,12 +1,8 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; -import { - withRegistry, - createRegistry, - RegistryProvider, -} from '@wordpress/data'; +import { useState } from '@wordpress/element'; +import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data'; import { createHigherOrderComponent } from '@wordpress/compose'; /** @@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose'; import { storeConfig } from '../../store'; import { STORE_NAME as blockEditorStoreName } from '../../store/constants'; -const withRegistryProvider = createHigherOrderComponent( - ( WrappedComponent ) => { - return withRegistry( - ( { useSubRegistry = true, registry, ...props } ) => { - if ( ! useSubRegistry ) { - return ( - <WrappedComponent registry={ registry } { ...props } /> - ); - } - - const [ subRegistry, setSubRegistry ] = useState( null ); - useEffect( () => { - const newRegistry = createRegistry( {}, registry ); - newRegistry.registerStore( - blockEditorStoreName, - storeConfig - ); - setSubRegistry( newRegistry ); - }, [ registry ] ); +function getSubRegistry( subRegistries, registry, useSubRegistry ) { + if ( ! useSubRegistry ) { + return registry; + } + let subRegistry = subRegistries.get( registry ); + if ( ! subRegistry ) { + subRegistry = createRegistry( {}, registry ); + subRegistry.registerStore( blockEditorStoreName, storeConfig ); + subRegistries.set( registry, subRegistry ); + } + return subRegistry; +} - if ( ! subRegistry ) { - return null; - } +const withRegistryProvider = createHigherOrderComponent( + ( WrappedComponent ) => + ( { useSubRegistry = true, ...props } ) => { + const registry = useRegistry(); + const [ subRegistries ] = useState( () => new WeakMap() ); + const subRegistry = getSubRegistry( + subRegistries, + registry, + useSubRegistry + ); - return ( - <RegistryProvider value={ subRegistry }> - <WrappedComponent - registry={ subRegistry } - { ...props } - /> - </RegistryProvider> - ); + if ( subRegistry === registry ) { + return <WrappedComponent registry={ registry } { ...props } />; } - ); - }, + + return ( + <RegistryProvider value={ subRegistry }> + <WrappedComponent registry={ subRegistry } { ...props } /> + </RegistryProvider> + ); + }, 'withRegistryProvider' ); diff --git a/packages/editor/src/components/provider/with-registry-provider.js b/packages/editor/src/components/provider/with-registry-provider.js index 32c30a9f8d6873..cebbb766ff9429 100644 --- a/packages/editor/src/components/provider/with-registry-provider.js +++ b/packages/editor/src/components/provider/with-registry-provider.js @@ -1,12 +1,8 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; -import { - withRegistry, - createRegistry, - RegistryProvider, -} from '@wordpress/data'; +import { useState } from '@wordpress/element'; +import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data'; import { createHigherOrderComponent } from '@wordpress/compose'; import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor'; @@ -15,41 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor'; */ import { storeConfig } from '../../store'; +function getSubRegistry( subRegistries, registry, useSubRegistry ) { + if ( ! useSubRegistry ) { + return registry; + } + let subRegistry = subRegistries.get( registry ); + if ( ! subRegistry ) { + subRegistry = createRegistry( + { + 'core/block-editor': blockEditorStoreConfig, + }, + registry + ); + // Todo: The interface store should also be created per instance. + subRegistry.registerStore( 'core/editor', storeConfig ); + subRegistries.set( registry, subRegistry ); + } + return subRegistry; +} + const withRegistryProvider = createHigherOrderComponent( ( WrappedComponent ) => - withRegistry( ( props ) => { - const { - useSubRegistry = true, + ( { useSubRegistry = true, ...props } ) => { + const registry = useRegistry(); + const [ subRegistries ] = useState( () => new WeakMap() ); + const subRegistry = getSubRegistry( + subRegistries, registry, - ...additionalProps - } = props; - if ( ! useSubRegistry ) { - return <WrappedComponent { ...additionalProps } />; - } - - const [ subRegistry, setSubRegistry ] = useState( null ); - useEffect( () => { - const newRegistry = createRegistry( - { - 'core/block-editor': blockEditorStoreConfig, - }, - registry - ); - // Todo: The interface store should also be created per instance. - newRegistry.registerStore( 'core/editor', storeConfig ); - setSubRegistry( newRegistry ); - }, [ registry ] ); + useSubRegistry + ); - if ( ! subRegistry ) { - return null; + if ( subRegistry === registry ) { + return <WrappedComponent registry={ registry } { ...props } />; } return ( <RegistryProvider value={ subRegistry }> - <WrappedComponent { ...additionalProps } /> + <WrappedComponent registry={ subRegistry } { ...props } /> </RegistryProvider> ); - } ), + }, 'withRegistryProvider' ); From 6e8c26100818b7db463e1536cc1fc5a8893de467 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed, 22 May 2024 14:32:09 +0300 Subject: [PATCH 20/94] Tooltip: Fix Ariakit tooltip store usage (#61858) * Tooltip: Fix Ariakit tooltip store usage * CHANGELOG Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: diegohaz <hazdiego@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/tooltip/index.tsx | 5 +---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4e965c7960b8e3..73365bda8de59e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,7 @@ ### Internal - Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). +- Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)). ## 27.6.0 (2024-05-16) diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx index 87c7506a9c5f7d..1eb0de7fed009d 100644 --- a/packages/components/src/tooltip/index.tsx +++ b/packages/components/src/tooltip/index.tsx @@ -87,10 +87,7 @@ function UnforwardedTooltip( } computedPlacement = computedPlacement || 'bottom'; - // Removing the `Ariakit` namespace from the hook name allows ESLint to - // properly identify the hook, and apply the correct linting rules. - const useAriakitTooltipStore = Ariakit.useTooltipStore; - const tooltipStore = useAriakitTooltipStore( { + const tooltipStore = Ariakit.useTooltipStore( { placement: computedPlacement, showTimeout: delay, } ); From 66d35c10b9d78a47dfbd8583622527998eaa2972 Mon Sep 17 00:00:00 2001 From: Madhu Dollu <madhusudhan.dollu@gmail.com> Date: Wed, 22 May 2024 14:34:44 +0200 Subject: [PATCH 21/94] Shadow: add unit tests for shadow support (#60063) * add unit tests for shadow support * refactor tests * Update method doc block Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * add core pr reference --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: vcanales <vcanales@git.wordpress.org> --- backport-changelog/6279.md | 3 + phpunit/block-supports/shadow-test.php | 112 +++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 backport-changelog/6279.md create mode 100644 phpunit/block-supports/shadow-test.php diff --git a/backport-changelog/6279.md b/backport-changelog/6279.md new file mode 100644 index 00000000000000..f372c33d339b8a --- /dev/null +++ b/backport-changelog/6279.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6279 + +* https://github.com/WordPress/gutenberg/pull/60063 diff --git a/phpunit/block-supports/shadow-test.php b/phpunit/block-supports/shadow-test.php new file mode 100644 index 00000000000000..c2fc0defe8199c --- /dev/null +++ b/phpunit/block-supports/shadow-test.php @@ -0,0 +1,112 @@ +<?php + +/** + * Test the shadow block supports. + * + * @package Gutenberg + */ + +class WP_Block_Supports_Shadow_Test extends WP_UnitTestCase { + /** + * @var string|null + */ + private $test_block_name; + + public function set_up() { + parent::set_up(); + $this->test_block_name = null; + } + + public function tear_down() { + unregister_block_type( $this->test_block_name ); + $this->test_block_name = null; + parent::tear_down(); + } + + /** + * Registers a new block for testing shadow support. + * + * @param string $block_name Name for the test block. + * @param array $supports Array defining block support configuration. + * + * @return WP_Block_Type The block type for the newly registered test block. + */ + private function register_shadow_block_with_support( $block_name, $supports = array() ) { + $this->test_block_name = $block_name; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => $supports, + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + + return $registry->get_registered( $this->test_block_name ); + } + + /** + * Tests the generation of shadow block support styles. + * + * @dataProvider data_generate_shadow_fixtures + * + * @param boolean|array $support Shadow block support configuration. + * @param string $value Shadow style value for style attribute object. + * @param array $expected Expected shadow block support styles. + */ + public function test_gutenberg_apply_shadow_support( $support, $value, $expected ) { + $block_type = self::register_shadow_block_with_support( + 'test/shadow-block', + array( 'shadow' => $support ) + ); + $block_attrs = array( 'style' => array( 'shadow' => $value ) ); + $actual = gutenberg_apply_shadow_support( $block_type, $block_attrs ); + + $this->assertSame( $expected, $actual ); + } + + /** + * Data provider. + * + * @return array + */ + public function data_generate_shadow_fixtures() { + return array( + 'with no styles' => array( + 'support' => true, + 'value' => '', + 'expected' => array(), + ), + 'without support' => array( + 'support' => false, + 'value' => '1px 1px 1px #000', + 'expected' => array(), + ), + 'with single shadow' => array( + 'support' => true, + 'value' => '1px 1px 1px #000', + 'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000;' ), + ), + 'with comma separated shadows' => array( + 'support' => true, + 'value' => '1px 1px 1px #000, 2px 2px 2px #fff', + 'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000, 2px 2px 2px #fff;' ), + ), + 'with preset shadow' => array( + 'support' => true, + 'value' => 'var:preset|shadow|natural', + 'expected' => array( 'style' => 'box-shadow:var(--wp--preset--shadow--natural);' ), + ), + 'with serialization skipped' => array( + 'support' => array( '__experimentalSkipSerialization' => true ), + 'value' => '1px 1px 1px #000', + 'expected' => array(), + ), + ); + } +} From f2d1937c20af4bf123aee1984fc79560194b9a6f Mon Sep 17 00:00:00 2001 From: Rich Tabor <hi@richtabor.com> Date: Wed, 22 May 2024 08:43:46 -0400 Subject: [PATCH 22/94] Make color variations fit in a bit better visually (#61617) * Use smaller placement * remove border radius * fix scrollbars * add the border-radius to the previews --------- Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: bgardner <bgardner@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org> --- .../edit-site/src/components/global-styles/style.scss | 1 - .../src/components/global-styles/variations/style.scss | 9 ++++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 04450edea29666..6afb0e787cf56a 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -7,7 +7,6 @@ } .edit-site-global-styles-preview__iframe { - border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui. max-width: 100%; display: block; width: 100%; diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index e68726ebae4ca0..336e8ceac7ca6d 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -8,15 +8,18 @@ border-radius: $radius-block-ui; outline: $border-width solid rgba($black, 0.15); outline-offset: -$border-width; + overflow: hidden; position: relative; // Add the same transition that block style variations and other buttons have. transition: outline 0.1s linear; @include reduce-motion("transition"); &.is-pill { - height: $button-size-next-default-40px; - border-radius: 100px; - overflow: hidden; + height: $button-size-compact; + + .block-editor-iframe__scale-container { + overflow: hidden; + } } } From 8075cb194d11627b44b805d8e6ceaa3797b89cc2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Wed, 22 May 2024 14:20:17 +0100 Subject: [PATCH 23/94] Global Styles: Filter out color and typography variations (#61327) Update packages/edit-site/src/components/global-styles/style-variations-container.js Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Update packages/edit-site/src/components/global-styles/style-variations-container.js Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> update function name remove variations which are empty once the property has been filtered out move to a reduce function remove duplicate values Global Styles: Don't filter out variations where the heading and body fonts are the sane Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> --- .../src/components/global-styles/hooks.js | 47 ++++--------------- 1 file changed, 10 insertions(+), 37 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 50032786e39942..5bc823a81dbf7a 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -9,22 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y'; */ import { store as blocksStore } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; -import { useContext } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; -import { getFontFamilies } from './utils'; import { unlock } from '../../lock-unlock'; import { useSelect } from '@wordpress/data'; -const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); -const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock( - blockEditorPrivateApis -); +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis ); // Enable colord's a11y plugin. extend( [ a11yPlugin ] ); @@ -142,38 +136,17 @@ export function useTypographyVariations() { useCurrentMergeThemeStyleVariationsWithUserConfig( { property: 'typography', } ); - - const { base } = useContext( GlobalStylesContext ); /* - * Filter duplicate variations based on whether the variaitons - * have different heading and body font families. + * Filter out variations with no settings or styles. */ return typographyVariations?.length - ? Object.values( - typographyVariations.reduce( ( acc, variation ) => { - const [ bodyFontFamily, headingFontFamily ] = - getFontFamilies( - mergeBaseAndUserConfigs( base, variation ) - ); - - // Always preseve the default variation. - if ( variation?.title === 'Default' ) { - acc[ - `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` - ] = variation; - } else if ( - headingFontFamily?.name && - bodyFontFamily?.name && - ! acc[ - `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` - ] - ) { - acc[ - `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` - ] = variation; - } - return acc; - }, {} ) - ) + ? typographyVariations.filter( ( variation ) => { + const { settings, styles, title } = variation; + return ( + title === __( 'Default' ) || // Always preseve the default variation. + Object.keys( settings ).length > 0 || + Object.keys( styles ).length > 0 + ); + } ) : []; } From a53dee6cdc6d0991650228132b89607144d6056f Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Wed, 22 May 2024 14:43:06 +0100 Subject: [PATCH 24/94] Editor: Unify the content area of the post and site editors (#61860) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> --- .../edit-post/src/components/layout/index.js | 10 ++---- .../edit-site/src/components/editor/index.js | 32 ++++++++----------- .../editor/src/components/provider/index.js | 2 ++ 3 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 0518f5507d9841..25e74f24577d0e 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -12,7 +12,6 @@ import { UnsavedChangesWarning, EditorNotices, EditorKeyboardShortcutsRegister, - EditorKeyboardShortcuts, EditorSnackbars, store as editorStore, privateApis as editorPrivateApis, @@ -24,7 +23,6 @@ import { privateApis as blockEditorPrivateApis, store as blockEditorStore, } from '@wordpress/block-editor'; -import { ScrollLock } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { PluginArea } from '@wordpress/plugins'; import { __, _x, sprintf } from '@wordpress/i18n'; @@ -335,7 +333,6 @@ function Layout( { initialPost } ) { <LocalAutosaveMonitor /> <EditPostKeyboardShortcuts /> <EditorKeyboardShortcutsRegister /> - <EditorKeyboardShortcuts /> <BlockKeyboardShortcuts /> <InterfaceSkeleton @@ -367,7 +364,9 @@ function Layout( { initialPost } ) { { ( mode === 'text' || ! isRichEditingEnabled ) && ( <TextEditor /> ) } - { ! isLargeViewport && <BlockToolbar hideDragHandle /> } + { ! isLargeViewport && mode === 'visual' && ( + <BlockToolbar hideDragHandle /> + ) } { isRichEditingEnabled && mode === 'visual' && ( <VisualEditor styles={ styles } /> ) } @@ -377,9 +376,6 @@ function Layout( { initialPost } ) { <MetaBoxes location="advanced" /> </div> ) } - { isMobileViewport && sidebarIsOpened && ( - <ScrollLock /> - ) } </> } footer={ diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c521ea3d8e5c35..2ba3a94f6e704d 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -25,7 +25,6 @@ import { } from '@wordpress/block-editor'; import { EditorKeyboardShortcutsRegister, - EditorKeyboardShortcuts, EditorNotices, privateApis as editorPrivateApis, store as editorStore, @@ -265,6 +264,15 @@ export default function Editor( { isLoading, onClick } ) { return ( <> + <GlobalStylesRenderer /> + <EditorKeyboardShortcutsRegister /> + { isEditMode && <BlockKeyboardShortcuts /> } + { showVisualEditor && ( + <> + <TemplatePartConverter /> + <PatternModal /> + </> + ) } { ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null } { isEditMode && <WelcomeGuide /> } { hasLoadedPost && ! editedPost && ( @@ -342,27 +350,15 @@ export default function Editor( { isLoading, onClick } ) { } content={ <> - <GlobalStylesRenderer /> { isEditMode && <EditorNotices /> } - { showVisualEditor && ( - <> - <TemplatePartConverter /> - { ! isLargeViewport && ( - <BlockToolbar hideDragHandle /> - ) } - <SiteEditorCanvas onClick={ onClick } /> - <PatternModal /> - </> - ) } { editorMode === 'text' && isEditMode && ( <CodeEditor /> ) } - { isEditMode && ( - <> - <EditorKeyboardShortcutsRegister /> - <EditorKeyboardShortcuts /> - <BlockKeyboardShortcuts /> - </> + { ! isLargeViewport && showVisualEditor && ( + <BlockToolbar hideDragHandle /> + ) } + { showVisualEditor && ( + <SiteEditorCanvas onClick={ onClick } /> ) } </> } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 93dbb00d8216cc..9830a20f40fad9 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -30,6 +30,7 @@ import StartPageOptions from '../start-page-options'; import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu'; import StartTemplateOptions from '../start-template-options'; +import EditorKeyboardShortcuts from '../global-keyboard-shortcuts'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); @@ -273,6 +274,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( { type === 'wp_navigation' && ( <NavigationBlockEditingMode /> ) } + <EditorKeyboardShortcuts /> <KeyboardShortcutHelpModal /> <BlockRemovalWarnings /> <StartPageOptions /> From 6108134aae75d1bd4826256490c609cb29044cd8 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras <ntsekouras@outlook.com> Date: Wed, 22 May 2024 16:49:07 +0300 Subject: [PATCH 25/94] Consolidate and fix `rename` post action (#61857) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> --- .../src/components/post-actions/actions.js | 148 +++++------------- 1 file changed, 36 insertions(+), 112 deletions(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index 28bce1f1becc6e..f30df56e67e2e8 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -498,7 +498,37 @@ const renamePostAction = { id: 'rename-post', label: __( 'Rename' ), isEligible( post ) { - return post.status !== 'trash'; + if ( post.status === 'trash' ) { + return false; + } + // Templates, template parts and patterns have special checks for renaming. + if ( + ! [ + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + ...Object.values( PATTERN_TYPES ), + ].includes( post.type ) + ) { + return true; + } + // In the case of templates, we can only remove custom templates. + if ( post.type === TEMPLATE_POST_TYPE ) { + return isTemplateRemovable( post ) && post.is_custom; + } + // Make necessary checks for template parts and patterns. + const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE; + const isUserPattern = post.type === PATTERN_TYPES.user; + // In patterns list page we map the templates parts to a different object + // than the one returned from the endpoint. This is why we need to check for + // two props whether is custom or has a theme file. + const isCustomPattern = + isUserPattern || + ( isTemplatePart && + ( post.isCustom || post.source === TEMPLATE_ORIGINS.custom ) ); + const hasThemeFile = + isTemplatePart && + ( post.templatePart?.has_theme_file || post.has_theme_file ); + return isCustomPattern && ! hasThemeFile; }, RenderModal: ( { items, closeModal, onActionPerformed } ) => { const [ item ] = items; @@ -908,111 +938,6 @@ const deleteTemplateAction = { }, }; -const renameTemplateAction = { - id: 'rename-template', - label: __( 'Rename' ), - isEligible: ( template ) => { - // We can only remove templates or template parts that can be removed. - // Additionally in the case of templates, we can only remove custom templates. - if ( - ! isTemplateRemovable( template ) || - ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) - ) { - return false; - } - return true; - }, - RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => { - const template = templates[ 0 ]; - const title = decodeEntities( template.title.rendered ); - const [ editedTitle, setEditedTitle ] = useState( title ); - const { - editEntityRecord, - __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits, - } = useDispatch( coreStore ); - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - async function onTemplateRename( event ) { - event.preventDefault(); - try { - await editEntityRecord( - 'postType', - template.type, - template.id, - { - title: editedTitle, - } - ); - // Update state before saving rerenders the list. - setEditedTitle( '' ); - closeModal(); - // Persist edited entity. - await saveSpecifiedEntityEdits( - 'postType', - template.type, - template.id, - [ 'title' ], // Only save title to avoid persisting other edits. - { - throwOnError: true, - } - ); - createSuccessNotice( - template.type === TEMPLATE_POST_TYPE - ? __( 'Template renamed.' ) - : __( 'Template part renamed.' ), - { - type: 'snackbar', - } - ); - onActionPerformed?.( templates ); - } catch ( error ) { - const fallbackErrorMessage = - template.type === TEMPLATE_POST_TYPE - ? __( 'An error occurred while renaming the template.' ) - : __( - 'An error occurred while renaming the template part.' - ); - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : fallbackErrorMessage; - - createErrorNotice( errorMessage, { type: 'snackbar' } ); - } - } - return ( - <form onSubmit={ onTemplateRename }> - <VStack spacing="5"> - <TextControl - __nextHasNoMarginBottom - __next40pxDefaultSize - label={ __( 'Name' ) } - value={ editedTitle } - onChange={ setEditedTitle } - required - /> - <HStack justify="right"> - <Button - variant="tertiary" - onClick={ closeModal } - __next40pxDefaultSize - > - { __( 'Cancel' ) } - </Button> - <Button - variant="primary" - type="submit" - __next40pxDefaultSize - > - { __( 'Save' ) } - </Button> - </HStack> - </VStack> - </form> - ); - }, -}; - const canDeleteOrReset = ( item ) => { const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; const isUserPattern = item.type === PATTERN_TYPES.user; @@ -1196,13 +1121,12 @@ export function usePostActions( postType, onActionPerformed ) { ! isPattern && duplicatePostAction : false, - ! isTemplateOrTemplatePart && renamePostAction, - isTemplateOrTemplatePart && renameTemplateAction, + renamePostAction, isPattern && exportPatternAsJSONAction, - isTemplateOrTemplatePart && resetTemplateAction, - ! isTemplateOrTemplatePart && restorePostAction, - isTemplateOrTemplatePart && deleteTemplateAction, - ! isTemplateOrTemplatePart && permanentlyDeletePostAction, + isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction, + isTemplateOrTemplatePart + ? deleteTemplateAction + : permanentlyDeletePostAction, isPattern && deletePatternAction, ! isTemplateOrTemplatePart && trashPostAction, ].filter( Boolean ); From 528edb0e86e9cd7c20eb74f2219f3fae45e11ecd Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Wed, 22 May 2024 19:01:18 +0400 Subject: [PATCH 26/94] Post Actions: Hide the trash action for auto-drafts (#61865) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> --- packages/editor/src/components/post-actions/actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index f30df56e67e2e8..926d9b92fe5d13 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -49,8 +49,8 @@ const trashPostAction = { label: __( 'Move to Trash' ), isPrimary: true, icon: trash, - isEligible( { status } ) { - return status !== 'trash'; + isEligible( item ) { + return ! [ 'auto-draft', 'trash' ].includes( item.status ); }, supportsBulk: true, hideModalHeader: true, From 51775a181070a3c45c10138741e1af2f394431a6 Mon Sep 17 00:00:00 2001 From: Karthik Thayyil <30643833+kt-12@users.noreply.github.com> Date: Wed, 22 May 2024 16:29:26 +0100 Subject: [PATCH 27/94] Remove additional call to `WP_Theme_JSON_Gutenberg::__construct` (#61262) --- lib/class-wp-theme-json-data-gutenberg.php | 11 +++++++++++ lib/class-wp-theme-json-resolver-gutenberg.php | 17 +++++++---------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/lib/class-wp-theme-json-data-gutenberg.php b/lib/class-wp-theme-json-data-gutenberg.php index c564016b1a7119..4ff7775f4b559c 100644 --- a/lib/class-wp-theme-json-data-gutenberg.php +++ b/lib/class-wp-theme-json-data-gutenberg.php @@ -68,4 +68,15 @@ public function update_with( $new_data ) { public function get_data() { return $this->theme_json->get_raw_data(); } + + /** + * Return theme JSON object. + * + * @since 18.3.0 + * + * @return WP_Theme_JSON + */ + public function get_theme_json() { + return $this->theme_json; + } } diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 5aaa2ea7e3eac7..0d6aa7bd73fd3a 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -173,8 +173,7 @@ public static function get_core_data() { * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data. */ $theme_json = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) ); - $config = $theme_json->get_data(); - static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); + static::$core = $theme_json->get_theme_json(); return static::$core; } @@ -254,9 +253,8 @@ public static function get_theme_data( $deprecated = array(), $options = array() * * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data. */ - $theme_json = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) ); - $theme_json_data = $theme_json->get_data(); - static::$theme = new WP_Theme_JSON_Gutenberg( $theme_json_data ); + $theme_json = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) ); + static::$theme = $theme_json->get_theme_json(); if ( $wp_theme->parent() ) { // Get parent theme.json. @@ -398,10 +396,9 @@ public static function get_block_data() { * * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data. */ - $theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) ); - $config = $theme_json->get_data(); + $theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) ); + static::$blocks = $theme_json->get_theme_json(); - static::$blocks = new WP_Theme_JSON_Gutenberg( $config, 'blocks' ); return static::$blocks; } @@ -533,8 +530,8 @@ public static function get_user_data() { * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data. */ $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) ); - $config = $theme_json->get_data(); - return new WP_Theme_JSON_Gutenberg( $config, 'custom' ); + + return $theme_json->get_theme_json(); } // Very important to verify that the flag isGlobalStylesUserThemeJSON is true. From ef1d966a8a4737a358153223555fb6a42108ce94 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Wed, 22 May 2024 16:50:32 +0100 Subject: [PATCH 28/94] Inserter: Only always show the inserter when the zoom out experiment is on (#61856) Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- .../src/components/inserter-sidebar/index.js | 71 ++++++++++++------- .../editor/various/inserting-blocks.spec.js | 2 +- 2 files changed, 48 insertions(+), 25 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index cd45d101f187a3..25927c57650f41 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -6,7 +6,10 @@ import { __experimentalLibrary as Library, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useViewportMatch } from '@wordpress/compose'; +import { + useViewportMatch, + __experimentalUseDialog as useDialog, +} from '@wordpress/compose'; import { useCallback, useRef } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { ESCAPE } from '@wordpress/keycodes'; @@ -52,6 +55,10 @@ export default function InserterSidebar( { const { setIsInserterOpened } = useDispatch( editorStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); + const [ inserterDialogRef, inserterDialogProps ] = useDialog( { + onClose: () => setIsInserterOpened( false ), + focusOnMount: true, + } ); const libraryRef = useRef(); // When closing the inserter, focus should return to the toggle button. @@ -70,30 +77,46 @@ export default function InserterSidebar( { [ closeInserterSidebar ] ); - return ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions - <div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar"> - <div className="editor-inserter-sidebar__content"> - <Library - showMostUsedBlocks={ showMostUsedBlocks } - showInserterHelpPanel - shouldFocusBlock={ isMobileViewport } - rootClientId={ - blockSectionRootClientId ?? insertionPoint.rootClientId - } - __experimentalInsertionIndex={ - insertionPoint.insertionIndex - } - __experimentalInitialTab={ insertionPoint.tab } - __experimentalInitialCategory={ insertionPoint.category } - __experimentalFilterValue={ insertionPoint.filterValue } - __experimentalOnPatternCategorySelection={ - isRightSidebarOpen ? closeGeneralSidebar : undefined - } - ref={ libraryRef } - onClose={ closeInserterSidebar } - /> + const inserterContents = ( + <div className="editor-inserter-sidebar__content"> + <Library + showMostUsedBlocks={ showMostUsedBlocks } + showInserterHelpPanel + shouldFocusBlock={ isMobileViewport } + rootClientId={ + blockSectionRootClientId ?? insertionPoint.rootClientId + } + __experimentalInsertionIndex={ insertionPoint.insertionIndex } + __experimentalInitialTab={ insertionPoint.tab } + __experimentalInitialCategory={ insertionPoint.category } + __experimentalFilterValue={ insertionPoint.filterValue } + __experimentalOnPatternCategorySelection={ + isRightSidebarOpen ? closeGeneralSidebar : undefined + } + ref={ libraryRef } + onClose={ closeInserterSidebar } + /> + </div> + ); + + if ( window.__experimentalEnableZoomedOutPatternsTab ) { + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions + <div + onKeyDown={ closeOnEscape } + className="editor-inserter-sidebar" + > + { inserterContents } </div> + ); + } + return ( + <div + ref={ inserterDialogRef } + { ...inserterDialogProps } + className="editor-inserter-sidebar" + > + { inserterContents } </div> ); } diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index 1a443152800dec..3ef5a8f65045f1 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -636,7 +636,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { page.getByRole( 'region', { name: 'Block Library', } ) - ).toBeVisible(); + ).toBeHidden(); } ); test( 'shows block preview when hovering over block in inserter', async ( { From aecf8636ac2c6f0471813ef0820ed99549c1e054 Mon Sep 17 00:00:00 2001 From: Rich Tabor <hi@richtabor.com> Date: Wed, 22 May 2024 11:53:02 -0400 Subject: [PATCH 29/94] Fix positioning for panel close icon to be consistent across panels (#61832) --- packages/editor/src/components/inserter-sidebar/style.scss | 2 +- packages/editor/src/components/sidebar/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss index 739e000abafe2c..c33e6eb7751c90 100644 --- a/packages/editor/src/components/inserter-sidebar/style.scss +++ b/packages/editor/src/components/inserter-sidebar/style.scss @@ -8,7 +8,7 @@ .block-editor-inserter-sidebar__header { border-bottom: $border-width solid $gray-300; - padding-right: $grid-unit-10; + padding-right: $grid-unit-15; display: flex; justify-content: space-between; diff --git a/packages/editor/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss index 6a4b02094a0f77..9853088dde1be7 100644 --- a/packages/editor/src/components/sidebar/style.scss +++ b/packages/editor/src/components/sidebar/style.scss @@ -1,6 +1,6 @@ .components-panel__header.editor-sidebar__panel-tabs { padding-left: 0; - padding-right: $grid-unit-20; + padding-right: $grid-unit-15; .components-button.has-icon { padding: 0; From 7e04961095abbfab2be649b029e5d4fc701e4d1b Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Wed, 22 May 2024 17:00:03 +0100 Subject: [PATCH 30/94] Enable the test before we run the E2E test --- test/e2e/specs/site-editor/zoom-out.spec.js | 22 ++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 2cd0db8b1ebe22..3fed2b49f8e4a6 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -8,11 +8,31 @@ test.describe( 'Zoom Out', () => { await requestUtils.activateTheme( 'emptytheme' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin, editor, page } ) => { + await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); + + const zoomedOutCheckbox = page.getByLabel( + 'Enable zoomed out view when selecting a pattern category in the main inserter.' + ); + + await zoomedOutCheckbox.setChecked( true ); + await expect( zoomedOutCheckbox ).toBeChecked(); + await page.getByRole( 'button', { name: 'Save Changes' } ).click(); + await admin.visitSiteEditor(); await editor.canvas.locator( 'body' ).click(); } ); + test.afterEach( async ( { admin, page } ) => { + await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); + const zoomedOutCheckbox = page.getByLabel( + 'Enable zoomed out view when selecting a pattern category in the main inserter.' + ); + await zoomedOutCheckbox.setChecked( false ); + await expect( zoomedOutCheckbox ).not.toBeChecked(); + await page.getByRole( 'button', { name: 'Save Changes' } ).click(); + } ); + test.afterAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); From c43627a5b057fdc652e864cf0b373b3818cd2c44 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Wed, 22 May 2024 17:02:03 +0100 Subject: [PATCH 31/94] Revert "Enable the test before we run the E2E test" This reverts commit 7e04961095abbfab2be649b029e5d4fc701e4d1b. --- test/e2e/specs/site-editor/zoom-out.spec.js | 22 +-------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 3fed2b49f8e4a6..2cd0db8b1ebe22 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -8,31 +8,11 @@ test.describe( 'Zoom Out', () => { await requestUtils.activateTheme( 'emptytheme' ); } ); - test.beforeEach( async ( { admin, editor, page } ) => { - await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); - - const zoomedOutCheckbox = page.getByLabel( - 'Enable zoomed out view when selecting a pattern category in the main inserter.' - ); - - await zoomedOutCheckbox.setChecked( true ); - await expect( zoomedOutCheckbox ).toBeChecked(); - await page.getByRole( 'button', { name: 'Save Changes' } ).click(); - + test.beforeEach( async ( { admin, editor } ) => { await admin.visitSiteEditor(); await editor.canvas.locator( 'body' ).click(); } ); - test.afterEach( async ( { admin, page } ) => { - await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); - const zoomedOutCheckbox = page.getByLabel( - 'Enable zoomed out view when selecting a pattern category in the main inserter.' - ); - await zoomedOutCheckbox.setChecked( false ); - await expect( zoomedOutCheckbox ).not.toBeChecked(); - await page.getByRole( 'button', { name: 'Save Changes' } ).click(); - } ); - test.afterAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); From 9722b824b7a0d1b6ba6361f2acef7d3c0cf4a87e Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Wed, 22 May 2024 17:47:27 +0100 Subject: [PATCH 32/94] Zoom Out: Hide inserters behind the experiment flag (#61866) * Zoom Out: Hide inserters behind the experiment flag * Enable the test before we run the E2E test Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- .../src/components/block-tools/index.js | 11 +++++----- test/e2e/specs/site-editor/zoom-out.spec.js | 22 ++++++++++++++++++- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index dba0adbbd8325f..ad744a81cca623 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -231,11 +231,12 @@ export default function BlockTools( { name="__unstable-block-tools-after" ref={ blockToolbarAfterRef } /> - { isZoomOutMode && ( - <ZoomOutModeInserters - __unstableContentRef={ __unstableContentRef } - /> - ) } + { window.__experimentalEnableZoomedOutPatternsTab && + isZoomOutMode && ( + <ZoomOutModeInserters + __unstableContentRef={ __unstableContentRef } + /> + ) } </InsertionPointOpenRef.Provider> </div> ); diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 2cd0db8b1ebe22..3fed2b49f8e4a6 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -8,11 +8,31 @@ test.describe( 'Zoom Out', () => { await requestUtils.activateTheme( 'emptytheme' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin, editor, page } ) => { + await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); + + const zoomedOutCheckbox = page.getByLabel( + 'Enable zoomed out view when selecting a pattern category in the main inserter.' + ); + + await zoomedOutCheckbox.setChecked( true ); + await expect( zoomedOutCheckbox ).toBeChecked(); + await page.getByRole( 'button', { name: 'Save Changes' } ).click(); + await admin.visitSiteEditor(); await editor.canvas.locator( 'body' ).click(); } ); + test.afterEach( async ( { admin, page } ) => { + await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); + const zoomedOutCheckbox = page.getByLabel( + 'Enable zoomed out view when selecting a pattern category in the main inserter.' + ); + await zoomedOutCheckbox.setChecked( false ); + await expect( zoomedOutCheckbox ).not.toBeChecked(); + await page.getByRole( 'button', { name: 'Save Changes' } ).click(); + } ); + test.afterAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); From 22622bf2b35bfff0ccc95e8963e3ab749edfd985 Mon Sep 17 00:00:00 2001 From: Dani Guardiola <hi@daniguardio.la> Date: Wed, 22 May 2024 19:18:36 +0200 Subject: [PATCH 33/94] Try: Add CSS Custom Properties to CSS types (#61872) * Augment module. * Add changelog entry. Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../src/color-palette/stories/index.story.tsx | 13 +++++-------- packages/components/src/css.d.ts | 9 +++++++++ packages/components/src/progress-bar/index.tsx | 14 ++++++-------- 4 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 packages/components/src/css.d.ts diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 73365bda8de59e..09ff36f34def5e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ ### Internal +- Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)). - Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). - Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)). diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx index b49de51c1d16e3..727e840ff99358 100644 --- a/packages/components/src/color-palette/stories/index.story.tsx +++ b/packages/components/src/color-palette/stories/index.story.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import type { CSSProperties } from 'react'; import type { Meta, StoryFn } from '@storybook/react'; /** @@ -92,13 +91,11 @@ MultipleOrigins.args = { export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => { return ( <div - style={ - { - '--red': '#f00', - '--yellow': '#ff0', - '--blue': '#00f', - } as CSSProperties - } + style={ { + '--red': '#f00', + '--yellow': '#ff0', + '--blue': '#00f', + } } > <Template { ...args } /> </div> diff --git a/packages/components/src/css.d.ts b/packages/components/src/css.d.ts new file mode 100644 index 00000000000000..598eb388f6d352 --- /dev/null +++ b/packages/components/src/css.d.ts @@ -0,0 +1,9 @@ +import type * as CSS from 'csstype'; + +// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587 +declare module 'csstype' { + interface Properties { + // Allow any CSS Custom Properties + [ index: `--${ string }` ]: any; + } +} diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx index ed13c036e99162..d670d558ebd837 100644 --- a/packages/components/src/progress-bar/index.tsx +++ b/packages/components/src/progress-bar/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { CSSProperties, ForwardedRef } from 'react'; +import type { ForwardedRef } from 'react'; /** * WordPress dependencies @@ -26,13 +26,11 @@ function UnforwardedProgressBar( return ( <ProgressBarStyled.Track className={ className }> <ProgressBarStyled.Indicator - style={ - { - '--indicator-width': ! isIndeterminate - ? `${ value }%` - : undefined, - } as CSSProperties - } + style={ { + '--indicator-width': ! isIndeterminate + ? `${ value }%` + : undefined, + } } isIndeterminate={ isIndeterminate } /> <ProgressBarStyled.ProgressElement From 6fbc6c7a3a50046db56fc88c145a07edf89986ba Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Wed, 22 May 2024 19:57:57 +0100 Subject: [PATCH 34/94] Commands: Unify the editor context between post and site editors (#61862) --- .../edit-post/src/components/layout/index.js | 2 +- .../edit-site/src/components/editor/index.js | 8 +-- .../edit-site/src/components/layout/index.js | 2 +- .../src/components/pattern-modal/duplicate.js | 37 ------------- .../src/components/pattern-modal/index.js | 19 ------- .../src/components/pattern-modal/rename.js | 30 ----------- .../hooks/commands/use-edit-mode-commands.js | 47 +---------------- .../editor/src/components/commands/index.js | 52 ++++++++++++++++++- .../pattern-duplicate-modal/index.js | 50 ++++++++++++++++++ .../components/pattern-rename-modal/index.js | 44 ++++++++++++++++ .../editor/src/components/provider/index.js | 4 ++ 11 files changed, 154 insertions(+), 141 deletions(-) delete mode 100644 packages/edit-site/src/components/pattern-modal/duplicate.js delete mode 100644 packages/edit-site/src/components/pattern-modal/index.js delete mode 100644 packages/edit-site/src/components/pattern-modal/rename.js create mode 100644 packages/editor/src/components/pattern-duplicate-modal/index.js create mode 100644 packages/editor/src/components/pattern-rename-modal/index.js diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 25e74f24577d0e..6db95b6694a686 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -204,7 +204,7 @@ function Layout( { initialPost } ) { // Set the right context for the command palette const commandContext = hasBlockSelected ? 'block-selection-edit' - : 'post-editor-edit'; + : 'entity-edit'; useCommandContext( commandContext ); const styles = useEditorStyles(); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2ba3a94f6e704d..c094f1e6282567 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -48,7 +48,6 @@ import useTitle from '../routes/use-title'; import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; import useEditedEntityRecord from '../use-edited-entity-record'; -import PatternModal from '../pattern-modal'; import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; @@ -267,12 +266,7 @@ export default function Editor( { isLoading, onClick } ) { <GlobalStylesRenderer /> <EditorKeyboardShortcutsRegister /> { isEditMode && <BlockKeyboardShortcuts /> } - { showVisualEditor && ( - <> - <TemplatePartConverter /> - <PatternModal /> - </> - ) } + { showVisualEditor && <TemplatePartConverter /> } { ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null } { isEditMode && <WelcomeGuide /> } { hasLoadedPost && ! editedPost && ( diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 83beee41642d30..6c9668c28d0cc1 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -150,7 +150,7 @@ export default function Layout() { let commandContext = 'site-editor'; if ( canvasMode === 'edit' ) { - commandContext = 'site-editor-edit'; + commandContext = 'entity-edit'; } if ( hasBlockSelected ) { commandContext = 'block-selection-edit'; diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js deleted file mode 100644 index cf79dacef8d426..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/duplicate.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { PATTERN_MODALS } from './'; -import { unlock } from '../../lock-unlock'; -import useEditedEntityRecord from '../use-edited-entity-record'; - -const { DuplicatePatternModal } = unlock( patternsPrivateApis ); -const { interfaceStore } = unlock( editorPrivateApis ); - -export default function PatternDuplicateModal() { - const { record } = useEditedEntityRecord(); - const { closeModal } = useDispatch( interfaceStore ); - - const isActive = useSelect( ( select ) => - select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate ) - ); - - if ( ! isActive ) { - return null; - } - - return ( - <DuplicatePatternModal - onClose={ closeModal } - onSuccess={ () => closeModal() } - pattern={ record } - /> - ); -} diff --git a/packages/edit-site/src/components/pattern-modal/index.js b/packages/edit-site/src/components/pattern-modal/index.js deleted file mode 100644 index 95d08a058b3f84..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/index.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Internal dependencies - */ -import PatternRenameModal from './rename'; -import PatternDuplicateModal from './duplicate'; - -export const PATTERN_MODALS = { - rename: 'edit-site/pattern-rename', - duplicate: 'edit-site/pattern-duplicate', -}; - -export default function PatternModal() { - return ( - <> - <PatternDuplicateModal /> - <PatternRenameModal /> - </> - ); -} diff --git a/packages/edit-site/src/components/pattern-modal/rename.js b/packages/edit-site/src/components/pattern-modal/rename.js deleted file mode 100644 index 8c817172cc2099..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/rename.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { PATTERN_MODALS } from './'; -import { unlock } from '../../lock-unlock'; -import useEditedEntityRecord from '../use-edited-entity-record'; - -const { RenamePatternModal } = unlock( patternsPrivateApis ); -const { interfaceStore } = unlock( editorPrivateApis ); - -export default function PatternRenameModal() { - const { record: pattern } = useEditedEntityRecord(); - const { closeModal } = useDispatch( interfaceStore ); - const isActive = useSelect( ( select ) => - select( interfaceStore ).isModalActive( PATTERN_MODALS.rename ) - ); - - if ( ! isActive ) { - return null; - } - - return <RenamePatternModal onClose={ closeModal } pattern={ pattern } />; -} diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 1ca24b318a4448..f11a831e0edb04 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -4,7 +4,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __, sprintf, isRTL } from '@wordpress/i18n'; import { - edit, trash, rotateLeft, rotateRight, @@ -13,7 +12,6 @@ import { drawerLeft, drawerRight, blockDefault, - symbol, } from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { decodeEntities } from '@wordpress/html-entities'; @@ -30,9 +28,8 @@ import { store as editSiteStore } from '../../store'; import useEditedEntityRecord from '../../components/use-edited-entity-record'; import isTemplateRemovable from '../../utils/is-template-removable'; import isTemplateRevertable from '../../utils/is-template-revertable'; -import { PATTERN_MODALS } from '../../components/pattern-modal'; import { unlock } from '../../lock-unlock'; -import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; import { useLink } from '../../components/routes/link'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -225,45 +222,11 @@ function useEditUICommands() { }; } -function usePatternCommands() { - const { isLoaded, record: pattern } = useEditedEntityRecord(); - const { openModal } = useDispatch( interfaceStore ); - - if ( ! isLoaded ) { - return { isLoading: true, commands: [] }; - } - - const commands = []; - - if ( pattern?.type === PATTERN_TYPES.user ) { - commands.push( { - name: 'core/rename-pattern', - label: __( 'Rename pattern' ), - icon: edit, - callback: ( { close } ) => { - openModal( PATTERN_MODALS.rename ); - close(); - }, - } ); - commands.push( { - name: 'core/duplicate-pattern', - label: __( 'Duplicate pattern' ), - icon: symbol, - callback: ( { close } ) => { - openModal( PATTERN_MODALS.duplicate ); - close(); - }, - } ); - } - - return { isLoading: false, commands }; -} - export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/page-content-focus', hook: usePageContentFocusCommands, - context: 'site-editor-edit', + context: 'entity-edit', } ); useCommandLoader( { @@ -271,12 +234,6 @@ export function useEditModeCommands() { hook: useManipulateDocumentCommands, } ); - useCommandLoader( { - name: 'core/edit-site/patterns', - hook: usePatternCommands, - context: 'site-editor-edit', - } ); - useCommandLoader( { name: 'core/edit-site/edit-ui', hook: useEditUICommands, diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index c79dc8cd1daa43..bcafbd4691add0 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -3,7 +3,14 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { code, listView, external, keyboard } from '@wordpress/icons'; +import { + code, + edit, + listView, + external, + keyboard, + symbol, +} from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as noticesStore } from '@wordpress/notices'; @@ -15,6 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface'; * Internal dependencies */ import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; +import { modalName as patternRenameModalName } from '../pattern-rename-modal'; +import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; function useEditorCommandLoader() { const { @@ -221,9 +231,49 @@ function useEditorCommandLoader() { }; } +function useEditedEntityContextualCommands() { + const { postType } = useSelect( ( select ) => { + const { getCurrentPostType } = select( editorStore ); + return { + postType: getCurrentPostType(), + }; + }, [] ); + const { openModal } = useDispatch( interfaceStore ); + const commands = []; + + if ( postType === PATTERN_POST_TYPE ) { + commands.push( { + name: 'core/rename-pattern', + label: __( 'Rename pattern' ), + icon: edit, + callback: ( { close } ) => { + openModal( patternRenameModalName ); + close(); + }, + } ); + commands.push( { + name: 'core/duplicate-pattern', + label: __( 'Duplicate pattern' ), + icon: symbol, + callback: ( { close } ) => { + openModal( patternDuplicateModalName ); + close(); + }, + } ); + } + + return { isLoading: false, commands }; +} + export default function useCommands() { useCommandLoader( { name: 'core/editor/edit-ui', hook: useEditorCommandLoader, } ); + + useCommandLoader( { + name: 'core/editor/contextual-commands', + hook: useEditedEntityContextualCommands, + context: 'entity-edit', + } ); } diff --git a/packages/editor/src/components/pattern-duplicate-modal/index.js b/packages/editor/src/components/pattern-duplicate-modal/index.js new file mode 100644 index 00000000000000..2e5593536d1834 --- /dev/null +++ b/packages/editor/src/components/pattern-duplicate-modal/index.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { useDispatch, useSelect } from '@wordpress/data'; +import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; + +const { DuplicatePatternModal } = unlock( patternsPrivateApis ); +export const modalName = 'editor/pattern-duplicate'; + +export default function PatternDuplicateModal() { + const { record, postType } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const _postType = getCurrentPostType(); + return { + record: getEditedEntityRecord( + 'postType', + _postType, + getCurrentPostId() + ), + postType: _postType, + }; + }, [] ); + const { closeModal } = useDispatch( interfaceStore ); + + const isActive = useSelect( ( select ) => + select( interfaceStore ).isModalActive( modalName ) + ); + + if ( ! isActive || postType !== PATTERN_POST_TYPE ) { + return null; + } + + return ( + <DuplicatePatternModal + onClose={ closeModal } + onSuccess={ () => closeModal() } + pattern={ record } + /> + ); +} diff --git a/packages/editor/src/components/pattern-rename-modal/index.js b/packages/editor/src/components/pattern-rename-modal/index.js new file mode 100644 index 00000000000000..ea9a46e977b240 --- /dev/null +++ b/packages/editor/src/components/pattern-rename-modal/index.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { useDispatch, useSelect } from '@wordpress/data'; +import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; + +const { RenamePatternModal } = unlock( patternsPrivateApis ); +export const modalName = 'editor/pattern-rename'; + +export default function PatternRenameModal() { + const { record, postType } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const _postType = getCurrentPostType(); + return { + record: getEditedEntityRecord( + 'postType', + _postType, + getCurrentPostId() + ), + postType: _postType, + }; + }, [] ); + const { closeModal } = useDispatch( interfaceStore ); + + const isActive = useSelect( ( select ) => + select( interfaceStore ).isModalActive( modalName ) + ); + + if ( ! isActive || postType !== PATTERN_POST_TYPE ) { + return null; + } + + return <RenamePatternModal onClose={ closeModal } pattern={ record } />; +} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 9830a20f40fad9..56c86968f0274f 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -31,6 +31,8 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu'; import StartTemplateOptions from '../start-template-options'; import EditorKeyboardShortcuts from '../global-keyboard-shortcuts'; +import PatternRenameModal from '../pattern-rename-modal'; +import PatternDuplicateModal from '../pattern-duplicate-modal'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); @@ -279,6 +281,8 @@ export const ExperimentalEditorProvider = withRegistryProvider( <BlockRemovalWarnings /> <StartPageOptions /> <StartTemplateOptions /> + <PatternRenameModal /> + <PatternDuplicateModal /> </> ) } </BlockEditorProviderComponent> From f029914ce1938c9a76f5a822d60645bb49bfc840 Mon Sep 17 00:00:00 2001 From: Grant Kinney <creativecoder@users.noreply.github.com> Date: Wed, 22 May 2024 23:51:06 +0200 Subject: [PATCH 35/94] Return an empty object when no fallback templates are found (wp/v2/templates/lookup) (#60925) Unlinked contributors: oryfoxer. Co-authored-by: creativecoder <grantmkin@git.wordpress.org> Co-authored-by: joemcgill <joemcgill@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: david-binda <davidbinda@git.wordpress.org> --- ...lass-gutenberg-rest-templates-controller-6-6.php | 3 ++- packages/core-data/src/resolvers.js | 3 ++- packages/edit-post/src/store/selectors.js | 13 ++++++++----- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php b/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php index 656e38ffe933fa..0e16250acc89a2 100644 --- a/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php +++ b/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php @@ -113,7 +113,8 @@ public function get_template_fallback( $request ) { array_shift( $hierarchy ); } while ( ! empty( $hierarchy ) && empty( $fallback_template->content ) ); - $response = $this->prepare_item_for_response( $fallback_template, $request ); + // To maintain original behavior, return an empty object rather than a 404 error when no template is found. + $response = $fallback_template ? $this->prepare_item_for_response( $fallback_template, $request ) : new stdClass(); return rest_ensure_response( $response ); } diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js index 7de2c354ba2bf8..f040e548e61605 100644 --- a/packages/core-data/src/resolvers.js +++ b/packages/core-data/src/resolvers.js @@ -712,7 +712,8 @@ export const getDefaultTemplateId = const template = await apiFetch( { path: addQueryArgs( '/wp/v2/templates/lookup', query ), } ); - if ( template ) { + // Endpoint may return an empty object if no template is found. + if ( template?.id ) { dispatch.receiveDefaultTemplateId( query, template.id ); } }; diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index 787fc2f1d78d31..8510cbb501955e 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -609,10 +609,13 @@ export const getEditedPostTemplate = createRegistrySelector( const defaultTemplateId = select( coreStore ).getDefaultTemplateId( { slug: slugToCheck, } ); - return select( coreStore ).getEditedEntityRecord( - 'postType', - 'wp_template', - defaultTemplateId - ); + + return defaultTemplateId + ? select( coreStore ).getEditedEntityRecord( + 'postType', + 'wp_template', + defaultTemplateId + ) + : null; } ); From cc2fcbe5e7d4384c27aa6615d2a9660f873fe572 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de> Date: Thu, 23 May 2024 00:12:24 +0200 Subject: [PATCH 36/94] fix make dimensions.aspectRatios key of theme.json files translatable (#61774) Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: swissspidy <swissspidy@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --- backport-changelog/6.6/6567.md | 4 ++++ lib/theme-i18n.json | 7 +++++++ 2 files changed, 11 insertions(+) create mode 100644 backport-changelog/6.6/6567.md diff --git a/backport-changelog/6.6/6567.md b/backport-changelog/6.6/6567.md new file mode 100644 index 00000000000000..8f200bed3b5c09 --- /dev/null +++ b/backport-changelog/6.6/6567.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/6567 + +* https://github.com/WordPress/gutenberg/pull/47271 +* https://github.com/WordPress/gutenberg/pull/61774 diff --git a/lib/theme-i18n.json b/lib/theme-i18n.json index ea6bf7fe6727e8..e4d14502132cbe 100644 --- a/lib/theme-i18n.json +++ b/lib/theme-i18n.json @@ -38,6 +38,13 @@ } ] }, + "dimensions": { + "aspectRatios": [ + { + "name": "Aspect ratio name" + } + ] + }, "blocks": { "*": { "typography": { From 4a16db22095321f300c60a175aa026b5ac08f043 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation <gutenberg@wordpress.org> Date: Wed, 22 May 2024 22:34:31 +0000 Subject: [PATCH 37/94] Bump plugin version to 18.4.0 --- gutenberg.php | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index 0cf1a4f238a073..fad665cc5b9599 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality. * Requires at least: 6.4 * Requires PHP: 7.2 - * Version: 18.4.0-rc.1 + * Version: 18.4.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 18e04972eec1f8..bc56a316a4f1f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "18.4.0-rc.1", + "version": "18.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "18.4.0-rc.1", + "version": "18.4.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 0902b172c9319c..a15ab1e2cb2131 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "18.4.0-rc.1", + "version": "18.4.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", From dfae29a48c68fa9d6b2d84f4962df2b9a0aaec33 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Wed, 22 May 2024 23:36:27 +0100 Subject: [PATCH 38/94] EntityProvider: Avoid remounts and simplify (#61882) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> --- packages/core-data/src/entity-provider.js | 55 ++++++++--------------- 1 file changed, 19 insertions(+), 36 deletions(-) diff --git a/packages/core-data/src/entity-provider.js b/packages/core-data/src/entity-provider.js index 51830f622a026d..a2324c06e4dbc1 100644 --- a/packages/core-data/src/entity-provider.js +++ b/packages/core-data/src/entity-provider.js @@ -20,39 +20,7 @@ import { updateFootnotesFromMeta } from './footnotes'; const EMPTY_ARRAY = []; -/** - * Internal dependencies - */ -import { rootEntitiesConfig, additionalEntityConfigLoaders } from './entities'; - -const entityContexts = { - ...rootEntitiesConfig.reduce( ( acc, loader ) => { - if ( ! acc[ loader.kind ] ) { - acc[ loader.kind ] = {}; - } - acc[ loader.kind ][ loader.name ] = { - context: createContext( undefined ), - }; - return acc; - }, {} ), - ...additionalEntityConfigLoaders.reduce( ( acc, loader ) => { - acc[ loader.kind ] = {}; - return acc; - }, {} ), -}; -const getEntityContext = ( kind, name ) => { - if ( ! entityContexts[ kind ] ) { - throw new Error( `Missing entity config for kind: ${ kind }.` ); - } - - if ( ! entityContexts[ kind ][ name ] ) { - entityContexts[ kind ][ name ] = { - context: createContext( undefined ), - }; - } - - return entityContexts[ kind ][ name ].context; -}; +const EntityContext = createContext( {} ); /** * Context provider component for providing @@ -68,8 +36,22 @@ const getEntityContext = ( kind, name ) => { * the entity's context provider. */ export default function EntityProvider( { kind, type: name, id, children } ) { - const Provider = getEntityContext( kind, name ).Provider; - return <Provider value={ id }>{ children }</Provider>; + const parent = useContext( EntityContext ); + const childContext = useMemo( + () => ( { + ...parent, + [ kind ]: { + ...parent?.[ kind ], + [ name ]: id, + }, + } ), + [ parent, kind, name, id ] + ); + return ( + <EntityContext.Provider value={ childContext }> + { children } + </EntityContext.Provider> + ); } /** @@ -80,7 +62,8 @@ export default function EntityProvider( { kind, type: name, id, children } ) { * @param {string} name The entity name. */ export function useEntityId( kind, name ) { - return useContext( getEntityContext( kind, name ) ); + const context = useContext( EntityContext ); + return context?.[ kind ]?.[ name ]; } /** From c043b8edab773178f3d9ccd2107361c0e42cd095 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation <gutenberg@wordpress.org> Date: Wed, 22 May 2024 23:38:09 +0000 Subject: [PATCH 39/94] Update Changelog for 18.4.0 --- changelog.txt | 243 +++++++++++++++++++++++--------------------------- 1 file changed, 111 insertions(+), 132 deletions(-) diff --git a/changelog.txt b/changelog.txt index 7a3ba488afd9f9..e79e675368077d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,26 +1,37 @@ == Changelog == -= 18.4.0-rc.1 = - += 18.4.0 = ## Changelog -### Features - -#### Site Editor -- Adds "Template Parts" command to site editor. ([61287](https://github.com/WordPress/gutenberg/pull/61287)) +### Enhancements +#### Layout +- Check child layout exists before generating classname. ([61392](https://github.com/WordPress/gutenberg/pull/61392)) +- Hide Image block resizer when inside a grid layout. ([61603](https://github.com/WordPress/gutenberg/pull/61603)) -### Enhancements +#### Grid interactivity +- Improve `max` attribute logic. ([61420](https://github.com/WordPress/gutenberg/pull/61420)) +- Improve how grid resizer handles 0-width and 0-height cells. ([61423](https://github.com/WordPress/gutenberg/pull/61423)) +- Show grid visualizer when block inspector is closed. ([61429](https://github.com/WordPress/gutenberg/pull/61429)) +- Stabilise grid layout visualiser and resizer. ([61640](https://github.com/WordPress/gutenberg/pull/61640)) #### Global Styles -- Add aspect ratio presets support via theme.json. ([47271](https://github.com/WordPress/gutenberg/pull/47271)) -- Background images: Remove required "file" prop. ([61387](https://github.com/WordPress/gutenberg/pull/61387)) +- Add aspect ratio presets support via theme.json. ([47271](https://github.com/WordPress/gutenberg/pull/47271), [61774](https://github.com/WordPress/gutenberg/pull/61774)) +- Background images: Remove required "file" prop. ([61387](https://github.com/WordPress/gutenberg/pull/61387), [61469](https://github.com/WordPress/gutenberg/pull/61469)) - Change "Solid" tab to "Color". ([61366](https://github.com/WordPress/gutenberg/pull/61366)) - Improve panel title and description for palette. ([61365](https://github.com/WordPress/gutenberg/pull/61365)) - Tweak palette panel spacing and empty message. ([61368](https://github.com/WordPress/gutenberg/pull/61368)) - Update color variations. ([61334](https://github.com/WordPress/gutenberg/pull/61334)) +#### Block Styles +- Add extended version of register block style functions. ([61029](https://github.com/WordPress/gutenberg/pull/61029)) + +### Post actions +- Improve success messages of some post actions. ([61539](https://github.com/WordPress/gutenberg/pull/61539)) +- Unify the list of available post type actions. ([61520](https://github.com/WordPress/gutenberg/pull/61520)) +- Don't export duplicatePostAction for now. ([61407](https://github.com/WordPress/gutenberg/pull/61407)) + #### Zoom Out - Editor: Enable Zoom-out mode in the post editor. ([61293](https://github.com/WordPress/gutenberg/pull/61293)) - Keep original viewport width (single scale). ([61424](https://github.com/WordPress/gutenberg/pull/61424)) @@ -28,68 +39,47 @@ - Remove experimental zoom out control. ([61509](https://github.com/WordPress/gutenberg/pull/61509)) - Zoomed Out View: Don't close the inserter. ([61004](https://github.com/WordPress/gutenberg/pull/61004)) -#### Data Views -- Dataviews: Add: Bulk actions toolbar. ([59714](https://github.com/WordPress/gutenberg/pull/59714)) -- Align list and table layout visuals. ([61157](https://github.com/WordPress/gutenberg/pull/61157)) -- DataViews: Add actions to list layout. ([60805](https://github.com/WordPress/gutenberg/pull/60805)) -- Make pattern preview click area larger. ([61250](https://github.com/WordPress/gutenberg/pull/61250)) -- Post Type Actions: Unify the list of available actions. ([61520](https://github.com/WordPress/gutenberg/pull/61520)) - -#### Post Editor -- Editor: Add global styles to settings using existing context code. ([61556](https://github.com/WordPress/gutenberg/pull/61556)) -- Post Actions: Display a notice after moving a post into the trash. ([61670](https://github.com/WordPress/gutenberg/pull/61670)) -- Post Publish Flow: Simplify status term. ([61386](https://github.com/WordPress/gutenberg/pull/61386)) - -#### Layout -- Check child layout exists before generating classname. ([61392](https://github.com/WordPress/gutenberg/pull/61392)) -- Hide Image block resizer when inside a grid layout. ([61603](https://github.com/WordPress/gutenberg/pull/61603)) -- Stabilise grid layout visualiser and resizer. ([61640](https://github.com/WordPress/gutenberg/pull/61640)) - -#### Block Library -- Add block class name to the list block. ([56469](https://github.com/WordPress/gutenberg/pull/56469)) -- Embeds: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352)) -- Site Logo: Add setting labels via the 'register_setting' method. ([61351](https://github.com/WordPress/gutenberg/pull/61351)) - #### Components - Do not render FormTokenField label when not defined. ([61336](https://github.com/WordPress/gutenberg/pull/61336)) - Placeholder: Tweak placeholder style. ([61590](https://github.com/WordPress/gutenberg/pull/61590)) +- Add content only descriptions in dropdown menus for patterns and templates. ([61127](https://github.com/WordPress/gutenberg/pull/61127)) -#### Patterns -- Only add the selected pattern category in metadata during insertion. ([61557](https://github.com/WordPress/gutenberg/pull/61557)) +#### Block Library +- List Block: Add block class name to the list block. ([56469](https://github.com/WordPress/gutenberg/pull/56469)) +- Embeds Block: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352)) +- Site Logo Block: Add setting labels via the 'register_setting' method. ([61351](https://github.com/WordPress/gutenberg/pull/61351)) #### Block Editor -- Block editor: Add a keyboard shortcut to create group from the selected blocks. ([46972](https://github.com/WordPress/gutenberg/pull/46972)) +- Make `BlockPopover` component public. ([61529](https://github.com/WordPress/gutenberg/pull/61529)) +- Only add the selected pattern category in metadata during insertion. ([61557](https://github.com/WordPress/gutenberg/pull/61557)) +- Add a keyboard shortcut to create group from the selected blocks. ([46972](https://github.com/WordPress/gutenberg/pull/46972)) - Enhance block outlines and selection interactions. ([60757](https://github.com/WordPress/gutenberg/pull/60757)) - Tiny tweak to position close button properly in the inserter. ([61461](https://github.com/WordPress/gutenberg/pull/61461)) -#### Extensibility -- PluginSidebar: Show pin/unpin button on the site eitor. ([61448](https://github.com/WordPress/gutenberg/pull/61448)) - -#### Site Editor -- Redirect `/wp_template_part/all` to `/patterns`. ([61446](https://github.com/WordPress/gutenberg/pull/61446)) -- Moves "Patterns" command to site editor main navigation. ([61416](https://github.com/WordPress/gutenberg/pull/61416)) - -#### Navigation Menus -- Remove default entry into Navigation Menu focus mode but retain ability to access via "Edit". ([61275](https://github.com/WordPress/gutenberg/pull/61275)) - -#### Synced Patterns -- Add content only descriptions in dropdown menus for patterns and templates. ([61127](https://github.com/WordPress/gutenberg/pull/61127)) - -#### Block Styles -- Add extended version of register block style functions. ([61029](https://github.com/WordPress/gutenberg/pull/61029)) - #### Editor - Editor: Unify Header component. ([61273](https://github.com/WordPress/gutenberg/pull/61273)) - Editor: Unify the sidebar between the post and site editors. ([61507](https://github.com/WordPress/gutenberg/pull/61507)) - Editor: Update and simplify the Post Summary and Post Card section in the document sidebar. ([61624](https://github.com/WordPress/gutenberg/pull/61624)) -- Improve success messages of some post actions. ([61539](https://github.com/WordPress/gutenberg/pull/61539)) - Try: Improve date-wrapping in prepublish flow. ([61490](https://github.com/WordPress/gutenberg/pull/61490)) - Update: Implement the new discussion panel design. ([61357](https://github.com/WordPress/gutenberg/pull/61357)) -### New APIs +#### Post Editor +- Add global styles to settings using existing context code. ([61556](https://github.com/WordPress/gutenberg/pull/61556)) +- Display a notice after moving a post into the trash. ([61670](https://github.com/WordPress/gutenberg/pull/61670)) +- Simplify Post Publish Flow status term. ([61386](https://github.com/WordPress/gutenberg/pull/61386)) -#### Extensibility -- Make `BlockPopover` component public. ([61529](https://github.com/WordPress/gutenberg/pull/61529)) +#### Site Editor +- Redirect `/wp_template_part/all` to `/patterns`. ([61446](https://github.com/WordPress/gutenberg/pull/61446)) +- Moves "Patterns" command to site editor main navigation. ([61416](https://github.com/WordPress/gutenberg/pull/61416)) +- Adds "Template Parts" command to site editor. ([61287](https://github.com/WordPress/gutenberg/pull/61287)) +- Show pin/unpin button on the site editor plugin sidebar. ([61448](https://github.com/WordPress/gutenberg/pull/61448)) +- Remove default entry into Navigation Menu focus mode but retain ability to access via "Edit". ([61275](https://github.com/WordPress/gutenberg/pull/61275)) + +#### Data Views +- Add bulk actions toolbar. ([59714](https://github.com/WordPress/gutenberg/pull/59714)) +- Align list and table layout visuals. ([61157](https://github.com/WordPress/gutenberg/pull/61157)) +- Add actions to list layout. ([60805](https://github.com/WordPress/gutenberg/pull/60805)) +- Make pattern preview click area larger. ([61250](https://github.com/WordPress/gutenberg/pull/61250)) ### Bug Fixes @@ -102,6 +92,22 @@ - GridItemResizer: Fix resizing when List View is open. ([61643](https://github.com/WordPress/gutenberg/pull/61643)) - Only show grid resizer if grid block allows resizing on children. ([61552](https://github.com/WordPress/gutenberg/pull/61552)) +#### Global Styles +- Background image: Explicitly set background repeat value in user styles. ([61526](https://github.com/WordPress/gutenberg/pull/61526)) +- Background image: Size controls should show when an image is set. ([61388](https://github.com/WordPress/gutenberg/pull/61388)) +- Make sure to replace all instances of `:Where(body)` instead of just …. ([61602](https://github.com/WordPress/gutenberg/pull/61602)) +- Reduce specificity of global styles body margin reset rule. ([61340](https://github.com/WordPress/gutenberg/pull/61340)) +- Remove Post Template background override. ([61545](https://github.com/WordPress/gutenberg/pull/61545)) + +#### Patterns +- Fix blocks in unsynced patterns can enable overrides. ([61639](https://github.com/WordPress/gutenberg/pull/61639)) +- Revert "Use contentOnly locking for pattern block, remove hard-coded block check in block inspector". ([61517](https://github.com/WordPress/gutenberg/pull/61517)) + +#### List View +- Account for text fields in shortcut handler. ([61583](https://github.com/WordPress/gutenberg/pull/61583)) +- Add a special case for shortcuts coming from modals. ([61606](https://github.com/WordPress/gutenberg/pull/61606)) +- Standardize List View feature name to use title case capitalization. ([61535](https://github.com/WordPress/gutenberg/pull/61535)) + #### Zoom Out - Block editor: Scroll block into view on insert. ([61418](https://github.com/WordPress/gutenberg/pull/61418)) - Fix double scrollbars in site editor with zoom out view enabled. ([61548](https://github.com/WordPress/gutenberg/pull/61548)) @@ -113,20 +119,18 @@ - Pass the section root ID to the inserter. ([61464](https://github.com/WordPress/gutenberg/pull/61464)) - Zoom-out: Fix iframe ref error. ([61200](https://github.com/WordPress/gutenberg/pull/61200)) +#### Components +- Fix inconsistent complementary header styles. ([61331](https://github.com/WordPress/gutenberg/pull/61331)) +- Fix sticking “Reset” option in `ToolsPanel`. ([60621](https://github.com/WordPress/gutenberg/pull/60621)) +- RadioControl: Fix shrinking radio controls. ([61476](https://github.com/WordPress/gutenberg/pull/61476)) + #### Block Library -- Add list item wrapper to social links when used in navigation block. ([61396](https://github.com/WordPress/gutenberg/pull/61396)) -- Fix: Remove font weight on toolbar tab button - #61254. ([61308](https://github.com/WordPress/gutenberg/pull/61308)) -- Fix: Time to Read block showing "this block has encountered an error" - #61459. ([61614](https://github.com/WordPress/gutenberg/pull/61614)) +- Navigation Block: Add list item wrapper to social links when used in navigation block. ([61396](https://github.com/WordPress/gutenberg/pull/61396)) +- HTML Block: Remove font weight on toolbar tab button - #61254. ([61308](https://github.com/WordPress/gutenberg/pull/61308)) +- Time to Read Block: Fix "this block has encountered an error" - #61459. ([61614](https://github.com/WordPress/gutenberg/pull/61614)) - Image Block: Enable crop action when image has a link. ([61470](https://github.com/WordPress/gutenberg/pull/61470)) - Shortcode Block: Fix layout margin override. ([55028](https://github.com/WordPress/gutenberg/pull/55028)) -#### Global Styles -- Background image: Explicitly set background repeat value in user styles. ([61526](https://github.com/WordPress/gutenberg/pull/61526)) -- Background image: Size controls should show when an image is set. ([61388](https://github.com/WordPress/gutenberg/pull/61388)) -- Make sure to replace all instances of `:Where(body)` instead of just …. ([61602](https://github.com/WordPress/gutenberg/pull/61602)) -- Reduce specificity of global styles body margin reset rule. ([61340](https://github.com/WordPress/gutenberg/pull/61340)) -- Remove Post Template background override. ([61545](https://github.com/WordPress/gutenberg/pull/61545)) - #### Block Editor - Editor styles: Fix cache (by wrapper selector). ([61397](https://github.com/WordPress/gutenberg/pull/61397)) - Fix Truncate component for long unbreakable text. ([61137](https://github.com/WordPress/gutenberg/pull/61137)) @@ -134,20 +138,9 @@ - Fix: The issue of appender button not clickable in row/stack group. ([61585](https://github.com/WordPress/gutenberg/pull/61585)) - Writing Flow/Rich Text: Unify split logic. ([54543](https://github.com/WordPress/gutenberg/pull/54543)) -#### List View -- Account for text fields in shortcut handler. ([61583](https://github.com/WordPress/gutenberg/pull/61583)) -- Add a special case for shortcuts coming from modals. ([61606](https://github.com/WordPress/gutenberg/pull/61606)) -- Standardize List View feature name to use title case capitalization. ([61535](https://github.com/WordPress/gutenberg/pull/61535)) - -#### Components -- Fix inconsistent complementary header styles. ([61331](https://github.com/WordPress/gutenberg/pull/61331)) -- Fix sticking “Reset” option in `ToolsPanel`. ([60621](https://github.com/WordPress/gutenberg/pull/60621)) -- RadioControl: Fix shrinking radio controls. ([61476](https://github.com/WordPress/gutenberg/pull/61476)) - -#### Interactivity API -- Interactivity API: Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([61009](https://github.com/WordPress/gutenberg/pull/61009)) -- Interactivity API: Prevent empty namespace or different namespaces from killing the runtime. ([61409](https://github.com/WordPress/gutenberg/pull/61409)) -- Interactivity API: Prevent wrong written directives from killing the runtime. ([61249](https://github.com/WordPress/gutenberg/pull/61249)) +#### Post Editor +- Fix the 'usePaddingAppender' error. ([61500](https://github.com/WordPress/gutenberg/pull/61500)) +- Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925)) #### Site Editor - Fix user capabilities check for the Site Editor. ([61444](https://github.com/WordPress/gutenberg/pull/61444)) @@ -155,42 +148,36 @@ - Trigger sidebar animations only on cross-route navigations. ([61402](https://github.com/WordPress/gutenberg/pull/61402)) - Site Editor: Restore the hover zoom effect when hovering the editor frame. ([61647](https://github.com/WordPress/gutenberg/pull/61647)) -#### Data Views -- Fix regression on keyboard navigation. ([61478](https://github.com/WordPress/gutenberg/pull/61478)) -- fix: Improve dataview types. ([61586](https://github.com/WordPress/gutenberg/pull/61586)) - -#### Patterns -- Fix blocks in unsynced patterns can enable overrides. ([61639](https://github.com/WordPress/gutenberg/pull/61639)) - -#### Synced Patterns -- Revert "Use contentOnly locking for pattern block, remove hard-coded block check in block inspector". ([61517](https://github.com/WordPress/gutenberg/pull/61517)) - #### Widgets Editor - Hide the close button on the inserter for widgets editor. ([61510](https://github.com/WordPress/gutenberg/pull/61510)) -#### Post Editor -- Edit Post: Fix the 'usePaddingAppender' error. ([61500](https://github.com/WordPress/gutenberg/pull/61500)) +#### Data Views +- Fix regression on keyboard navigation. ([61478](https://github.com/WordPress/gutenberg/pull/61478)) +- Improve dataview types. ([61586](https://github.com/WordPress/gutenberg/pull/61586)) +#### Interactivity API +- Interactivity API: Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([61009](https://github.com/WordPress/gutenberg/pull/61009)) +- Interactivity API: Prevent empty namespace or different namespaces from killing the runtime. ([61409](https://github.com/WordPress/gutenberg/pull/61409)) +- Interactivity API: Prevent wrong written directives from killing the runtime. ([61249](https://github.com/WordPress/gutenberg/pull/61249)) -### Accessibility -#### Block Editor -- Focus currently selected block when entering canvas. ([61472](https://github.com/WordPress/gutenberg/pull/61472)) -- Focus inserter toggle when closing the inserter sidebar. ([61467](https://github.com/WordPress/gutenberg/pull/61467)) +### Accessibility #### Components - ComboboxControl supports disabled items. ([61294](https://github.com/WordPress/gutenberg/pull/61294)) - Remove usage of aria-details from InputControl and BaseControl. ([61203](https://github.com/WordPress/gutenberg/pull/61203)) -#### Post Editor -- Post Actions: Correctly disable dropdown trigger. ([61625](https://github.com/WordPress/gutenberg/pull/61625)) - #### Block Library - Fix the RRS block placeholder labeling and improve spacing. ([61576](https://github.com/WordPress/gutenberg/pull/61576)) -#### Zoom Out +#### Block Editor +- Focus currently selected block when entering canvas. ([61472](https://github.com/WordPress/gutenberg/pull/61472)) +- Focus inserter toggle when closing the inserter sidebar. ([61467](https://github.com/WordPress/gutenberg/pull/61467)) - Inserter: Add close button. ([61421](https://github.com/WordPress/gutenberg/pull/61421)) +#### Post Editor +- Post Actions: Correctly disable dropdown trigger. ([61625](https://github.com/WordPress/gutenberg/pull/61625)) + ### Performance @@ -201,14 +188,6 @@ - Revert "useBlockSync: Remove isControlled effect". ([61480](https://github.com/WordPress/gutenberg/pull/61480)) -### Experiments - -#### Layout -- Grid interactivity: Improve `max` attribute logic. ([61420](https://github.com/WordPress/gutenberg/pull/61420)) -- Grid interactivity: Improve how grid resizer handles 0-width and 0-height cells. ([61423](https://github.com/WordPress/gutenberg/pull/61423)) -- Grid interactivity: Show grid visualizer when block inspector is closed. ([61429](https://github.com/WordPress/gutenberg/pull/61429)) - - ### Documentation - Update old document URLs to new ones. ([61595](https://github.com/WordPress/gutenberg/pull/61595)) @@ -237,48 +216,46 @@ ### Code Quality - PHP load: move rest template controller 6.6 import to "REST" area. ([61564](https://github.com/WordPress/gutenberg/pull/61564)) -- Background images: Remove lingering "file" prop. ([61469](https://github.com/WordPress/gutenberg/pull/61469)) -- Replace classnames with clsx. ([61138](https://github.com/WordPress/gutenberg/pull/61138)) -- Fix JS lint error for `clsx`. ([61380](https://github.com/WordPress/gutenberg/pull/61380)) - -#### Data Views -- DataViews: Expand typing more components. ([61654](https://github.com/WordPress/gutenberg/pull/61654)) -- Add end-to-end tests for keyboard interactions in DataViews ListView. ([61648](https://github.com/WordPress/gutenberg/pull/61648)) -- DataViews: Add types to the ViewGrid component. ([61667](https://github.com/WordPress/gutenberg/pull/61667)) -- DataViews: Type the BulkActions component. ([61666](https://github.com/WordPress/gutenberg/pull/61666)) -- DataViews: Type the ItemActions component. ([61400](https://github.com/WordPress/gutenberg/pull/61400)) -- DataViews: Type the ViewList component. ([61246](https://github.com/WordPress/gutenberg/pull/61246)) -- Remove `onActionPerformed` & `onActionStart` from the ActionModal API. ([61659](https://github.com/WordPress/gutenberg/pull/61659)) +- Replace classnames with clsx. ([61138](https://github.com/WordPress/gutenberg/pull/61138), [61380](https://github.com/WordPress/gutenberg/pull/61380)) -#### Block bindings +#### Block Bindings - Remove not needed breaks in `gutenberg_block_bindings_replace_html`. ([61660](https://github.com/WordPress/gutenberg/pull/61660)) - Simplify the HTML replacement logic until the HTML API is ready. ([61236](https://github.com/WordPress/gutenberg/pull/61236)) -#### Post Editor -- Edit post: Do not consider sidebars mutually exclusive. ([61468](https://github.com/WordPress/gutenberg/pull/61468)) -- Editor: Move the sidebar component to the editor package. ([61497](https://github.com/WordPress/gutenberg/pull/61497)) +#### Patterns +- Pattern overrides: Use block binding editing API. ([60721](https://github.com/WordPress/gutenberg/pull/60721)) #### Components - Assess stabilization of `Theme`. ([61077](https://github.com/WordPress/gutenberg/pull/61077)) - Upgrade @types/react package and @types/react-dom. ([60796](https://github.com/WordPress/gutenberg/pull/60796)) - Fix problem with gradient-parser types. ([61679](https://github.com/WordPress/gutenberg/pull/61679)) -#### Interactivity API -- Interactivity API: Add types for warn helper. ([61687](https://github.com/WordPress/gutenberg/pull/61687)) -- Interactivity: Strict type checking. ([59865](https://github.com/WordPress/gutenberg/pull/59865)) - #### Block Editor - Improve `LineHeightControl` unit tests. ([61337](https://github.com/WordPress/gutenberg/pull/61337)) +#### Editor +- Move the starter template options to the editor package. ([61665](https://github.com/WordPress/gutenberg/pull/61665)) + +#### Post Editor +- Edit post: Do not consider sidebars mutually exclusive. ([61468](https://github.com/WordPress/gutenberg/pull/61468)) +- Editor: Move the sidebar component to the editor package. ([61497](https://github.com/WordPress/gutenberg/pull/61497)) + #### Site Editor - Site Editor sidebar: Provide explicit backPaths, remove the getBackPath helper. ([61286](https://github.com/WordPress/gutenberg/pull/61286)) -#### Patterns -- Pattern overrides: Use block binding editing API. ([60721](https://github.com/WordPress/gutenberg/pull/60721)) +#### Data Views +- Expand typing more components. ([61654](https://github.com/WordPress/gutenberg/pull/61654)) +- Add end-to-end tests for keyboard interactions in DataViews ListView. ([61648](https://github.com/WordPress/gutenberg/pull/61648)) +- Add types to the ViewGrid component. ([61667](https://github.com/WordPress/gutenberg/pull/61667)) +- Type the BulkActions component. ([61666](https://github.com/WordPress/gutenberg/pull/61666)) +- Type the ItemActions component. ([61400](https://github.com/WordPress/gutenberg/pull/61400)) +- Type the ViewList component. ([61246](https://github.com/WordPress/gutenberg/pull/61246)) +- Remove `onActionPerformed` & `onActionStart` from the ActionModal API. ([61659](https://github.com/WordPress/gutenberg/pull/61659)) + +#### Interactivity API +- Add types for warn helper. ([61687](https://github.com/WordPress/gutenberg/pull/61687)) +- Enable strict type checking. ([59865](https://github.com/WordPress/gutenberg/pull/59865)) -#### Editor -- Editor: Move the starter template options to the editor package. ([61665](https://github.com/WordPress/gutenberg/pull/61665)) -- Post Actions: Don't export duplicatePostAction for now. ([61407](https://github.com/WordPress/gutenberg/pull/61407)) ### Tools @@ -303,7 +280,7 @@ - build:package-types: Run silently to reduce user confusion. ([61530](https://github.com/WordPress/gutenberg/pull/61530)) - GitHub Actions: Fix PHP file change detection filter pattern. ([61183](https://github.com/WordPress/gutenberg/pull/61183)) - Dedupe packages. ([61532](https://github.com/WordPress/gutenberg/pull/61532)) -- Patch react-autosize-textarea for updated types. ([61570](https://github.com/WordPress/gutenberg/pull/61570)) +- Patch `react-autosize-textarea` for updated types. ([61570](https://github.com/WordPress/gutenberg/pull/61570)) - Upgrade @use-gesture/react. ([61503](https://github.com/WordPress/gutenberg/pull/61503)) - Upgrade framer-motion. ([61572](https://github.com/WordPress/gutenberg/pull/61572)) @@ -328,6 +305,8 @@ The following contributors merged PRs in this release: @aaronrobertshaw @afercia @ajlende @amitraj2203 @anton-vlasenko @artemiomorales @bacoords @carolinan @cbravobernal @colinduwe @DaniGuardiola @DAreRodz @desrosj @draganescu @ellatrix @fullofcaffeine @geriux @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @johnhooks @jorgefilipecosta @jpstevens @jsnajdr @juanmaguitar @kevin940726 @kovshenin @MaggieCabrera @Mamaduka @mcsf @mrmurphy @ndiego @noisysocks @ntsekouras @oandregal @ramonjd @retrofox @richtabor @ryelle @SantosGuillamot @scheinercc @scruffian @shail-mehta @sirreal @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @WunderBart @youknowriad + + = 18.3.0 = ## Changelog From b122a98551472761c8e448813a38b2eabdd541a0 Mon Sep 17 00:00:00 2001 From: Carolina Nymark <myazalea@hotmail.com> Date: Thu, 23 May 2024 07:42:51 +0200 Subject: [PATCH 40/94] Add vw and vh units to the custom font size picker (#60607) Add vw and vh to the list of default units in the font size picker. Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/font-size-picker/index.native.js | 2 +- packages/components/src/font-size-picker/index.tsx | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 09ff36f34def5e..d9e21c2788d9e2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,6 +22,7 @@ ### Enhancements +- `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507]((https://github.com/WordPress/gutenberg/pull/60607)). - `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)). - `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)). - `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)). diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index ad9b7a54248d00..06f0d386b74d78 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -59,7 +59,7 @@ function FontSizePicker( { const label = __( 'Font Size' ); const units = useCustomUnits( { - availableUnits: [ 'px', 'em', 'rem' ], + availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ], } ); const accessibilityLabel = sprintf( diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 6a18660adfda1d..cb17b7a16e3637 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -36,7 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select'; import FontSizePickerToggleGroup from './font-size-picker-toggle-group'; import { T_SHIRT_NAMES } from './constants'; -const DEFAULT_UNITS = [ 'px', 'em', 'rem' ]; +const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; const UnforwardedFontSizePicker = ( props: FontSizePickerProps, @@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = ( units ); const isValueUnitRelative = - !! valueUnit && [ 'em', 'rem' ].includes( valueUnit ); + !! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit ); const isDisabled = value === undefined; return ( From b2841721bb4fc2534ccdb5e98035b9c1db43e214 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr <jsnajdr@gmail.com> Date: Thu, 23 May 2024 09:23:55 +0200 Subject: [PATCH 41/94] getAutocompleterUI: don't redefine ListBox component on every render (#61877) * getAutocompleterUI: don't redefine ListBox component on every render * Move ListBox to top level * Add components changelog entry * Add e2e test for autocomplete inside table Unlinked contributors: 17cliu. Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: johngodley <johnny5@git.wordpress.org> --- packages/components/CHANGELOG.md | 4 + .../src/autocomplete/autocompleter-ui.tsx | 106 +++++++++++------- .../various/autocomplete-and-mentions.spec.js | 37 ++++++ 3 files changed, 109 insertions(+), 38 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d9e21c2788d9e2..914e9e771ddff1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). +### Bug Fixes + +- `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)). + ### Internal - Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)). diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index a3e3cb503c483e..a22e197decd154 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -27,10 +27,57 @@ import { VisuallyHidden } from '../visually-hidden'; import { createPortal } from 'react-dom'; import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types'; +type ListBoxProps = { + items: KeyedOption[]; + onSelect: ( option: KeyedOption ) => void; + selectedIndex: number; + instanceId: number; + listBoxId: string | undefined; + className?: string; + Component?: React.ElementType; +}; + +function ListBox( { + items, + onSelect, + selectedIndex, + instanceId, + listBoxId, + className, + Component = 'div', +}: ListBoxProps ) { + return ( + <Component + id={ listBoxId } + role="listbox" + className="components-autocomplete__results" + > + { items.map( ( option, index ) => ( + <Button + key={ option.key } + id={ `components-autocomplete-item-${ instanceId }-${ option.key }` } + role="option" + aria-selected={ index === selectedIndex } + disabled={ option.isDisabled } + className={ clsx( + 'components-autocomplete__result', + className, + { + 'is-selected': index === selectedIndex, + } + ) } + onClick={ () => onSelect( option ) } + > + { option.label } + </Button> + ) ) } + </Component> + ); +} + export function getAutoCompleterUI( autocompleter: WPCompleter ) { - const useItems = autocompleter.useItems - ? autocompleter.useItems - : getDefaultUseItems( autocompleter ); + const useItems = + autocompleter.useItems ?? getDefaultUseItems( autocompleter ); function AutocompleterUI( { filterValue, @@ -62,7 +109,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) { // If the popover is rendered in a different document than // the content, we need to duplicate the options list in the // content document so that it's available to the screen - // readers, which check the DOM ID based aira-* attributes. + // readers, which check the DOM ID based aria-* attributes. setNeedsA11yCompat( node.ownerDocument !== contentRef.current.ownerDocument ); @@ -124,38 +171,6 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) { return null; } - const ListBox = ( { - Component = 'div', - }: { - Component?: React.ElementType; - } ) => ( - <Component - id={ listBoxId } - role="listbox" - className="components-autocomplete__results" - > - { items.map( ( option, index ) => ( - <Button - key={ option.key } - id={ `components-autocomplete-item-${ instanceId }-${ option.key }` } - role="option" - aria-selected={ index === selectedIndex } - disabled={ option.isDisabled } - className={ clsx( - 'components-autocomplete__result', - className, - { - 'is-selected': index === selectedIndex, - } - ) } - onClick={ () => onSelect( option ) } - > - { option.label } - </Button> - ) ) } - </Component> - ); - return ( <> <Popover @@ -166,12 +181,27 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) { anchor={ popoverAnchor } ref={ popoverRefs } > - <ListBox /> + <ListBox + items={ items } + onSelect={ onSelect } + selectedIndex={ selectedIndex } + instanceId={ instanceId } + listBoxId={ listBoxId } + className={ className } + /> </Popover> { contentRef.current && needsA11yCompat && createPortal( - <ListBox Component={ VisuallyHidden } />, + <ListBox + items={ items } + onSelect={ onSelect } + selectedIndex={ selectedIndex } + instanceId={ instanceId } + listBoxId={ listBoxId } + className={ className } + Component={ VisuallyHidden } + />, contentRef.current.ownerDocument.body ) } </> diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js index aae72f50cd25f1..059f3a73ee13d8 100644 --- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js +++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js @@ -421,6 +421,43 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { } ); } ); + test( `should insert mention in a table block`, async ( { + page, + editor, + } ) => { + // Insert table block. + await editor.insertBlock( { name: 'core/table' } ); + + // Create the table. + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); + + // Select the first cell. + await editor.canvas + .locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + .click(); + + // Type autocomplete text. + await page.keyboard.type( '@j' ); + + // Verify that option is selected. + const selectedOption = page.getByRole( 'option', { + name: 'Jane Doe', + selected: true, + } ); + await expect( selectedOption ).toBeVisible(); + + // Insert the option. + await selectedOption.click(); + + // Verify it's been inserted. + const snapshot = `<!-- wp:table --> +<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>@testuser</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure> +<!-- /wp:table -->`; + await expect.poll( editor.getEditedPostContent ).toBe( snapshot ); + } ); + // The following test concerns an infinite loop regression (https://github.com/WordPress/gutenberg/issues/41709). // When present, the regression will cause this test to time out. test( 'should insert elements from multiple completers in a single block', async ( { From ace8e911087620b944d937ffa916f7ed351c0d67 Mon Sep 17 00:00:00 2001 From: Shail Mehta <shailmehta25@gmail.com> Date: Thu, 23 May 2024 13:37:33 +0530 Subject: [PATCH 42/94] Added missing @global documentation (#61537) Co-authored-by: shail-mehta <shailu25@git.wordpress.org> --- lib/compat/wordpress-6.4/script-loader.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/compat/wordpress-6.4/script-loader.php b/lib/compat/wordpress-6.4/script-loader.php index 373bb9e90f8583..60de7785aaeb22 100644 --- a/lib/compat/wordpress-6.4/script-loader.php +++ b/lib/compat/wordpress-6.4/script-loader.php @@ -11,6 +11,9 @@ * @since 6.0.0 * @access private * + * @global WP_Styles $wp_styles + * @global WP_Scripts $wp_scripts + * * @return array { * The block editor assets. * From a66383db9b590cc98b61fe8e55c163e8032d2a41 Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Thu, 23 May 2024 13:38:42 +0530 Subject: [PATCH 43/94] Update block.json file with correct links (#61880) Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> --- docs/getting-started/fundamentals/file-structure-of-a-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/fundamentals/file-structure-of-a-block.md b/docs/getting-started/fundamentals/file-structure-of-a-block.md index eb3f38e0be5c4f..24972b219e0b60 100644 --- a/docs/getting-started/fundamentals/file-structure-of-a-block.md +++ b/docs/getting-started/fundamentals/file-structure-of-a-block.md @@ -29,7 +29,7 @@ The [build process](docs/block-editor/getting-started/fundamentals/javascript-in The `block.json` file contains the [block's metadata](docs/block-editor/reference-guides/block-api/block-metadata/), streamlining its definition and registration across client-side and server-side environments. -This file includes the block name, description, [attributes](docs/block-editor/reference-guides/block-api/block-attributes.md), [supports](docs/block-editor/reference-guides/block-api/block-supports.md), and more, as well as the locations of essential files responsible for the block's functionality, appearance, and styling. +This file includes the block name, description, [attributes](docs/block-editor/reference-guides/block-api/block-attributes/), [supports](docs/block-editor/reference-guides/block-api/block-supports/), and more, as well as the locations of essential files responsible for the block's functionality, appearance, and styling. When a build process is applied, the `block.json` file and the other generated files are moved to a designated folder, often the `build` folder. Consequently, the file paths specified within `block.json` point to these processed, bundled versions of the files. From af03001802ff0b19de67b22cf8c0556f132c83e4 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras <ntsekouras@outlook.com> Date: Thu, 23 May 2024 13:02:27 +0300 Subject: [PATCH 44/94] Editor: Use edited entity for post actions (#61892) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> --- .../editor/src/components/post-actions/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js index 2a4fe03e90d6e5..139762bf126a99 100644 --- a/packages/editor/src/components/post-actions/index.js +++ b/packages/editor/src/components/post-actions/index.js @@ -10,6 +10,7 @@ import { Modal, } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -29,10 +30,16 @@ const { export default function PostActions( { onActionPerformed, buttonProps } ) { const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false ); const { item, postType } = useSelect( ( select ) => { - const { getCurrentPostType, getCurrentPost } = select( editorStore ); + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const _postType = getCurrentPostType(); return { - item: getCurrentPost(), - postType: getCurrentPostType(), + item: getEditedEntityRecord( + 'postType', + _postType, + getCurrentPostId() + ), + postType: _postType, }; }, [] ); const allActions = usePostActions( postType, onActionPerformed ); From ed7d78652526270b63976d7a970dba46a2bfcbb0 Mon Sep 17 00:00:00 2001 From: Jon Surrell <sirreal@users.noreply.github.com> Date: Thu, 23 May 2024 12:20:09 +0200 Subject: [PATCH 45/94] Build: Use globalThis over process.env and enable TS lib checking (#61486) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Change `process.env.NAME` to `globalThis.NAME`. This includes changing `SCRIPT_DEBUG` global to use `globalThis.SCRIPT_DEBUG`. There are a few problems with `process.env`: - It only exists in Node.js. It does not exist in the browser. This means that additional checks must be added in application code to make sure that it doesn't error. - `process.env` in Node.js is unusual. It's a key-value structure where _the values are always strings_. See https://nodejs.org/docs/latest-v20.x/api/process.html#processenv Gutenberg used non-string values which was wrong in environments where `process.env` exists, but also did compile-time replacement in some environments with impossible values. This makes everything confusing. - The inconsistent `process.env` values caused problems in the type system. They conflicted with the Node.js types that correctly assert that process.env values must be `strings`. Using `globalThis` has the benefit of being safer in third party code and valid in the type system. # Remove all skipLibCheck from tsconfig The `skipLibCheck` configuration is no longer necessary and helps to produce better type declarations for Gutenberg's published libraries. --------- Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl> --- .eslintrc.js | 3 +- docs/contributors/code/coding-guidelines.md | 8 +- docs/how-to-guides/feature-flags.md | 27 +-- packages/block-library/CHANGELOG.md | 6 +- packages/block-library/src/index.js | 32 ++-- packages/blocks/CHANGELOG.md | 7 +- .../src/api/parser/convert-legacy-block.js | 2 +- packages/components/CHANGELOG.md | 4 + packages/components/tsconfig.json | 5 +- packages/core-data/CHANGELOG.md | 7 +- packages/core-data/src/actions.js | 2 +- packages/core-data/src/entities.js | 4 +- packages/core-data/src/resolvers.js | 2 +- packages/customize-widgets/CHANGELOG.md | 4 + packages/customize-widgets/src/index.js | 2 +- packages/dataviews/CHANGELOG.md | 4 + packages/dataviews/tsconfig.json | 1 - packages/e2e-tests/CHANGELOG.md | 6 +- .../e2e-tests/config/is-gutenberg-plugin.js | 9 +- packages/edit-post/CHANGELOG.md | 4 + .../src/components/visual-editor/index.js | 2 +- packages/edit-post/src/index.js | 2 +- packages/edit-site/CHANGELOG.md | 4 + packages/edit-site/src/index.js | 2 +- packages/edit-widgets/CHANGELOG.md | 4 + packages/edit-widgets/src/index.js | 2 +- packages/editor/CHANGELOG.md | 4 + packages/editor/src/bindings/index.js | 2 +- .../src/components/post-actions/actions.js | 2 +- packages/eslint-plugin/CHANGELOG.md | 6 + packages/eslint-plugin/README.md | 39 ++-- packages/eslint-plugin/configs/custom.js | 1 + .../docs/rules/is-gutenberg-plugin.md | 61 ------ .../docs/rules/no-wp-process-env.md | 23 +++ .../docs/rules/wp-global-usage.md | 60 ++++++ .../rules/__tests__/is-gutenberg-plugin.js | 65 ------- .../rules/__tests__/no-wp-process-env.js | 62 +++++++ .../rules/__tests__/wp-global-usage.js | 129 +++++++++++++ .../eslint-plugin/rules/gutenberg-phase.js | 174 ------------------ .../rules/is-gutenberg-plugin.js | 94 ---------- .../eslint-plugin/rules/no-wp-process-env.js | 93 ++++++++++ .../eslint-plugin/rules/wp-global-usage.js | 170 +++++++++++++++++ packages/interactivity-router/CHANGELOG.md | 4 + packages/interactivity-router/src/index.ts | 12 +- packages/interactivity/CHANGELOG.md | 12 +- packages/interactivity/src/utils.ts | 3 +- packages/jest-preset-default/CHANGELOG.md | 6 +- .../scripts/setup-globals.js | 3 +- packages/plugins/CHANGELOG.md | 4 + packages/plugins/tsconfig.json | 3 +- packages/private-apis/CHANGELOG.md | 4 + packages/private-apis/src/implementation.js | 2 +- packages/scripts/CHANGELOG.md | 1 + packages/scripts/config/webpack.config.js | 6 +- packages/warning/CHANGELOG.md | 4 + packages/warning/babel-plugin.js | 19 +- packages/warning/src/index.js | 3 +- packages/warning/src/test/index.js | 13 +- packages/warning/test/babel-plugin.js | 22 +-- .../full-content/full-content.test.js | 2 +- test/unit/config/gutenberg-env.js | 45 ++--- tools/webpack/shared.js | 12 +- typings/gutenberg-env/index.d.ts | 32 +++- 63 files changed, 780 insertions(+), 572 deletions(-) delete mode 100644 packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md create mode 100644 packages/eslint-plugin/docs/rules/no-wp-process-env.md create mode 100644 packages/eslint-plugin/docs/rules/wp-global-usage.md delete mode 100644 packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js create mode 100644 packages/eslint-plugin/rules/__tests__/no-wp-process-env.js create mode 100644 packages/eslint-plugin/rules/__tests__/wp-global-usage.js delete mode 100644 packages/eslint-plugin/rules/gutenberg-phase.js delete mode 100644 packages/eslint-plugin/rules/is-gutenberg-plugin.js create mode 100644 packages/eslint-plugin/rules/no-wp-process-env.js create mode 100644 packages/eslint-plugin/rules/wp-global-usage.js diff --git a/.eslintrc.js b/.eslintrc.js index 0b0c71c39a2664..490c542f9d4565 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -92,6 +92,7 @@ module.exports = { ], globals: { wp: 'off', + globalThis: 'readonly', }, settings: { jsdoc: { @@ -104,7 +105,7 @@ module.exports = { 'jest/expect-expect': 'off', 'react/jsx-boolean-value': 'error', '@wordpress/dependency-group': 'error', - '@wordpress/is-gutenberg-plugin': 'error', + '@wordpress/wp-global-usage': 'error', '@wordpress/react-no-unsafe-timeout': 'error', '@wordpress/i18n-text-domain': [ 'error', diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md index 06f86715a65a06..d89df5876e3804 100644 --- a/docs/contributors/code/coding-guidelines.md +++ b/docs/contributors/code/coding-guidelines.md @@ -141,9 +141,9 @@ An **plugin-only API** is one which is planned for eventual public availability, Plugin-only APIs are excluded from WordPress Core and only available in the Gutenberg Plugin: ```js -// Using process.env.IS_GUTENBERG_PLUGIN allows Webpack to exclude this +// Using globalThis.IS_GUTENBERG_PLUGIN allows Webpack to exclude this // export from WordPress core: -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { export { doSomethingExciting } from './api'; } ``` @@ -448,8 +448,8 @@ lock( privateApis, { privateEverywhere, privateInCorePublicInPlugin } ); // The privateInCorePublicInPlugin function is explicitly exported, // but this export will not be merged into WordPress core thanks to -// the process.env.IS_GUTENBERG_PLUGIN check. -if ( process.env.IS_GUTENBERG_PLUGIN ) { +// the globalThis.IS_GUTENBERG_PLUGIN check. +if ( globalThis.IS_GUTENBERG_PLUGIN ) { export const privateInCorePublicInPlugin = unlock( privateApis ).privateInCorePublicInPlugin; } diff --git a/docs/how-to-guides/feature-flags.md b/docs/how-to-guides/feature-flags.md index 5855f93f8ed9fc..11c5ae881337dd 100644 --- a/docs/how-to-guides/feature-flags.md +++ b/docs/how-to-guides/feature-flags.md @@ -2,9 +2,9 @@ 'Feature flags' are variables that allow you to prevent specific code in the Gutenberg project from being shipped to WordPress core, and to run certain experimental features only in the plugin. -## Introducing `process.env.IS_GUTENBERG_PLUGIN` +## Introducing `globalThis.IS_GUTENBERG_PLUGIN` -The `process.env.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin. +The `globalThis.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin. When the codebase is built for the plugin, this variable will be set to `true`. When building for WordPress core, it will be set to `false` or `undefined`. @@ -19,8 +19,9 @@ function myPluginOnlyFeature() { // implementation } -export const pluginOnlyFeature = - process.env.IS_GUTENBERG_PLUGIN ? myPluginOnlyFeature : undefined; +export const pluginOnlyFeature = globalThis.IS_GUTENBERG_PLUGIN + ? myPluginOnlyFeature + : undefined; ``` In the above example, the `pluginOnlyFeature` export will be `undefined` in non-plugin environments such as WordPress core. @@ -32,37 +33,39 @@ If you're attempting to import and call a plugin-only feature, be sure to wrap t ```js import { pluginOnlyFeature } from '@wordpress/foo'; -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { pluginOnlyFeature(); } ``` ## How it works -During the webpack build, instances of `process.env.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/). +During the webpack build, instances of `globalThis.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/). For example, in the following code – ```js -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { pluginOnlyFeature(); } ``` -– the variable `process.env.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build: +– the variable `globalThis.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build: ```js -if ( true ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `true` +if ( true ) { + // Wepack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true` pluginOnlyFeature(); } ``` This ensures that code within the body of the `if` statement will always be executed. -In WordPress core, the `process.env.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this: +In WordPress core, the `globalThis.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this: ```js -if ( undefined ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `undefined` +if ( undefined ) { + // Webpack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `undefined` pluginOnlyFeature(); } ``` @@ -99,6 +102,6 @@ In this case, the minification process will remove the entire `if` statement inc ## Frequently asked questions -### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === 2`? +### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = ! Object.is( undefined, globalThis.IS_GUTENBERG_PLUGIN )`? Introducing complexity may prevent webpack's minifier from identifying and therefore eliminating dead code. Therefore it is recommended to use the examples in this document to ensure your feature flag functions as intended. For further details, see the [Dead Code Elimination](#dead-code-elimination) section. diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index c938638b9d06f1..ee42f9653ad8ad 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 8.35.0 (2024-05-16) ### Internal @@ -84,7 +88,7 @@ ### Breaking Changes -- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235)) +- Updated dependencies to require React 18 ([#45235](https://github.com/WordPress/gutenberg/pull/45235)) ## 7.19.0 (2022-11-16) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 9cb2f44d05eb9b..56365c87a268fd 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -314,21 +314,21 @@ export const registerCoreBlocks = ( * __experimentalRegisterExperimentalCoreBlocks( settings ); * ``` */ -export const __experimentalRegisterExperimentalCoreBlocks = process.env - .IS_GUTENBERG_PLUGIN - ? ( { enableFSEBlocks } = {} ) => { - const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ]; - getAllBlocks() - .filter( ( { metadata } ) => - isBlockMetadataExperimental( metadata ) - ) - .filter( - ( { metadata: { __experimental } } ) => - __experimental === true || - enabledExperiments.includes( __experimental ) - ) - .forEach( ( { init } ) => init() ); - } - : undefined; +export const __experimentalRegisterExperimentalCoreBlocks = + globalThis.IS_GUTENBERG_PLUGIN + ? ( { enableFSEBlocks } = {} ) => { + const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ]; + getAllBlocks() + .filter( ( { metadata } ) => + isBlockMetadataExperimental( metadata ) + ) + .filter( + ( { metadata: { __experimental } } ) => + __experimental === true || + enabledExperiments.includes( __experimental ) + ) + .forEach( ( { init } ) => init() ); + } + : undefined; export { privateApis } from './private-apis'; diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index 85f09d262242c9..db9afca0d285a7 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 12.35.0 (2024-05-16) ## 12.34.0 (2024-05-02) @@ -92,7 +96,8 @@ ## 11.17.0 (2022-09-21) -- The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples. +- The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples. + ## 11.16.0 (2022-09-13) ## 11.15.0 (2022-08-24) diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index c828a3f5db6c49..8396b98109792f 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -79,7 +79,7 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { // The following code is only relevant for the Gutenberg plugin. // It's a stand-alone if statement for dead-code elimination. - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { // Convert pattern overrides added during experimental phase. // Only four blocks were supported initially. // These checks can be removed in WordPress 6.6. diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 914e9e771ddff1..8f0bb757903979 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ### Enhancements - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 81045d05c21fc5..2033a6f43fede6 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -9,10 +9,7 @@ "gutenberg-test-env", "jest", "@testing-library/jest-dom" - ], - // TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable - // between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`. - "skipLibCheck": true + ] }, "references": [ { "path": "../a11y" }, diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md index 31df8b2074dbdc..348e1e7ea0e782 100644 --- a/packages/core-data/CHANGELOG.md +++ b/packages/core-data/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 6.35.0 (2024-05-16) ## 6.34.0 (2024-05-02) @@ -97,7 +101,7 @@ ### Breaking Changes -– Add TypeScript types to the built package (via "types": "build-types" in the package.json) +– Add TypeScript types to the built package (via "types": "build-types" in the package.json) ## 4.14.0 (2022-08-24) @@ -132,6 +136,7 @@ ## 4.3.0 (2022-03-23) ### New Features + - The saveEntityRecord, saveEditedEntityRecord, and deleteEntityRecord actions now accept an optional throwOnError option (defaults to false). When set to true, any exceptions occurring when the action was executing are re-thrown, causing dispatch().saveEntityRecord() to reject with an error. ([#39258](https://github.com/WordPress/gutenberg/pull/39258)) - Added support for fetching block patterns and their categories, with the `getBlockPatterns` and `getBlockPatternCategories` selectors. diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index 454250e8ad13c9..be4d12f0cb9ef6 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -396,7 +396,7 @@ export const editEntityRecord = }, {} ), }; if ( window.__experimentalEnableSync && entityConfig.syncConfig ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { const objectId = entityConfig.getSyncObjectId( recordId ); getSyncProvider().update( entityConfig.syncObjectType + '--edit', diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index e91744110faf32..8d09402087cf90 100644 --- a/packages/core-data/src/entities.js +++ b/packages/core-data/src/entities.js @@ -485,7 +485,7 @@ export const getOrLoadEntitiesConfig = if ( configs?.length > 0 && hasConfig ) { if ( window.__experimentalEnableSync ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { registerSyncConfigs( configs ); } } @@ -506,7 +506,7 @@ export const getOrLoadEntitiesConfig = configs = await loader.loadEntities(); if ( window.__experimentalEnableSync ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { registerSyncConfigs( configs ); } } diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js index f040e548e61605..3e5373eda6d6ab 100644 --- a/packages/core-data/src/resolvers.js +++ b/packages/core-data/src/resolvers.js @@ -81,7 +81,7 @@ export const getEntityRecord = entityConfig.syncConfig && ! query ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { const objectId = entityConfig.getSyncObjectId( key ); // Loads the persisted document. diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md index 9c2687cf60b9c9..d6f184afe97366 100644 --- a/packages/customize-widgets/CHANGELOG.md +++ b/packages/customize-widgets/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js index 5b438cac86f49b..9afda775a1701c 100644 --- a/packages/customize-widgets/src/index.js +++ b/packages/customize-widgets/src/index.js @@ -61,7 +61,7 @@ export function initialize( editorName, blockEditorSettings ) { } ); registerCoreBlocks( coreBlocks ); registerLegacyWidgetBlock(); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS, } ); diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 711836f69eab23..ba4cd177561df3 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 1.2.0 (2024-05-16) ### Internal diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json index 60122ee152c80e..83c47d8320d838 100644 --- a/packages/dataviews/tsconfig.json +++ b/packages/dataviews/tsconfig.json @@ -4,7 +4,6 @@ "compilerOptions": { "rootDir": "src", "declarationDir": "build-types", - "skipLibCheck": true, "checkJs": false }, "references": [ diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md index 1293ba8a6f2082..95cbb721932d5e 100644 --- a/packages/e2e-tests/CHANGELOG.md +++ b/packages/e2e-tests/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 7.29.0 (2024-05-16) ## 7.28.0 (2024-05-02) @@ -64,7 +68,7 @@ ### Breaking Changes -- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) +- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) ## 6.5.0 (2023-03-01) diff --git a/packages/e2e-tests/config/is-gutenberg-plugin.js b/packages/e2e-tests/config/is-gutenberg-plugin.js index d03b70b3ec11a3..5cfe3ada705df2 100644 --- a/packages/e2e-tests/config/is-gutenberg-plugin.js +++ b/packages/e2e-tests/config/is-gutenberg-plugin.js @@ -1,6 +1,3 @@ -global.process.env = { - ...global.process.env, - // Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging. - // eslint-disable-next-line @wordpress/is-gutenberg-plugin - IS_GUTENBERG_PLUGIN: process.env.npm_package_config_IS_GUTENBERG_PLUGIN, -}; +// eslint-disable-next-line @wordpress/wp-global-usage +globalThis.IS_GUTENBERG_PLUGIN = + process.env.npm_package_config_IS_GUTENBERG_PLUGIN === 'true'; diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index 03d6585fbfdf8f..763952b71ab604 100644 --- a/packages/edit-post/CHANGELOG.md +++ b/packages/edit-post/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 7.35.0 (2024-05-16) ### Internal diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 3bb50999c2a929..c1e13d79f29411 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -24,7 +24,7 @@ import { usePaddingAppender } from './use-padding-appender'; const { EditorCanvas } = unlock( editorPrivateApis ); -const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false; +const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; export default function VisualEditor( { styles } ) { const { diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 0a2d17a344e474..1e0b3fe7d4d6ff 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -80,7 +80,7 @@ export function initializeEditor( registerCoreBlocks(); registerLegacyWidgetBlock( { inserter: false } ); registerWidgetGroupBlock( { inserter: false } ); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks, } ); diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index d2eab07c746da1..3437c7c35fd9c4 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 5.35.0 (2024-05-16) ### Internal diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index f42842f504e54d..41fc0a1985fded 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -42,7 +42,7 @@ export function initializeEditor( id, settings ) { dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' ); registerLegacyWidgetBlock( { inserter: false } ); registerWidgetGroupBlock( { inserter: false } ); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: true, } ); diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md index 61bb76814f4db4..1c76fff573a054 100644 --- a/packages/edit-widgets/CHANGELOG.md +++ b/packages/edit-widgets/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 5.35.0 (2024-05-16) ### Internal diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index eb87d22fefef9e..2374ec19dabd7b 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -73,7 +73,7 @@ export function initializeEditor( id, settings ) { dispatch( blocksStore ).reapplyBlockTypeFilters(); registerCoreBlocks( coreBlocks ); registerLegacyWidgetBlock(); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS, } ); diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 73b00e61139c8c..b33b049d245a4c 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 13.35.0 (2024-05-16) ### Internal diff --git a/packages/editor/src/bindings/index.js b/packages/editor/src/bindings/index.js index ce77b87ebc7a5c..5824cdde022cc6 100644 --- a/packages/editor/src/bindings/index.js +++ b/packages/editor/src/bindings/index.js @@ -13,6 +13,6 @@ import postMeta from './post-meta'; const { registerBlockBindingsSource } = unlock( dispatch( blocksStore ) ); registerBlockBindingsSource( postMeta ); -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { registerBlockBindingsSource( patternOverrides ); } diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index 926d9b92fe5d13..f6a28c34213566 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -1116,7 +1116,7 @@ export function usePostActions( postType, onActionPerformed ) { const actions = [ postTypeObject?.viewable && viewPostAction, postRevisionsAction, - process.env.IS_GUTENBERG_PLUGIN + globalThis.IS_GUTENBERG_PLUGIN ? ! isTemplateOrTemplatePart && ! isPattern && duplicatePostAction diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 84251a677bd1ed..682fac4e8f1f03 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +### Breaking Changes + +- `@wordpress/is-gutenberg-plugin` rule has been replaced by `@wordpress/wp-global-usage` ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- `@wordpress/wp-process-env` rule has been added and included in the recommended configurations ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- `@wordpress/gutenberg-phase` rule has been removed (deprecated in v10.0.0) ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 18.1.0 (2024-05-16) ### Internal diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md index 1619778add661a..bd629a593f277d 100644 --- a/packages/eslint-plugin/README.md +++ b/packages/eslint-plugin/README.md @@ -69,25 +69,26 @@ The granular rulesets will not define any environment globals. As such, if they ### Rules -| Rule | Description | Recommended | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------- | -| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md) | Discourage passing string literals to reference data stores | | -| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md) | Enforce dependencies docblocks formatting | ✓ | -| [is-gutenberg-plugin](docs/rules/is-gutenberg-plugin.md) | Governs the use of the `process.env.IS_GUTENBERG_PLUGIN` constant | ✓ | -| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property | ✓ | -| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md) | Disallow the usage of unguarded `getRangeAt` calls | ✓ | -| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md) | Disallow the usage of unsafe APIs from `@wordpress/*` packages | ✓ | -| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md) | Disallow assigning variable values if unused before a return | ✓ | -| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md) | Disallow unsafe `setTimeout` in component | | -| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md) | Enforce valid sprintf usage | ✓ | -| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md) | Disallow using three dots in translatable strings | ✓ | -| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md) | Disallow collapsible whitespace in translatable strings | ✓ | -| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md) | Prevent using only placeholders in translatable strings | ✓ | -| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md) | Enforce string literals as translation function arguments | ✓ | -| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md) | Enforce passing valid text domains | ✓ | -| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md) | Enforce adding translator comments | ✓ | -| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) | Disallow leading or trailing whitespace in translatable strings | | -| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) | Disallow hyphenated numerical ranges in translatable strings | | +| Rule | Description | Recommended | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | +| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md) | Discourage passing string literals to reference data stores. | | +| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md) | Enforce dependencies docblocks formatting. | ✓ | +| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md) | Disallow using three dots in translatable strings. | ✓ | +| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) | Disallow hyphenated numerical ranges in translatable strings. | | +| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md) | Disallow collapsible whitespace in translatable strings. | ✓ | +| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) | Disallow leading or trailing whitespace in translatable strings. | | +| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md) | Prevent using only placeholders in translatable strings. | ✓ | +| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md) | Enforce string literals as translation function arguments. | ✓ | +| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md) | Enforce passing valid text domains. | ✓ | +| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md) | Enforce adding translator comments. | ✓ | +| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓ | +| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md) | Disallow the usage of unguarded `getRangeAt` calls. | ✓ | +| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md) | Disallow the usage of unsafe APIs from `@wordpress/*` packagesl | ✓ | +| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md) | Disallow assigning variable values if unused before a return. | ✓ | +| [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md) | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓ | +| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md) | Disallow unsafe `setTimeout` in component. | | +| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md) | Enforce valid sprintf usage. | ✓ | +| [wp-global-usage](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/wp-global-usage.md) | Enforce correct usage of WordPress globals like `globalThis.SCRIPT_DEBUG`. | | ### Legacy diff --git a/packages/eslint-plugin/configs/custom.js b/packages/eslint-plugin/configs/custom.js index dcee5de349bad7..e6c67c0c6e4350 100644 --- a/packages/eslint-plugin/configs/custom.js +++ b/packages/eslint-plugin/configs/custom.js @@ -7,6 +7,7 @@ module.exports = { '@wordpress/no-global-active-element': 'error', '@wordpress/no-global-get-selection': 'error', '@wordpress/no-unsafe-wp-apis': 'error', + '@wordpress/no-wp-process-env': 'error', }, overrides: [ { diff --git a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md b/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md deleted file mode 100644 index 99b51cf5cbb93b..00000000000000 --- a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md +++ /dev/null @@ -1,61 +0,0 @@ -# The `IS_GUTENBERG_PLUGIN` global (is-gutenberg-plugin) - -To enable the use of feature flags in Gutenberg, the IS_GUTENBERG_PLUGIN global constant was introduced. This constant is replaced with a boolean value at build time using webpack's define plugin. - -There are a few rules around using this constant: - -- Only access `IS_GUTENBERG_PLUGIN` via `process.env`, e.g. `process.env.IS_GUTENBERG_PLUGIN`. This is required since webpack's define plugin only replaces exact matches of `process.env.IS_GUTENBERG_PLUGIN` in the codebase. -- The `IS_GUTENBERG_PLUGIN` variable should only be used as a simple boolean expression. -- `IS_GUTENBERG_PLUGIN` should only be used within the condition of an if statement, e.g. `if ( process.env.IS_GUTENBERG_PLUGIN ) { // implement feature here }` or ternary `process.env.IS_GUTENBERG_PLUGIN ? something : somethingElse`. This rule ensures code that is disabled through a feature flag is removed by dead code elimination. - -## Rule details - -Examples of **incorrect** code for this rule: - -```js -if ( IS_GUTENBERG_PLUGIN ) { - // implement feature here. -} -``` - -```js -if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) { - // implement feature here. -} -``` - -```js -if ( process.env.IS_GUTENBERG_PLUGIN == 1 ) { - // implement feature here. -} -``` - -```js -if ( process.env.IS_GUTENBERG_PLUGIN === true ) { - // implement feature here. -} -``` - -```js -if ( true || process.env.IS_GUTENBERG_PLUGIN ) { - // implement feature here. -} -``` - -```js -const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN; -``` - -Examples of **correct** code for this rule: - -```js -if ( process.env.IS_GUTENBERG_PLUGIN ) { - // implement feature here. -} -``` - -```js -if ( ! process.env.IS_GUTENBERG_PLUGIN ) { - return; -} -``` diff --git a/packages/eslint-plugin/docs/rules/no-wp-process-env.md b/packages/eslint-plugin/docs/rules/no-wp-process-env.md new file mode 100644 index 00000000000000..46fa6ed431c200 --- /dev/null +++ b/packages/eslint-plugin/docs/rules/no-wp-process-env.md @@ -0,0 +1,23 @@ +# No WordPress process.env (no-wp-process-env) + +WordPress globals were accessed via `process.env` in the past. This practice created difficulty for +package consumers and was removed. + +The correct way to access these globals is now via `globalThis`, e.g. `globalThis.SCRIPT_DEBUG`. +This is safer for package consumers. + +This rule is fixable. + +## Rule details + +Examples of **incorrect** code for this rule: + +```js +process.env.SCRIPT_DEBUG; +``` + +Examples of **correct** code for this rule: + +```js +globalThis.SCRIPT_DEBUG; +``` diff --git a/packages/eslint-plugin/docs/rules/wp-global-usage.md b/packages/eslint-plugin/docs/rules/wp-global-usage.md new file mode 100644 index 00000000000000..d7b90b89258a90 --- /dev/null +++ b/packages/eslint-plugin/docs/rules/wp-global-usage.md @@ -0,0 +1,60 @@ +# WordPress global usage (wp-global-usage) + +To enable the use of feature flags in Gutenberg some globals are used, such as `IS_GUTENBERG_PLUGIN` and `SCRIPT_DEBUG`. + +There are a few rules around using this constant: + +- Only access the globals via `globalThis`, e.g. `globalThis.IS_GUTENBERG_PLUGIN`. This allows the variables to be replaced compile time. +- The globals should only be used as a conditional test (negation is allowed). + +## Rule details + +Examples of **incorrect** code for this rule: + +```js +if ( IS_GUTENBERG_PLUGIN ) { + // implement feature here. +} +``` + +```js +if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) { + // implement feature here. +} +``` + +```js +if ( globalThis.IS_GUTENBERG_PLUGIN == 1 ) { + // implement feature here. +} +``` + +```js +if ( globalThis.IS_GUTENBERG_PLUGIN === true ) { + // implement feature here. +} +``` + +```js +if ( true || globalThis.IS_GUTENBERG_PLUGIN ) { + // implement feature here. +} +``` + +```js +const isMyFeatureActive = globalThis.IS_GUTENBERG_PLUGIN; +``` + +Examples of **correct** code for this rule: + +```js +if ( globalThis.IS_GUTENBERG_PLUGIN ) { + // implement feature here. +} +``` + +```js +if ( ! globalThis.IS_GUTENBERG_PLUGIN ) { + return; +} +``` diff --git a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js deleted file mode 100644 index c2ffa8415269dd..00000000000000 --- a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js +++ /dev/null @@ -1,65 +0,0 @@ -/** - * External dependencies - */ -import { RuleTester } from 'eslint'; - -/** - * Internal dependencies - */ -import rule from '../is-gutenberg-plugin'; - -const ruleTester = new RuleTester( { - parserOptions: { - ecmaVersion: 6, - }, -} ); - -const ERROR_MESSAGE = - 'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.'; - -ruleTester.run( 'is-gutenberg-plugin', rule, { - valid: [ - { code: `if ( process.env.IS_GUTENBERG_PLUGIN ) {}` }, - { code: `if ( ! process.env.IS_GUTENBERG_PLUGIN ) {}` }, - { - // Ensure whitespace is ok. - code: `if ( - process.env. - IS_GUTENBERG_PLUGIN - ) {}`, - }, - { code: `const test = process.env.IS_GUTENBERG_PLUGIN ? foo : bar` }, - { code: `const test = ! process.env.IS_GUTENBERG_PLUGIN ? bar : foo` }, - { - // Ensure whitespace is ok. - code: `const test = ! process.env. - IS_GUTENBERG_PLUGIN ? bar : foo`, - }, - ], - invalid: [ - { - code: `if ( IS_GUTENBERG_PLUGIN ) {}`, - errors: [ { message: ERROR_MESSAGE } ], - }, - { - code: `if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}`, - errors: [ { message: ERROR_MESSAGE } ], - }, - { - code: `if ( true ) { process.env.IS_GUTENBERG_PLUGIN === 2 }`, - errors: [ { message: ERROR_MESSAGE } ], - }, - { - code: `if ( process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`, - errors: [ { message: ERROR_MESSAGE } ], - }, - { - code: `if ( true || process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`, - errors: [ { message: ERROR_MESSAGE } ], - }, - { - code: `const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;`, - errors: [ { message: ERROR_MESSAGE } ], - }, - ], -} ); diff --git a/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js new file mode 100644 index 00000000000000..330ed560aea992 --- /dev/null +++ b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import { RuleTester } from 'eslint'; + +/** + * Internal dependencies + */ +import rule from '../no-wp-process-env'; + +const ruleTester = new RuleTester( { + parserOptions: { + ecmaVersion: 6, + }, +} ); + +ruleTester.run( 'no-wp-process-env', rule, { + valid: [ + { code: 'process.env.NODE_ENV' }, + { code: 'process.env.WHATEVER' }, + { code: 'process.env[foo]' }, + { code: 'process.env["foo"]' }, + { code: `process['env']["foo"]` }, + { code: "process['env'][`foo`]" }, + { code: "process.env[`${ '' }IS_GUTENBERG_PLUGIN`]" }, + { code: `a.b.c` }, + { code: `x['y']['z']` }, + { code: `d[e][f]` }, + { code: `process[ (()=>'env')() ][ {_:'SCRIPT_DEBUG'}['_'] ]` }, + ], + invalid: [ + { + code: 'process.env.IS_GUTENBERG_PLUGIN', + errors: [ { messageId: 'useGlobalThis' } ], + output: 'globalThis.IS_GUTENBERG_PLUGIN', + }, + { + code: 'process.env.SCRIPT_DEBUG', + errors: [ { messageId: 'useGlobalThis' } ], + output: 'globalThis.SCRIPT_DEBUG', + }, + { + code: 'process.env.IS_WORDPRESS_CORE', + errors: [ { messageId: 'useGlobalThis' } ], + output: 'globalThis.IS_WORDPRESS_CORE', + }, + { + code: `process['env']["IS_GUTENBERG_PLUGIN"]`, + errors: [ { messageId: 'useGlobalThis' } ], + output: 'globalThis.IS_GUTENBERG_PLUGIN', + }, + { + code: 'process[`env`][`IS_GUTENBERG_PLUGIN`]', + errors: [ { messageId: 'useGlobalThis' } ], + output: 'globalThis.IS_GUTENBERG_PLUGIN', + }, + { + code: 'process.env.GUTENBERG_PHASE', + errors: [ { messageId: 'noGutenbergPhase' } ], + }, + ], +} ); diff --git a/packages/eslint-plugin/rules/__tests__/wp-global-usage.js b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js new file mode 100644 index 00000000000000..9d3dc9b2a29d72 --- /dev/null +++ b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js @@ -0,0 +1,129 @@ +/** + * External dependencies + */ +import { RuleTester } from 'eslint'; + +/** + * Internal dependencies + */ +import rule from '../wp-global-usage'; + +const ruleTester = new RuleTester( { + parserOptions: { + ecmaVersion: 6, + }, +} ); + +ruleTester.run( 'wp-global-usage', rule, { + valid: [ + { code: "const text = 'SCRIPT_DEBUG'" }, + { code: 'const config = { SCRIPT_DEBUG: true }' }, + { code: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}' }, + { code: 'if ( globalThis.IS_WORDPRESS_CORE ) {}' }, + { code: 'if ( globalThis.SCRIPT_DEBUG ) {}' }, + { code: 'if ( process.env.SCRIPT_DEBUG ) {}' }, + { code: 'if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {}' }, + { + // Ensure whitespace is ok. + code: `if ( + globalThis. + IS_GUTENBERG_PLUGIN + ) {}`, + }, + { code: 'const test = globalThis.IS_GUTENBERG_PLUGIN ? foo : bar' }, + { code: 'const test = ! globalThis.IS_GUTENBERG_PLUGIN ? bar : foo' }, + { + // Ensure whitespace is ok. + code: `const test = ! globalThis. + IS_GUTENBERG_PLUGIN ? bar : foo`, + }, + ], + invalid: [ + { + code: 'if ( IS_GUTENBERG_PLUGIN ) {}', + errors: [ + { + messageId: 'usedWithoutGlobalThis', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}', + }, + { + code: 'if ( window.IS_GUTENBERG_PLUGIN ) {}', + errors: [ + { + messageId: 'usedWithoutGlobalThis', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}', + }, + { + code: 'if ( SCRIPT_DEBUG ) {}', + errors: [ + { + messageId: 'usedWithoutGlobalThis', + data: { name: 'SCRIPT_DEBUG' }, + }, + ], + output: 'if ( globalThis.SCRIPT_DEBUG ) {}', + }, + { + code: 'if ( IS_WORDPRESS_CORE ) {}', + errors: [ + { + messageId: 'usedWithoutGlobalThis', + data: { name: 'IS_WORDPRESS_CORE' }, + }, + ], + output: 'if ( globalThis.IS_WORDPRESS_CORE ) {}', + }, + { + code: "if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}", + errors: [ + { + messageId: 'usedWithoutGlobalThis', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}', + }, + { + code: 'if ( true ) { globalThis.IS_GUTENBERG_PLUGIN === 2 }', + errors: [ + { + messageId: 'usedOutsideConditional', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + }, + { + code: 'if ( globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}', + errors: [ + { + messageId: 'usedOutsideConditional', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + }, + { + code: 'if ( true || globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}', + errors: [ + { + messageId: 'usedOutsideConditional', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + }, + { + code: 'const isFeatureActive = globalThis.IS_GUTENBERG_PLUGIN;', + errors: [ + { + messageId: 'usedOutsideConditional', + data: { name: 'IS_GUTENBERG_PLUGIN' }, + }, + ], + }, + ], +} ); diff --git a/packages/eslint-plugin/rules/gutenberg-phase.js b/packages/eslint-plugin/rules/gutenberg-phase.js deleted file mode 100644 index e3ec9ccf8180ef..00000000000000 --- a/packages/eslint-plugin/rules/gutenberg-phase.js +++ /dev/null @@ -1,174 +0,0 @@ -/** - * Traverse up through the chain of parent AST nodes returning the first parent - * the predicate returns a truthy value for. - * - * @param {Object} sourceNode The AST node to search from. - * @param {Function} predicate A predicate invoked for each parent. - * - * @return {Object | undefined} The first encountered parent node where the predicate - * returns a truthy value. - */ -function findParent( sourceNode, predicate ) { - if ( ! sourceNode.parent ) { - return; - } - - if ( predicate( sourceNode.parent ) ) { - return sourceNode.parent; - } - - return findParent( sourceNode.parent, predicate ); -} - -/** - * Tests whether the GUTENBERG_PHASE variable is accessed via - * `process.env.GUTENBERG_PHASE`. - * - * @example - * ```js - * // good - * if ( process.env.GUTENBERG_PHASE === 2 ) { - * - * // bad - * if ( GUTENBERG_PHASE === 2 ) { - * ``` - * - * @param {Object} node The GUTENBERG_PHASE identifier node. - * @param {Object} context The eslint context object. - */ -function testIsAccessedViaProcessEnv( node, context ) { - const parent = node.parent; - - if ( - parent && - parent.type === 'MemberExpression' && - context.getSource( parent ) === 'process.env.GUTENBERG_PHASE' - ) { - return; - } - - context.report( - node, - 'The `GUTENBERG_PHASE` constant should be accessed using `process.env.GUTENBERG_PHASE`.' - ); -} - -/** - * Tests whether the GUTENBERG_PHASE variable is used in a strict binary - * equality expression in a comparison with a number, triggering a - * violation if not. - * - * @example - * ```js - * // good - * if ( process.env.GUTENBERG_PHASE === 2 ) { - * - * // bad - * if ( process.env.GUTENBERG_PHASE >= '2' ) { - * ``` - * - * @param {Object} node The GUTENBERG_PHASE identifier node. - * @param {Object} context The eslint context object. - */ -function testIsUsedInStrictBinaryExpression( node, context ) { - const parent = findParent( - node, - ( candidate ) => candidate.type === 'BinaryExpression' - ); - - if ( parent ) { - const comparisonNode = - node.parent.type === 'MemberExpression' ? node.parent : node; - - // Test for process.env.GUTENBERG_PHASE === <number> or <number> === process.env.GUTENBERG_PHASE. - const hasCorrectOperator = [ '===', '!==' ].includes( parent.operator ); - const hasCorrectOperands = - ( parent.left === comparisonNode && - typeof parent.right.value === 'number' ) || - ( parent.right === comparisonNode && - typeof parent.left.value === 'number' ); - - if ( hasCorrectOperator && hasCorrectOperands ) { - return; - } - } - - context.report( - node, - 'The `GUTENBERG_PHASE` constant should only be used in a strict equality comparison with a primitive number.' - ); -} - -/** - * Tests whether the GUTENBERG_PHASE variable is used as the condition for an - * if statement, triggering a violation if not. - * - * @example - * ```js - * // good - * if ( process.env.GUTENBERG_PHASE === 2 ) { - * - * // bad - * const isFeatureActive = process.env.GUTENBERG_PHASE === 2; - * ``` - * - * @param {Object} node The GUTENBERG_PHASE identifier node. - * @param {Object} context The eslint context object. - */ -function testIsUsedInIfOrTernary( node, context ) { - const conditionalParent = findParent( node, ( candidate ) => - [ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type ) - ); - const binaryParent = findParent( - node, - ( candidate ) => candidate.type === 'BinaryExpression' - ); - - if ( - conditionalParent && - binaryParent && - conditionalParent.test && - conditionalParent.test.range[ 0 ] === binaryParent.range[ 0 ] && - conditionalParent.test.range[ 1 ] === binaryParent.range[ 1 ] - ) { - return; - } - - context.report( - node, - 'The `GUTENBERG_PHASE` constant should only be used as part of the condition in an if statement or ternary expression.' - ); -} - -module.exports = { - meta: { - type: 'problem', - schema: [], - deprecated: true, - replacedBy: '@wordpress/is-gutenberg-plugin', - }, - create( context ) { - return { - Identifier( node ) { - // Bypass any identifiers with a node name different to `GUTENBERG_PHASE`. - if ( node.name !== 'GUTENBERG_PHASE' ) { - return; - } - - testIsAccessedViaProcessEnv( node, context ); - testIsUsedInStrictBinaryExpression( node, context ); - testIsUsedInIfOrTernary( node, context ); - }, - Literal( node ) { - // Bypass any identifiers with a node value different to `GUTENBERG_PHASE`. - if ( node.value !== 'GUTENBERG_PHASE' ) { - return; - } - - if ( node.parent && node.parent.type === 'MemberExpression' ) { - testIsAccessedViaProcessEnv( node, context ); - } - }, - }; - }, -}; diff --git a/packages/eslint-plugin/rules/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/is-gutenberg-plugin.js deleted file mode 100644 index 00475545e6158c..00000000000000 --- a/packages/eslint-plugin/rules/is-gutenberg-plugin.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * Traverse up through the chain of parent AST nodes returning the first parent - * the predicate returns a truthy value for. - * - * @param {Object} sourceNode The AST node to search from. - * @param {Function} predicate A predicate invoked for each parent. - * - * @return {Object | undefined} The first encountered parent node where the predicate - * returns a truthy value. - */ -function findParent( sourceNode, predicate ) { - if ( ! sourceNode.parent ) { - return; - } - - if ( predicate( sourceNode.parent ) ) { - return sourceNode.parent; - } - - return findParent( sourceNode.parent, predicate ); -} - -/** - * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an - * if statement or ternary, triggering a violation if not. - * - * @example - * ```js - * // good - * if ( process.env.IS_GUTENBERG_PLUGIN ) { - * - * // bad - * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN; - * ``` - * - * @param {Object} node The IS_GUTENBERG_PLUGIN identifier node. - * @param {Object} context The eslint context object. - */ -function isUsedInConditional( node, context ) { - const conditionalParent = findParent( node, ( candidate ) => - [ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type ) - ); - - if ( ! conditionalParent ) { - return false; - } - - // Allow for whitespace as prettier sometimes breaks this on separate lines. - const textRegex = /^\s*!?\s*process\s*\.\s*env\s*\.\s*IS_GUTENBERG_PLUGIN$/; - const testSource = context.getSource( conditionalParent.test ); - - if ( ! textRegex.test( testSource ) ) { - return false; - } - - return true; -} - -const ERROR_MESSAGE = - 'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.'; - -module.exports = { - meta: { - type: 'problem', - schema: [], - }, - create( context ) { - return { - Identifier( node ) { - // Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`. - if ( node.name !== 'IS_GUTENBERG_PLUGIN' ) { - return; - } - - if ( ! isUsedInConditional( node, context ) ) { - context.report( node, ERROR_MESSAGE ); - } - }, - // Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'. - Literal( node ) { - // Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`. - if ( node.value !== 'IS_GUTENBERG_PLUGIN' ) { - return; - } - - if ( node.parent && node.parent.type === 'MemberExpression' ) { - if ( ! isUsedInConditional( node, context ) ) { - context.report( node, ERROR_MESSAGE ); - } - } - }, - }; - }, -}; diff --git a/packages/eslint-plugin/rules/no-wp-process-env.js b/packages/eslint-plugin/rules/no-wp-process-env.js new file mode 100644 index 00000000000000..55aca44b92ba74 --- /dev/null +++ b/packages/eslint-plugin/rules/no-wp-process-env.js @@ -0,0 +1,93 @@ +const NAMES = new Set( + /** @type {const} */ ( [ + 'GUTENBERG_PHASE', + 'IS_GUTENBERG_PLUGIN', + 'IS_WORDPRESS_CORE', + 'SCRIPT_DEBUG', + ] ) +); + +/** @type {import('eslint').Rule.RuleModule} */ +module.exports = { + meta: { + type: 'problem', + schema: [], + fixable: true, + messages: { + useGlobalThis: + '`{{ name }}` should not be accessed from process.env. Use `globalThis.{{name}}`.', + noGutenbergPhase: + 'The GUTENBERG_PHASE environement variable is no longer available. Use IS_GUTENBERG_PLUGIN (boolean).', + }, + }, + create( context ) { + return { + MemberExpression( node ) { + const propertyNameOrValue = memberProperty( node ); + if ( ! propertyNameOrValue ) { + return; + } + if ( ! NAMES.has( propertyNameOrValue ) ) { + return; + } + + if ( node.object.type !== 'MemberExpression' ) { + return; + } + + const obj = node.object; + const envCandidateProperty = memberProperty( obj ); + if ( envCandidateProperty !== 'env' ) { + return; + } + + if ( + obj.object.type !== 'Identifier' || + obj.object.name !== 'process' + ) { + return; + } + + if ( propertyNameOrValue === 'GUTENBERG_PHASE' ) { + context.report( { + node, + messageId: 'noGutenbergPhase', + } ); + return; + } + + context.report( { + node, + messageId: 'useGlobalThis', + data: { name: propertyNameOrValue }, + fix( fixer ) { + return fixer.replaceText( + node, + `globalThis.${ propertyNameOrValue }` + ); + }, + } ); + }, + }; + }, +}; + +/** + * @param {import('estree').MemberExpression} node + */ +function memberProperty( node ) { + switch ( node.property.type ) { + case 'Identifier': + return node.property.name; + case 'Literal': + return node.property.value; + case 'TemplateLiteral': + if ( + ! node.property.expressions.length && + node.property.quasis.length === 1 + ) { + return node.property.quasis[ 0 ].value.raw; + } + } + return null; +} diff --git a/packages/eslint-plugin/rules/wp-global-usage.js b/packages/eslint-plugin/rules/wp-global-usage.js new file mode 100644 index 00000000000000..c6c75d99331238 --- /dev/null +++ b/packages/eslint-plugin/rules/wp-global-usage.js @@ -0,0 +1,170 @@ +const NAMES = new Set( + /** @type {const} */ ( [ + 'IS_GUTENBERG_PLUGIN', + 'IS_WORDPRESS_CORE', + 'SCRIPT_DEBUG', + ] ) +); + +/** + * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an + * if statement or ternary, triggering a violation if not. + * + * @example + * ```js + * // good + * if ( process.env.IS_GUTENBERG_PLUGIN ) { + * + * // bad + * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN; + * ``` + * + * @param {import('estree').Node} node The IS_GUTENBERG_PLUGIN identifier node. + */ +function isUsedInConditional( node ) { + /** @type {import('estree').Node|undefined} */ + let current = node; + + // Simple negation is the only expresion allowed in the conditional: + // if ( ! globalThis.SCRIPT_DEBUG ) {} + // const D = ! globalThis.SCRIPT_DEBUG ? 'yes' : 'no'; + if ( + current.parent.type === 'UnaryExpression' && + current.parent.operator === '!' + ) { + current = current.parent; + } + + // Check if the current node is the test of a conditional + + /** @type {import('estree').Node|undefined} */ + const parent = current.parent; + + if ( parent.type === 'IfStatement' && parent.test === current ) { + return true; + } + if ( parent.type === 'ConditionalExpression' && parent.test === current ) { + return true; + } + return false; +} + +/** @type {import('eslint').Rule.RuleModule} */ +module.exports = { + meta: { + type: 'problem', + schema: [], + fixable: true, + messages: { + usedOutsideConditional: + '`globalThis.{{ name }}` should only be used as the condition in an if statement or ternary expression.', + usedWithoutGlobalThis: + '`{{ name }}` should not be used directly. Use `globalThis.{{ name }}`.', + }, + }, + create( context ) { + return { + Identifier( node ) { + // Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`. + if ( ! NAMES.has( node.name ) ) { + return; + } + + if ( node.parent.type === 'Property' ) { + return; + } + + if ( node.parent.type !== 'MemberExpression' ) { + context.report( { + node, + messageId: 'usedWithoutGlobalThis', + data: { name: node.name }, + fix( fixer ) { + return fixer.replaceText( + node, + `globalThis.${ node.name }` + ); + }, + } ); + + if ( ! isUsedInConditional( node ) ) { + context.report( { + node, + messageId: 'usedOutsideConditional', + data: { + name: node.name, + }, + } ); + } + return; + } + + if ( + node.parent.object.type === 'Identifier' && + node.parent.object.name !== 'globalThis' + ) { + context.report( { + node, + messageId: 'usedWithoutGlobalThis', + data: { name: node.name }, + fix( fixer ) { + if ( node.parent.object.name === 'window' ) { + return fixer.replaceText( + node.parent, + `globalThis.${ node.name }` + ); + } + }, + } ); + } else if ( ! isUsedInConditional( node.parent ) ) { + context.report( { + node, + messageId: 'usedOutsideConditional', + data: { + name: node.name, + }, + } ); + } + }, + + // Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'. + Literal( node ) { + // Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`. + if ( ! NAMES.has( node.value ) ) { + return; + } + + if ( node.parent.type !== 'MemberExpression' ) { + return; + } + + if ( + node.parent.object.type === 'Identifier' && + node.parent.object.name !== 'globalThis' + ) { + context.report( { + node, + messageId: 'usedWithoutGlobalThis', + data: { name: node.value }, + fix( fixer ) { + if ( node.parent.object.name === 'window' ) { + return fixer.replaceText( + node.parent, + `globalThis.${ node.value }` + ); + } + }, + } ); + } else if ( ! isUsedInConditional( node.parent ) ) { + context.report( { + node, + messageId: 'usedOutsideConditional', + data: { + name: node.value, + }, + } ); + } + }, + }; + }, +}; diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md index bae126d0023182..496d76e7bdecc0 100644 --- a/packages/interactivity-router/CHANGELOG.md +++ b/packages/interactivity-router/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 1.8.0 (2024-05-16) ## 1.7.0 (2024-05-02) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 09f484131b62ee..79b67eeb98e656 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -85,8 +85,7 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => { const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => { const regions = { body: undefined }; let head: HTMLElement[]; - // @ts-ignore - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { if ( navigationMode === 'fullPage' ) { head = await fetchHeadAssets( dom, headElements ); regions.body = vdom @@ -111,8 +110,7 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => { // Render all interactive regions contained in the given page. const renderRegions = ( page: Page ) => { batch( () => { - // @ts-ignore - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { if ( navigationMode === 'fullPage' ) { // Once this code is tested and more mature, the head should be updated for region based navigation as well. updateHead( page.head ); @@ -169,8 +167,7 @@ window.addEventListener( 'popstate', async () => { // Initialize the router and cache the initial page using the initial vDOM. // Once this code is tested and more mature, the head should be updated for // region based navigation as well. -// @ts-ignore -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { if ( navigationMode === 'fullPage' ) { // Cache the scripts. Has to be called before fetching the assets. [].map.call( document.querySelectorAll( 'script[src]' ), ( script ) => { @@ -367,8 +364,7 @@ export const { state, actions } = store( 'core/router', { } ); // Add click and prefetch to all links. -// @ts-ignore -if ( process.env.IS_GUTENBERG_PLUGIN ) { +if ( globalThis.IS_GUTENBERG_PLUGIN ) { if ( navigationMode === 'fullPage' ) { // Navigate on click. document.addEventListener( diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index c976f26dc7136c..bcc1ffcf8a3fce 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 5.7.0 (2024-05-16) ### Enhancements @@ -10,9 +14,9 @@ ### Bug Fixes -- Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009)) -- Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249)) -- Prevent empty namespace or different namespaces from killing the runtime ([#61409](https://github.com/WordPress/gutenberg/pull/61409)) +- Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009)) +- Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249)) +- Prevent empty namespace or different namespaces from killing the runtime ([#61409](https://github.com/WordPress/gutenberg/pull/61409)) ## 5.6.0 (2024-05-02) @@ -20,7 +24,7 @@ ### Enhancements -- Improve data-wp-context debugging by validating it as a stringified JSON Object. ([#61045](https://github.com/WordPress/gutenberg/pull/61045)) +- Improve data-wp-context debugging by validating it as a stringified JSON Object. ([#61045](https://github.com/WordPress/gutenberg/pull/61045)) ### Bug Fixes diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts index ecf22899309e97..e709ba1ce3b0ee 100644 --- a/packages/interactivity/src/utils.ts +++ b/packages/interactivity/src/utils.ts @@ -316,8 +316,7 @@ const logged: Set< string > = new Set(); * @param message Message to show in the warning. */ export const warn = ( message: string ): void => { - // @ts-expect-error - if ( typeof SCRIPT_DEBUG !== 'undefined' && SCRIPT_DEBUG === true ) { + if ( globalThis.SCRIPT_DEBUG ) { if ( logged.has( message ) ) { return; } diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md index d709168df37041..f891b892ed8bae 100644 --- a/packages/jest-preset-default/CHANGELOG.md +++ b/packages/jest-preset-default/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 11.29.0 (2024-05-16) ## 11.28.0 (2024-05-02) @@ -64,7 +68,7 @@ ### Breaking Changes -- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) +- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) ## 10.9.0 (2023-03-01) diff --git a/packages/jest-preset-default/scripts/setup-globals.js b/packages/jest-preset-default/scripts/setup-globals.js index abd99f620dc893..37922a3302e70f 100644 --- a/packages/jest-preset-default/scripts/setup-globals.js +++ b/packages/jest-preset-default/scripts/setup-globals.js @@ -1,5 +1,6 @@ // Run all tests with development tools enabled. -global.SCRIPT_DEBUG = true; +// eslint-disable-next-line @wordpress/wp-global-usage +globalThis.SCRIPT_DEBUG = true; // These are necessary to load TinyMCE successfully. global.URL = window.URL; diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md index 7f9cdc62909fa2..49ff11a846d8e8 100644 --- a/packages/plugins/CHANGELOG.md +++ b/packages/plugins/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 6.26.0 (2024-05-16) ## 6.25.0 (2024-05-02) diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json index d20dcecf0d613b..9a0da807348b21 100644 --- a/packages/plugins/tsconfig.json +++ b/packages/plugins/tsconfig.json @@ -4,8 +4,7 @@ "compilerOptions": { "rootDir": "src", "declarationDir": "build-types", - "types": [ "gutenberg-env" ], - "skipLibCheck": true + "types": [ "gutenberg-env" ] }, "references": [ { "path": "../components" }, diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md index f1564b6ef5db1c..07c8caaa3f8fe3 100644 --- a/packages/private-apis/CHANGELOG.md +++ b/packages/private-apis/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 0.40.0 (2024-05-16) ## 0.39.0 (2024-05-02) diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js index a31fd91ce094dd..bea820226fe332 100644 --- a/packages/private-apis/src/implementation.js +++ b/packages/private-apis/src/implementation.js @@ -66,7 +66,7 @@ let allowReRegistration; // Let's default to true, then. Try/catch will fall back to "true" even if the // environment variable is not explicitly defined. try { - allowReRegistration = process.env.IS_WORDPRESS_CORE ? false : true; + allowReRegistration = globalThis.IS_WORDPRESS_CORE ? false : true; } catch ( error ) { allowReRegistration = true; } diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 8c5aa8c623ef09..124a5e99bfdf60 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). ## 27.9.0 (2024-05-16) diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index b7f61eb215eaf0..f306fbd54a8a6b 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -307,7 +307,8 @@ const scriptConfig = { plugins: [ new webpack.DefinePlugin( { // Inject the `SCRIPT_DEBUG` global, used for development features flagging. - SCRIPT_DEBUG: ! isProduction, + 'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ), + SCRIPT_DEBUG: JSON.stringify( ! isProduction ), } ), // If we run a modules build, the 2 compilations can "clean" each other's output @@ -456,7 +457,8 @@ if ( hasExperimentalModulesFlag ) { plugins: [ new webpack.DefinePlugin( { // Inject the `SCRIPT_DEBUG` global, used for development features flagging. - SCRIPT_DEBUG: ! isProduction, + 'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ), + SCRIPT_DEBUG: JSON.stringify( ! isProduction ), } ), // The WP_BUNDLE_ANALYZER global variable enables a utility that represents // bundle content as a convenient interactive zoomable treemap. diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md index 90c1ca7e83f6bd..6eee478e47dbfd 100644 --- a/packages/warning/CHANGELOG.md +++ b/packages/warning/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). + ## 2.58.0 (2024-05-16) ## 2.57.0 (2024-05-02) diff --git a/packages/warning/babel-plugin.js b/packages/warning/babel-plugin.js index 02c466b5de24ec..3cf32d311bd6cd 100644 --- a/packages/warning/babel-plugin.js +++ b/packages/warning/babel-plugin.js @@ -14,24 +14,15 @@ const pkg = require( './package.json' ); function babelPlugin( { types: t } ) { const seen = Symbol(); - const typeofProcessExpression = t.binaryExpression( - '!==', - t.unaryExpression( 'typeof', t.identifier( 'SCRIPT_DEBUG' ), false ), - t.stringLiteral( 'undefined' ) - ); - const scriptDebugCheckExpression = t.binaryExpression( '===', - t.identifier( 'SCRIPT_DEBUG' ), + t.memberExpression( + t.identifier( 'globalThis' ), + t.identifier( 'SCRIPT_DEBUG' ) + ), t.booleanLiteral( true ) ); - const logicalExpression = t.logicalExpression( - '&&', - typeofProcessExpression, - scriptDebugCheckExpression - ); - return { visitor: { ImportDeclaration( path, state ) { @@ -70,7 +61,7 @@ function babelPlugin( { types: t } ) { node[ seen ] = true; path.replaceWith( t.ifStatement( - logicalExpression, + scriptDebugCheckExpression, t.blockStatement( [ t.expressionStatement( node ), ] ) diff --git a/packages/warning/src/index.js b/packages/warning/src/index.js index 89ce71db112a21..5744e99d94fd27 100644 --- a/packages/warning/src/index.js +++ b/packages/warning/src/index.js @@ -4,7 +4,8 @@ import { logged } from './utils'; function isDev() { - return typeof SCRIPT_DEBUG !== 'undefined' && SCRIPT_DEBUG === true; + // eslint-disable-next-line @wordpress/wp-global-usage + return globalThis.SCRIPT_DEBUG === true; } /** diff --git a/packages/warning/src/test/index.js b/packages/warning/src/test/index.js index a32e5f1e0fae4e..5fdf67b05360c6 100644 --- a/packages/warning/src/test/index.js +++ b/packages/warning/src/test/index.js @@ -4,28 +4,31 @@ import warning from '..'; import { logged } from '../utils'; +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable @wordpress/wp-global-usage */ + describe( 'warning', () => { - const initialScriptDebug = global.SCRIPT_DEBUG; + const initialScriptDebug = globalThis.SCRIPT_DEBUG; afterEach( () => { - global.SCRIPT_DEBUG = initialScriptDebug; + globalThis.SCRIPT_DEBUG = initialScriptDebug; logged.clear(); } ); it( 'logs to console.warn when SCRIPT_DEBUG is set to `true`', () => { - global.SCRIPT_DEBUG = true; + globalThis.SCRIPT_DEBUG = true; warning( 'warning' ); expect( console ).toHaveWarnedWith( 'warning' ); } ); it( 'does not log to console.warn if SCRIPT_DEBUG not set to `true`', () => { - global.SCRIPT_DEBUG = false; + globalThis.SCRIPT_DEBUG = false; warning( 'warning' ); expect( console ).not.toHaveWarned(); } ); it( 'should show a message once', () => { - global.SCRIPT_DEBUG = true; + globalThis.SCRIPT_DEBUG = true; warning( 'warning' ); warning( 'warning' ); diff --git a/packages/warning/test/babel-plugin.js b/packages/warning/test/babel-plugin.js index a3c4bd55745efd..c845d79d700caa 100644 --- a/packages/warning/test/babel-plugin.js +++ b/packages/warning/test/babel-plugin.js @@ -28,7 +28,7 @@ describe( 'babel-plugin', () => { ); const expected = join( 'import warning from "@wordpress/warning";', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;' + 'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;' ); expect( transformCode( input ) ).toEqual( expected ); @@ -45,7 +45,7 @@ describe( 'babel-plugin', () => { const input = 'warning("a");'; const options = { callee: 'warning' }; const expected = - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;'; + 'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;'; expect( transformCode( input, options ) ).toEqual( expected ); } ); @@ -59,9 +59,9 @@ describe( 'babel-plugin', () => { ); const expected = join( 'import warning from "@wordpress/warning";', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("b") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("c") : void 0;' + 'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warning("b") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warning("c") : void 0;' ); expect( transformCode( input ) ).toEqual( expected ); @@ -76,9 +76,9 @@ describe( 'babel-plugin', () => { ); const expected = join( 'import warn from "@wordpress/warning";', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("a") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("b") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("c") : void 0;' + 'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;' ); expect( transformCode( input ) ).toEqual( expected ); @@ -93,9 +93,9 @@ describe( 'babel-plugin', () => { ); const expected = join( 'import warn from "@wordpress/warning";', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("a") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("b") : void 0;', - 'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("c") : void 0;' + 'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;', + 'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;' ); expect( transformCode( input ) ).toEqual( expected ); diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js index f825de04771442..4522dd7b88e451 100644 --- a/test/integration/full-content/full-content.test.js +++ b/test/integration/full-content/full-content.test.js @@ -82,7 +82,7 @@ describe( 'full post content fixture', () => { formSubmissionNotification, ] ); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: true, } ); diff --git a/test/unit/config/gutenberg-env.js b/test/unit/config/gutenberg-env.js index a6a1b81f740970..f6ea2d16c1c79d 100644 --- a/test/unit/config/gutenberg-env.js +++ b/test/unit/config/gutenberg-env.js @@ -1,32 +1,13 @@ -global.process.env = { - ...global.process.env, - /* - Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging. - - The conversion to boolean is required here. Why? Package.json defines - IS_GUTENBERG_PLUGIN as follows: - - "config": { - "IS_GUTENBERG_PLUGIN": true - } - - Webpack then replaces references to IS_GUTENBERG_PLUGIN with a literal value `true`. - The file you are reading right now, however, receives a string value "true": - - "true" === process.env.npm_package_config_IS_GUTENBERG_PLUGIN - - The code can only work consistently in both environments when the value of - IS_GUTENBERG_PLUGIN is consistent. For this reason, the line below turns the - string representation of IS_GUTENBERG_PLUGIN into a boolean value. - */ - // eslint-disable-next-line @wordpress/is-gutenberg-plugin - IS_GUTENBERG_PLUGIN: - String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true', - /** - * Feature flag guarding features specific to WordPress core. - * It's important to set it to "true" in the test environment - * to ensure the Gutenberg plugin can be cleanly merged into - * WordPress core. - */ - IS_WORDPRESS_CORE: true, -}; +/* + * Feature flag guarding features specific to WordPress core. + * It's important to set it to "true" in the test environment + * to ensure the Gutenberg plugin can be cleanly merged into + * WordPress core. + */ +// eslint-disable-next-line @wordpress/wp-global-usage +globalThis.IS_WORDPRESS_CORE = true; + +// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging. +// eslint-disable-next-line @wordpress/wp-global-usage +globalThis.IS_GUTENBERG_PLUGIN = + String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true'; diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js index debd3fc93f6f6d..f30d3a830f3eb1 100644 --- a/tools/webpack/shared.js +++ b/tools/webpack/shared.js @@ -64,13 +64,15 @@ const plugins = [ process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), new DefinePlugin( { // Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging. - 'process.env.IS_GUTENBERG_PLUGIN': - process.env.npm_package_config_IS_GUTENBERG_PLUGIN, + 'globalThis.IS_GUTENBERG_PLUGIN': JSON.stringify( + Boolean( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) + ), // Inject the `IS_WORDPRESS_CORE` global, used for feature flagging. - 'process.env.IS_WORDPRESS_CORE': - process.env.npm_package_config_IS_WORDPRESS_CORE, + 'globalThis.IS_WORDPRESS_CORE': JSON.stringify( + Boolean( process.env.npm_package_config_IS_WORDPRESS_CORE ) + ), // Inject the `SCRIPT_DEBUG` global, used for dev versions of JavaScript. - SCRIPT_DEBUG: mode === 'development', + 'globalThis.SCRIPT_DEBUG': JSON.stringify( mode === 'development' ), } ), mode === 'production' && new ReadableJsAssetsWebpackPlugin(), ]; diff --git a/typings/gutenberg-env/index.d.ts b/typings/gutenberg-env/index.d.ts index ecf60a7ca094f9..c2bc71ae435ee2 100644 --- a/typings/gutenberg-env/index.d.ts +++ b/typings/gutenberg-env/index.d.ts @@ -1,11 +1,25 @@ -interface Environment { - NODE_ENV: unknown; - IS_GUTENBERG_PLUGIN?: boolean; - IS_WORDPRESS_CORE?: boolean; +declare namespace NodeJS { + interface ProcessEnv { + readonly NODE_ENV?: 'production' | 'development' | 'test'; + } + interface Process { + env: NodeJS.ProcessEnv; + } } -interface Process { - env: Environment; -} -declare var process: Process; -declare var SCRIPT_DEBUG: boolean; +declare var process: NodeJS.Process; + +/** + * Whether the code is running in WordPress with SCRIPT_DEBUG flag. + */ +declare var SCRIPT_DEBUG: undefined | boolean; + +/** + * Whether code is running within the Gutenberg plugin. + * + * When the codebase is built for the plugin, this variable will be set to `true`. + * When building for WordPress Core, it will be set to `false` or `undefined`. + */ +declare var IS_GUTENBERG_PLUGIN: undefined | boolean; + +declare var IS_WORDPRESS_CORE: undefined | boolean; From 4454e433f2277e9f2a5c55452397b0b713a5b1bc Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 23 May 2024 13:15:54 +0200 Subject: [PATCH 46/94] Rename backport-changelog/6279.md to backport-changelog/6.6/6279.md (#61894) --- backport-changelog/{ => 6.6}/6279.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename backport-changelog/{ => 6.6}/6279.md (100%) diff --git a/backport-changelog/6279.md b/backport-changelog/6.6/6279.md similarity index 100% rename from backport-changelog/6279.md rename to backport-changelog/6.6/6279.md From 4da057ecd6958d40b8f2a83db1152320e5f161e6 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Thu, 23 May 2024 12:17:20 +0100 Subject: [PATCH 47/94] Editor: Ensure Copy button in sidebar copies whole permalink, *with* URL protocol (#61876) * PostURL: Copy whole permalink, *with* protocol `usePostURLLabel` is meant to be used in labels and intentionally strips the protocol of a URL. As a result, the copy button in the `PostURL` component wrote something like "example.org/foobar" to the clipboard, instead of "https://example.org/foobar". As a fix, just grab the permalink directly. * Docs: Fix grammar * Fold permalink selection into existing useSelect call * Filter through safeDecodeURIComponent -- you never know --- .../reference-guides/data/data-core-editor.md | 2 +- .../editor/src/components/post-url/index.js | 53 ++++++++++--------- packages/editor/src/store/selectors.js | 2 +- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index a7b5d37da84643..4fea2c51fa54f3 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -485,7 +485,7 @@ _Returns_ ### getPermalinkParts -Returns the permalink for a post, split into it's three parts: the prefix, the postName, and the suffix. +Returns the permalink for a post, split into its three parts: the prefix, the postName, and the suffix. _Parameters_ diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index 9453977a23bf05..c2b2ac8826b205 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -21,7 +21,6 @@ import { useCopyToClipboard } from '@wordpress/compose'; /** * Internal dependencies */ -import { usePostURLLabel } from './label'; import { store as editorStore } from '../../store'; /** @@ -37,33 +36,39 @@ import { store as editorStore } from '../../store'; * @return {Component} The rendered PostURL component. */ export default function PostURL( { onClose } ) { - const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } = - useSelect( ( select ) => { - const post = select( editorStore ).getCurrentPost(); - const postTypeSlug = select( editorStore ).getCurrentPostType(); - const postType = select( coreStore ).getPostType( postTypeSlug ); - const permalinkParts = select( editorStore ).getPermalinkParts(); - const hasPublishAction = - post?._links?.[ 'wp:action-publish' ] ?? false; + const { + isEditable, + postSlug, + postLink, + permalinkPrefix, + permalinkSuffix, + permalink, + } = useSelect( ( select ) => { + const post = select( editorStore ).getCurrentPost(); + const postTypeSlug = select( editorStore ).getCurrentPostType(); + const postType = select( coreStore ).getPostType( postTypeSlug ); + const permalinkParts = select( editorStore ).getPermalinkParts(); + const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false; - return { - isEditable: - select( editorStore ).isPermalinkEditable() && - hasPublishAction, - postSlug: safeDecodeURIComponent( - select( editorStore ).getEditedPostSlug() - ), - viewPostLabel: postType?.labels.view_item, - postLink: post.link, - permalinkPrefix: permalinkParts?.prefix, - permalinkSuffix: permalinkParts?.suffix, - }; - }, [] ); + return { + isEditable: + select( editorStore ).isPermalinkEditable() && hasPublishAction, + postSlug: safeDecodeURIComponent( + select( editorStore ).getEditedPostSlug() + ), + viewPostLabel: postType?.labels.view_item, + postLink: post.link, + permalinkPrefix: permalinkParts?.prefix, + permalinkSuffix: permalinkParts?.suffix, + permalink: safeDecodeURIComponent( + select( editorStore ).getPermalink() + ), + }; + }, [] ); const { editPost } = useDispatch( editorStore ); const { createNotice } = useDispatch( noticesStore ); const [ forceEmptyField, setForceEmptyField ] = useState( false ); - const postUrlLabel = usePostURLLabel(); - const copyButtonRef = useCopyToClipboard( postUrlLabel, () => { + const copyButtonRef = useCopyToClipboard( permalink, () => { createNotice( 'info', __( 'Copied URL to clipboard.' ), { isDismissible: true, type: 'snackbar', diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index e1a6be18e46017..8b0dfd4b370c41 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -983,7 +983,7 @@ export function getEditedPostSlug( state ) { } /** - * Returns the permalink for a post, split into it's three parts: the prefix, + * Returns the permalink for a post, split into its three parts: the prefix, * the postName, and the suffix. * * @param {Object} state Editor state. From f49e0b5958adad9fbd211d5ded07b4cabf5bfec3 Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Thu, 23 May 2024 17:01:16 +0530 Subject: [PATCH 48/94] Block settings: Update variant of "Apply globally" Button component to secondary (#61850) * Update variant of Apply globally Button component in PushChangesToGlobalStylesControl * Add __next40pxDefaultSize prop to Apply globally Button Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> --- .../edit-site/src/hooks/push-changes-to-global-styles/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js index a49c7ec5efab5e..a3ccc3e7c3234e 100644 --- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js +++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js @@ -337,7 +337,8 @@ function PushChangesToGlobalStylesControl( { { __( 'Styles' ) } </BaseControl.VisualLabel> <Button - variant="primary" + __next40pxDefaultSize + variant="secondary" disabled={ changes.length === 0 } onClick={ pushChanges } > From 811261494f035bd94c25cee4ae19e2159c147b72 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Thu, 23 May 2024 14:49:40 +0100 Subject: [PATCH 49/94] Site Editor: Remove useless onClick handler (#61902) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- .../src/components/block-editor/editor-canvas.js | 14 ++------------ .../components/block-editor/site-editor-canvas.js | 3 +-- packages/edit-site/src/components/editor/index.js | 6 ++---- packages/edit-site/src/components/layout/router.js | 12 +----------- 4 files changed, 6 insertions(+), 29 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 321749fa70c842..4f5237b7fdf92e 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -28,13 +28,7 @@ import { const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); -function EditorCanvas( { - enableResizing, - settings, - children, - onClick, - ...props -} ) { +function EditorCanvas( { enableResizing, settings, children, ...props } ) { const { hasBlocks, isFocusMode, @@ -88,11 +82,7 @@ function EditorCanvas( { } }, onClick: () => { - if ( !! onClick ) { - onClick(); - } else { - setCanvasMode( 'edit' ); - } + setCanvasMode( 'edit' ); }, onClickCapture: ( event ) => { if ( currentPostIsTrashed ) { diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js index bd8d611fda0f4d..9a74652b53cabb 100644 --- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js @@ -27,7 +27,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; const { useLocation } = unlock( routerPrivateApis ); -export default function SiteEditorCanvas( { onClick } ) { +export default function SiteEditorCanvas() { const location = useLocation(); const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } = useSelect( ( select ) => { @@ -89,7 +89,6 @@ export default function SiteEditorCanvas( { onClick } ) { <EditorCanvas enableResizing={ enableResizing } settings={ settings } - onClick={ onClick } > { // Avoid resize listeners when not needed, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c094f1e6282567..d8ebf2c1f54861 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -83,7 +83,7 @@ const interfaceLabels = { const ANIMATION_DURATION = 0.25; -export default function Editor( { isLoading, onClick } ) { +export default function Editor( { isLoading } ) { const { record: editedPost, getTitle, @@ -351,9 +351,7 @@ export default function Editor( { isLoading, onClick } ) { { ! isLargeViewport && showVisualEditor && ( <BlockToolbar hideDragHandle /> ) } - { showVisualEditor && ( - <SiteEditorCanvas onClick={ onClick } /> - ) } + { showVisualEditor && <SiteEditorCanvas /> } </> } secondarySidebar={ diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 50d8c84319e5e2..f3c0f40c73c95b 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -75,7 +75,6 @@ function useRedirectOldPaths() { export default function useLayoutAreas() { const isSiteEditorLoading = useIsSiteEditorLoading(); - const history = useHistory(); const { params } = useLocation(); const { postType, postId, path, layout, isCustom, canvas } = params; useRedirectOldPaths(); @@ -95,16 +94,7 @@ export default function useLayoutAreas() { ), content: <PagePages />, preview: ( isListLayout || canvas === 'edit' ) && ( - <Editor - isLoading={ isSiteEditorLoading } - onClick={ () => - history.push( { - postType: 'page', - postId, - canvas: 'edit', - } ) - } - /> + <Editor isLoading={ isSiteEditorLoading } /> ), mobile: canvas === 'edit' ? ( From ab6b44676f7f0d92225e077c1389874cf2982ca7 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Thu, 23 May 2024 15:23:47 +0100 Subject: [PATCH 50/94] Site Editor: Fix the Root Padding styles (#61906) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> --- .../global-styles/use-global-styles-output.js | 40 +++++++++++-------- .../global-styles-renderer/index.js | 8 +++- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 14fdf06daa72b8..981189309f828b 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -33,7 +33,6 @@ import { getGapCSSValue } from '../../hooks/gap'; import { store as blockEditorStore } from '../../store'; import { LAYOUT_DEFINITIONS } from '../../layouts/definitions'; import { getValueFromObjectPath, setImmutably } from '../../utils/object'; -import BlockContext from '../block-context'; import { unlock } from '../../lock-unlock'; import { setThemeFileUris } from './theme-file-uri-utils'; @@ -310,7 +309,7 @@ const getFeatureDeclarations = ( selectors, styles ) => { * * @param {Object} tree A theme.json tree containing layout definitions. * - * @param {boolean} isTemplate Whether the entity being edited is a full template or a pattern. + * @param {boolean} disableRootPadding Whether to force disable the root padding styles. * @return {Array} An array of style declarations. */ export function getStylesDeclarations( @@ -318,7 +317,7 @@ export function getStylesDeclarations( selector = '', useRootPaddingAlign, tree = {}, - isTemplate = true + disableRootPadding = false ) { const isRoot = ROOT_BLOCK_SELECTOR === selector; const output = Object.entries( STYLE_PROPERTY ).reduce( @@ -394,7 +393,7 @@ export function getStylesDeclarations( // Don't output padding properties if padding variables are set or if we're not editing a full template. if ( isRoot && - ( useRootPaddingAlign || ! isTemplate ) && + ( useRootPaddingAlign || disableRootPadding ) && rule.key.startsWith( 'padding' ) ) { return; @@ -772,7 +771,7 @@ export const toStyles = ( hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, - isTemplate = true, + disableRootPadding = false, styleOptions = undefined ) => { // These allow opting out of certain sets of styles. @@ -817,7 +816,11 @@ export const toStyles = ( ruleset += ':where(body) {margin: 0;'; // Root padding styles should only be output for full templates, not patterns or template parts. - if ( options.rootPadding && useRootPaddingAlign && isTemplate ) { + if ( + options.rootPadding && + useRootPaddingAlign && + ! disableRootPadding + ) { /* * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors. @@ -949,7 +952,7 @@ export const toStyles = ( selector, useRootPaddingAlign, tree, - isTemplate + disableRootPadding ); if ( declarations?.length ) { ruleset += `:where(${ selector }){${ declarations.join( @@ -1208,10 +1211,15 @@ export function processCSSNesting( css, blockSelector ) { * The use case for a custom config is to generate bespoke styles * and settings for previews, or other out-of-editor experiences. * - * @param {Object} mergedConfig Global styles configuration. + * @param {Object} mergedConfig Global styles configuration. + * @param {boolean} disableRootPadding Disable root padding styles. + * * @return {Array} Array of stylesheets and settings. */ -export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { +export function useGlobalStylesOutputWithConfig( + mergedConfig = {}, + disableRootPadding +) { const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' ); mergedConfig = setThemeFileUris( mergedConfig, @@ -1224,10 +1232,6 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { return !! getSettings().disableLayoutStyles; } ); - const blockContext = useContext( BlockContext ); - - const isTemplate = blockContext?.templateSlug !== undefined; - const { getBlockStyles } = useSelect( blocksStore ); return useMemo( () => { @@ -1252,7 +1256,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, - isTemplate + disableRootPadding ); const svgs = toSvgFilters( updatedConfig, blockSelectors ); @@ -1299,7 +1303,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { hasFallbackGapSupport, mergedConfig, disableLayoutStyles, - isTemplate, + disableRootPadding, getBlockStyles, ] ); } @@ -1307,9 +1311,11 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { /** * Returns the global styles output based on the current state of global styles config loaded in the editor context. * + * @param {boolean} disableRootPadding Disable root padding styles. + * * @return {Array} Array of stylesheets and settings. */ -export function useGlobalStylesOutput() { +export function useGlobalStylesOutput( disableRootPadding = false ) { const { merged: mergedConfig } = useContext( GlobalStylesContext ); - return useGlobalStylesOutputWithConfig( mergedConfig ); + return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding ); } diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js index 83c7c51bbe366b..2e840a7acdc375 100644 --- a/packages/edit-site/src/components/global-styles-renderer/index.js +++ b/packages/edit-site/src/components/global-styles-renderer/index.js @@ -10,11 +10,17 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis ); function useGlobalStylesRenderer() { - const [ styles, settings ] = useGlobalStylesOutput(); + const postType = useSelect( ( select ) => { + return select( editSiteStore ).getEditedPostType(); + } ); + const [ styles, settings ] = useGlobalStylesOutput( + postType !== TEMPLATE_POST_TYPE + ); const { getSettings } = useSelect( editSiteStore ); const { updateSettings } = useDispatch( editSiteStore ); From 79d79ff565daa0a88746eb85bccd2a0778ac7a93 Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Thu, 23 May 2024 19:33:56 +0400 Subject: [PATCH 51/94] DataViews: Remove unnecessary dependency for pattern fields memo (#61870) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --- packages/edit-site/src/components/page-patterns/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index e47ee70dc8e3e9..eea2fd61221909 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -336,7 +336,7 @@ export default function DataviewsPatterns() { } return _fields; - }, [ view.type, categoryId, type, authors ] ); + }, [ view.type, type, authors ] ); // Reset the page number when the category changes. useEffect( () => { From 19508f99342bf83f70ab2eac6b8e52559322508c Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Thu, 23 May 2024 16:40:14 +0100 Subject: [PATCH 52/94] Editor: Move the resizing of the editor to the EditorCanvas component (#61896) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> --- .../src/components/block-canvas/style.scss | 5 - .../src/components/iframe/content.scss | 4 + .../src/components/visual-editor/index.js | 18 +- .../components/block-editor/editor-canvas.js | 11 +- .../block-editor/site-editor-canvas.js | 73 +---- .../src/components/block-editor/style.scss | 94 ------ .../editor-canvas-container/index.js | 48 +-- .../editor-canvas-container/style.scss | 8 + .../src/components/editor-canvas/index.js | 274 +++++++++++------- .../src/components/editor-canvas/style.scss | 11 + .../src/components/resizable-editor/index.js} | 10 +- .../resizable-editor}/resize-handle.js | 8 +- .../components/resizable-editor/style.scss | 53 ++++ packages/editor/src/private-apis.js | 2 + packages/editor/src/style.scss | 2 + 15 files changed, 313 insertions(+), 308 deletions(-) create mode 100644 packages/editor/src/components/editor-canvas/style.scss rename packages/{edit-site/src/components/block-editor/resizable-editor.js => editor/src/components/resizable-editor/index.js} (88%) rename packages/{edit-site/src/components/block-editor => editor/src/components/resizable-editor}/resize-handle.js (87%) create mode 100644 packages/editor/src/components/resizable-editor/style.scss diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 6ec97bfb38853c..525c79be53504b 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -4,8 +4,3 @@ iframe[name="editor-canvas"] { display: block; background-color: $gray-300; } - - -iframe[name="editor-canvas"].has-editor-padding { - padding: $grid-unit-30 $grid-unit-30 0; -} diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 62a57030f1be11..165cf70d24a710 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -1,3 +1,7 @@ +.block-editor-iframe__body { + position: relative; +} + .block-editor-iframe__container { width: 100%; height: 100%; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index c1e13d79f29411..43ee2458ceba24 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -25,6 +25,12 @@ import { usePaddingAppender } from './use-padding-appender'; const { EditorCanvas } = unlock( editorPrivateApis ); const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; +const DESIGN_POST_TYPES = [ + 'wp_template', + 'wp_template_part', + 'wp_block', + 'wp_navigation', +]; export default function VisualEditor( { styles } ) { const { @@ -34,12 +40,15 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly, isEditingTemplate, isZoomedOutView, + postType, } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); - const { getEditorSettings, getRenderingMode } = select( editorStore ); + const { getEditorSettings, getRenderingMode, getCurrentPostType } = + select( editorStore ); const { getBlockTypes } = select( blocksStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const editorSettings = getEditorSettings(); + const _postType = getCurrentPostType(); return { isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), renderingMode: getRenderingMode(), @@ -47,9 +56,9 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - isEditingTemplate: - select( editorStore ).getCurrentPostType() === 'wp_template', + isEditingTemplate: _postType === 'wp_template', isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + postType: _postType, }; }, [] ); const hasMetaBoxes = useSelect( @@ -66,7 +75,8 @@ export default function VisualEditor( { styles } ) { if ( ! isZoomedOutView && ! hasMetaBoxes && - renderingMode === 'post-only' + renderingMode === 'post-only' && + ! DESIGN_POST_TYPES.includes( postType ) ) { paddingBottom = '40vh'; } diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 4f5237b7fdf92e..383125b1615de2 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -28,7 +28,7 @@ import { const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); -function EditorCanvas( { enableResizing, settings, children, ...props } ) { +function EditorCanvas( { settings, children } ) { const { hasBlocks, isFocusMode, @@ -109,11 +109,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) { // Forming a "block formatting context" to prevent margin collapsing. // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - css: `.is-root-container{display:flow-root;${ - // Some themes will have `min-height: 100vh` for the root container, - // which isn't a requirement in auto resize mode. - enableResizing ? 'min-height:0!important;' : '' - }}body{position:relative; ${ + css: `body{${ canvasMode === 'view' ? `min-height: 100vh; ${ currentPostIsTrashed ? '' : 'cursor: pointer;' @@ -122,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) { }}}`, }, ], - [ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ] + [ settings.styles, canvasMode, currentPostIsTrashed ] ); return ( @@ -136,7 +132,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) { className: clsx( 'edit-site-visual-editor__editor-canvas', { 'is-focused': isFocused && canvasMode === 'view', } ), - ...props, ...( canvasMode === 'view' ? viewModeIframeProps : {} ), } } > diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js index 9a74652b53cabb..df63e3fde09aa5 100644 --- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js @@ -6,98 +6,41 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useViewportMatch, useResizeObserver } from '@wordpress/compose'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies */ -import ResizableEditor from './resizable-editor'; import EditorCanvas from './editor-canvas'; import EditorCanvasContainer from '../editor-canvas-container'; import useSiteEditorSettings from './use-site-editor-settings'; import { store as editSiteStore } from '../../store'; -import { - FOCUSABLE_ENTITIES, - NAVIGATION_POST_TYPE, - TEMPLATE_POST_TYPE, -} from '../../utils/constants'; import { unlock } from '../../lock-unlock'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -const { useLocation } = unlock( routerPrivateApis ); export default function SiteEditorCanvas() { - const location = useLocation(); - const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } = - useSelect( ( select ) => { - const { getEditedPostType, getCanvasMode } = unlock( - select( editSiteStore ) - ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - const _templateType = getEditedPostType(); + const { isViewMode } = useSelect( ( select ) => { + const { getCanvasMode } = unlock( select( editSiteStore ) ); - return { - templateType: _templateType, - isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ), - isViewMode: getCanvasMode() === 'view', - isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', - }; - }, [] ); - const isFocusMode = location.params.focusMode || isFocusableEntity; - const [ resizeObserver, sizes ] = useResizeObserver(); + return { + isViewMode: getCanvasMode() === 'view', + }; + }, [] ); const settings = useSiteEditorSettings(); - const isMobileViewport = useViewportMatch( 'small', '<' ); - const enableResizing = - isFocusMode && - ! isViewMode && - // Disable resizing in mobile viewport. - ! isMobileViewport && - // Dsiable resizing in zoomed-out mode. - ! isZoomOutMode && - // Disable resizing when editing a template in focus mode. - templateType !== TEMPLATE_POST_TYPE; - - const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE; - const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode; - const forceFullHeight = isNavigationFocusMode; - return ( <EditorCanvasContainer.Slot> { ( [ editorCanvasView ] ) => editorCanvasView ? ( - <div className="edit-site-visual-editor is-focus-mode"> + <div className="edit-site-visual-editor"> { editorCanvasView } </div> ) : ( <div className={ clsx( 'edit-site-visual-editor', { - 'is-focus-mode': isFocusMode || !! editorCanvasView, 'is-view-mode': isViewMode, } ) } > - <ResizableEditor - enableResizing={ enableResizing } - height={ - sizes.height && ! forceFullHeight - ? sizes.height - : '100%' - } - > - <EditorCanvas - enableResizing={ enableResizing } - settings={ settings } - > - { - // Avoid resize listeners when not needed, - // these will trigger unnecessary re-renders - // when animating the iframe width. - enableResizing && resizeObserver - } - </EditorCanvas> - </ResizableEditor> + <EditorCanvas settings={ settings } /> </div> ) } diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index e3d68109d8b490..801ccc78e396ca 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -40,98 +40,4 @@ outline-offset: calc(-2 * var(--wp-admin-border-width-focus)); } } - - - &.is-focus-mode { - .edit-site-layout.is-full-canvas & { - padding: $grid-unit-30; - } - - .edit-site-visual-editor__editor-canvas { - max-height: 100%; - } - - // To hide the horizontal scrollbar and show the drag handle on the - // left and right of the container. - .components-resizable-box__container { - overflow: visible; - } - } - - & > .components-resizable-box__container { - margin: 0 auto; - } -} - -.resizable-editor__drag-handle { - position: absolute; - top: 0; - bottom: 0; - padding: 0; - margin: auto 0; - width: $grid-unit-15; - appearance: none; - cursor: ew-resize; - outline: none; - background: none; - border-radius: $radius-block-ui; - border: 0; - - &.is-variation-default { - height: 100px; - } - - &.is-variation-separator { - height: 100%; - width: $grid-unit-30; - right: 0; - - &::after { - width: 2px; - border-radius: 0; - background: transparent; - left: 50%; - transform: translateX(-1px); - right: 0; - transition: all ease 0.2s; - transition-delay: 0.1s; - @include reduce-motion; - } - } - - &::after { - position: absolute; - top: $grid-unit-20; - left: $grid-unit-05; - right: 0; - bottom: $grid-unit-20; - content: ""; - width: $grid-unit-05; - background-color: rgba($gray-700, 0.4); - border-radius: $radius-block-ui; - } - - &.is-left { - // Subtract half of the handle width to properly center. - left: -$grid-unit-20 - math.div($grid-unit-05, 2); - } - - &.is-right { - // Subtract half of the handle width to properly center. - right: -$grid-unit-20 - math.div($grid-unit-05, 2); - } - - &:hover, - &:focus, - &:active { - opacity: 1; - &::after { - background-color: var(--wp-admin-theme-color); - } - } - - &.is-variation-separator:focus::after { - border-radius: $radius-block-ui; - box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); - } } diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index 0e9f7c3086ad7f..ca5bc3a0b34f45 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -13,14 +13,18 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { closeSmall } from '@wordpress/icons'; import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; -import { store as editorStore } from '@wordpress/editor'; +import { + store as editorStore, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import ResizableEditor from '../block-editor/resizable-editor'; + +const { ResizableEditor } = unlock( editorPrivateApis ); /** * Returns a translated string for the title of the editor canvas container. @@ -120,25 +124,27 @@ function EditorCanvasContainer( { return ( <EditorCanvasContainerFill> - <ResizableEditor enableResizing={ enableResizing }> - { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } - <section - className="edit-site-editor-canvas-container" - ref={ shouldShowCloseButton ? focusOnMountRef : null } - onKeyDown={ closeOnEscape } - aria-label={ title } - > - { shouldShowCloseButton && ( - <Button - className="edit-site-editor-canvas-container__close-button" - icon={ closeSmall } - label={ closeButtonLabel || __( 'Close' ) } - onClick={ onCloseContainer } - /> - ) } - { childrenWithProps } - </section> - </ResizableEditor> + <div className="edit-site-editor-canvas-container"> + <ResizableEditor enableResizing={ enableResizing }> + { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } + <section + className="edit-site-editor-canvas-container__section" + ref={ shouldShowCloseButton ? focusOnMountRef : null } + onKeyDown={ closeOnEscape } + aria-label={ title } + > + { shouldShowCloseButton && ( + <Button + className="edit-site-editor-canvas-container__close-button" + icon={ closeSmall } + label={ closeButtonLabel || __( 'Close' ) } + onClick={ onCloseContainer } + /> + ) } + { childrenWithProps } + </section> + </ResizableEditor> + </div> </EditorCanvasContainerFill> ); } diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index acc0e0872f0b42..0aca5f8045ce8a 100644 --- a/packages/edit-site/src/components/editor-canvas-container/style.scss +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -1,4 +1,12 @@ .edit-site-editor-canvas-container { + height: 100%; + + .edit-site-layout.is-full-canvas & { + padding: $grid-unit-30 $grid-unit-30 0; + } +} + +.edit-site-editor-canvas-container__section { background: $white; // Fallback color, overridden by JavaScript. border-radius: $radius-block-ui; bottom: 0; diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 37f03fc4a1dab7..1fd0cb4262831d 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -20,7 +20,11 @@ import { useEffect, useRef, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { parse } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; -import { useMergeRefs } from '@wordpress/compose'; +import { + useMergeRefs, + useViewportMatch, + useResizeObserver, +} from '@wordpress/compose'; /** * Internal dependencies @@ -29,7 +33,14 @@ import PostTitle from '../post-title'; import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; import EditTemplateBlocksNotification from './edit-template-blocks-notification'; +import ResizableEditor from '../resizable-editor'; import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block'; +import { + NAVIGATION_POST_TYPE, + PATTERN_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../store/constants'; const { LayoutStyle, @@ -44,10 +55,10 @@ const { * and they don't apply the layout styles. */ const DESIGN_POST_TYPES = [ - 'wp_block', - 'wp_template', - 'wp_navigation', - 'wp_template_part', + PATTERN_POST_TYPE, + TEMPLATE_POST_TYPE, + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, ]; /** @@ -94,8 +105,9 @@ function EditorCanvas( { disableIframe = false, iframeProps, contentRef, - children, } ) { + const [ resizeObserver, sizes ] = useResizeObserver(); + const isMobileViewport = useViewportMatch( 'small', '<' ); const { renderingMode, postContentAttributes, @@ -103,8 +115,10 @@ function EditorCanvas( { wrapperBlockName, wrapperUniqueId, deviceType, - showEditorPadding, + isFocusedEntity, isDesignPostType, + postType, + isPreview, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -120,7 +134,7 @@ function EditorCanvas( { const _renderingMode = getRenderingMode(); let _wrapperBlockName; - if ( postTypeSlug === 'wp_block' ) { + if ( postTypeSlug === PATTERN_POST_TYPE ) { _wrapperBlockName = 'core/block'; } else if ( _renderingMode === 'post-only' ) { _wrapperBlockName = 'core/post-content'; @@ -128,13 +142,13 @@ function EditorCanvas( { const editorSettings = getEditorSettings(); const supportsTemplateMode = editorSettings.supportsTemplateMode; - const postType = getPostType( postTypeSlug ); + const postTypeObject = getPostType( postTypeSlug ); const canEditTemplate = canUser( 'create', 'templates' ); const currentTemplateId = getCurrentTemplateId(); const template = currentTemplateId ? getEditedEntityRecord( 'postType', - 'wp_template', + TEMPLATE_POST_TYPE, currentTemplateId ) : undefined; @@ -146,14 +160,17 @@ function EditorCanvas( { // Post template fetch returns a 404 on classic themes, which // messes with e2e tests, so check it's a block theme first. editedPostTemplate: - postType?.viewable && supportsTemplateMode && canEditTemplate + postTypeObject?.viewable && + supportsTemplateMode && + canEditTemplate ? template : undefined, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - showEditorPadding: - !! editorSettings.onNavigateToPreviousEntityRecord, + isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord, + postType: postTypeSlug, + isPreview: editorSettings.__unstableIsPreviewMode, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -293,7 +310,6 @@ function EditorCanvas( { blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel ? fallbackLayout : blockListLayout; - const observeTypingRef = useTypingObserver(); const titleRef = useRef(); useEffect( () => { @@ -330,102 +346,152 @@ function EditorCanvas( { } : {}; + const forceFullHeight = postType === NAVIGATION_POST_TYPE; + const enableResizing = + [ + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + PATTERN_POST_TYPE, + ].includes( postType ) && + // Disable in previews / view mode. + ! isPreview && + // Disable resizing in mobile viewport. + ! isMobileViewport && + // Dsiable resizing in zoomed-out mode. + ! isZoomOutMode; + + const iframeStyles = useMemo( () => { + return [ + ...styles, + { + css: `.is-root-container{display:flow-root;${ + // Some themes will have `min-height: 100vh` for the root container, + // which isn't a requirement in auto resize mode. + enableResizing ? 'min-height:0!important;' : '' + }}`, + }, + ]; + }, [ styles, enableResizing ] ); + return ( - <BlockCanvas - shouldIframe={ - ! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType ) - } - contentRef={ contentRef } - styles={ styles } - height="100%" - iframeProps={ { - className: clsx( 'editor-canvas__iframe', { - 'has-editor-padding': showEditorPadding, - } ), - ...iframeProps, - ...zoomOutProps, - style: { - ...iframeProps?.style, - ...deviceStyles, - }, - } } + <div + className={ clsx( 'editor-canvas', { + 'has-padding': isFocusedEntity || enableResizing, + 'is-resizable': enableResizing, + } ) } > - { themeSupportsLayout && - ! themeHasDisabledLayoutStyles && - renderingMode === 'post-only' && - ! isDesignPostType && ( - <> - <LayoutStyle - selector=".editor-editor-canvas__post-title-wrapper" - layout={ fallbackLayout } - /> - <LayoutStyle - selector=".block-editor-block-list__layout.is-root-container" - layout={ postEditorLayout } - /> - { align && <LayoutStyle css={ alignCSS } /> } - { postContentLayoutStyles && ( - <LayoutStyle - layout={ postContentLayout } - css={ postContentLayoutStyles } - /> - ) } - </> - ) } - { renderingMode === 'post-only' && ! isDesignPostType && ( - <div - className={ clsx( - 'editor-editor-canvas__post-title-wrapper', - // The following class is only here for backward comapatibility - // some themes might be using it to style the post title. - 'edit-post-visual-editor__post-title-wrapper', - { - 'has-global-padding': hasRootPaddingAwareAlignments, - } - ) } - contentEditable={ false } - ref={ observeTypingRef } - style={ { - // This is using inline styles - // so it's applied for both iframed and non iframed editors. - marginTop: '4rem', + <ResizableEditor + enableResizing={ enableResizing } + height={ + sizes.height && ! forceFullHeight ? sizes.height : '100%' + } + > + <BlockCanvas + shouldIframe={ + ! disableIframe || + [ 'Tablet', 'Mobile' ].includes( deviceType ) + } + contentRef={ contentRef } + styles={ iframeStyles } + height="100%" + iframeProps={ { + ...iframeProps, + ...zoomOutProps, + style: { + ...iframeProps?.style, + ...deviceStyles, + }, } } > - <PostTitle ref={ titleRef } /> - </div> - ) } - <RecursionProvider - blockName={ wrapperBlockName } - uniqueId={ wrapperUniqueId } - > - <BlockList - className={ clsx( - className, - 'is-' + deviceType.toLowerCase() + '-preview', - renderingMode !== 'post-only' || isDesignPostType - ? 'wp-site-blocks' - : `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules. + { themeSupportsLayout && + ! themeHasDisabledLayoutStyles && + renderingMode === 'post-only' && + ! isDesignPostType && ( + <> + <LayoutStyle + selector=".editor-editor-canvas__post-title-wrapper" + layout={ fallbackLayout } + /> + <LayoutStyle + selector=".block-editor-block-list__layout.is-root-container" + layout={ postEditorLayout } + /> + { align && <LayoutStyle css={ alignCSS } /> } + { postContentLayoutStyles && ( + <LayoutStyle + layout={ postContentLayout } + css={ postContentLayoutStyles } + /> + ) } + </> + ) } + { renderingMode === 'post-only' && ! isDesignPostType && ( + <div + className={ clsx( + 'editor-editor-canvas__post-title-wrapper', + // The following class is only here for backward comapatibility + // some themes might be using it to style the post title. + 'edit-post-visual-editor__post-title-wrapper', + { + 'has-global-padding': + hasRootPaddingAwareAlignments, + } + ) } + contentEditable={ false } + ref={ observeTypingRef } + style={ { + // This is using inline styles + // so it's applied for both iframed and non iframed editors. + marginTop: '4rem', + } } + > + <PostTitle ref={ titleRef } /> + </div> ) } - layout={ blockListLayout } - dropZoneElement={ - // When iframed, pass in the html element of the iframe to - // ensure the drop zone extends to the edges of the iframe. - disableIframe - ? localRef.current - : localRef.current?.parentNode - } - renderAppender={ renderAppender } - __unstableDisableDropZone={ - // In template preview mode, disable drop zones at the root of the template. - renderingMode === 'template-locked' ? true : false + <RecursionProvider + blockName={ wrapperBlockName } + uniqueId={ wrapperUniqueId } + > + <BlockList + className={ clsx( + className, + 'is-' + deviceType.toLowerCase() + '-preview', + renderingMode !== 'post-only' || + isDesignPostType + ? 'wp-site-blocks' + : `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules. + ) } + layout={ blockListLayout } + dropZoneElement={ + // When iframed, pass in the html element of the iframe to + // ensure the drop zone extends to the edges of the iframe. + disableIframe + ? localRef.current + : localRef.current?.parentNode + } + renderAppender={ renderAppender } + __unstableDisableDropZone={ + // In template preview mode, disable drop zones at the root of the template. + renderingMode === 'template-locked' + ? true + : false + } + /> + { renderingMode === 'template-locked' && ( + <EditTemplateBlocksNotification + contentRef={ localRef } + /> + ) } + </RecursionProvider> + { + // Avoid resize listeners when not needed, + // these will trigger unnecessary re-renders + // when animating the iframe width. + enableResizing && resizeObserver } - /> - { renderingMode === 'template-locked' && ( - <EditTemplateBlocksNotification contentRef={ localRef } /> - ) } - </RecursionProvider> - { children } - </BlockCanvas> + </BlockCanvas> + </ResizableEditor> + </div> ); } diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss new file mode 100644 index 00000000000000..3e9d12cc190247 --- /dev/null +++ b/packages/editor/src/components/editor-canvas/style.scss @@ -0,0 +1,11 @@ +.editor-canvas { + height: 100%; + + &.is-resizable { + max-height: 100%; + } + + &.has-padding { + padding: $grid-unit-30 $grid-unit-30 0; + } +} diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/editor/src/components/resizable-editor/index.js similarity index 88% rename from packages/edit-site/src/components/block-editor/resizable-editor.js rename to packages/editor/src/components/resizable-editor/index.js index eda5848cff2063..7d8e26049389a7 100644 --- a/packages/edit-site/src/components/block-editor/resizable-editor.js +++ b/packages/editor/src/components/resizable-editor/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + /** * WordPress dependencies */ @@ -22,7 +27,7 @@ const HANDLE_STYLES_OVERRIDE = { left: undefined, }; -function ResizableEditor( { enableResizing, height, children } ) { +function ResizableEditor( { className, enableResizing, height, children } ) { const [ width, setWidth ] = useState( '100%' ); const resizableRef = useRef(); const resizeWidthBy = useCallback( ( deltaPixels ) => { @@ -32,6 +37,9 @@ function ResizableEditor( { enableResizing, height, children } ) { }, [] ); return ( <ResizableBox + className={ clsx( 'editor-resizable-editor', className, { + 'is-resizable': enableResizing, + } ) } ref={ ( api ) => { resizableRef.current = api?.resizable; } } diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js similarity index 87% rename from packages/edit-site/src/components/block-editor/resize-handle.js rename to packages/editor/src/components/resizable-editor/resize-handle.js index 04198b2140fd2c..dbba31f6f998ba 100644 --- a/packages/edit-site/src/components/block-editor/resize-handle.js +++ b/packages/editor/src/components/resizable-editor/resize-handle.js @@ -11,11 +11,7 @@ import { const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels. -export default function ResizeHandle( { - variation = 'default', - direction, - resizeWidthBy, -} ) { +export default function ResizeHandle( { direction, resizeWidthBy } ) { function handleKeyDown( event ) { const { keyCode } = event; @@ -45,7 +41,7 @@ export default function ResizeHandle( { <> <Tooltip text={ __( 'Drag to resize' ) }> <motion.button - className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` } + className={ `editor-resizable-editor__resize-handle is-${ direction }` } aria-label={ __( 'Drag to resize' ) } aria-describedby={ resizableHandleHelpId } onKeyDown={ handleKeyDown } diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss new file mode 100644 index 00000000000000..91ff1144c4179b --- /dev/null +++ b/packages/editor/src/components/resizable-editor/style.scss @@ -0,0 +1,53 @@ +// To hide the horizontal scrollbar and show the drag handle on the +// left and right of the container. +.editor-resizable-editor.is-resizable { + overflow: visible; + margin: 0 auto; +} + +.editor-resizable-editor__resize-handle { + position: absolute; + top: 0; + bottom: 0; + padding: 0; + margin: auto 0; + width: $grid-unit-15; + appearance: none; + cursor: ew-resize; + outline: none; + background: none; + border-radius: $radius-block-ui; + border: 0; + height: 100px; + + &::after { + position: absolute; + top: $grid-unit-20; + left: $grid-unit-05; + right: 0; + bottom: $grid-unit-20; + content: ""; + width: $grid-unit-05; + background-color: rgba($gray-700, 0.4); + border-radius: $radius-block-ui; + } + + &.is-left { + // Subtract half of the handle width to properly center. + left: -$grid-unit-20 - math.div($grid-unit-05, 2); + } + + &.is-right { + // Subtract half of the handle width to properly center. + right: -$grid-unit-20 - math.div($grid-unit-05, 2); + } + + &:hover, + &:focus, + &:active { + opacity: 1; + &::after { + background-color: var(--wp-admin-theme-color); + } + } +} diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 41414743f9a6ba..ccfe6d4d61ebd1 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -29,6 +29,7 @@ import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; import SavePublishPanels from './components/save-publish-panels'; import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; +import ResizableEditor from './components/resizable-editor'; import Sidebar from './components/sidebar'; import { mergeBaseAndUserConfigs, @@ -61,6 +62,7 @@ lock( privateApis, { SavePublishPanels, PostContentInformation, PostLastEditedPanel, + ResizableEditor, Sidebar, // This is a temporary private API while we're updating the site editor to use EditorProvider. diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 793d83e54c5488..ccc5c4c4553fb3 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -8,6 +8,7 @@ @import "./components/document-bar/style.scss"; @import "./components/document-outline/style.scss"; @import "./components/document-tools/style.scss"; +@import "./components/editor-canvas/style.scss"; @import "./components/editor-notices/style.scss"; @import "./components/entities-saved-states/style.scss"; @import "./components/error-boundary/style.scss"; @@ -43,6 +44,7 @@ @import "./components/posts-per-page/style.scss"; @import "./components/post-trash/style.scss"; @import "./components/preview-dropdown/style.scss"; +@import "./components/resizable-editor/style.scss"; @import "./components/save-publish-panels/style.scss"; @import "./components/start-page-options/style.scss"; @import "./components/start-template-options/style.scss"; From fa98c1bf2da061435bb40cbae2897c71e7485cb8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Thu, 23 May 2024 17:46:04 +0100 Subject: [PATCH 53/94] Global Styles: Restore the default variation to the color and typography style tiles (#61901) * Global Styles: Restore the default variation to the color and typography style tiles * find the default variation with i18n Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> --- .../use-theme-style-variations-by-property.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index d14cd8f64b2ccd..2a914efc6ee526 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -160,8 +160,12 @@ export default function useThemeStyleVariationsByProperty( { cloneDeep( variation ), property ); + // Remove variations that are empty once the property is filtered out. - if ( Object.keys( variationFilteredByProperty ).length === 0 ) { + if ( + variation.title !== __( 'Default' ) && + Object.keys( variationFilteredByProperty ).length === 0 + ) { return accumulator; } From 5fbeee2b829d98e327d9a7444ccf94f99280b964 Mon Sep 17 00:00:00 2001 From: Dani Guardiola <hi@daniguardio.la> Date: Thu, 23 May 2024 18:59:29 +0200 Subject: [PATCH 54/94] Tabs: indicator animation (#60560) * Initial tab indicator animation implementation * Add changelog entry * Minor tweak * Fix downstream issues. * Use ResizeObserver. * Add width transition. * Simplify and use framer motion * vertical indicator * Revert to previous implementation. * Fix bug due to some animations breaking measurement of the tab element. * Abstracted and fixed all previous issues. * Follow naming convention for classes. * Support vertical orientation + misc fixes and improvements. * Clean up styles a bit. * Better focus ring animation + minor style cleanup. * Fix changelog (oops). * Actually fix changelog. * Remove deprecated `reduceMotion` utility. * Fix open/closed * Add vertical tabs story * Move ResizeObserver unobserve to effect cleanup * Remove outdated type cast. * Hide vertical indicator for now. Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../src/tabs/stories/index.story.tsx | 14 ++ packages/components/src/tabs/styles.ts | 77 +++++----- packages/components/src/tabs/tablist.tsx | 133 +++++++++++++++++- .../preferences-modal-tabs/style.scss | 9 +- 5 files changed, 192 insertions(+), 42 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8f0bb757903979..d957e31ed5fefe 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ ### Enhancements +- `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)). - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). ### Bug Fixes diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx index 558daf9143c25a..16f8ac956ccf75 100644 --- a/packages/components/src/tabs/stories/index.story.tsx +++ b/packages/components/src/tabs/stories/index.story.tsx @@ -68,6 +68,20 @@ const Template: StoryFn< typeof Tabs > = ( props ) => { export const Default = Template.bind( {} ); +const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => { + return ( + <Tabs orientation="vertical" { ...props }> + <Tabs.TabList style={ { maxWidth: '10rem' } }> + <Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab> + <Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab> + <Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab> + </Tabs.TabList> + </Tabs> + ); +}; + +export const Vertical = VerticalTemplate.bind( {} ); + const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => { return ( <Tabs { ...props }> diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index 6abca79aa51aed..ce575c9f317794 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -10,15 +10,49 @@ import * as Ariakit from '@ariakit/react'; */ import { COLORS } from '../utils'; import { space } from '../utils/space'; -import { reduceMotion } from '../utils/reduce-motion'; export const TabListWrapper = styled.div` + position: relative; display: flex; align-items: stretch; flex-direction: row; &[aria-orientation='vertical'] { flex-direction: column; } + @media not ( prefers-reduced-motion: reduce ) { + &.is-animation-enabled::after { + transition-property: left, top, width, height; + transition-duration: 0.2s; + transition-timing-function: ease-out; + } + } + &::after { + content: ''; + position: absolute; + pointer-events: none; + + // Windows high contrast mode. + outline: 2px solid transparent; + outline-offset: -1px; + } + &:not( [aria-orientation='vertical'] )::after { + left: var( --indicator-left ); + bottom: 0; + width: var( --indicator-width ); + height: 0; + border-bottom: var( --wp-admin-border-width-focus ) solid + ${ COLORS.theme.accent }; + } + &[aria-orientation='vertical']::after { + /* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */ + opacity: 0; + + right: 0; + top: var( --indicator-top ); + height: var( --indicator-height ); + border-right: var( --wp-admin-border-width-focus ) solid + ${ COLORS.theme.accent }; + } `; export const Tab = styled( Ariakit.Tab )` @@ -51,34 +85,6 @@ export const Tab = styled( Ariakit.Tab )` outline: none; } - // Tab indicator - &::after { - content: ''; - position: absolute; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - - // Draw the indicator. - background: ${ COLORS.theme.accent }; - height: calc( 0 * var( --wp-admin-border-width-focus ) ); - border-radius: 0; - - // Animation - transition: all 0.1s linear; - ${ reduceMotion( 'transition' ) }; - } - - // Active. - &[aria-selected='true']::after { - height: calc( 1 * var( --wp-admin-border-width-focus ) ); - - // Windows high contrast mode. - outline: 2px solid transparent; - outline-offset: -1px; - } - // Focus. &::before { content: ''; @@ -90,17 +96,20 @@ export const Tab = styled( Ariakit.Tab )` pointer-events: none; // Draw the indicator. - box-shadow: 0 0 0 0 transparent; + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) + ${ COLORS.theme.accent }; border-radius: 2px; // Animation - transition: all 0.1s linear; - ${ reduceMotion( 'transition' ) }; + opacity: 0; + + @media not ( prefers-reduced-motion ) { + transition: opacity 0.1s linear; + } } &:focus-visible::before { - box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) - ${ COLORS.theme.accent }; + opacity: 1; // Windows high contrast mode. outline: 2px solid transparent; diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index afa2d8283e6d6c..cbd4290f06bff2 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -8,7 +8,13 @@ import * as Ariakit from '@ariakit/react'; * WordPress dependencies */ import warning from '@wordpress/warning'; -import { forwardRef } from '@wordpress/element'; +import { + forwardRef, + useEffect, + useLayoutEffect, + useRef, + useState, +} from '@wordpress/element'; /** * Internal dependencies @@ -17,19 +23,121 @@ import type { TabListProps } from './types'; import { useTabsContext } from './context'; import { TabListWrapper } from './styles'; import type { WordPressComponentProps } from '../context'; +import clsx from 'clsx'; + +function useTrackElementOffset( + targetElement?: HTMLElement | null, + onUpdate?: () => void +) { + const [ indicatorPosition, setIndicatorPosition ] = useState( { + left: 0, + top: 0, + width: 0, + height: 0, + } ); + + // TODO: replace with useEventCallback or similar when officially available. + const updateCallbackRef = useRef( onUpdate ); + useLayoutEffect( () => { + updateCallbackRef.current = onUpdate; + } ); + + const observedElementRef = useRef< HTMLElement >(); + const resizeObserverRef = useRef< ResizeObserver >(); + useEffect( () => { + if ( targetElement === observedElementRef.current ) { + return; + } + + observedElementRef.current = targetElement ?? undefined; + + function updateIndicator( element: HTMLElement ) { + setIndicatorPosition( { + left: element.offsetLeft, + top: element.offsetTop, + width: element.offsetWidth, + height: element.offsetHeight, + } ); + updateCallbackRef.current?.(); + } + + // Set up a ResizeObserver. + if ( ! resizeObserverRef.current ) { + resizeObserverRef.current = new ResizeObserver( () => { + if ( observedElementRef.current ) { + updateIndicator( observedElementRef.current ); + } + } ); + } + const { current: resizeObserver } = resizeObserverRef; + + // Observe new element. + if ( targetElement ) { + updateIndicator( targetElement ); + resizeObserver.observe( targetElement ); + } + + return () => { + // Unobserve previous element. + if ( observedElementRef.current ) { + resizeObserver.unobserve( observedElementRef.current ); + } + }; + }, [ targetElement ] ); + + return indicatorPosition; +} + +type ValueUpdateContext< T > = { + previousValue: T; +}; + +function useOnValueUpdate< T >( + value: T, + onUpdate: ( context: ValueUpdateContext< T > ) => void +) { + const previousValueRef = useRef( value ); + + // TODO: replace with useEventCallback or similar when officially available. + const updateCallbackRef = useRef( onUpdate ); + useLayoutEffect( () => { + updateCallbackRef.current = onUpdate; + } ); + + useEffect( () => { + if ( previousValueRef.current !== value ) { + updateCallbackRef.current( { + previousValue: previousValueRef.current, + } ); + previousValueRef.current = value; + } + }, [ value ] ); +} export const TabList = forwardRef< HTMLDivElement, WordPressComponentProps< TabListProps, 'div', false > >( function TabList( { children, ...otherProps }, ref ) { const context = useTabsContext(); + + const selectedId = context?.store.useState( 'selectedId' ); + const indicatorPosition = useTrackElementOffset( + context?.store.item( selectedId )?.element + ); + + const [ animationEnabled, setAnimationEnabled ] = useState( false ); + useOnValueUpdate( + selectedId, + ( { previousValue } ) => previousValue && setAnimationEnabled( true ) + ); + if ( ! context ) { warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' ); return null; } const { store } = context; - const { selectedId, activeId, selectOnMove } = store.useState(); + const { activeId, selectOnMove } = store.useState(); const { setActiveId } = store; const onBlur = () => { @@ -50,9 +158,28 @@ export const TabList = forwardRef< <Ariakit.TabList ref={ ref } store={ store } - render={ <TabListWrapper /> } + render={ + <TabListWrapper + onTransitionEnd={ ( event ) => { + if ( event.pseudoElement === '::after' ) { + setAnimationEnabled( false ); + } + } } + /> + } onBlur={ onBlur } { ...otherProps } + style={ { + '--indicator-left': `${ indicatorPosition.left }px`, + '--indicator-top': `${ indicatorPosition.top }px`, + '--indicator-width': `${ indicatorPosition.width }px`, + '--indicator-height': `${ indicatorPosition.height }px`, + ...otherProps.style, + } } + className={ clsx( + animationEnabled ? 'is-animation-enabled' : '', + otherProps.className + ) } > { children } </Ariakit.TabList> diff --git a/packages/preferences/src/components/preferences-modal-tabs/style.scss b/packages/preferences/src/components/preferences-modal-tabs/style.scss index d3afd4174cd0cb..e20b9aa9064ed6 100644 --- a/packages/preferences/src/components/preferences-modal-tabs/style.scss +++ b/packages/preferences/src/components/preferences-modal-tabs/style.scss @@ -1,12 +1,15 @@ $vertical-tabs-width: 160px; .preferences__tabs-tablist { - position: absolute; + position: absolute !important; top: $header-height + $grid-unit-30; // Aligns button text instead of button box. left: $grid-unit-20; width: $vertical-tabs-width; + &::after { + content: none !important; + } } .preferences__tabs-tab { @@ -19,10 +22,6 @@ $vertical-tabs-width: 160px; font-weight: 500; } - &[aria-selected="true"]::after { - content: none; - } - &[role="tab"]:focus:not(:disabled) { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Windows high contrast mode. From de9a53a44464cb0fa8f9e8a0c8c0e76b0991142c Mon Sep 17 00:00:00 2001 From: Vipul Gupta <55375170+vipul0425@users.noreply.github.com> Date: Fri, 24 May 2024 03:04:09 +0530 Subject: [PATCH 55/94] `TabPanel`: Make the the focus styles consistent with `Tabs` (#61317) * fix: The focus styles for tabPanel. * Docs: Update the changelog. Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/tab-panel/style.scss | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d957e31ed5fefe..836732d8e1f061 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ ### Bug Fixes - `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)). +- `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)). ### Internal diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index a6b6189e6c204b..2855f8c2b06a01 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -81,3 +81,19 @@ outline: 2px solid transparent; } } + +.components-tab-panel__tab-content { + &:focus { + box-shadow: none; + outline: none; + } + + &:focus-visible { + border-radius: 2px; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; + + // Windows high contrast mode. + outline: 2px solid transparent; + outline-offset: 0; + } +} From f9df151ab91b74e2b787bba579275e3a258ab29d Mon Sep 17 00:00:00 2001 From: Ramon <ramonjd@users.noreply.github.com> Date: Fri, 24 May 2024 13:42:17 +1000 Subject: [PATCH 56/94] Global styles: (#61886) - remove Background image top-level navigation item - relocate background panel to sit next to Layout controls Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> --- .../src/components/global-styles/background-panel.js | 2 +- .../src/components/global-styles/root-menu.js | 12 ------------ .../src/components/global-styles/screen-layout.js | 11 +++++++++-- .../edit-site/src/components/global-styles/ui.js | 5 ----- 4 files changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js index 44a9fccaa15ed0..0ad74e0cd0bdd5 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -59,7 +59,7 @@ export default function BackgroundPanel() { value={ style } onChange={ setStyle } settings={ settings } - headerLabel={ __( 'Image' ) } + headerLabel={ __( 'Background' ) } defaultValues={ BACKGROUND_DEFAULT_VALUES } defaultControls={ defaultControls } themeFileURIs={ _links?.[ 'wp:theme-file' ] } diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js index 4959fc33c49733..6db4621299f1e2 100644 --- a/packages/edit-site/src/components/global-styles/root-menu.js +++ b/packages/edit-site/src/components/global-styles/root-menu.js @@ -6,7 +6,6 @@ import { typography, color, layout, - image, shadow as shadowIcon, } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; @@ -24,7 +23,6 @@ const { useHasColorPanel, useGlobalSetting, useSettingsForBlockElement, - useHasBackgroundPanel, } = unlock( blockEditorPrivateApis ); function RootMenu() { @@ -35,7 +33,6 @@ function RootMenu() { const hasShadowPanel = true; // useHasShadowPanel( settings ); const hasDimensionsPanel = useHasDimensionsPanel( settings ); const hasLayoutPanel = hasDimensionsPanel; - const hasBackgroundPanel = useHasBackgroundPanel( settings ); return ( <> @@ -76,15 +73,6 @@ function RootMenu() { { __( 'Layout' ) } </NavigationButtonAsItem> ) } - { hasBackgroundPanel && ( - <NavigationButtonAsItem - icon={ image } - path="/background" - aria-label={ __( 'Background image styles' ) } - > - { __( 'Background image' ) } - </NavigationButtonAsItem> - ) } </ItemGroup> </> ); diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js index e7794985b7984f..61c64b88f0e480 100644 --- a/packages/edit-site/src/components/global-styles/screen-layout.js +++ b/packages/edit-site/src/components/global-styles/screen-layout.js @@ -8,20 +8,27 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; * Internal dependencies */ import DimensionsPanel from './dimensions-panel'; +import BackgroundPanel from './background-panel'; import ScreenHeader from './header'; import { unlock } from '../../lock-unlock'; -const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } = - unlock( blockEditorPrivateApis ); +const { + useHasBackgroundPanel, + useHasDimensionsPanel, + useGlobalSetting, + useSettingsForBlockElement, +} = unlock( blockEditorPrivateApis ); function ScreenLayout() { const [ rawSettings ] = useGlobalSetting( '' ); const settings = useSettingsForBlockElement( rawSettings ); const hasDimensionsPanel = useHasDimensionsPanel( settings ); + const hasBackgroundPanel = useHasBackgroundPanel( settings ); return ( <> <ScreenHeader title={ __( 'Layout' ) } /> { hasDimensionsPanel && <DimensionsPanel /> } + { hasBackgroundPanel && <BackgroundPanel /> } </> ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index a8bb6eed9f86a0..3e306ba3232a04 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -41,7 +41,6 @@ import ScreenStyleVariations from './screen-style-variations'; import StyleBook from '../style-book'; import ScreenCSS from './screen-css'; import ScreenRevisions from './screen-revisions'; -import ScreenBackground from './screen-background'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; @@ -358,10 +357,6 @@ function GlobalStylesUI() { <ScreenRevisions /> </GlobalStylesNavigationScreen> - <GlobalStylesNavigationScreen path={ '/background' }> - <ScreenBackground /> - </GlobalStylesNavigationScreen> - { blocks.map( ( block ) => ( <GlobalStylesNavigationScreen key={ 'menu-block-' + block.name } From 6f0037c6accf4b932d607806a16d7e963a6de915 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Fri, 24 May 2024 08:40:40 +0200 Subject: [PATCH 57/94] Improve link conrol preview when show button text label is enabled. (#61726) * Improve link conrol preview when show button text label is enabled. * Reduce gap. * Remove right alignment. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> --- .../src/components/link-control/style.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 91428274a99140..c0cf8a3bc2afe9 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1; } .block-editor-link-control__search-item-top { - gap: $grid-unit-10; + gap: $grid-unit-05; + flex-wrap: wrap; .components-button.has-icon { - min-width: inherit; - width: min-content; + width: auto; + padding: $grid-unit-05; } } + + .is-preview .block-editor-link-control__search-item-header { + min-width: 100%; + margin-right: 0; + } } } From bf3720532a6d0d4759d474faf8ff8e3eda11b305 Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Fri, 24 May 2024 11:49:54 +0400 Subject: [PATCH 58/94] Skip flaky 'Zoom out' e2e test (#61925) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- test/e2e/specs/site-editor/zoom-out.spec.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 3fed2b49f8e4a6..53b777a2545a34 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -3,7 +3,10 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -test.describe( 'Zoom Out', () => { +// The test is flaky and fails almost consistently. +// See: https://github.com/WordPress/gutenberg/issues/61806. +// eslint-disable-next-line playwright/no-skipped-test +test.describe.skip( 'Zoom Out', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); From fcd3dc14ff45e003bc0f370ca4db38e230c3fff9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com> Date: Fri, 24 May 2024 10:17:38 +0200 Subject: [PATCH 59/94] Update 'Add template' screen to prefer template_name label instead of singular_name (#60367) Co-authored-by: Aljullu <aljullu@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org> --- .../src/components/add-new-template/utils.js | 116 ++++++++++++------ 1 file changed, 77 insertions(+), 39 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js index 9934d1c64307f1..1e544aeaadfe1b 100644 --- a/packages/edit-site/src/components/add-new-template/utils.js +++ b/packages/edit-site/src/components/add-new-template/utils.js @@ -100,7 +100,15 @@ const usePublicTaxonomies = () => { }, [ taxonomies ] ); }; -function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) { +export function usePostTypeArchiveMenuItems() { + const publicPostTypes = usePublicPostTypes(); + const postTypesWithArchives = useMemo( + () => publicPostTypes?.filter( ( postType ) => postType.has_archive ), + [ publicPostTypes ] + ); + const existingTemplates = useExistingTemplates(); + // We need to keep track of naming conflicts. If a conflict + // occurs, we need to add slug. const postTypeLabels = useMemo( () => publicPostTypes?.reduce( ( accumulator, { labels } ) => { @@ -111,25 +119,13 @@ function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) { }, {} ), [ publicPostTypes ] ); - return useCallback( + const needsUniqueIdentifier = useCallback( ( { labels, slug } ) => { const singularName = labels.singular_name.toLowerCase(); return postTypeLabels[ singularName ] > 1 && singularName !== slug; }, [ postTypeLabels ] ); -} - -export function usePostTypeArchiveMenuItems() { - const publicPostTypes = usePublicPostTypes(); - const postTypesWithArchives = useMemo( - () => publicPostTypes?.filter( ( postType ) => postType.has_archive ), - [ publicPostTypes ] - ); - const existingTemplates = useExistingTemplates(); - const needsUniqueIdentifier = usePostTypeNeedsUniqueIdentifier( - postTypesWithArchives - ); return useMemo( () => postTypesWithArchives @@ -184,8 +180,30 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => { const publicPostTypes = usePublicPostTypes(); const existingTemplates = useExistingTemplates(); const defaultTemplateTypes = useDefaultTemplateTypes(); - const needsUniqueIdentifier = - usePostTypeNeedsUniqueIdentifier( publicPostTypes ); + // We need to keep track of naming conflicts. If a conflict + // occurs, we need to add slug. + const templateLabels = useMemo( + () => + publicPostTypes?.reduce( ( accumulator, { labels } ) => { + const templateName = ( + labels.template_name || labels.singular_name + ).toLowerCase(); + accumulator[ templateName ] = + ( accumulator[ templateName ] || 0 ) + 1; + return accumulator; + }, {} ), + [ publicPostTypes ] + ); + const needsUniqueIdentifier = useCallback( + ( { labels, slug } ) => { + const templateName = ( + labels.template_name || labels.singular_name + ).toLowerCase(); + return templateLabels[ templateName ] > 1 && templateName !== slug; + }, + [ templateLabels ] + ); + // `page`is a special case in template hierarchy. const templatePrefixes = useMemo( () => @@ -216,18 +234,27 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => { const hasGeneralTemplate = existingTemplateSlugs?.includes( generalTemplateSlug ); const _needsUniqueIdentifier = needsUniqueIdentifier( postType ); - let menuItemTitle = sprintf( - // translators: %s: Name of the post type e.g: "Post". - __( 'Single item: %s' ), - labels.singular_name - ); - if ( _needsUniqueIdentifier ) { - menuItemTitle = sprintf( - // translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book". - __( 'Single item: %1$s (%2$s)' ), - labels.singular_name, - slug + let menuItemTitle = + labels.template_name || + sprintf( + // translators: %s: Name of the post type e.g: "Post". + __( 'Single item: %s' ), + labels.singular_name ); + if ( _needsUniqueIdentifier ) { + menuItemTitle = labels.template_name + ? sprintf( + // translators: %1s: Name of the template e.g: "Single Item: Post"; %2s: Slug of the post type e.g: "book". + __( '%1$s (%2$s)' ), + labels.template_name, + slug + ) + : sprintf( + // translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book". + __( 'Single item: %1$s (%2$s)' ), + labels.singular_name, + slug + ); } const menuItem = defaultTemplateType ? { @@ -337,9 +364,11 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => { // occurs, we need to add slug. const taxonomyLabels = publicTaxonomies?.reduce( ( accumulator, { labels } ) => { - const singularName = labels.singular_name.toLowerCase(); - accumulator[ singularName ] = - ( accumulator[ singularName ] || 0 ) + 1; + const templateName = ( + labels.template_name || labels.singular_name + ).toLowerCase(); + accumulator[ templateName ] = + ( accumulator[ templateName ] || 0 ) + 1; return accumulator; }, {} @@ -348,8 +377,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => { if ( [ 'category', 'post_tag' ].includes( slug ) ) { return false; } - const singularName = labels.singular_name.toLowerCase(); - return taxonomyLabels[ singularName ] > 1 && singularName !== slug; + const templateName = ( + labels.template_name || labels.singular_name + ).toLowerCase(); + return taxonomyLabels[ templateName ] > 1 && templateName !== slug; }; const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes ); const existingTemplateSlugs = ( existingTemplates || [] ).map( @@ -371,14 +402,21 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => { labels, slug ); - let menuItemTitle = labels.singular_name; + let menuItemTitle = labels.template_name || labels.singular_name; if ( _needsUniqueIdentifier ) { - menuItemTitle = sprintf( - // translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat". - __( '%1$s (%2$s)' ), - labels.singular_name, - slug - ); + menuItemTitle = labels.template_name + ? sprintf( + // translators: %1s: Name of the template e.g: "Products by Category"; %2s: Slug of the taxonomy e.g: "product_cat". + __( '%1$s (%2$s)' ), + labels.template_name, + slug + ) + : sprintf( + // translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat". + __( '%1$s (%2$s)' ), + labels.singular_name, + slug + ); } const menuItem = defaultTemplateType ? { From 39219858cd3e6471facff9868cec0eb06d468e2a Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Fri, 24 May 2024 09:21:29 +0100 Subject: [PATCH 60/94] Editor: Fix canvas padding in post editor (#61893) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- packages/block-editor/src/components/block-canvas/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 525c79be53504b..43176723195445 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -3,4 +3,5 @@ iframe[name="editor-canvas"] { height: 100%; display: block; background-color: $gray-300; + box-sizing: border-box; } From 13717c6d83b3548fc967f1006cffb09093e1faec Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Fri, 24 May 2024 09:23:29 +0100 Subject: [PATCH 61/94] Components: Fix React Warning triggers by the new JSX transform (#61917) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> --- .../block-editor/src/components/global-styles/color-panel.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index baa5a0779cfd05..04d295a0b0320d 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -209,7 +209,7 @@ function ColorPanelDropdown( { panelId, } ) { const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined ); - + const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {}; return ( <ToolsPanelItem className="block-editor-tools-panel-color-gradient-settings__item" @@ -251,7 +251,8 @@ function ColorPanelDropdown( { <div className="block-editor-panel-color-gradient-settings__dropdown-content"> { tabs.length === 1 && ( <ColorPanelTab - { ...tabs[ 0 ] } + key={ firstTabKey } + { ...firstTab } colorGradientControlSettings={ colorGradientControlSettings } From cbf29f60a51a410c60d430074ef84b48223e0f73 Mon Sep 17 00:00:00 2001 From: Daniel Richards <daniel.richards@automattic.com> Date: Fri, 24 May 2024 17:36:21 +0800 Subject: [PATCH 62/94] Avoid showing lock icons when a parent block has blockEditingMode set to contentOnly (#61922) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> --- packages/block-editor/src/store/selectors.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 176c15557c8386..1c685eb4230ba4 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1759,16 +1759,13 @@ export function canMoveBlock( state, clientId, rootClientId = null ) { if ( attributes === null ) { return true; } - if ( getBlockEditingMode( state, rootClientId ) !== 'default' ) { - return false; - } if ( attributes.lock?.move !== undefined ) { return ! attributes.lock.move; } if ( getTemplateLock( state, rootClientId ) === 'all' ) { return false; } - return true; + return getBlockEditingMode( state, rootClientId ) !== 'disabled'; } /** From 9922d6a7492d1cae1ddebd73b8ffed9fc3a45766 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Fri, 24 May 2024 10:39:13 +0100 Subject: [PATCH 63/94] Navigation Focus Mode: Remove leftover code (#61897) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> --- .../components/block-editor/editor-canvas.js | 35 ++----------------- .../src/components/block-editor/style.scss | 6 ---- .../src/components/editor-canvas/index.js | 4 --- 3 files changed, 2 insertions(+), 43 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 383125b1615de2..cdfb876eb5e05b 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -6,7 +6,6 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { ENTER, SPACE } from '@wordpress/keycodes'; import { useState, useEffect, useMemo } from '@wordpress/element'; @@ -21,32 +20,15 @@ import { */ import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import { - FOCUSABLE_ENTITIES, - NAVIGATION_POST_TYPE, -} from '../../utils/constants'; const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); function EditorCanvas( { settings, children } ) { - const { - hasBlocks, - isFocusMode, - templateType, - canvasMode, - currentPostIsTrashed, - } = useSelect( ( select ) => { - const { getBlockCount } = select( blockEditorStore ); - const { getEditedPostType, getCanvasMode } = unlock( - select( editSiteStore ) - ); - const _templateType = getEditedPostType(); + const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => { + const { getCanvasMode } = unlock( select( editSiteStore ) ); return { - templateType: _templateType, - isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ), canvasMode: getCanvasMode(), - hasBlocks: !! getBlockCount(), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === 'trash', @@ -92,15 +74,6 @@ function EditorCanvas( { settings, children } ) { }, readonly: true, }; - const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE; - const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode; - // Hide the appender when: - // - In navigation focus mode (should only allow the root Nav block). - // - In view mode (i.e. not editing). - const showBlockAppender = - ( isNavigationFocusMode && hasBlocks ) || canvasMode === 'view' - ? false - : undefined; const styles = useMemo( () => [ @@ -123,10 +96,6 @@ function EditorCanvas( { settings, children } ) { return ( <EditorCanvasRoot - className={ clsx( 'edit-site-editor-canvas__block-list', { - 'is-navigation-block': isTemplateTypeNavigation, - } ) } - renderAppender={ showBlockAppender } styles={ styles } iframeProps={ { className: clsx( 'edit-site-visual-editor__editor-canvas', { diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 801ccc78e396ca..2d2409a84a7a13 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -12,12 +12,6 @@ } } -// Navigation focus mode requires padding around the root Navigation block -// for presentational purposes. -.edit-site-editor-canvas__block-list.is-navigation-block { - padding: $grid-unit-30; -} - .edit-site-visual-editor { position: relative; height: 100%; diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 1fd0cb4262831d..dc13d72074895d 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -99,8 +99,6 @@ function checkForPostContentAtRootLevel( blocks ) { function EditorCanvas( { // Ideally as we unify post and site editors, we won't need these props. autoFocus, - className, - renderAppender, styles, disableIframe = false, iframeProps, @@ -454,7 +452,6 @@ function EditorCanvas( { > <BlockList className={ clsx( - className, 'is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' || isDesignPostType @@ -469,7 +466,6 @@ function EditorCanvas( { ? localRef.current : localRef.current?.parentNode } - renderAppender={ renderAppender } __unstableDisableDropZone={ // In template preview mode, disable drop zones at the root of the template. renderingMode === 'template-locked' From ae28b7be96d7f2abd52f714cfc743949244f25c6 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 24 May 2024 12:56:57 +0300 Subject: [PATCH 64/94] Block Editor: Fix ZoomOutModeInserters dependencies (#61908) Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> --- .../src/components/block-tools/zoom-out-mode-inserters.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index ca27fd8ad37857..4f718a552c5541 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -51,8 +51,7 @@ function ZoomOutModeInserters() { } // reset insertion point when the block order changes setInserterIsOpened( true ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ blockOrder ] ); + }, [ blockOrder, setInserterIsOpened ] ); // Defer the initial rendering to avoid the jumps due to the animation. useEffect( () => { From 92eeecb9281f1a4eead108b9088633f5d6b3d7b7 Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Fri, 24 May 2024 14:00:17 +0400 Subject: [PATCH 65/94] Components: Fix remaining warning in ColorPanelDropdown (#61933) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> --- .../src/components/global-styles/color-panel.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index 04d295a0b0320d..7b49ab453bb453 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -272,14 +272,17 @@ function ColorPanelDropdown( { </Tabs.TabList> { tabs.map( ( tab ) => { + const { key: tabKey, ...restTabProps } = + tab; return ( <Tabs.TabPanel - key={ tab.key } - tabId={ tab.key } + key={ tabKey } + tabId={ tabKey } focusable={ false } > <ColorPanelTab - { ...tab } + key={ tabKey } + { ...restTabProps } colorGradientControlSettings={ colorGradientControlSettings } From 9e07a753b98056d8b7d9cb9e4ee4eb97489a82bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= <grzegorz@gziolo.pl> Date: Fri, 24 May 2024 12:27:39 +0200 Subject: [PATCH 66/94] Packages: Increase the minimum required Node.js version to v18.12.0 (#61930) * Packages: Increase the minimum required Node.js version to v18.12.0 Node.js v18.12.0 was the first long-term supported version introduced in v18.x line (https://nodejs.org/en/blog/release/v18.12.0). It is now the lowest version that is listed as Maintenance LTS releas at https://nodejs.org/en/about/previous-releases. * Add changelog entries Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> --- package-lock.json | 307 ++++++++++++------ packages/a11y/CHANGELOG.md | 4 + packages/a11y/package.json | 3 +- packages/annotations/CHANGELOG.md | 4 + packages/annotations/package.json | 3 +- packages/api-fetch/CHANGELOG.md | 6 +- packages/api-fetch/package.json | 3 +- packages/autop/CHANGELOG.md | 4 + packages/autop/package.json | 3 +- .../CHANGELOG.md | 4 + .../babel-plugin-import-jsx-pragma/README.md | 2 +- .../package.json | 3 +- packages/babel-plugin-makepot/CHANGELOG.md | 4 + packages/babel-plugin-makepot/README.md | 2 +- packages/babel-plugin-makepot/package.json | 3 +- packages/babel-preset-default/CHANGELOG.md | 1 + packages/babel-preset-default/README.md | 2 +- packages/babel-preset-default/package.json | 3 +- packages/base-styles/CHANGELOG.md | 4 + packages/base-styles/package.json | 4 + packages/blob/CHANGELOG.md | 4 + packages/blob/package.json | 3 +- packages/block-directory/CHANGELOG.md | 4 + packages/block-directory/package.json | 3 +- packages/block-editor/CHANGELOG.md | 4 + packages/block-editor/package.json | 3 +- packages/block-library/CHANGELOG.md | 1 + packages/block-library/package.json | 3 +- .../CHANGELOG.md | 4 + .../package.json | 3 +- .../CHANGELOG.md | 4 + .../package.json | 3 +- packages/blocks/CHANGELOG.md | 1 + packages/blocks/package.json | 3 +- packages/browserslist-config/CHANGELOG.md | 4 + packages/browserslist-config/README.md | 2 +- packages/browserslist-config/package.json | 3 +- packages/commands/CHANGELOG.md | 4 + packages/commands/package.json | 3 +- packages/components/CHANGELOG.md | 3 +- packages/components/package.json | 3 +- packages/compose/CHANGELOG.md | 4 + packages/compose/package.json | 3 +- packages/core-commands/CHANGELOG.md | 6 +- packages/core-commands/package.json | 3 +- packages/core-data/CHANGELOG.md | 1 + packages/core-data/package.json | 3 +- .../CHANGELOG.md | 4 + .../package.json | 4 + .../CHANGELOG.md | 4 + .../package.json | 4 + packages/customize-widgets/CHANGELOG.md | 1 + packages/customize-widgets/package.json | 3 +- packages/data-controls/CHANGELOG.md | 4 + packages/data-controls/package.json | 3 +- packages/data/CHANGELOG.md | 14 +- packages/data/package.json | 3 +- packages/dataviews/CHANGELOG.md | 1 + packages/dataviews/package.json | 3 +- packages/date/CHANGELOG.md | 4 + packages/date/package.json | 3 +- .../CHANGELOG.md | 4 + .../README.md | 2 +- .../package.json | 3 +- packages/deprecated/CHANGELOG.md | 4 + packages/deprecated/package.json | 3 +- packages/docgen/CHANGELOG.md | 6 +- packages/docgen/README.md | 2 + packages/docgen/package.json | 4 + packages/dom-ready/CHANGELOG.md | 4 + packages/dom-ready/package.json | 3 +- packages/dom/CHANGELOG.md | 10 +- packages/dom/package.json | 3 +- .../e2e-test-utils-playwright/CHANGELOG.md | 6 +- packages/e2e-test-utils-playwright/README.md | 5 +- .../e2e-test-utils-playwright/package.json | 3 +- packages/e2e-test-utils/CHANGELOG.md | 12 +- packages/e2e-test-utils/README.md | 2 +- packages/e2e-test-utils/package.json | 3 +- packages/e2e-tests/CHANGELOG.md | 1 + packages/e2e-tests/README.md | 2 +- packages/e2e-tests/package.json | 3 +- packages/edit-post/CHANGELOG.md | 1 + packages/edit-post/package.json | 3 +- packages/edit-site/CHANGELOG.md | 1 + packages/edit-site/package.json | 3 +- packages/edit-widgets/CHANGELOG.md | 1 + packages/edit-widgets/package.json | 3 +- packages/editor/CHANGELOG.md | 1 + packages/editor/package.json | 3 +- packages/element/CHANGELOG.md | 6 +- packages/element/package.json | 3 +- packages/env/CHANGELOG.md | 6 +- packages/env/package.json | 4 + packages/escape-html/CHANGELOG.md | 4 + packages/escape-html/package.json | 3 +- packages/eslint-plugin/CHANGELOG.md | 1 + packages/eslint-plugin/README.md | 2 +- packages/eslint-plugin/package.json | 4 +- packages/format-library/CHANGELOG.md | 4 + packages/format-library/package.json | 3 +- packages/hooks/CHANGELOG.md | 4 + packages/hooks/package.json | 3 +- packages/html-entities/CHANGELOG.md | 4 + packages/html-entities/package.json | 3 +- packages/i18n/CHANGELOG.md | 6 +- packages/i18n/package.json | 3 +- packages/icons/CHANGELOG.md | 11 +- packages/icons/package.json | 3 +- packages/interactivity-router/CHANGELOG.md | 1 + packages/interactivity-router/package.json | 3 +- packages/interactivity/CHANGELOG.md | 1 + packages/interactivity/package.json | 3 +- packages/interface/CHANGELOG.md | 4 + packages/interface/package.json | 3 +- packages/is-shallow-equal/CHANGELOG.md | 4 + packages/is-shallow-equal/package.json | 3 +- packages/jest-console/CHANGELOG.md | 4 + packages/jest-console/README.md | 2 +- packages/jest-console/package.json | 3 +- packages/jest-preset-default/CHANGELOG.md | 1 + packages/jest-preset-default/README.md | 4 +- packages/jest-preset-default/package.json | 3 +- packages/jest-puppeteer-axe/CHANGELOG.md | 6 +- packages/jest-puppeteer-axe/README.md | 2 +- packages/jest-puppeteer-axe/package.json | 3 +- packages/keyboard-shortcuts/CHANGELOG.md | 4 + packages/keyboard-shortcuts/package.json | 3 +- packages/keycodes/CHANGELOG.md | 4 + packages/keycodes/package.json | 3 +- packages/lazy-import/CHANGELOG.md | 4 + packages/lazy-import/package.json | 3 +- packages/list-reusable-blocks/CHANGELOG.md | 4 + packages/list-reusable-blocks/package.json | 3 +- packages/media-utils/CHANGELOG.md | 4 + packages/media-utils/package.json | 3 +- packages/notices/CHANGELOG.md | 4 + packages/notices/package.json | 3 +- .../npm-package-json-lint-config/CHANGELOG.md | 4 + .../npm-package-json-lint-config/README.md | 2 +- .../npm-package-json-lint-config/package.json | 3 +- packages/nux/CHANGELOG.md | 4 + packages/nux/package.json | 3 +- packages/patterns/CHANGELOG.md | 4 + packages/patterns/package.json | 3 +- packages/plugins/CHANGELOG.md | 1 + packages/plugins/package.json | 3 +- packages/postcss-plugins-preset/CHANGELOG.md | 4 + packages/postcss-plugins-preset/README.md | 2 +- packages/postcss-plugins-preset/package.json | 3 +- packages/postcss-themes/CHANGELOG.md | 4 + packages/postcss-themes/README.md | 2 +- packages/postcss-themes/package.json | 3 +- packages/preferences-persistence/CHANGELOG.md | 4 + packages/preferences-persistence/package.json | 3 +- packages/preferences/CHANGELOG.md | 4 + packages/preferences/package.json | 3 +- packages/prettier-config/CHANGELOG.md | 4 + packages/prettier-config/README.md | 2 +- packages/prettier-config/package.json | 3 +- packages/primitives/CHANGELOG.md | 4 + packages/primitives/package.json | 3 +- packages/priority-queue/CHANGELOG.md | 6 +- packages/priority-queue/package.json | 3 +- packages/private-apis/CHANGELOG.md | 1 + packages/private-apis/package.json | 3 +- .../CHANGELOG.md | 4 + .../package.json | 4 + packages/react-i18n/CHANGELOG.md | 4 + packages/react-i18n/package.json | 3 +- packages/react-native-aztec/package.json | 4 + packages/react-native-bridge/package.json | 4 + packages/react-native-editor/package.json | 4 +- .../CHANGELOG.md | 4 + .../README.md | 2 +- .../package.json | 3 +- packages/redux-routine/CHANGELOG.md | 4 + packages/redux-routine/package.json | 3 +- packages/report-flaky-tests/package.json | 4 +- packages/reusable-blocks/CHANGELOG.md | 4 + packages/reusable-blocks/package.json | 3 +- packages/rich-text/CHANGELOG.md | 4 + packages/rich-text/package.json | 3 +- packages/router/CHANGELOG.md | 4 + packages/router/package.json | 3 +- packages/scripts/CHANGELOG.md | 1 + packages/scripts/README.md | 2 +- packages/scripts/package.json | 4 +- packages/server-side-render/CHANGELOG.md | 4 + packages/server-side-render/package.json | 3 +- packages/shortcode/CHANGELOG.md | 4 + packages/shortcode/package.json | 3 +- packages/style-engine/CHANGELOG.md | 10 + packages/style-engine/package.json | 3 +- packages/stylelint-config/CHANGELOG.md | 4 + packages/stylelint-config/README.md | 2 +- packages/stylelint-config/package.json | 3 +- packages/sync/CHANGELOG.md | 4 + packages/sync/package.json | 3 +- packages/token-list/CHANGELOG.md | 4 + packages/token-list/package.json | 3 +- packages/undo-manager/CHANGELOG.md | 5 +- packages/undo-manager/package.json | 3 +- packages/url/CHANGELOG.md | 4 + packages/url/package.json | 3 +- packages/viewport/CHANGELOG.md | 4 + packages/viewport/package.json | 3 +- packages/warning/CHANGELOG.md | 1 + packages/warning/package.json | 3 +- packages/widgets/CHANGELOG.md | 4 + packages/widgets/package.json | 4 + packages/wordcount/CHANGELOG.md | 4 + packages/wordcount/package.json | 3 +- 213 files changed, 799 insertions(+), 234 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc56a316a4f1f8..ea3f6db515dc1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53072,7 +53072,8 @@ "@wordpress/i18n": "file:../i18n" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/annotations": { @@ -53088,7 +53089,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53112,7 +53114,8 @@ "@wordpress/url": "file:../url" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/autop": { @@ -53123,7 +53126,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/babel-plugin-import-jsx-pragma": { @@ -53132,7 +53136,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@babel/core": "^7.12.9" @@ -53149,7 +53154,8 @@ "is-plain-object": "^5.0.0" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@babel/core": "^7.12.9" @@ -53174,14 +53180,19 @@ "react": "^18.3.0" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/base-styles": { "name": "@wordpress/base-styles", "version": "4.49.0", "dev": true, - "license": "GPL-2.0-or-later" + "license": "GPL-2.0-or-later", + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + } }, "packages/blob": { "name": "@wordpress/blob", @@ -53191,7 +53202,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/block-directory": { @@ -53222,7 +53234,8 @@ "change-case": "^4.1.2" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53282,7 +53295,8 @@ "remove-accents": "^0.5.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53392,7 +53406,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53415,7 +53430,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/block-serialization-spec-parser": { @@ -53427,7 +53443,8 @@ "phpegjs": "^1.0.0-beta7" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/blocks": { @@ -53464,7 +53481,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53489,7 +53507,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/commands": { @@ -53509,7 +53528,8 @@ "cmdk": "^0.2.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53570,7 +53590,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53627,7 +53648,8 @@ "use-memo-one": "^1.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53662,7 +53684,8 @@ "@wordpress/url": "file:../url" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53697,7 +53720,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53744,7 +53768,11 @@ "name": "@wordpress/create-block-tutorial-template", "version": "3.12.0", "dev": true, - "license": "GPL-2.0-or-later" + "license": "GPL-2.0-or-later", + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + } }, "packages/customize-widgets": { "name": "@wordpress/customize-widgets", @@ -53776,7 +53804,8 @@ "fast-deep-equal": "^3.1.3" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -53805,7 +53834,8 @@ "use-memo-one": "^1.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53822,7 +53852,8 @@ "@wordpress/deprecated": "file:../deprecated" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53848,7 +53879,8 @@ "remove-accents": "^0.5.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -53900,7 +53932,8 @@ "moment-timezone": "^0.5.40" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/dependency-extraction-webpack-plugin": { @@ -53912,7 +53945,8 @@ "json2php": "^0.0.7" }, "engines": { - "node": ">=18" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "webpack": "^5.0.0" @@ -53927,7 +53961,8 @@ "@wordpress/hooks": "file:../hooks" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/docgen": { @@ -53946,6 +53981,10 @@ }, "bin": { "docgen": "bin/cli.js" + }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/dom": { @@ -53957,7 +53996,8 @@ "@wordpress/deprecated": "file:../deprecated" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/dom-ready": { @@ -53968,7 +54008,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/e2e-test-utils": { @@ -53986,7 +54027,8 @@ "node-fetch": "^2.6.0" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "jest": ">=29", @@ -54010,7 +54052,8 @@ "web-vitals": "^3.5.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@playwright/test": ">=1" @@ -54037,7 +54080,8 @@ "uuid": "^9.0.1" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "jest": ">=29", @@ -54094,7 +54138,8 @@ "memize": "^2.1.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54156,7 +54201,8 @@ "react-autosize-textarea": "^7.1.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54198,7 +54244,8 @@ "clsx": "^2.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54255,7 +54302,8 @@ "remove-accents": "^0.5.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54277,7 +54325,8 @@ "react-dom": "^18.3.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/env": { @@ -54301,6 +54350,10 @@ }, "bin": { "wp-env": "bin/wp-env" + }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/env/node_modules/cliui": { @@ -54425,7 +54478,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/eslint-plugin": { @@ -54453,8 +54507,8 @@ "requireindex": "^1.2.0" }, "engines": { - "node": ">=14", - "npm": ">=6.14.4" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@babel/core": ">=7", @@ -54491,7 +54545,8 @@ "@wordpress/url": "file:../url" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54506,7 +54561,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/html-entities": { @@ -54517,7 +54573,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/i18n": { @@ -54536,7 +54593,8 @@ "pot-to-php": "tools/pot-to-php.js" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/icons": { @@ -54549,7 +54607,8 @@ "@wordpress/primitives": "file:../primitives" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/interactivity": { @@ -54562,7 +54621,8 @@ "preact": "^10.19.3" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/interactivity-router": { @@ -54573,7 +54633,8 @@ "@wordpress/interactivity": "file:../interactivity" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/interactivity/node_modules/@preact/signals": { @@ -54646,7 +54707,8 @@ "clsx": "^2.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54661,7 +54723,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/jest-console": { @@ -54674,7 +54737,8 @@ "jest-matcher-utils": "^29.6.2" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "jest": ">=29" @@ -54690,7 +54754,8 @@ "babel-jest": "^29.6.2" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@babel/core": ">=7", @@ -54707,7 +54772,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "jest": ">=29", @@ -54730,7 +54796,8 @@ "@wordpress/keycodes": "file:../keycodes" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -54745,7 +54812,8 @@ "@wordpress/i18n": "file:../i18n" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/lazy-import": { @@ -54759,7 +54827,8 @@ "semver": "^7.3.5" }, "engines": { - "npm": ">=6.9.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/list-reusable-blocks": { @@ -54777,7 +54846,8 @@ "change-case": "^4.1.2" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54796,7 +54866,8 @@ "@wordpress/i18n": "file:../i18n" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/notices": { @@ -54809,7 +54880,8 @@ "@wordpress/data": "file:../data" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -54821,7 +54893,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "npm-package-json-lint": ">=6.0.0" @@ -54842,7 +54915,8 @@ "@wordpress/icons": "file:../icons" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54871,7 +54945,8 @@ "@wordpress/url": "file:../url" }, "engines": { - "node": ">=16.0.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54893,7 +54968,8 @@ "memize": "^2.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54910,7 +54986,8 @@ "autoprefixer": "^10.2.5" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "postcss": "^8.0.0" @@ -54922,7 +54999,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "postcss": "^8.0.0" @@ -54946,7 +55024,8 @@ "clsx": "^2.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -54962,7 +55041,8 @@ "@wordpress/api-fetch": "file:../api-fetch" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/prettier-config": { @@ -54971,7 +55051,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "prettier": ">=3" @@ -54987,7 +55068,8 @@ "clsx": "^2.1.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/priority-queue": { @@ -54999,7 +55081,8 @@ "requestidlecallback": "^0.3.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/private-apis": { @@ -55010,7 +55093,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/project-management-automation": { @@ -55024,6 +55108,10 @@ "@babel/runtime": "^7.16.0", "@octokit/request-error": "^2.1.0", "@octokit/webhooks": "7.1.0" + }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/react-i18n": { @@ -55037,7 +55125,8 @@ "utility-types": "^3.10.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/react-native-aztec": { @@ -55048,6 +55137,10 @@ "@wordpress/element": "file:../element", "@wordpress/keycodes": "file:../keycodes" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "peerDependencies": { "react": "*", "react-native": "*" @@ -55060,6 +55153,10 @@ "dependencies": { "@wordpress/react-native-aztec": "file:../react-native-aztec" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "peerDependencies": { "react-native": "*" } @@ -55114,8 +55211,8 @@ "react-native-webview": "13.6.1" }, "engines": { - "node": ">=12", - "npm": ">=6.9" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/react-native-editor/node_modules/buffer": { @@ -55179,7 +55276,8 @@ "dev": true, "license": "GPL-2.0-or-later", "engines": { - "node": ">=14.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "webpack": "^4.8.3 || ^5.0.0" @@ -55196,7 +55294,8 @@ "rungen": "^0.3.2" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "redux": ">=4" @@ -55213,8 +55312,8 @@ "jest-message-util": "^29.6.2" }, "engines": { - "node": ">=14", - "npm": ">=6.9" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/report-flaky-tests/node_modules/@actions/github": { @@ -55248,7 +55347,8 @@ "@wordpress/url": "file:../url" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -55272,7 +55372,8 @@ "memize": "^2.1.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -55290,7 +55391,8 @@ "history": "^5.3.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -55365,8 +55467,8 @@ "wp-scripts": "bin/wp-scripts.js" }, "engines": { - "node": ">=18", - "npm": ">=6.14.4" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "@playwright/test": "^1.43.0", @@ -55700,7 +55802,8 @@ "fast-deep-equal": "^3.1.3" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0", @@ -55716,7 +55819,8 @@ "memize": "^2.0.1" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/style-engine": { @@ -55728,7 +55832,8 @@ "change-case": "^4.1.2" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/stylelint-config": { @@ -55741,7 +55846,8 @@ "stylelint-config-recommended-scss": "^5.0.2" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "stylelint": "^14.2" @@ -55764,7 +55870,8 @@ "yjs": "~13.6.6" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/token-list": { @@ -55775,7 +55882,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/undo-manager": { @@ -55787,7 +55895,8 @@ "@wordpress/is-shallow-equal": "file:../is-shallow-equal" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/url": { @@ -55799,7 +55908,8 @@ "remove-accents": "^0.5.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/viewport": { @@ -55813,7 +55923,8 @@ "@wordpress/element": "file:../element" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "peerDependencies": { "react": "^18.0.0" @@ -55824,7 +55935,8 @@ "version": "2.58.0", "license": "GPL-2.0-or-later", "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } }, "packages/widgets": { @@ -55846,6 +55958,10 @@ "@wordpress/notices": "file:../notices", "clsx": "^2.1.1" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" @@ -55859,7 +55975,8 @@ "@babel/runtime": "^7.16.0" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" } } }, diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index e2ac2e9155c479..eec8afdfb64264 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 83d7626dbaf1fc..6417a952a1a4dd 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md index a29a5af3b1bb23..def463f303f71c 100644 --- a/packages/annotations/CHANGELOG.md +++ b/packages/annotations/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 2.58.0 (2024-05-16) ## 2.57.0 (2024-05-02) diff --git a/packages/annotations/package.json b/packages/annotations/package.json index 1fbcac83cdd93f..f8a217f3c29379 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md index ab041b60f1b931..51d540327cbab8 100644 --- a/packages/api-fetch/CHANGELOG.md +++ b/packages/api-fetch/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.55.0 (2024-05-16) ## 6.54.0 (2024-05-02) @@ -116,7 +120,7 @@ ### Breaking changes - `OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`. +`OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`. ## 5.2.5 (2021-11-07) diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json index df9f56f364de9d..e6f1630514ddd6 100644 --- a/packages/api-fetch/package.json +++ b/packages/api-fetch/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md index 0b1bfa359d3c1c..7b9ffaa3059c3e 100644 --- a/packages/autop/CHANGELOG.md +++ b/packages/autop/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/autop/package.json b/packages/autop/package.json index b5a86da75b9a6d..db6aab5dd017f6 100644 --- a/packages/autop/package.json +++ b/packages/autop/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md index 6d90bdb76ed7d3..eeb17e2c6aa8b2 100644 --- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md +++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.41.0 (2024-05-16) ## 4.40.0 (2024-05-02) diff --git a/packages/babel-plugin-import-jsx-pragma/README.md b/packages/babel-plugin-import-jsx-pragma/README.md index eb252d501290b7..ebc260277b21ab 100644 --- a/packages/babel-plugin-import-jsx-pragma/README.md +++ b/packages/babel-plugin-import-jsx-pragma/README.md @@ -14,7 +14,7 @@ Install the module to your project using [npm](https://www.npmjs.com/). npm install @wordpress/babel-plugin-import-jsx-pragma ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json index 43bed33e547c9b..736e003fc524ea 100644 --- a/packages/babel-plugin-import-jsx-pragma/package.json +++ b/packages/babel-plugin-import-jsx-pragma/package.json @@ -24,7 +24,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md index f07a220cd79e93..95f4e724c4fd2f 100644 --- a/packages/babel-plugin-makepot/CHANGELOG.md +++ b/packages/babel-plugin-makepot/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.42.0 (2024-05-16) ## 5.41.0 (2024-05-02) diff --git a/packages/babel-plugin-makepot/README.md b/packages/babel-plugin-makepot/README.md index 95f52e55d28f52..3824731e72d848 100644 --- a/packages/babel-plugin-makepot/README.md +++ b/packages/babel-plugin-makepot/README.md @@ -21,7 +21,7 @@ Install the module: npm install @wordpress/babel-plugin-makepot --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Contributing to this package diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json index ed014d8d52e52e..e873958ae19f5b 100644 --- a/packages/babel-plugin-makepot/package.json +++ b/packages/babel-plugin-makepot/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 15ced9c9dde12c..be6a8e7a8ff9b7 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 7.42.0 (2024-05-16) diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md index ff98eb4e526e7f..945e1137a328f4 100644 --- a/packages/babel-preset-default/README.md +++ b/packages/babel-preset-default/README.md @@ -12,7 +12,7 @@ Install the module npm install @wordpress/babel-preset-default --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ### Usage diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index 438cce0f47b96b..8f9c9cf9ffc383 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 7fcf25b33253b2..f4e197d1839896 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.49.0 (2024-05-16) ## 4.48.0 (2024-05-02) diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 9af0dafb6ed5a2..1aa6ce31907bc3 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -20,6 +20,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "publishConfig": { "access": "public" } diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md index beb4389a2cfe20..99e2fe11fd7493 100644 --- a/packages/blob/CHANGELOG.md +++ b/packages/blob/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/blob/package.json b/packages/blob/package.json index 56f3296eb4b3e2..0271affb58d963 100644 --- a/packages/blob/package.json +++ b/packages/blob/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index 36a61b02938be0..7435a67f225916 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 28ce721fa10d3b..46bc869c3c55e6 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index f854cdd1b3aa5d..27d024a5e561f5 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 12.26.0 (2024-05-16) ### Internal diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 25d4aa782da29b..cad39359f1c617 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index ee42f9653ad8ad..efdcdce83503d1 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 8.35.0 (2024-05-16) diff --git a/packages/block-library/package.json b/packages/block-library/package.json index c5aa6fbb99992e..68372ad2a98f79 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md index ac9330ed7a3b1f..a46ea5d2d7116d 100644 --- a/packages/block-serialization-default-parser/CHANGELOG.md +++ b/packages/block-serialization-default-parser/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json index 95ec976756489c..123fff2580df4b 100644 --- a/packages/block-serialization-default-parser/package.json +++ b/packages/block-serialization-default-parser/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md index 7b4ff81fd925fc..f1ef290055f909 100644 --- a/packages/block-serialization-spec-parser/CHANGELOG.md +++ b/packages/block-serialization-spec-parser/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json index 7bb23f4bf291ff..572cbe6aa95b74 100644 --- a/packages/block-serialization-spec-parser/package.json +++ b/packages/block-serialization-spec-parser/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "parser.js", "sideEffects": false, diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index db9afca0d285a7..46f41ad0b6bbb9 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 12.35.0 (2024-05-16) diff --git a/packages/blocks/package.json b/packages/blocks/package.json index e783b5da04318c..7e1efc8cfeb16f 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md index 67ba56321abbc4..51aa52e81c2b44 100644 --- a/packages/browserslist-config/CHANGELOG.md +++ b/packages/browserslist-config/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.41.0 (2024-05-16) ## 5.40.0 (2024-05-02) diff --git a/packages/browserslist-config/README.md b/packages/browserslist-config/README.md index 0ab8e724947d7a..2376c8332a2b81 100644 --- a/packages/browserslist-config/README.md +++ b/packages/browserslist-config/README.md @@ -10,7 +10,7 @@ Install the module $ npm install browserslist @wordpress/browserslist-config --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json index 1795bc91bbc92a..e78bf84269cb31 100644 --- a/packages/browserslist-config/package.json +++ b/packages/browserslist-config/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index 53feb34d45faac..a9f5a293061827 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.29.0 (2024-05-16) ### Internal diff --git a/packages/commands/package.json b/packages/commands/package.json index be0ce7d7b7e989..fc89c6dd2508c2 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 836732d8e1f061..3d5b0d9dfe1f35 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ### Enhancements @@ -32,7 +33,7 @@ ### Enhancements -- `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507]((https://github.com/WordPress/gutenberg/pull/60607)). +- `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507](<(https://github.com/WordPress/gutenberg/pull/60607)>). - `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)). - `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)). - `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)). diff --git a/packages/components/package.json b/packages/components/package.json index e13a600c34feb3..79b01e5f020ee9 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 25526f536a4e58..3ebf8f4b32e33b 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.35.0 (2024-05-16) ## 6.34.0 (2024-05-02) diff --git a/packages/compose/package.json b/packages/compose/package.json index b1cf8250f1ff20..0a3308e7adb0ac 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md index f645ce35258aae..528201ee2c5664 100644 --- a/packages/core-commands/CHANGELOG.md +++ b/packages/core-commands/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.27.0 (2024-05-16) ## 0.26.0 (2024-05-02) @@ -54,4 +58,4 @@ ## 0.2.0 (2023-05-10) -Initial release. \ No newline at end of file +Initial release. diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json index 70b3ce18ec9637..3efea9abf58e48 100644 --- a/packages/core-commands/package.json +++ b/packages/core-commands/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md index 348e1e7ea0e782..bce1d9e9d520bf 100644 --- a/packages/core-data/CHANGELOG.md +++ b/packages/core-data/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 6.35.0 (2024-05-16) diff --git a/packages/core-data/package.json b/packages/core-data/package.json index bbfc0712dd1899..ac77ad911becbe 100644 --- a/packages/core-data/package.json +++ b/packages/core-data/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md index a220dcf8f90294..a3e1cba44c0881 100644 --- a/packages/create-block-interactive-template/CHANGELOG.md +++ b/packages/create-block-interactive-template/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.21.0 (2024-05-16) ## 1.20.0 (2024-05-02) diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json index a1306987f21b3a..337b950b0ac499 100644 --- a/packages/create-block-interactive-template/package.json +++ b/packages/create-block-interactive-template/package.json @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "publishConfig": { "access": "public" } diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md index 63091030fe4e4b..125c54356e63bd 100644 --- a/packages/create-block-tutorial-template/CHANGELOG.md +++ b/packages/create-block-tutorial-template/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.12.0 (2024-05-16) ## 3.11.0 (2024-05-02) diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json index 929fac1da68192..e03355e6e6a2a4 100644 --- a/packages/create-block-tutorial-template/package.json +++ b/packages/create-block-tutorial-template/package.json @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "publishConfig": { "access": "public" } diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md index d6f184afe97366..499363d1920ef2 100644 --- a/packages/customize-widgets/CHANGELOG.md +++ b/packages/customize-widgets/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 4.35.0 (2024-05-16) diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json index 0028720426dd8b..c3fe2dbd5e0bbf 100644 --- a/packages/customize-widgets/package.json +++ b/packages/customize-widgets/package.json @@ -17,7 +17,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md index d6c96a3f4a0a01..f90608d4d8c0cd 100644 --- a/packages/data-controls/CHANGELOG.md +++ b/packages/data-controls/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.27.0 (2024-05-16) ## 3.26.0 (2024-05-02) diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json index 09b4e93f822cb4..f4e1f9beda2a98 100644 --- a/packages/data-controls/package.json +++ b/packages/data-controls/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md index 26b545dbaea379..200d37efa904d9 100644 --- a/packages/data/CHANGELOG.md +++ b/packages/data/CHANGELOG.md @@ -2,19 +2,23 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 9.28.0 (2024-05-16) ## 9.27.0 (2024-05-02) ## 9.26.0 (2024-04-19) -- Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)). +- Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)). ## 9.25.0 (2024-04-03) ## 9.24.0 (2024-03-21) -- Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)). +- Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)). ## 9.23.0 (2024-03-06) @@ -40,13 +44,13 @@ ### Bug Fix -- Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)). +- Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)). ## 9.13.0 (2023-10-05) ### Enhancements -- Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)). +- Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)). ## 9.12.0 (2023-09-20) @@ -56,7 +60,7 @@ ### Enhancements -- Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)). +- Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)). ## 9.9.0 (2023-08-10) diff --git a/packages/data/package.json b/packages/data/package.json index 5cd8558e3d1003..b289f599fad018 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index ba4cd177561df3..cba3c4f9c8cb26 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 1.2.0 (2024-05-16) diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 96003e94e8c08c..9fa8ea0c910c5a 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md index 81d762502bb078..0bdf48871145b6 100644 --- a/packages/date/CHANGELOG.md +++ b/packages/date/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) diff --git a/packages/date/package.json b/packages/date/package.json index ca2c1e1e32b9a4..a3790d910e3b2d 100644 --- a/packages/date/package.json +++ b/packages/date/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md index c32bc1bb59d22a..27d099308df2ad 100644 --- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md +++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.9.0 (2024-05-16) ## 5.8.0 (2024-05-02) diff --git a/packages/dependency-extraction-webpack-plugin/README.md b/packages/dependency-extraction-webpack-plugin/README.md index 168fb1cfab69d6..9e6b183672f86d 100644 --- a/packages/dependency-extraction-webpack-plugin/README.md +++ b/packages/dependency-extraction-webpack-plugin/README.md @@ -21,7 +21,7 @@ Install the module npm install @wordpress/dependency-extraction-webpack-plugin --save-dev ``` -**Note**: This package requires Node.js 18.0.0 or later. It also requires webpack 5.0.0 or newer. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It also requires webpack 5.0.0 or newer. It is not compatible with older versions. ## Usage diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json index 504dced33a7a24..3ee7f0bdb7deac 100644 --- a/packages/dependency-extraction-webpack-plugin/package.json +++ b/packages/dependency-extraction-webpack-plugin/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=18" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "lib", diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md index d37b4083761496..a38f511de523dc 100644 --- a/packages/deprecated/CHANGELOG.md +++ b/packages/deprecated/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json index 1cab7cc0daa34d..656787a875e66b 100644 --- a/packages/deprecated/package.json +++ b/packages/deprecated/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md index 00864ed655e207..492b7035e959c5 100644 --- a/packages/docgen/CHANGELOG.md +++ b/packages/docgen/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.67.0 (2024-05-16) ## 1.66.0 (2024-05-02) @@ -88,7 +92,7 @@ ### Bug Fixes -- Fix getting param annotations for default exported functions. ([#31603](https://github.com/WordPress/gutenberg/pull/31603)) +- Fix getting param annotations for default exported functions. ([#31603](https://github.com/WordPress/gutenberg/pull/31603)) ## 1.17.0 (2021-04-29) diff --git a/packages/docgen/README.md b/packages/docgen/README.md index f54cd6b9e5773d..4f60d0a3c7a26a 100644 --- a/packages/docgen/README.md +++ b/packages/docgen/README.md @@ -16,6 +16,8 @@ Install the module npm install @wordpress/docgen --save-dev ``` +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. + ## Usage ```bash diff --git a/packages/docgen/package.json b/packages/docgen/package.json index 53a6a0fe645d50..0582121d16d74b 100644 --- a/packages/docgen/package.json +++ b/packages/docgen/package.json @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "files": [ "bin", "lib" diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md index 21df27474119d8..67d4e465a65edc 100644 --- a/packages/dom-ready/CHANGELOG.md +++ b/packages/dom-ready/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json index c0b77932a633ed..54f4842c2d93e2 100644 --- a/packages/dom-ready/package.json +++ b/packages/dom-ready/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md index d8df8412944f9f..dc504c46551367 100644 --- a/packages/dom/CHANGELOG.md +++ b/packages/dom/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) @@ -10,7 +14,7 @@ ## 3.55.0 (2024-04-03) -- fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`. +- fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`. ## 3.54.0 (2024-03-21) @@ -94,7 +98,7 @@ ## 3.14.0 (2022-07-27) -- `getRectangleFromRange` may now return `null`. +- `getRectangleFromRange` may now return `null`. ## 3.13.0 (2022-07-13) @@ -108,7 +112,7 @@ ### Deprecation -- Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)). +- Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)). ## 3.8.0 (2022-05-04) diff --git a/packages/dom/package.json b/packages/dom/package.json index 401a70d31a4339..9b8c0b8ded4ae1 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md index 6cbfad24f34df7..f327489308b648 100644 --- a/packages/e2e-test-utils-playwright/CHANGELOG.md +++ b/packages/e2e-test-utils-playwright/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.26.0 (2024-05-16) ## 0.25.0 (2024-05-02) @@ -54,4 +58,4 @@ ## 0.1.0 (2023-05-10) -- Initial version of the package. +- Initial version of the package. diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md index d03a6ced191f96..883bd87fb9c3c6 100644 --- a/packages/e2e-test-utils-playwright/README.md +++ b/packages/e2e-test-utils-playwright/README.md @@ -16,7 +16,7 @@ Install the module npm install @wordpress/e2e-test-utils-playwright --save-dev ``` -**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## API @@ -42,6 +42,7 @@ await admin.visitAdminPage( 'options-general.php' ); End to end test utilities for the WordPress Block Editor. To use these utilities, instantiate them within each test file: + ```js test.use( { editor: async ( { page }, use ) => { @@ -53,7 +54,7 @@ test.use( { Within a test or test utility, use the `canvas` property to select elements within the iframe canvas: ```js -await editor.canvas.locator( 'role=document[name="Paragraph block"i]' ) +await editor.canvas.locator( 'role=document[name="Paragraph block"i]' ); ``` ### PageUtils diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json index 730c7121460ce2..5cee2f8ee1b30d 100644 --- a/packages/e2e-test-utils-playwright/package.json +++ b/packages/e2e-test-utils-playwright/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md index a309906a8b0203..cb853af4cdb213 100644 --- a/packages/e2e-test-utils/CHANGELOG.md +++ b/packages/e2e-test-utils/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 10.29.0 (2024-05-16) ## 10.28.0 (2024-05-02) @@ -38,9 +42,9 @@ ### Enhancement -- Update promise order in `loginUser` to avoid any flakiness in the tests. -- Update `activateTheme` to redirect to `themes.php` after theme activation, if theme redirects to some other page. -- Update `activatePlugin` to redirect to `plugins.php` after plugin activation, if plugin redirects to some other page. +- Update promise order in `loginUser` to avoid any flakiness in the tests. +- Update `activateTheme` to redirect to `themes.php` after theme activation, if theme redirects to some other page. +- Update `activatePlugin` to redirect to `plugins.php` after plugin activation, if plugin redirects to some other page. ## 10.12.0 (2023-08-31) @@ -70,7 +74,7 @@ ### Breaking Changes -- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) +- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) ## 9.5.0 (2023-03-01) diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index bce7c84d73716d..196768b0e2487c 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -14,7 +14,7 @@ Install the module npm install @wordpress/e2e-test-utils --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## API diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json index 4fb38e6e8c8b84..1faa1848272ab2 100644 --- a/packages/e2e-test-utils/package.json +++ b/packages/e2e-test-utils/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md index 95cbb721932d5e..c377e0db8a79fc 100644 --- a/packages/e2e-tests/CHANGELOG.md +++ b/packages/e2e-tests/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 7.29.0 (2024-05-16) diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md index 8629700263ebe7..75283a3d9ecc82 100644 --- a/packages/e2e-tests/README.md +++ b/packages/e2e-tests/README.md @@ -80,7 +80,7 @@ Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools. -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Contributing to this package diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json index 55672505f3d115..d678f568a92a5d 100644 --- a/packages/e2e-tests/package.json +++ b/packages/e2e-tests/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "dependencies": { "@wordpress/e2e-test-utils": "file:../e2e-test-utils", diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index 763952b71ab604..7e6b861f8183ba 100644 --- a/packages/edit-post/CHANGELOG.md +++ b/packages/edit-post/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 7.35.0 (2024-05-16) diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index e2449021e951f4..1c45301173d24d 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index 3437c7c35fd9c4..0997d17e849ede 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 5.35.0 (2024-05-16) diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index a8b12bdd15b61e..5336726300a5cd 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md index 1c76fff573a054..df05e7281b7f21 100644 --- a/packages/edit-widgets/CHANGELOG.md +++ b/packages/edit-widgets/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 5.35.0 (2024-05-16) diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index 90181fef8bcd9d..1d48948f81f77d 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index b33b049d245a4c..7fb4b4ecf3196f 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 13.35.0 (2024-05-16) diff --git a/packages/editor/package.json b/packages/editor/package.json index 7dba536e425dc4..d6d5731ebbc1fd 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index d5acd25fc60834..9be466cfa8a13b 100644 --- a/packages/element/CHANGELOG.md +++ b/packages/element/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.35.0 (2024-05-16) ## 5.34.0 (2024-05-02) @@ -136,7 +140,7 @@ ### Bug Fix -- Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)). +- Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)). ## 4.1.0 (2022-01-27) diff --git a/packages/element/package.json b/packages/element/package.json index 819b530bb70b94..2a66b1201f5d2f 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 837c42f6d7d21e..4da081b51eb713 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 9.10.0 (2024-05-16) ## 9.9.0 (2024-05-02) @@ -30,7 +34,7 @@ ### Breaking Change -- Update Docker usage to `docker compose` V2 following [deprecation](https://docs.docker.com/compose/migrate/) of `docker-compose` V1. +- Update Docker usage to `docker compose` V2 following [deprecation](https://docs.docker.com/compose/migrate/) of `docker-compose` V1. ## 8.13.0 (2023-11-29) diff --git a/packages/env/package.json b/packages/env/package.json index 76dbc9b26d1153..9604ededadca45 100644 --- a/packages/env/package.json +++ b/packages/env/package.json @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "directories": { "lib": "lib", "test": "tests" diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md index 6f6705c817b9bd..9917b2eeadff4b 100644 --- a/packages/escape-html/CHANGELOG.md +++ b/packages/escape-html/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 2.58.0 (2024-05-16) ## 2.57.0 (2024-05-02) diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json index 2b6b1d1cca07ee..318bf847b8d292 100644 --- a/packages/escape-html/package.json +++ b/packages/escape-html/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 682fac4e8f1f03..6d3791ba7c7a6a 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -7,6 +7,7 @@ - `@wordpress/is-gutenberg-plugin` rule has been replaced by `@wordpress/wp-global-usage` ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). - `@wordpress/wp-process-env` rule has been added and included in the recommended configurations ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). - `@wordpress/gutenberg-phase` rule has been removed (deprecated in v10.0.0) ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 18.1.0 (2024-05-16) diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md index bd629a593f277d..cde410fc9c9926 100644 --- a/packages/eslint-plugin/README.md +++ b/packages/eslint-plugin/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/eslint-plugin --save-dev ``` -**Note**: This package requires `node` 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 00de20335e1f92..0709fdee582c99 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -20,8 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14", - "npm": ">=6.14.4" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "configs", diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index ef7f26e376cd22..4156282600a4b4 100644 --- a/packages/format-library/CHANGELOG.md +++ b/packages/format-library/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/format-library/package.json b/packages/format-library/package.json index 9774a1e55d7c58..46d38ee6441128 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md index ee1aa80308c106..2d918d78d571c4 100644 --- a/packages/hooks/CHANGELOG.md +++ b/packages/hooks/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/hooks/package.json b/packages/hooks/package.json index a1a42614b448e2..7c654b1356a0de 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md index 6f41ea210a8cb6..205d3f03a8ca7c 100644 --- a/packages/html-entities/CHANGELOG.md +++ b/packages/html-entities/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index 1edf5f0a7e9413..5ef035763394ce 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md index b24be3162bef1d..993d8758c8d27d 100644 --- a/packages/i18n/CHANGELOG.md +++ b/packages/i18n/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) @@ -114,7 +118,7 @@ ## 4.3.0 (2022-01-27) -- Add new `addLocaleData` method to merge locale data into the Tannin instance by domain. +- Add new `addLocaleData` method to merge locale data into the Tannin instance by domain. ## 4.2.0 (2021-07-21) diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 01f82f8bd21828..da0c793d4f6092 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 5d352804add696..ff3eece680666b 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 9.49.0 (2024-05-16) ## 9.48.0 (2024-05-02) @@ -10,7 +14,7 @@ ## 9.46.0 (2024-04-03) -- Add new `chevronDownSmall` icon. +- Add new `chevronDownSmall` icon. ## 9.45.0 (2024-03-21) @@ -32,7 +36,7 @@ ### New features -- Add new `funnel` icon. +- Add new `funnel` icon. ## 9.36.0 (2023-11-02) @@ -123,14 +127,17 @@ ## 9.0.0 (2022-05-18) ### Breaking Changes + - Removed icons no longer used by the UI: `commentTitle`, `postTitle`, `queryTitle`, `archiveTitle`. ### Enhancement + - Update the `title` icon to match g2 design language. ([#40596](https://github.com/WordPress/gutenberg/pull/40596)) ## 8.4.0 (2022-05-04) ## 8.3.0 (2022-04-21) + ### New Features - Add new `filter` icon. ([#40435](https://github.com/WordPress/gutenberg/pull/40435)) diff --git a/packages/icons/package.json b/packages/icons/package.json index e93a0097b28e70..0d3024b83557a7 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md index 496d76e7bdecc0..d17d6f834b6460 100644 --- a/packages/interactivity-router/CHANGELOG.md +++ b/packages/interactivity-router/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 1.8.0 (2024-05-16) diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json index 1fd24a11007149..a109c3031d2446 100644 --- a/packages/interactivity-router/package.json +++ b/packages/interactivity-router/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index bcc1ffcf8a3fce..e40c68a50180a2 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 5.7.0 (2024-05-16) diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json index 0e93575b25477a..6a5413108768e3 100644 --- a/packages/interactivity/package.json +++ b/packages/interactivity/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index 96919322e0c80e..c423c206747b83 100644 --- a/packages/interface/CHANGELOG.md +++ b/packages/interface/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.35.0 (2024-05-16) ### Internal diff --git a/packages/interface/package.json b/packages/interface/package.json index ce0ab729c7a7d8..7fe5f3b2686493 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md index f808ef79e59454..a1a6e782d3845f 100644 --- a/packages/is-shallow-equal/CHANGELOG.md +++ b/packages/is-shallow-equal/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json index ffc0daeb6feddf..d205cbc301ac77 100644 --- a/packages/is-shallow-equal/package.json +++ b/packages/is-shallow-equal/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md index 98b8a9e488d1f1..5ea47cbcfc4abf 100644 --- a/packages/jest-console/CHANGELOG.md +++ b/packages/jest-console/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 7.29.0 (2024-05-16) ## 7.28.0 (2024-05-02) diff --git a/packages/jest-console/README.md b/packages/jest-console/README.md index 4e57acef7deb6c..f733ad2be352eb 100644 --- a/packages/jest-console/README.md +++ b/packages/jest-console/README.md @@ -18,7 +18,7 @@ Install the module: npm install @wordpress/jest-console --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ### Setup diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json index 47d35cb021ab6d..e15e23922e8fbd 100644 --- a/packages/jest-console/package.json +++ b/packages/jest-console/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md index f891b892ed8bae..dfceb60a6670d1 100644 --- a/packages/jest-preset-default/CHANGELOG.md +++ b/packages/jest-preset-default/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 11.29.0 (2024-05-16) diff --git a/packages/jest-preset-default/README.md b/packages/jest-preset-default/README.md index 9f1f70ee122284..8720474a187211 100644 --- a/packages/jest-preset-default/README.md +++ b/packages/jest-preset-default/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/jest-preset-default --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Setup @@ -89,7 +89,7 @@ Finally, you should add `enzyme-to-json/serializer` to the array of [`snapshotSe ```javascript { - snapshotSerializers: [ 'enzyme-to-json/serializer' ] + snapshotSerializers: [ 'enzyme-to-json/serializer' ]; } ``` diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json index 9740bdf26b14a9..795989abfbd317 100644 --- a/packages/jest-preset-default/package.json +++ b/packages/jest-preset-default/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "scripts", diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md index 394015516c85fd..12e98b8755ea22 100644 --- a/packages/jest-puppeteer-axe/CHANGELOG.md +++ b/packages/jest-puppeteer-axe/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.29.0 (2024-05-16) ## 6.28.0 (2024-05-02) @@ -64,7 +68,7 @@ ### Breaking Changes -- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) +- Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388)) ## 5.11.0 (2023-03-01) diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md index fb5b6752c57025..452ffb4b6d1123 100644 --- a/packages/jest-puppeteer-axe/README.md +++ b/packages/jest-puppeteer-axe/README.md @@ -12,7 +12,7 @@ Install the module npm install @wordpress/jest-puppeteer-axe --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ### Setup diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json index 4b65f05b557c17..e4792458d92ff3 100644 --- a/packages/jest-puppeteer-axe/package.json +++ b/packages/jest-puppeteer-axe/package.json @@ -22,7 +22,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "build", diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md index a4454b3b4f360d..309c0686c1ae4a 100644 --- a/packages/keyboard-shortcuts/CHANGELOG.md +++ b/packages/keyboard-shortcuts/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json index 7527ba7e2294e6..563cdb1a9f2096 100644 --- a/packages/keyboard-shortcuts/package.json +++ b/packages/keyboard-shortcuts/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md index 1287ea94539e27..99d6c1324b7bee 100644 --- a/packages/keycodes/CHANGELOG.md +++ b/packages/keycodes/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index 7400fcd16e4f04..e198e7a23c97cd 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md index 3396f41183db0d..9b4ccb4a788e89 100644 --- a/packages/lazy-import/CHANGELOG.md +++ b/packages/lazy-import/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.45.0 (2024-05-16) ## 1.44.0 (2024-05-02) diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json index 2d3bf4edd1dd8a..3fc3c50d97e532 100644 --- a/packages/lazy-import/package.json +++ b/packages/lazy-import/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "npm": ">=6.9.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "lib/index.js", "types": "build-types", diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md index 302104feca2cc9..c40cf899c23bf7 100644 --- a/packages/list-reusable-blocks/CHANGELOG.md +++ b/packages/list-reusable-blocks/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json index 9a53b72e181bf8..10b35bef332669 100644 --- a/packages/list-reusable-blocks/package.json +++ b/packages/list-reusable-blocks/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md index 09ae32eed91f65..8f65e32becda16 100644 --- a/packages/media-utils/CHANGELOG.md +++ b/packages/media-utils/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.49.0 (2024-05-16) ## 4.48.0 (2024-05-02) diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json index 0f126ccae62ee5..1d200320c4b65f 100644 --- a/packages/media-utils/package.json +++ b/packages/media-utils/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md index 13dc8d2006dbc4..5d7ea51ecb3391 100644 --- a/packages/notices/CHANGELOG.md +++ b/packages/notices/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.26.0 (2024-05-16) ## 4.25.0 (2024-05-02) diff --git a/packages/notices/package.json b/packages/notices/package.json index 7ecc7c70825ee8..664077d36e5390 100644 --- a/packages/notices/package.json +++ b/packages/notices/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md index 2ac3cc4e158b1d..7c4ebdb06735d3 100644 --- a/packages/npm-package-json-lint-config/CHANGELOG.md +++ b/packages/npm-package-json-lint-config/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.43.0 (2024-05-16) ## 4.42.0 (2024-05-02) diff --git a/packages/npm-package-json-lint-config/README.md b/packages/npm-package-json-lint-config/README.md index dae33adeb5f8a2..f933cc188a8a04 100644 --- a/packages/npm-package-json-lint-config/README.md +++ b/packages/npm-package-json-lint-config/README.md @@ -10,7 +10,7 @@ Install the module $ npm install @wordpress/npm-package-json-lint-config ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json index 13f2bf6729d327..be03f5633db857 100644 --- a/packages/npm-package-json-lint-config/package.json +++ b/packages/npm-package-json-lint-config/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md index 896ae8fbfe9c5b..d1be7f5513b903 100644 --- a/packages/nux/CHANGELOG.md +++ b/packages/nux/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 8.20.0 (2024-05-16) ## 8.19.0 (2024-05-02) diff --git a/packages/nux/package.json b/packages/nux/package.json index 2bf9a21c527ad8..e06ecb5c0ad675 100644 --- a/packages/nux/package.json +++ b/packages/nux/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md index 04957c7b205faa..eb2cdc1661c97d 100644 --- a/packages/patterns/CHANGELOG.md +++ b/packages/patterns/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.19.0 (2024-05-16) ## 1.18.0 (2024-05-02) diff --git a/packages/patterns/package.json b/packages/patterns/package.json index 4afd2dc030723b..cf214377d61b0e 100644 --- a/packages/patterns/package.json +++ b/packages/patterns/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=16.0.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md index 49ff11a846d8e8..ae572061e64bcc 100644 --- a/packages/plugins/CHANGELOG.md +++ b/packages/plugins/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 6.26.0 (2024-05-16) diff --git a/packages/plugins/package.json b/packages/plugins/package.json index 3155ba00de8eb1..43b5877c4448e3 100644 --- a/packages/plugins/package.json +++ b/packages/plugins/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md index d93ce9c5e8a5bb..49fc5ca3da5322 100644 --- a/packages/postcss-plugins-preset/CHANGELOG.md +++ b/packages/postcss-plugins-preset/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.42.0 (2024-05-16) ## 4.41.0 (2024-05-02) diff --git a/packages/postcss-plugins-preset/README.md b/packages/postcss-plugins-preset/README.md index 8385a30e6be53f..ac844e279b6f16 100644 --- a/packages/postcss-plugins-preset/README.md +++ b/packages/postcss-plugins-preset/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/postcss-plugins-preset --save ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Contributing to this package diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index c34db26965ed9a..d3891d679e04a1 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -22,7 +22,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "lib" diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md index 284b28f42913aa..d6b1cfadd0ca28 100644 --- a/packages/postcss-themes/CHANGELOG.md +++ b/packages/postcss-themes/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.41.0 (2024-05-16) ## 5.40.0 (2024-05-02) diff --git a/packages/postcss-themes/README.md b/packages/postcss-themes/README.md index 341ecfdbd8b7a6..b23c6c829d1d9e 100644 --- a/packages/postcss-themes/README.md +++ b/packages/postcss-themes/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/postcss-themes --save ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Contributing to this package diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json index 14082111987ec2..028a1967bbcfb1 100644 --- a/packages/postcss-themes/package.json +++ b/packages/postcss-themes/package.json @@ -24,7 +24,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md index 67924deb7d04f5..78035788442653 100644 --- a/packages/preferences-persistence/CHANGELOG.md +++ b/packages/preferences-persistence/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.50.0 (2024-05-16) ## 1.49.0 (2024-05-02) diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json index c43a4424a44ddf..a7d73fbc0df100 100644 --- a/packages/preferences-persistence/package.json +++ b/packages/preferences-persistence/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md index 00512c275b24cc..70095e3a329f5c 100644 --- a/packages/preferences/CHANGELOG.md +++ b/packages/preferences/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.35.0 (2024-05-16) ### Internal diff --git a/packages/preferences/package.json b/packages/preferences/package.json index 31dd3fa83bb6db..c6d2347ba9723f 100644 --- a/packages/preferences/package.json +++ b/packages/preferences/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md index 39e33692268741..86e0a52d5e518f 100644 --- a/packages/prettier-config/CHANGELOG.md +++ b/packages/prettier-config/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.15.0 (2024-05-16) ## 3.14.0 (2024-05-02) diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md index b07fad62e14e63..efb75513694fc9 100644 --- a/packages/prettier-config/README.md +++ b/packages/prettier-config/README.md @@ -10,7 +10,7 @@ Install the module $ npm install @wordpress/prettier-config --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json index 06a9ff0f98af23..dd7604f0c3d61a 100644 --- a/packages/prettier-config/package.json +++ b/packages/prettier-config/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "lib/index.js" diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index b1b374c8ec5616..8f5c66d8e810c3 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.56.0 (2024-05-16) ### Internal diff --git a/packages/primitives/package.json b/packages/primitives/package.json index be0405d43d81ec..96a450e99ecc00 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md index 29790b15341aa9..3a4df3e85ee90a 100644 --- a/packages/priority-queue/CHANGELOG.md +++ b/packages/priority-queue/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 2.58.0 (2024-05-16) ## 2.57.0 (2024-05-02) @@ -108,7 +112,7 @@ ### New features -- Add a new `cancel` method that removes scheduled callbacks without executing them. +- Add a new `cancel` method that removes scheduled callbacks without executing them. ## 2.6.0 (2022-04-08) diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json index 17e43f697623d8..236a48c796dc37 100644 --- a/packages/priority-queue/package.json +++ b/packages/priority-queue/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md index 07c8caaa3f8fe3..c70924a8a33be5 100644 --- a/packages/private-apis/CHANGELOG.md +++ b/packages/private-apis/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 0.40.0 (2024-05-16) diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json index f93b01335bf44f..ea2e33468cd35a 100644 --- a/packages/private-apis/package.json +++ b/packages/private-apis/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md index 70cb5bca2690c5..b1d801f3f93ae3 100644 --- a/packages/project-management-automation/CHANGELOG.md +++ b/packages/project-management-automation/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.57.0 (2024-05-16) ## 1.56.0 (2024-05-02) diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json index 452bec5a6c3cc2..118acb3faadc49 100644 --- a/packages/project-management-automation/package.json +++ b/packages/project-management-automation/package.json @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "main": "lib/index.js", "types": "build-types", "dependencies": { diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md index 97149421140125..7b62c13efebfda 100644 --- a/packages/react-i18n/CHANGELOG.md +++ b/packages/react-i18n/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.56.0 (2024-05-16) ## 3.55.0 (2024-05-02) diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json index d541c06ac89d4a..51346a5af7c9f5 100644 --- a/packages/react-i18n/package.json +++ b/packages/react-i18n/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index ac47ae64e08141..a6617722f5ecf0 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -18,6 +18,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "dependencies": { "@wordpress/element": "file:../element", "@wordpress/keycodes": "file:../keycodes" diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 7fd9dff7a0f6bf..bb8eba0a928dee 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -17,6 +17,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "main": "index.js", "react-native": "index", "dependencies": { diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 16988d1c5cbcd3..cfc77cc5c264dc 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -23,8 +23,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12", - "npm": ">=6.9" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "src/index.js", "react-native": "src/index", diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md index 2c06bff5a1cc51..e9be2ae8ae3d4a 100644 --- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md +++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 2.41.0 (2024-05-16) ## 2.40.0 (2024-05-02) diff --git a/packages/readable-js-assets-webpack-plugin/README.md b/packages/readable-js-assets-webpack-plugin/README.md index 47d75a6f00edff..eb3eda12692d21 100644 --- a/packages/readable-js-assets-webpack-plugin/README.md +++ b/packages/readable-js-assets-webpack-plugin/README.md @@ -14,7 +14,7 @@ Install the module npm install @wordpress/readable-js-assets-webpack-plugin --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It also requires webpack 4.8.3 and newer. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json index bfe31e7e650e28..05d962b3708767 100644 --- a/packages/readable-js-assets-webpack-plugin/package.json +++ b/packages/readable-js-assets-webpack-plugin/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14.0" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "index.js" diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md index 7ffcc034c21fd5..af1d1e080c214d 100644 --- a/packages/redux-routine/CHANGELOG.md +++ b/packages/redux-routine/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.58.0 (2024-05-16) ## 4.57.0 (2024-05-02) diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json index 006884497ce8bf..8d13c9dfc18b44 100644 --- a/packages/redux-routine/package.json +++ b/packages/redux-routine/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/report-flaky-tests/package.json b/packages/report-flaky-tests/package.json index 8766762fcc1b70..77de2a4f3ddee0 100644 --- a/packages/report-flaky-tests/package.json +++ b/packages/report-flaky-tests/package.json @@ -20,8 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14", - "npm": ">=6.9" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "types": "build-types", diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md index 32c32230accba5..6297ea5d7a1b15 100644 --- a/packages/reusable-blocks/CHANGELOG.md +++ b/packages/reusable-blocks/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json index 0f67556f0a4d75..ae584e75ed184a 100644 --- a/packages/reusable-blocks/package.json +++ b/packages/reusable-blocks/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md index 7241330acb79e1..81d23a43f25a36 100644 --- a/packages/rich-text/CHANGELOG.md +++ b/packages/rich-text/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.35.0 (2024-05-16) ## 6.34.0 (2024-05-02) diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index 8a8396ad075455..546b5926c65f85 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md index bc699fce952a9b..528201ee2c5664 100644 --- a/packages/router/CHANGELOG.md +++ b/packages/router/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.27.0 (2024-05-16) ## 0.26.0 (2024-05-02) diff --git a/packages/router/package.json b/packages/router/package.json index ce442883350a46..bcdb1fb3d79043 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 124a5e99bfdf60..3e1bfb09f679c9 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -6,6 +6,7 @@ - Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 27.9.0 (2024-05-16) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index cb15c7bf8e0cee..af892293e00eb2 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -16,7 +16,7 @@ You only need to install one npm module: npm install @wordpress/scripts --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Setup diff --git a/packages/scripts/package.json b/packages/scripts/package.json index cf8dc0afd5f8ff..e8b03804e8662d 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -19,8 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=18", - "npm": ">=6.14.4" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "bin", diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md index b60a8df9365d05..8a2867beb33071 100644 --- a/packages/server-side-render/CHANGELOG.md +++ b/packages/server-side-render/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json index 4ddbacb7edc26c..d042cb4329efa3 100644 --- a/packages/server-side-render/package.json +++ b/packages/server-side-render/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md index 519b83ea2260db..4cd5c9c886736e 100644 --- a/packages/shortcode/CHANGELOG.md +++ b/packages/shortcode/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json index 6b6b82ce8d512f..2c227eb976bf1b 100644 --- a/packages/shortcode/package.json +++ b/packages/shortcode/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md index 08de0c7ad281f2..8e9bcaebfb4509 100644 --- a/packages/style-engine/CHANGELOG.md +++ b/packages/style-engine/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.41.0 (2024-05-16) ## 1.40.0 (2024-05-02) @@ -43,6 +47,7 @@ ## 1.22.0 (2023-08-10) ### Bug Fixes + - Style engine: switch off optimize by default [#53085](https://github.com/WordPress/gutenberg/pull/53085). ## 1.21.0 (2023-07-20) @@ -84,24 +89,29 @@ ## 1.3.0 (2022-10-19) ### Internal + - Style Engine: move PHP unit tests to Gutenberg [#44722](https://github.com/WordPress/gutenberg/pull/44722) ## 1.2.0 (2022-10-05) ### Internal + - Script loader: remove 6.1 wp actions ([#44519](https://github.com/WordPress/gutenberg/pull/44519)) ## 1.1.0 (2022-09-21) ### Enhancement + - Allow for prettified output ([#42909](https://github.com/WordPress/gutenberg/pull/42909)). - Enqueue block supports styles in Gutenberg ([#42880](https://github.com/WordPress/gutenberg/pull/42880)). ### Internal + - Move backend scripts to package ([#39736](https://github.com/WordPress/gutenberg/pull/39736)). - Updating docs, formatting, and separating global functions from the main class file ([#43840](https://github.com/WordPress/gutenberg/pull/43840)). ### New Features + - Add a WP_Style_Engine_Processor object ([#42463](https://github.com/WordPress/gutenberg/pull/42463)). - Add a WP_Style_Engine_CSS_Declarations object ([#42043](https://github.com/WordPress/gutenberg/pull/42043)). - Add Rules and Store objects ([#42222](https://github.com/WordPress/gutenberg/pull/42222)). diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json index dbe8f6c92673aa..008f58cf729e85 100644 --- a/packages/style-engine/package.json +++ b/packages/style-engine/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md index 02665fbf0f66db..ee2aae030222e2 100644 --- a/packages/stylelint-config/CHANGELOG.md +++ b/packages/stylelint-config/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 21.41.0 (2024-05-16) ## 21.40.0 (2024-05-02) diff --git a/packages/stylelint-config/README.md b/packages/stylelint-config/README.md index 0e52e5ef190a42..c6d69a9d183489 100644 --- a/packages/stylelint-config/README.md +++ b/packages/stylelint-config/README.md @@ -8,7 +8,7 @@ $ npm install @wordpress/stylelint-config --save-dev ``` -**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions. +**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions. ## Usage diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json index 29c72573a5934b..cae248d0d7164a 100644 --- a/packages/stylelint-config/package.json +++ b/packages/stylelint-config/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=14" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "files": [ "CHANGELOG.md", diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md index 46225885681ef9..16abed443cf820 100644 --- a/packages/sync/CHANGELOG.md +++ b/packages/sync/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.20.0 (2024-05-16) ## 0.19.0 (2024-05-02) diff --git a/packages/sync/package.json b/packages/sync/package.json index b79260dd70881a..f02019326e6649 100644 --- a/packages/sync/package.json +++ b/packages/sync/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md index 9e09cf2562549f..df5526e5d14495 100644 --- a/packages/token-list/CHANGELOG.md +++ b/packages/token-list/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 2.58.0 (2024-05-16) ## 2.57.0 (2024-05-02) diff --git a/packages/token-list/package.json b/packages/token-list/package.json index 97a6d00a2c1f48..f70b9cba52ae52 100644 --- a/packages/token-list/package.json +++ b/packages/token-list/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md index 79ddc2133fb30d..7882af9711a1a9 100644 --- a/packages/undo-manager/CHANGELOG.md +++ b/packages/undo-manager/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.18.0 (2024-05-16) ## 0.17.0 (2024-05-02) @@ -35,4 +39,3 @@ ## 0.3.0 (2023-10-05) ## 0.2.0 (2023-09-20) - diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json index 3bce5bb232c676..1fd6dfcd1a785d 100644 --- a/packages/undo-manager/package.json +++ b/packages/undo-manager/package.json @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md index 03a04af8f3ac12..838566e7837ba9 100644 --- a/packages/url/CHANGELOG.md +++ b/packages/url/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.59.0 (2024-05-16) ## 3.58.0 (2024-05-02) diff --git a/packages/url/package.json b/packages/url/package.json index 3b21b3059f0929..cd747ae652239e 100644 --- a/packages/url/package.json +++ b/packages/url/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md index e6359b74b636bb..7763a587ea082b 100644 --- a/packages/viewport/CHANGELOG.md +++ b/packages/viewport/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 5.35.0 (2024-05-16) ## 5.34.0 (2024-05-02) diff --git a/packages/viewport/package.json b/packages/viewport/package.json index 501bfb361b5893..3c6dc5efd540c5 100644 --- a/packages/viewport/package.json +++ b/packages/viewport/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md index 6eee478e47dbfd..a10a7073d0a5a7 100644 --- a/packages/warning/CHANGELOG.md +++ b/packages/warning/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). ## 2.58.0 (2024-05-16) diff --git a/packages/warning/package.json b/packages/warning/package.json index 5591af5c8130ba..5b4b7234e1f699 100644 --- a/packages/warning/package.json +++ b/packages/warning/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md index 80fc7589f03624..c4833fefe258cf 100644 --- a/packages/widgets/CHANGELOG.md +++ b/packages/widgets/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.35.0 (2024-05-16) ### Internal diff --git a/packages/widgets/package.json b/packages/widgets/package.json index 374e5944096ca7..d15ccd484e966f 100644 --- a/packages/widgets/package.json +++ b/packages/widgets/package.json @@ -16,6 +16,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md index d73b2618804654..dd7f233b7cc9bb 100644 --- a/packages/wordcount/CHANGELOG.md +++ b/packages/wordcount/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.58.0 (2024-05-16) ## 3.57.0 (2024-05-02) diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json index f0068a509efaad..b450c0ef55ff27 100644 --- a/packages/wordcount/package.json +++ b/packages/wordcount/package.json @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", From 623bb3c010b6c2b4222f240c52b2e398eef2fd5c Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Fri, 24 May 2024 15:04:09 +0400 Subject: [PATCH 67/94] E2E Tests: Fix React warnings triggered by test plugins (#61935) --- packages/e2e-tests/plugins/hooks-api/index.js | 1 - packages/e2e-tests/plugins/inner-blocks-templates/index.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/plugins/hooks-api/index.js b/packages/e2e-tests/plugins/hooks-api/index.js index 1ace5145e26880..3b25ad15fbcae8 100644 --- a/packages/e2e-tests/plugins/hooks-api/index.js +++ b/packages/e2e-tests/plugins/hooks-api/index.js @@ -17,7 +17,6 @@ { className: 'e2e-reset-block-button', variant: "secondary", - isLarge: true, onClick() { const emptyBlock = createBlock( props.name ); props.onReplace( emptyBlock ); diff --git a/packages/e2e-tests/plugins/inner-blocks-templates/index.js b/packages/e2e-tests/plugins/inner-blocks-templates/index.js index 5a49a0fa0aa057..b03b07e11e38a2 100644 --- a/packages/e2e-tests/plugins/inner-blocks-templates/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-templates/index.js @@ -92,7 +92,7 @@ edit: function InnerBlocksUpdateLockedTemplateEdit( props ) { const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate; - return el( 'div', null, [ + return el( 'div', null, el( 'button', { @@ -108,7 +108,7 @@ : TEMPLATE, templateLock: 'all', } ) ), - ] ); + ); }, save, From b902cf87fff8bdd3caec3ca3db9ae3f3611f93e0 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Fri, 24 May 2024 13:37:30 +0200 Subject: [PATCH 68/94] Docs: fix spacing in PHP doc block in comments block (#61911) --- packages/block-library/src/comments/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index e776db9b18d9d5..f61490ab890d9a 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -18,7 +18,7 @@ * * @since 6.1.0 * - * @global WP_Post $post Global post object. + * @global WP_Post $post Global post object. * * @param array $attributes Block attributes. * @param string $content Block default content. From 417f6eacad3782e6d1729f130d88a596afcaae51 Mon Sep 17 00:00:00 2001 From: George Mamadashvili <georgemamadashvili@gmail.com> Date: Fri, 24 May 2024 15:54:18 +0400 Subject: [PATCH 69/94] More block: Fix React warning when adding custom text (#61936) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- packages/block-library/src/more/block.json | 3 ++- packages/block-library/src/more/edit.js | 3 +-- test/integration/fixtures/blocks/core__more.json | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json index b071f6ba5d7ef7..d1153ca4f1689d 100644 --- a/packages/block-library/src/more/block.json +++ b/packages/block-library/src/more/block.json @@ -9,7 +9,8 @@ "textdomain": "default", "attributes": { "customText": { - "type": "string" + "type": "string", + "default": "" }, "noTeaser": { "type": "boolean", diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js index 7757af5e96ba1c..bcad7ec1b83662 100644 --- a/packages/block-library/src/more/edit.js +++ b/packages/block-library/src/more/edit.js @@ -16,8 +16,7 @@ export default function MoreEdit( { } ) { const onChangeInput = ( event ) => { setAttributes( { - customText: - event.target.value !== '' ? event.target.value : undefined, + customText: event.target.value, } ); }; diff --git a/test/integration/fixtures/blocks/core__more.json b/test/integration/fixtures/blocks/core__more.json index 29ec11579a2d96..f9f34aecd1f202 100644 --- a/test/integration/fixtures/blocks/core__more.json +++ b/test/integration/fixtures/blocks/core__more.json @@ -3,6 +3,7 @@ "name": "core/more", "isValid": true, "attributes": { + "customText": "", "noTeaser": false }, "innerBlocks": [] From 0e3c3355d3ae025b09b1a798ba7932d48d017767 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 24 May 2024 20:58:31 +0900 Subject: [PATCH 70/94] Template Actions: Fix console error when resetting template (#61921) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> --- packages/editor/src/components/post-actions/actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index f6a28c34213566..a4937dc6a75d74 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -835,8 +835,8 @@ const resetTemplateAction = { } await onConfirm( items ); onActionPerformed?.( items ); + setIsBusy( false ); closeModal(); - isBusy( false ); } } isBusy={ isBusy } disabled={ isBusy } From 05bcca908aaed1d7d3d445c6e9bfd878d45df753 Mon Sep 17 00:00:00 2001 From: James Koster <james@jameskoster.co.uk> Date: Fri, 24 May 2024 13:54:59 +0100 Subject: [PATCH 71/94] Update page component (and some data view elements) spacing metrics (#61333) Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: keoshi <keoshi@git.wordpress.org> --- packages/dataviews/src/style.scss | 70 ++++++++++++++++--- packages/dataviews/src/view-grid.tsx | 2 +- .../src/components/page-patterns/style.scss | 12 +++- .../edit-site/src/components/page/style.scss | 16 ++++- 4 files changed, 85 insertions(+), 15 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 07ba9174b51200..e02a0b97637aa2 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -3,17 +3,20 @@ overflow: auto; box-sizing: border-box; scroll-padding-bottom: $grid-unit-80; + /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */ + container: dataviews-wrapper / inline-size; display: flex; flex-direction: column; } .dataviews-filters__view-actions { box-sizing: border-box; - padding: $grid-unit-15 $grid-unit-40 0; - margin-bottom: $grid-unit-15; + padding: $grid-unit-20 $grid-unit-60; flex-shrink: 0; position: sticky; left: 0; + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); .components-search-control { .components-base-control__field { @@ -23,8 +26,6 @@ } .dataviews-filters__container { - padding-right: $grid-unit-40; - .dataviews-filters__reset-button[aria-disabled="true"] { &, &:hover { @@ -46,10 +47,12 @@ bottom: 0; left: 0; background-color: $white; - padding: $grid-unit-15 $grid-unit-40; + padding: $grid-unit-15 $grid-unit-60; border-top: $border-width solid $gray-100; color: $gray-700; flex-shrink: 0; + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); } .dataviews-pagination__page-selection { @@ -103,9 +106,18 @@ gap: $grid-unit-05; } + th, + td { + &:first-child, + &:last-child { + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); + } + } + td:first-child, th:first-child { - padding-left: $grid-unit-40; + padding-left: $grid-unit-60; .dataviews-view-table-header-button { margin-left: - #{$grid-unit-10}; @@ -114,7 +126,7 @@ td:last-child, th:last-child { - padding-right: $grid-unit-40; + padding-right: $grid-unit-60; } &:last-child { @@ -279,7 +291,9 @@ margin-bottom: auto; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-template-rows: max-content; - padding: 0 $grid-unit-40 $grid-unit-30; + padding: 0 $grid-unit-60 $grid-unit-30; + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); @include break-mobile() { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency @@ -459,7 +473,7 @@ } .dataviews-view-list__item { - padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40; + padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30; width: 100%; scroll-margin: $grid-unit-10 0; @@ -531,7 +545,7 @@ .dataviews-view-list__item-actions { padding-top: $grid-unit-20; - padding-right: $grid-unit-40; + padding-right: $grid-unit-30; } & + .dataviews-pagination { @@ -546,11 +560,13 @@ .dataviews-no-results, .dataviews-loading { - padding: 0 $grid-unit-40; + padding: 0 $grid-unit-60; flex-grow: 1; display: flex; align-items: center; justify-content: center; + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); } .dataviews-view-table-selection-checkbox { @@ -809,6 +825,38 @@ } } +/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */ +@container (max-width: 430px) { + .dataviews-pagination, + .dataviews-filters__view-actions { + padding: $grid-unit-15 $grid-unit-30; + } + + .dataviews-filters__view-actions { + .components-search-control { + .components-base-control__field { + max-width: 112px; + } + } + } + + .dataviews-view-table tr td:first-child, + .dataviews-view-table tr th:first-child { + padding-left: $grid-unit-30; + } + + .dataviews-view-table tr td:last-child, + .dataviews-view-table tr th:last-child { + padding-right: $grid-unit-30; + } + + .dataviews-view-grid, + .dataviews-no-results, + .dataviews-loading { + padding-left: $grid-unit-30; + padding-right: $grid-unit-30; + } +} .dataviews-bulk-actions-toolbar-wrapper { display: flex; diff --git a/packages/dataviews/src/view-grid.tsx b/packages/dataviews/src/view-grid.tsx index 3f09244da69edd..f42ec215be9d23 100644 --- a/packages/dataviews/src/view-grid.tsx +++ b/packages/dataviews/src/view-grid.tsx @@ -237,7 +237,7 @@ export default function ViewGrid< Item extends AnyItem >( { <> { hasData && ( <Grid - gap={ 6 } + gap={ 8 } columns={ 2 } alignment="top" className="dataviews-view-grid" diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 8f2cb936aa3f70..99587e6b16a78b 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -100,11 +100,13 @@ .edit-site-patterns__section-header { border-bottom: 1px solid #f0f0f0; min-height: 72px; - padding: $grid-unit-20 $grid-unit-40; + padding: $grid-unit-30 $grid-unit-60; position: sticky; top: 0; z-index: 2; flex-shrink: 0; + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); } .edit-site-patterns__pattern-title { @@ -161,3 +163,11 @@ } } } + +/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */ +@container (max-width: 430px) { + .edit-site-page-patterns-dataviews .edit-site-patterns__section-header { + padding-left: $grid-unit-30; + padding-right: $grid-unit-30; + } +} diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss index 4f7f60967df457..acf3a40d08b174 100644 --- a/packages/edit-site/src/components/page/style.scss +++ b/packages/edit-site/src/components/page/style.scss @@ -2,16 +2,21 @@ color: $gray-800; background: $white; height: 100%; + /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */ + container: edit-site-page / inline-size; + transition: width ease-out 0.2s; + @include reduce-motion("transition"); } .edit-site-page-header { - padding: $grid-unit-20 $grid-unit-40; - min-height: $grid-unit * 9; + padding: $grid-unit-20 $grid-unit-60; border-bottom: 1px solid $gray-100; background: $white; position: sticky; top: 0; z-index: z-index(".edit-site-page-header"); + transition: padding ease-out 0.1s; + @include reduce-motion("transition"); .components-text { color: $gray-800; } @@ -24,6 +29,13 @@ } } +/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */ +@container (max-width: 430px) { + .edit-site-page-header { + padding: $grid-unit-20 $grid-unit-30; + } +} + .edit-site-page-content { height: 100%; display: flex; From 7988696ec25a7373337d91a359929aad204307fd Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Fri, 24 May 2024 19:13:49 +0530 Subject: [PATCH 72/94] Added unit test for post excerpt block render function (#43451) * Added unittest for post excerpt block render function * Updated wpSetUpBeforeClass method with argument * Addressed feedbacks * fix unit test failure * Fix coding standards * Fix phpcs issue * Update config to allow files with new name standard * Change test file name to camel case * Update assertion comments and formatting --------- Co-authored-by: Sunil Prajapati <61308756+sunil25393@users.noreply.github.com> Co-authored-by: akasunil <sunil25393@git.wordpress.org> Co-authored-by: anton-vlasenko <antonvlasenko@git.wordpress.org> --- phpunit.xml.dist | 1 + phpunit/blocks/renderBlockCorePostExcerpt.php | 147 ++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 phpunit/blocks/renderBlockCorePostExcerpt.php diff --git a/phpunit.xml.dist b/phpunit.xml.dist index 4f407266e5c0f5..c8dc2d34b0fed9 100644 --- a/phpunit.xml.dist +++ b/phpunit.xml.dist @@ -14,6 +14,7 @@ <testsuite name="default"> <directory suffix="-test.php">./phpunit/</directory> <directory suffix=".php">./phpunit/tests/</directory> + <directory suffix=".php">./phpunit/blocks/</directory> </testsuite> </testsuites> <groups> diff --git a/phpunit/blocks/renderBlockCorePostExcerpt.php b/phpunit/blocks/renderBlockCorePostExcerpt.php new file mode 100644 index 00000000000000..38c27bfde9b30a --- /dev/null +++ b/phpunit/blocks/renderBlockCorePostExcerpt.php @@ -0,0 +1,147 @@ +<?php +/** + * Tests for the gutenberg_render_block_core_post_excerpt() function. + * + * @package WordPress + * @subpackage Blocks + * + * @covers ::gutenberg_render_block_core_post_excerpt + * @group blocks + */ +class Tests_Blocks_RenderBlockCorePostExcerpt extends WP_UnitTestCase { + + /** + * Post object with data. + * + * @var array + */ + protected static $post; + + /** + * Array of Attributes. + * + * @var int + */ + protected static $attributes; + + /** + * Setup method. + * + * @param WP_UnitTest_Factory $factory Helper that lets us create fake data. + */ + public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) { + + self::$post = $factory->post->create_and_get( + array( + 'post_title' => 'Post Expert block Unit Test', + 'post_excerpt' => 'Post Expert content', + ) + ); + + self::$attributes = array( + 'moreText' => '', + 'excerptLength' => 55, + ); + + $block = array( + 'blockName' => 'core/post-excerpt', + 'attrs' => array( + 'moreText' => '', + ), + 'innerBlock' => array(), + 'innerContent' => array(), + 'innerHTML' => array(), + ); + + WP_Block_Supports::init(); + WP_Block_Supports::$block_to_render = $block; + } + + /** + * Tear down method. + */ + public static function wpTearDownAfterClass() { + wp_delete_post( self::$post->ID, true ); + } + + /** + * Test gutenberg_render_block_core_post_excerpt() method + * with empty data. + */ + public function test_should_render_empty_string_when_excerpt_is_empty() { + $block = new stdClass(); + + // call render method with block context. + $rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block ); + $this->assertSame( '', $rendered, 'Failed to assert that $rendered is an empty string.' ); + } + + /** + * Test gutenberg_render_block_core_post_excerpt() method. + */ + public function test_should_render_correct_exceprt() { + + $block = new stdClass(); + $GLOBALS['post'] = self::$post; + $block->context = array( 'postId' => self::$post->ID ); + + $rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block ); + $this->assertNotEmpty( $rendered, 'Failed to assert that $rendered is not empty.' ); + $this->assertStringContainsString( + 'Post Expert content', + $rendered, + 'Failed to assert that $rendered contain the expected string.' + ); + $this->assertStringContainsString( + '</p', + $rendered, + 'Failed to assert that $rendered contains a closing html paragraph tag.' + ); + $this->assertStringContainsString( + 'wp-block-post-excerpt__excerpt', + $rendered, + 'Failed to assert that $rendered contain the "wp-block-post-excerpt__excerpt" string.' + ); + $this->assertStringNotContainsString( + 'has-text-align', + $rendered, + 'Failed to assert that $rendered does not contain the has-text-align class.' + ); + + self::$attributes['textAlign'] = 'left'; + + $rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block ); + $this->assertStringContainsString( + 'has-text-align-left', + $rendered, + 'Failed to assert that $rendered contains the "has-text-align-left" class.' + ); + + self::$attributes = array( + 'moreText' => 'Read More', + 'excerptLength' => 55, + ); + + $rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block ); + $this->assertStringContainsString( + 'wp-block-post-excerpt__more-link', + $rendered, + 'Failed to assert that $rendered contains the expected string.' + ); + + self::$attributes = array( + 'moreText' => 'Read More', + 'showMoreOnNewLine' => true, + ); + $this->assertStringContainsString( + 'wp-block-post-excerpt__more-link', + $rendered, + 'Failed to assert that $rendered contains the expected string.' + ); + $this->assertStringContainsString( + get_permalink( self::$post->ID ), + $rendered, + 'Failed to assert that $rendered contain expected post the expected post URL.' + ); + } +} From 859e2572c3e1de8a7fcd0c7dbcf4b62d92abd84a Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Fri, 24 May 2024 14:53:28 +0100 Subject: [PATCH 73/94] Fix the site editor Admin Bar menu item (#61851) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> --- backport-changelog/6.6/6605.md | 3 ++ lib/compat/wordpress-6.6/admin-bar.php | 48 ++++++++++++++++++++++++++ lib/load.php | 1 + 3 files changed, 52 insertions(+) create mode 100644 backport-changelog/6.6/6605.md create mode 100644 lib/compat/wordpress-6.6/admin-bar.php diff --git a/backport-changelog/6.6/6605.md b/backport-changelog/6.6/6605.md new file mode 100644 index 00000000000000..c45a37d77e660b --- /dev/null +++ b/backport-changelog/6.6/6605.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6605 + +* https://github.com/WordPress/gutenberg/pull/61851 diff --git a/lib/compat/wordpress-6.6/admin-bar.php b/lib/compat/wordpress-6.6/admin-bar.php new file mode 100644 index 00000000000000..8892559cd7f62a --- /dev/null +++ b/lib/compat/wordpress-6.6/admin-bar.php @@ -0,0 +1,48 @@ +<?php +/** + * Changes to the WordPress admin bar. + * + * @package gutenberg + */ + +/** + * Adds the "Site Editor" link to the Toolbar. + * + * @since 5.9.0 + * @since 6.3.0 Added `$_wp_current_template_id` global for editing of current template directly from the admin bar. + * @since 6.6.0 Added the canvas argument to the url. + * + * @global string $_wp_current_template_id + * + * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance. + */ +function gutenberg_admin_bar_edit_site_menu( $wp_admin_bar ) { + global $_wp_current_template_id; + + // Don't show if a block theme is not activated. + if ( ! wp_is_block_theme() ) { + return; + } + + // Don't show for users who can't edit theme options or when in the admin. + if ( ! current_user_can( 'edit_theme_options' ) || is_admin() ) { + return; + } + + $wp_admin_bar->add_node( + array( + 'id' => 'site-editor', + 'title' => __( 'Site Editor' ), + 'href' => add_query_arg( + array( + 'postType' => 'wp_template', + 'postId' => $_wp_current_template_id, + 'canvas' => 'edit', + ), + admin_url( 'site-editor.php' ) + ), + ) + ); +} +remove_action( 'admin_bar_menu', 'wp_admin_bar_edit_site_menu', 40 ); +add_action( 'admin_bar_menu', 'gutenberg_admin_bar_edit_site_menu', 41 ); diff --git a/lib/load.php b/lib/load.php index b00c024778b5ff..357935b4137794 100644 --- a/lib/load.php +++ b/lib/load.php @@ -130,6 +130,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/compat/wordpress-6.5/script-loader.php'; // WordPress 6.6 compat. +require __DIR__ . '/compat/wordpress-6.6/admin-bar.php'; require __DIR__ . '/compat/wordpress-6.6/compat.php'; require __DIR__ . '/compat/wordpress-6.6/resolve-patterns.php'; require __DIR__ . '/compat/wordpress-6.6/block-bindings/pattern-overrides.php'; From 4af38173fe961e84e4f4a42068dc3e1e2907e36f Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Fri, 24 May 2024 16:33:09 +0200 Subject: [PATCH 74/94] Writing flow: fix paste for input fields (#61389) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: kevin940726 <kevin940726@git.wordpress.org> Co-authored-by: allilevine <firewatch@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: liviopv <liviopv@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --- .../writing-flow/use-clipboard-handler.js | 35 ++++++++++--------- .../src/page-utils/press-keys.ts | 17 ++++++++- test/e2e/specs/editor/blocks/rss.spec.js | 31 ++++++++++++++++ 3 files changed, 66 insertions(+), 17 deletions(-) create mode 100644 test/e2e/specs/editor/blocks/rss.spec.js diff --git a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js index a6d5c61b8b5c8f..56583447d3f0e9 100644 --- a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js +++ b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js @@ -60,6 +60,25 @@ export default function useClipboardHandler() { return; } + // Let native copy/paste behaviour take over in input fields. + // But always handle multiple selected blocks. + if ( ! hasMultiSelection() ) { + const { target } = event; + const { ownerDocument } = target; + // If copying, only consider actual text selection as selection. + // Otherwise, any focus on an input field is considered. + const hasSelection = + event.type === 'copy' || event.type === 'cut' + ? documentHasUncollapsedSelection( ownerDocument ) + : documentHasSelection( ownerDocument ) && + ! ownerDocument.activeElement.isContentEditable; + + // Let native copy behaviour take over in input fields. + if ( hasSelection ) { + return; + } + } + const { activeElement } = event.target.ownerDocument; if ( ! node.contains( activeElement ) ) { @@ -72,22 +91,6 @@ export default function useClipboardHandler() { const expandSelectionIsNeeded = ! shouldHandleWholeBlocks && ! isSelectionMergeable; if ( event.type === 'copy' || event.type === 'cut' ) { - if ( ! hasMultiSelection() ) { - const { target } = event; - const { ownerDocument } = target; - // If copying, only consider actual text selection as selection. - // Otherwise, any focus on an input field is considered. - const hasSelection = - event.type === 'copy' || event.type === 'cut' - ? documentHasUncollapsedSelection( ownerDocument ) - : documentHasSelection( ownerDocument ); - - // Let native copy behaviour take over in input fields. - if ( hasSelection ) { - return; - } - } - event.preventDefault(); if ( selectedBlockClientIds.length === 1 ) { diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts index 11bc11c43f603c..886b35327fd4ec 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts +++ b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts @@ -50,7 +50,7 @@ export function setClipboardData( } async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { - clipboardDataHolder = await page.evaluate( + const output = await page.evaluate( ( [ _type, _clipboardData ] ) => { const canvasDoc = // @ts-ignore @@ -99,6 +99,10 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { canvasDoc.activeElement.dispatchEvent( event ); + if ( _type === 'paste' ) { + return event.defaultPrevented; + } + return { 'text/plain': event.clipboardData.getData( 'text/plain' ), 'text/html': event.clipboardData.getData( 'text/html' ), @@ -107,6 +111,17 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { }, [ type, clipboardDataHolder ] as const ); + + if ( typeof output === 'object' ) { + clipboardDataHolder = output; + } + + if ( output === false ) { + // Emulate paste by typing the clipboard content, which works across all + // elements and documents (keyboard.type does uses the nested active + // element automatically). + await page.keyboard.type( clipboardDataHolder[ 'text/plain' ] ); + } } const isAppleOS = () => process.platform === 'darwin'; diff --git a/test/e2e/specs/editor/blocks/rss.spec.js b/test/e2e/specs/editor/blocks/rss.spec.js new file mode 100644 index 00000000000000..1f6b640926b7c0 --- /dev/null +++ b/test/e2e/specs/editor/blocks/rss.spec.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'RSS', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + // See: https://github.com/WordPress/gutenberg/pull/61389. + test( 'should retain native copy/paste behavior for input fields', async ( { + editor, + pageUtils, + } ) => { + await editor.insertBlock( { name: 'core/rss' } ); + pageUtils.setClipboardData( { + plainText: 'https://developer.wordpress.org/news/feed/', + } ); + await pageUtils.pressKeys( 'primary+v' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/rss', + attributes: { + feedURL: 'https://developer.wordpress.org/news/feed/', + }, + }, + ] ); + } ); +} ); From e2f151665e3e20faff538d05e80aae2f20a5499b Mon Sep 17 00:00:00 2001 From: James Koster <james@jameskoster.co.uk> Date: Fri, 24 May 2024 16:17:00 +0100 Subject: [PATCH 75/94] Update list layout action styling (#61797) Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: keoshi <keoshi@git.wordpress.org> --- .../src/dropdown-menu-v2/test/index.tsx | 11 +++++-- packages/dataviews/src/style.scss | 32 +++++++++++++------ packages/dataviews/src/view-list.tsx | 5 +-- .../src/components/page-pages/style.scss | 2 +- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx index 10351d6cb588aa..2829fbb8fefce0 100644 --- a/packages/components/src/dropdown-menu-v2/test/index.tsx +++ b/packages/components/src/dropdown-menu-v2/test/index.tsx @@ -54,9 +54,14 @@ describe( 'DropdownMenu', () => { expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' ); - expect( - screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } ) - ).toHaveFocus(); + await waitFor( () => + expect( + screen.getByRole( 'menu', { + name: toggleButton.textContent ?? '', + } ) + ).toHaveFocus() + ); + expect( screen.getByRole( 'separator' ) ).toHaveAttribute( 'aria-orientation', 'horizontal' diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e02a0b97637aa2..66ba61147bc882 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -428,15 +428,27 @@ } } - .dataviews-view-list__item-actions .components-button { - opacity: 0; + .dataviews-view-list__item-actions { + .components-button { + opacity: 0; + position: fixed; + } } &.is-selected, &.is-hovered, &:focus-within { - .dataviews-view-list__item-actions .components-button { - opacity: 1; + .dataviews-view-list__item-actions { + padding-right: $grid-unit-40; + + .components-button { + opacity: 1; + position: static; + } + } + + .dataviews-view-list__item { + padding-right: 0; } } @@ -465,8 +477,7 @@ color: $gray-900; .dataviews-view-list__primary-field, - .dataviews-view-list__fields, - .components-button { + .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } } @@ -491,6 +502,7 @@ } .dataviews-view-list__primary-field { min-height: $grid-unit-05 * 5; + line-height: $grid-unit-05 * 5; overflow: hidden; } } @@ -534,17 +546,19 @@ gap: $grid-unit-10; flex-wrap: wrap; font-size: 12px; - line-height: $grid-unit-20; .dataviews-view-list__field { &:has(.dataviews-view-list__field-value:empty) { display: none; } } - } + .dataviews-view-list__field-value { + line-height: $grid-unit-05 * 5; + display: inline-flex; + } + } .dataviews-view-list__item-actions { - padding-top: $grid-unit-20; padding-right: $grid-unit-30; } diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 8ba12c03213fb4..f829b505454b30 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -129,7 +129,8 @@ function ListItem< Item extends AnyItem >( { > <HStack className="dataviews-view-list__item-wrapper" - alignment="top" + alignment="center" + spacing={ 0 } > <div role="gridcell"> <CompositeItem @@ -153,7 +154,7 @@ function ListItem< Item extends AnyItem >( { <div className="dataviews-view-list__media-placeholder"></div> ) } </div> - <VStack spacing={ 1 }> + <VStack spacing={ 0 }> <span className="dataviews-view-list__primary-field" id={ labelId } diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss index ee1012e923b515..41dcac76e27b53 100644 --- a/packages/edit-site/src/components/page-pages/style.scss +++ b/packages/edit-site/src/components/page-pages/style.scss @@ -60,7 +60,7 @@ .edit-site-page-pages__title-badge { background: $gray-100; color: $gray-700; - padding: $grid-unit-05 $grid-unit-10; + padding: 0 $grid-unit-05; border-radius: $radius-block-ui; font-size: 12px; font-weight: 400; From 0f7eb1332f5c7f0fbf2c4972c2ee15d8cc1d6abb Mon Sep 17 00:00:00 2001 From: Jorge Costa <jorge.costa@developer.pt> Date: Fri, 24 May 2024 18:19:05 +0200 Subject: [PATCH 76/94] Update: Remove unused components. (#61955) --- .../components/rename-post-menu-item/index.js | 138 --------------- .../src/components/template-actions/index.js | 165 ------------------ 2 files changed, 303 deletions(-) delete mode 100644 packages/edit-site/src/components/rename-post-menu-item/index.js delete mode 100644 packages/edit-site/src/components/template-actions/index.js diff --git a/packages/edit-site/src/components/rename-post-menu-item/index.js b/packages/edit-site/src/components/rename-post-menu-item/index.js deleted file mode 100644 index 59b3fd55123ee1..00000000000000 --- a/packages/edit-site/src/components/rename-post-menu-item/index.js +++ /dev/null @@ -1,138 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; -import { - Button, - MenuItem, - Modal, - TextControl, - __experimentalHStack as HStack, - __experimentalVStack as VStack, -} from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as noticesStore } from '@wordpress/notices'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Internal dependencies - */ -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; - -export default function RenamePostMenuItem( { post } ) { - const title = decodeEntities( - typeof post.title === 'string' ? post.title : post.title.rendered - ); - const [ editedTitle, setEditedTitle ] = useState( title ); - const [ isModalOpen, setIsModalOpen ] = useState( false ); - - const { - editEntityRecord, - __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits, - } = useDispatch( coreStore ); - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - - if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) { - return null; - } - - async function onRename( event ) { - event.preventDefault(); - - if ( editedTitle === title ) { - return; - } - - try { - await editEntityRecord( 'postType', post.type, post.id, { - title: editedTitle, - } ); - - // Update state before saving rerenders the list. - setEditedTitle( '' ); - setIsModalOpen( false ); - - // Persist edited entity. - await saveSpecifiedEntityEdits( - 'postType', - post.type, - post.id, - [ 'title' ], // Only save title to avoid persisting other edits. - { - throwOnError: true, - } - ); - - createSuccessNotice( __( 'Name updated.' ), { - id: 'template-update', - type: 'snackbar', - } ); - } catch ( error ) { - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : __( 'An error occurred while updating the name.' ); - - createErrorNotice( errorMessage, { type: 'snackbar' } ); - } - } - - return ( - <> - <MenuItem - onClick={ () => { - setIsModalOpen( true ); - setEditedTitle( title ); - } } - > - { __( 'Rename' ) } - </MenuItem> - { isModalOpen && ( - <Modal - title={ __( 'Rename' ) } - onRequestClose={ () => { - setIsModalOpen( false ); - } } - overlayClassName="edit-site-list__rename-modal" - focusOnMount="firstContentElement" - > - <form onSubmit={ onRename }> - <VStack spacing="5"> - <TextControl - __nextHasNoMarginBottom - __next40pxDefaultSize - label={ __( 'Name' ) } - value={ editedTitle } - onChange={ setEditedTitle } - required - /> - - <HStack justify="right"> - <Button - __next40pxDefaultSize - variant="tertiary" - onClick={ () => { - setIsModalOpen( false ); - } } - > - { __( 'Cancel' ) } - </Button> - - <Button - __next40pxDefaultSize - variant="primary" - type="submit" - > - { __( 'Save' ) } - </Button> - </HStack> - </VStack> - </form> - </Modal> - ) } - </> - ); -} diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js deleted file mode 100644 index c5bbe553bb9fb2..00000000000000 --- a/packages/edit-site/src/components/template-actions/index.js +++ /dev/null @@ -1,165 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { useState } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; -import { - DropdownMenu, - MenuGroup, - MenuItem, - __experimentalConfirmDialog as ConfirmDialog, -} from '@wordpress/components'; -import { moreVertical } from '@wordpress/icons'; -import { store as noticesStore } from '@wordpress/notices'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; -import isTemplateRemovable from '../../utils/is-template-removable'; -import isTemplateRevertable from '../../utils/is-template-revertable'; -import RenamePostMenuItem from '../rename-post-menu-item'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; - -export default function TemplateActions( { - postType, - postId, - className, - toggleProps, - onRemove, -} ) { - const template = useSelect( - ( select ) => - select( coreStore ).getEntityRecord( 'postType', postType, postId ), - [ postType, postId ] - ); - const { removeTemplate } = useDispatch( editSiteStore ); - const isRemovable = isTemplateRemovable( template ); - const isRevertable = isTemplateRevertable( template ); - - if ( ! isRemovable && ! isRevertable ) { - return null; - } - - return ( - <DropdownMenu - icon={ moreVertical } - label={ __( 'Actions' ) } - className={ className } - toggleProps={ toggleProps } - > - { ( { onClose } ) => ( - <MenuGroup> - { isRemovable && ( - <> - <RenamePostMenuItem - post={ template } - onClose={ onClose } - /> - <DeleteMenuItem - onRemove={ () => { - removeTemplate( template ); - onRemove?.(); - onClose(); - } } - title={ template.title.rendered } - /> - </> - ) } - { isRevertable && ( - <ResetMenuItem - template={ template } - onClose={ onClose } - /> - ) } - </MenuGroup> - ) } - </DropdownMenu> - ); -} - -function ResetMenuItem( { template, onClose } ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - const { revertTemplate } = useDispatch( editSiteStore ); - const { saveEditedEntityRecord } = useDispatch( coreStore ); - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - async function revertAndSaveTemplate() { - try { - await revertTemplate( template, { allowUndo: false } ); - await saveEditedEntityRecord( - 'postType', - template.type, - template.id - ); - createSuccessNotice( - sprintf( - /* translators: The template/part's name. */ - __( '"%s" reset.' ), - decodeEntities( template.title.rendered ) - ), - { - type: 'snackbar', - id: 'edit-site-template-reverted', - } - ); - } catch ( error ) { - const fallbackErrorMessage = - template.type === TEMPLATE_POST_TYPE - ? __( 'An error occurred while reverting the template.' ) - : __( - 'An error occurred while reverting the template part.' - ); - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : fallbackErrorMessage; - - createErrorNotice( errorMessage, { type: 'snackbar' } ); - } - } - return ( - <> - <MenuItem onClick={ () => setIsModalOpen( true ) }> - { __( 'Reset' ) } - </MenuItem> - <ConfirmDialog - isOpen={ isModalOpen } - onConfirm={ () => { - revertAndSaveTemplate(); - onClose(); - } } - onCancel={ () => setIsModalOpen( false ) } - confirmButtonText={ __( 'Reset' ) } - > - { __( 'Reset to default and clear all customizations?' ) } - </ConfirmDialog> - </> - ); -} - -function DeleteMenuItem( { onRemove, title } ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - return ( - <> - <MenuItem isDestructive onClick={ () => setIsModalOpen( true ) }> - { __( 'Delete' ) } - </MenuItem> - <ConfirmDialog - isOpen={ isModalOpen } - onConfirm={ onRemove } - onCancel={ () => setIsModalOpen( false ) } - confirmButtonText={ __( 'Delete' ) } - > - { sprintf( - // translators: %s: The template or template part's title. - __( 'Are you sure you want to delete "%s"?' ), - decodeEntities( title ) - ) } - </ConfirmDialog> - </> - ); -} From 2e45b02f50aadd8259ab6fb9e70151dc59cad602 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Fri, 24 May 2024 17:24:54 +0100 Subject: [PATCH 77/94] Editor: Unify text/code editor between post and site editors (#61934) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: bacoords <bacoords@git.wordpress.org> --- packages/base-styles/_z-index.scss | 3 +- .../edit-post/src/components/layout/index.js | 2 +- .../src/components/text-editor/index.js | 63 ------------ .../src/components/visual-editor/index.js | 4 +- packages/edit-post/src/style.scss | 3 +- .../components/block-editor/editor-canvas.js | 10 +- .../src/components/code-editor/index.js | 94 ------------------ .../src/components/code-editor/style.scss | 95 ------------------- .../edit-site/src/components/editor/index.js | 4 +- packages/edit-site/src/style.scss | 1 - .../src/components/text-editor/index.js | 48 ++++++++++ .../src/components/text-editor/style.scss | 8 +- .../edit-template-blocks-notification.js | 0 .../{editor-canvas => visual-editor}/index.js | 10 +- .../style.scss | 2 +- packages/editor/src/private-apis.js | 6 +- packages/editor/src/private-apis.native.js | 4 +- packages/editor/src/style.scss | 3 +- 18 files changed, 77 insertions(+), 283 deletions(-) delete mode 100644 packages/edit-post/src/components/text-editor/index.js delete mode 100644 packages/edit-site/src/components/code-editor/index.js delete mode 100644 packages/edit-site/src/components/code-editor/style.scss create mode 100644 packages/editor/src/components/text-editor/index.js rename packages/{edit-post => editor}/src/components/text-editor/style.scss (89%) rename packages/editor/src/components/{editor-canvas => visual-editor}/edit-template-blocks-notification.js (100%) rename packages/editor/src/components/{editor-canvas => visual-editor}/index.js (98%) rename packages/editor/src/components/{editor-canvas => visual-editor}/style.scss (83%) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 52476cd03228f6..55ad2f9c6313f3 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -10,8 +10,7 @@ $z-layers: ( ".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar ".block-editor-block-list__block-selection-button": 22, ".components-form-toggle__input": 1, - ".edit-post-text-editor__toolbar": 1, - ".edit-site-code-editor__toolbar": 1, + ".editor-text-editor__toolbar": 1, // These next three share a stacking context ".block-library-template-part__selection-search": 2, // higher sticky element diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 6db95b6694a686..fde9319a348daf 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -38,7 +38,6 @@ import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ -import TextEditor from '../text-editor'; import VisualEditor from '../visual-editor'; import EditPostKeyboardShortcuts from '../keyboard-shortcuts'; import InitPatternModal from '../init-pattern-modal'; @@ -62,6 +61,7 @@ const { InterfaceSkeleton, interfaceStore, Sidebar, + TextEditor, } = unlock( editorPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js deleted file mode 100644 index af3818e1778859..00000000000000 --- a/packages/edit-post/src/components/text-editor/index.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * WordPress dependencies - */ -import { - PostTextEditor, - PostTitleRaw, - store as editorStore, -} from '@wordpress/editor'; -import { Button } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { displayShortcut } from '@wordpress/keycodes'; -import { useEffect, useRef } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; - -export default function TextEditor() { - const isRichEditingEnabled = useSelect( ( select ) => { - return select( editorStore ).getEditorSettings().richEditingEnabled; - }, [] ); - const { switchEditorMode } = useDispatch( editorStore ); - - const { isWelcomeGuideVisible } = useSelect( ( select ) => { - const { isFeatureActive } = select( editPostStore ); - - return { - isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), - }; - }, [] ); - - const titleRef = useRef(); - - useEffect( () => { - if ( isWelcomeGuideVisible ) { - return; - } - titleRef?.current?.focus(); - }, [ isWelcomeGuideVisible ] ); - - return ( - <div className="edit-post-text-editor"> - { isRichEditingEnabled && ( - <div className="edit-post-text-editor__toolbar"> - <h2>{ __( 'Editing code' ) }</h2> - <Button - variant="tertiary" - onClick={ () => switchEditorMode( 'visual' ) } - shortcut={ displayShortcut.secondary( 'm' ) } - > - { __( 'Exit code editor' ) } - </Button> - </div> - ) } - <div className="edit-post-text-editor__body"> - <PostTitleRaw ref={ titleRef } /> - <PostTextEditor /> - </div> - </div> - ); -} diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 43ee2458ceba24..f6686b5977dd4e 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -22,7 +22,7 @@ import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; import { usePaddingAppender } from './use-padding-appender'; -const { EditorCanvas } = unlock( editorPrivateApis ); +const { VisualEditor: VisualEditorRoot } = unlock( editorPrivateApis ); const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; const DESIGN_POST_TYPES = [ @@ -105,7 +105,7 @@ export default function VisualEditor( { styles } ) { 'has-inline-canvas': ! isToBeIframed, } ) } > - <EditorCanvas + <VisualEditorRoot disableIframe={ ! isToBeIframed } styles={ styles } // We should auto-focus the canvas (title) on load. diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index be959f2d174e83..ef05d688c4d34e 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,7 +2,6 @@ @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/layout/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; -@import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; @import "./components/welcome-guide/style.scss"; @@ -36,7 +35,7 @@ body.js.block-editor-page { // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas. .editor-header, -.edit-post-text-editor, +.editor-text-editor, .editor-sidebar, .editor-post-publish-panel { @include reset; diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index cdfb876eb5e05b..bac51c5df7d335 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -21,9 +21,9 @@ import { import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); +const { VisualEditor } = unlock( editorPrivateApis ); -function EditorCanvas( { settings, children } ) { +function EditorCanvas( { settings } ) { const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => { const { getCanvasMode } = unlock( select( editSiteStore ) ); @@ -95,7 +95,7 @@ function EditorCanvas( { settings, children } ) { ); return ( - <EditorCanvasRoot + <VisualEditor styles={ styles } iframeProps={ { className: clsx( 'edit-site-visual-editor__editor-canvas', { @@ -103,9 +103,7 @@ function EditorCanvas( { settings, children } ) { } ), ...( canvasMode === 'view' ? viewModeIframeProps : {} ), } } - > - { children } - </EditorCanvasRoot> + /> ); } diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js deleted file mode 100644 index 8c27a48b01cec9..00000000000000 --- a/packages/edit-site/src/components/code-editor/index.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * External dependencies - */ -import Textarea from 'react-autosize-textarea'; - -/** - * WordPress dependencies - */ -import { __unstableSerializeAndClean } from '@wordpress/blocks'; -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { __ } from '@wordpress/i18n'; -import { Button, VisuallyHidden } from '@wordpress/components'; -import { useMemo } from '@wordpress/element'; -import { useInstanceId } from '@wordpress/compose'; -import { store as editorStore } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; - -export default function CodeEditor() { - const instanceId = useInstanceId( CodeEditor ); - const { shortcut, content, blocks, type, id } = useSelect( ( select ) => { - const { getEditedEntityRecord } = select( coreStore ); - const { getEditedPostType, getEditedPostId } = select( editSiteStore ); - const { getShortcutRepresentation } = select( keyboardShortcutsStore ); - const _type = getEditedPostType(); - const _id = getEditedPostId(); - const editedRecord = getEditedEntityRecord( 'postType', _type, _id ); - - return { - shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ), - content: editedRecord?.content, - blocks: editedRecord?.blocks, - type: _type, - id: _id, - }; - }, [] ); - const { editEntityRecord } = useDispatch( coreStore ); - // Replicates the logic found in getEditedPostContent(). - const realContent = useMemo( () => { - if ( content instanceof Function ) { - return content( { blocks } ); - } else if ( blocks ) { - // If we have parsed blocks already, they should be our source of truth. - // Parsing applies block deprecations and legacy block conversions that - // unparsed content will not have. - return __unstableSerializeAndClean( blocks ); - } - return content; - }, [ content, blocks ] ); - - const { switchEditorMode } = useDispatch( editorStore ); - return ( - <div className="edit-site-code-editor"> - <div className="edit-site-code-editor__toolbar"> - <h2>{ __( 'Editing code' ) }</h2> - <Button - variant="tertiary" - onClick={ () => switchEditorMode( 'visual' ) } - shortcut={ shortcut } - > - { __( 'Exit code editor' ) } - </Button> - </div> - <div className="edit-site-code-editor__body"> - <VisuallyHidden - as="label" - htmlFor={ `code-editor-text-area-${ instanceId }` } - > - { __( 'Type text or HTML' ) } - </VisuallyHidden> - <Textarea - autoComplete="off" - dir="auto" - value={ realContent } - onChange={ ( event ) => { - editEntityRecord( 'postType', type, id, { - content: event.target.value, - blocks: undefined, - selection: undefined, - } ); - } } - className="edit-site-code-editor-text-area" - id={ `code-editor-text-area-${ instanceId }` } - placeholder={ __( 'Start writing with text or HTML' ) } - /> - </div> - </div> - ); -} diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss deleted file mode 100644 index 17431de27b896c..00000000000000 --- a/packages/edit-site/src/components/code-editor/style.scss +++ /dev/null @@ -1,95 +0,0 @@ -.edit-site-code-editor { - position: relative; - width: 100%; - min-height: 100%; - background-color: $white; - - &__body { - width: 100%; - padding: $grid-unit-15; - max-width: $break-xlarge; - margin-left: auto; - margin-right: auto; - - @include break-large() { - padding: $grid-unit-30; - } - } - - // Exit code editor toolbar. - &__toolbar { - position: sticky; - z-index: z-index(".edit-site-code-editor__toolbar"); - top: 0; - left: 0; - right: 0; - display: flex; - background: rgba($white, 0.8); - padding: $grid-unit-05 $grid-unit-15; - - @include break-small() { - padding: $grid-unit-15; - } - - @include break-large() { - padding: $grid-unit-15 $grid-unit-30; - } - - h2 { - line-height: $button-size; - margin: 0 auto 0 0; - font-size: $default-font-size; - color: $gray-900; - } - } -} - -textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { - border: $border-width solid $gray-600; - border-radius: 0; - display: block; - margin: 0; - width: 100%; - box-shadow: none; - resize: none; - overflow: hidden; - font-family: $editor-html-font; - line-height: 2.4; - min-height: 200px; - transition: border 0.1s ease-out, box-shadow 0.1s linear; - @include reduce-motion("transition"); - - // Same padding as title. - padding: $grid-unit-20; - @include break-small() { - padding: $grid-unit-30; - } - - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size !important; - @include break-small { - font-size: $text-editor-font-size !important; - } - - &:focus { - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - - // Elevate the z-index on focus so the focus style is uncropped. - position: relative; - } - - &::-webkit-input-placeholder { - color: $dark-gray-placeholder; - } - - &::-moz-placeholder { - color: $dark-gray-placeholder; - // Override Firefox default. - opacity: 1; - } - - &:-ms-input-placeholder { - color: $dark-gray-placeholder; - } -} diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index d8ebf2c1f54861..ba4d751de5ae08 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -39,7 +39,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import CodeEditor from '../code-editor'; import Header from '../header-edit-mode'; import WelcomeGuide from '../welcome-guide'; import { store as editSiteStore } from '../../store'; @@ -64,6 +63,7 @@ const { interfaceStore, SavePublishPanels, Sidebar, + TextEditor, } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -346,7 +346,7 @@ export default function Editor( { isLoading } ) { <> { isEditMode && <EditorNotices /> } { editorMode === 'text' && isEditMode && ( - <CodeEditor /> + <TextEditor /> ) } { ! isLargeViewport && showVisualEditor && ( <BlockToolbar hideDragHandle /> diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 5b5acffd2596e4..7416b055cae7ce 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -3,7 +3,6 @@ @import "./components/add-new-template/style.scss"; @import "./components/block-editor/style.scss"; @import "./components/canvas-loader/style.scss"; -@import "./components/code-editor/style.scss"; @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; @import "./components/global-styles-sidebar/style.scss"; diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js new file mode 100644 index 00000000000000..5bfb53c574aa30 --- /dev/null +++ b/packages/editor/src/components/text-editor/index.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import PostTextEditor from '../post-text-editor'; +import PostTitleRaw from '../post-title/post-title-raw'; + +export default function TextEditor() { + const { switchEditorMode } = useDispatch( editorStore ); + const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => { + const { getEditorSettings } = select( editorStore ); + const { getShortcutRepresentation } = select( keyboardShortcutsStore ); + + return { + shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ), + isRichEditingEnabled: getEditorSettings().richEditingEnabled, + }; + }, [] ); + + return ( + <div className="editor-text-editor"> + { isRichEditingEnabled && ( + <div className="editor-text-editor__toolbar"> + <h2>{ __( 'Editing code' ) }</h2> + <Button + variant="tertiary" + onClick={ () => switchEditorMode( 'visual' ) } + shortcut={ shortcut } + > + { __( 'Exit code editor' ) } + </Button> + </div> + ) } + <div className="editor-text-editor__body"> + <PostTitleRaw /> + <PostTextEditor /> + </div> + </div> + ); +} diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss similarity index 89% rename from packages/edit-post/src/components/text-editor/style.scss rename to packages/editor/src/components/text-editor/style.scss index ab248317de1dbf..c8589fed6de6e3 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/editor/src/components/text-editor/style.scss @@ -1,4 +1,4 @@ -.edit-post-text-editor { +.editor-text-editor { position: relative; width: 100%; background-color: $white; @@ -31,7 +31,7 @@ } } -.edit-post-text-editor__body { +.editor-text-editor__body { width: 100%; padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15; max-width: $break-xlarge; @@ -44,9 +44,9 @@ } // Exit code editor toolbar. -.edit-post-text-editor__toolbar { +.editor-text-editor__toolbar { position: sticky; - z-index: z-index(".edit-post-text-editor__toolbar"); + z-index: z-index(".editor-text-editor__toolbar"); top: 0; left: 0; right: 0; diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js similarity index 100% rename from packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js rename to packages/editor/src/components/visual-editor/edit-template-blocks-notification.js diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/visual-editor/index.js similarity index 98% rename from packages/editor/src/components/editor-canvas/index.js rename to packages/editor/src/components/visual-editor/index.js index dc13d72074895d..6007cd8f33e45a 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -96,7 +96,7 @@ function checkForPostContentAtRootLevel( blocks ) { return false; } -function EditorCanvas( { +function VisualEditor( { // Ideally as we unify post and site editors, we won't need these props. autoFocus, styles, @@ -373,7 +373,7 @@ function EditorCanvas( { return ( <div - className={ clsx( 'editor-canvas', { + className={ clsx( 'editor-visual-editor', { 'has-padding': isFocusedEntity || enableResizing, 'is-resizable': enableResizing, } ) } @@ -407,7 +407,7 @@ function EditorCanvas( { ! isDesignPostType && ( <> <LayoutStyle - selector=".editor-editor-canvas__post-title-wrapper" + selector=".editor-visual-editor__post-title-wrapper" layout={ fallbackLayout } /> <LayoutStyle @@ -426,7 +426,7 @@ function EditorCanvas( { { renderingMode === 'post-only' && ! isDesignPostType && ( <div className={ clsx( - 'editor-editor-canvas__post-title-wrapper', + 'editor-visual-editor__post-title-wrapper', // The following class is only here for backward comapatibility // some themes might be using it to style the post title. 'edit-post-visual-editor__post-title-wrapper', @@ -491,4 +491,4 @@ function EditorCanvas( { ); } -export default EditorCanvas; +export default VisualEditor; diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/visual-editor/style.scss similarity index 83% rename from packages/editor/src/components/editor-canvas/style.scss rename to packages/editor/src/components/visual-editor/style.scss index 3e9d12cc190247..b1f953d044e346 100644 --- a/packages/editor/src/components/editor-canvas/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -1,4 +1,4 @@ -.editor-canvas { +.editor-visual-editor { height: 100%; &.is-resizable { diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index ccfe6d4d61ebd1..128965bc9e4205 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -6,7 +6,6 @@ import * as interfaceApis from '@wordpress/interface'; /** * Internal dependencies */ -import EditorCanvas from './components/editor-canvas'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; @@ -31,6 +30,8 @@ import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; import ResizableEditor from './components/resizable-editor'; import Sidebar from './components/sidebar'; +import TextEditor from './components/text-editor'; +import VisualEditor from './components/visual-editor'; import { mergeBaseAndUserConfigs, GlobalStylesProvider, @@ -40,7 +41,6 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; export const privateApis = {}; lock( privateApis, { - EditorCanvas, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, GlobalStylesProvider, @@ -64,6 +64,8 @@ lock( privateApis, { PostLastEditedPanel, ResizableEditor, Sidebar, + TextEditor, + VisualEditor, // This is a temporary private API while we're updating the site editor to use EditorProvider. useAutoSwitchEditorSidebars, diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js index 78ef82c327f8fd..d6fb0894d04d64 100644 --- a/packages/editor/src/private-apis.native.js +++ b/packages/editor/src/private-apis.native.js @@ -6,7 +6,7 @@ import * as interfaceApis from '@wordpress/interface'; /** * Internal dependencies */ -import EditorCanvas from './components/editor-canvas'; +import VisualEditor from './components/visual-editor'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; @@ -33,7 +33,7 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; export const privateApis = {}; lock( privateApis, { - EditorCanvas, + VisualEditor, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, InserterSidebar, diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index ccc5c4c4553fb3..59327ac4a3811b 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -8,7 +8,6 @@ @import "./components/document-bar/style.scss"; @import "./components/document-outline/style.scss"; @import "./components/document-tools/style.scss"; -@import "./components/editor-canvas/style.scss"; @import "./components/editor-notices/style.scss"; @import "./components/entities-saved-states/style.scss"; @import "./components/error-boundary/style.scss"; @@ -52,3 +51,5 @@ @import "./components/site-discussion/style.scss"; @import "./components/table-of-contents/style.scss"; @import "./components/template-areas/style.scss"; +@import "./components/text-editor/style.scss"; +@import "./components/visual-editor/style.scss"; From 6f245b7ea00fd8dd5ba70ea349ea74a331c99b13 Mon Sep 17 00:00:00 2001 From: Tanner Stokes <tanner.stokes@automattic.com> Date: Fri, 24 May 2024 12:40:43 -0400 Subject: [PATCH 78/94] Mobile Release v1.119.0 (#61910) * Release script: Update react-native-editor version to 1.119.0 * Release script: Update CHANGELOG for version 1.119.0 * Release script: Update podfile --- package-lock.json | 6 +++--- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/CHANGELOG.md | 2 ++ packages/react-native-editor/ios/Podfile.lock | 16 ++++++++-------- packages/react-native-editor/package.json | 2 +- 6 files changed, 16 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea3f6db515dc1b..63363db234b876 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55131,7 +55131,7 @@ }, "packages/react-native-aztec": { "name": "@wordpress/react-native-aztec", - "version": "1.118.0", + "version": "1.119.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/element": "file:../element", @@ -55148,7 +55148,7 @@ }, "packages/react-native-bridge": { "name": "@wordpress/react-native-bridge", - "version": "1.118.0", + "version": "1.119.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/react-native-aztec": "file:../react-native-aztec" @@ -55163,7 +55163,7 @@ }, "packages/react-native-editor": { "name": "@wordpress/react-native-editor", - "version": "1.118.0", + "version": "1.119.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index a6617722f5ecf0..b3352cdbd3eb57 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.118.0", + "version": "1.119.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index bb8eba0a928dee..0d8998c650b8f1 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.118.0", + "version": "1.119.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 7e3fc89ddbd6f3..1775a02cf5600e 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased + +## 1.119.0 - [internal] Remove circular dependencies within the components package [#61102] - [internal] Upgrade target sdk version to Android API 34 [#61727] diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 9abe99edd33f13..896262f752f0c9 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.73.3) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.118.0): + - Gutenberg (1.119.0): - React-Core (= 0.73.3) - React-CoreModules (= 0.73.3) - React-RCTImage (= 0.73.3) @@ -912,10 +912,10 @@ PODS: - React-Core - react-native-slider (3.0.2-wp-4): - React-Core - - react-native-video (5.2.0-wp-6): + - react-native-video (5.2.0-wp-7): - React-Core - - react-native-video/Video (= 5.2.0-wp-6) - - react-native-video/Video (5.2.0-wp-6): + - react-native-video/Video (= 5.2.0-wp-7) + - react-native-video/Video (5.2.0-wp-7): - React-Core - react-native-webview (13.6.1): - React-Core @@ -1109,7 +1109,7 @@ PODS: - React-Core - RNSVG (14.0.0): - React-Core - - RNTAztecView (1.118.0): + - RNTAztecView (1.119.0): - React-Core - WordPress-Aztec-iOS (= 1.19.11) - SDWebImage (5.11.1): @@ -1343,7 +1343,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 73b3972e2bd20b3235ff2014f06a3d3af675ed29 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 - Gutenberg: c0094e0fdfa895be7ad038dbb7b42dc0d21074cf + Gutenberg: 8f5a5b16c987c6532add8413cb3411f583f43b69 hermes-engine: 5420539d016f368cd27e008f65f777abd6098c56 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c @@ -1373,7 +1373,7 @@ SPEC CHECKSUMS: react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89 react-native-slider: dff0d8a46f368a8d1bacd8638570d75b9b0be400 - react-native-video: 6dee623307ed9d04d1be2de87494f9a0fa2041d1 + react-native-video: 6768bf960f45c24bf75d2ba68d433d3ae3829a8e react-native-webview: 02e4beee6b2b2b7391ee1c565788b8f8d6df9d05 React-nativeconfig: 4662ac75a0a77789c9ed896ed77baa1a25cdf006 React-NativeModulesApple: 92bc296f2ae166d10cb4d6a05498c80bf4ef9fa2 @@ -1402,7 +1402,7 @@ SPEC CHECKSUMS: RNReanimated: 6936b41d8afb97175e7c0ab40425b53103f71046 RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825 RNSVG: 255767813dac22db1ec2062c8b7e7b856d4e5ae6 - RNTAztecView: caf0e76a80867970eaa182cf9bf2d5b3c89285c5 + RNTAztecView: c0a124a24b01a96ceeac8c0dcdc461f2d06e13f2 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index cfc77cc5c264dc..710202587b55a4 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.118.0", + "version": "1.119.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From f5242321acccdab9f3f7c96944131702f7b91112 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation <gutenberg@wordpress.org> Date: Fri, 24 May 2024 18:05:04 +0000 Subject: [PATCH 79/94] Bump plugin version to 18.4.1 --- gutenberg.php | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index fad665cc5b9599..becad26a3e9f3a 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality. * Requires at least: 6.4 * Requires PHP: 7.2 - * Version: 18.4.0 + * Version: 18.4.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 63363db234b876..4e9c834b6e401d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "18.4.0", + "version": "18.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "18.4.0", + "version": "18.4.1", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/package.json b/package.json index a15ab1e2cb2131..6e48b736518fbe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "18.4.0", + "version": "18.4.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", From 52ec776e81549dbe8122585ab03a60cbd101ad8b Mon Sep 17 00:00:00 2001 From: Jon Surrell <sirreal@users.noreply.github.com> Date: Fri, 24 May 2024 20:10:40 +0200 Subject: [PATCH 80/94] Remove package build-types directories when cleaning (#61939) Stale generated types can be left sitting around the repo which can cause build issues. Gutenberg recommends using the `clean:package-types` command to clean types and fix this problem, but the generated declaration files remain. This can cause issues with builds that are resolved by removing the stale declaration files (put in the build-types directories) and getting a fresh build. --- Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6e48b736518fbe..c28213ba9999e0 100644 --- a/package.json +++ b/package.json @@ -272,8 +272,8 @@ "prebuild:packages": "npm run clean:packages && lerna run build", "build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js", "build:plugin-zip": "bash ./bin/build-plugin-zip.sh", - "clean:package-types": "tsc --build --clean", - "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"", + "clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"", + "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style|build-types)\"", "dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"", "dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"", "distclean": "rimraf node_modules packages/*/node_modules", From ae3c2e22f4e2857c7ecb1805b31202ac00f67d73 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation <gutenberg@wordpress.org> Date: Fri, 24 May 2024 18:30:03 +0000 Subject: [PATCH 81/94] Update Changelog for 18.4.1 --- changelog.txt | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/changelog.txt b/changelog.txt index e79e675368077d..5791fb711c2c43 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,14 @@ == Changelog == += 18.4.1 = + +## Changelog + +### Bug fixes + +- Writing flow: fix paste for input fields ([61389](https://github.com/WordPress/gutenberg/pull/61389)) + + = 18.4.0 = ## Changelog From 1c0b71ea4a9fdb6490b12c675cf8a55417b990c9 Mon Sep 17 00:00:00 2001 From: Jorge Costa <jorge.costa@developer.pt> Date: Fri, 24 May 2024 23:31:33 +0200 Subject: [PATCH 82/94] Fix: Custom block editor link (#61962) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> --- packages/block-editor/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index de914a553c0bca..7c70473430b31e 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -66,7 +66,7 @@ registerCoreBlocks(); Any components in this package that have a counterpart in [@wordpress/components](/packages/components/README.md) are an extension of those components. -Unless you're [creating an editor](docs/how-to-guides/platform/custom-block-editor/README.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context. +Unless you're [creating an editor](/docs/how-to-guides/platform/custom-block-editor.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context. <!-- START TOKEN(Autogenerated API docs) --> From 62b0efd7af66c18d5717028e75cf8ff0c441c196 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 25 May 2024 10:55:05 +0900 Subject: [PATCH 83/94] InspectorControls: Text not displayed when "Show button text labels" is enabled (#61949) * InspectorControls: Text not displayed when "Show button text labels" is enabled * Don't rely on pseudo-elements Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> --- .../inspector-controls-tabs/index.js | 18 +++++++++++++++--- .../inspector-controls-tabs/style.scss | 12 ++---------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js index 76252bae975ae4..9e348ab4b1ed11 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js @@ -5,6 +5,8 @@ import { Button, privateApis as componentsPrivateApis, } from '@wordpress/components'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -24,6 +26,10 @@ export default function InspectorControlsTabs( { hasBlockStyles, tabs, } ) { + const showIconLabels = useSelect( ( select ) => { + return select( preferencesStore ).get( 'core', 'showIconLabels' ); + }, [] ); + // The tabs panel will mount before fills are rendered to the list view // slot. This means the list view tab isn't initially included in the // available tabs so the panel defaults selection to the settings tab @@ -43,10 +49,16 @@ export default function InspectorControlsTabs( { tabId={ tab.name } render={ <Button - icon={ tab.icon } - label={ tab.title } + icon={ + ! showIconLabels ? tab.icon : undefined + } + label={ + ! showIconLabels ? tab.title : undefined + } className={ tab.className } - /> + > + { showIconLabels && tab.title } + </Button> } /> ) ) } diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss index f25e89903a6efd..70614f56dbcb3b 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss +++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss @@ -1,15 +1,7 @@ .show-icon-labels { .block-editor-block-inspector__tabs [role="tablist"] { - .components-button.has-icon { - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - // Uses ::before as ::after is already used for active tab styling. - &::before { - content: attr(aria-label); - } + .components-button { + justify-content: center; } } } From 97422ea30e86fbff7d5fa8ad66915cd60e886855 Mon Sep 17 00:00:00 2001 From: Vicente Canales <1157901+vcanales@users.noreply.github.com> Date: Sat, 25 May 2024 11:27:05 -0500 Subject: [PATCH 84/94] Enable shadow support for cover block (#61883) On previous attempts to do this, the cover block was displaying inconsistencies between how it was rendered in the editor vs the frontend; that doesn't seem to be the case anymore, so we should be able to enable shadow support without any modifications to the block itself. I'd still appreciate some eyes on this, because I don't know what exactly has changed since the first time I attempted this. Tracking issue: https://github.com/WordPress/gutenberg/issues/57103 Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/cover/block.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c08869db34b484..7b7dbe92915678 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -245,7 +245,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media -- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index eb55a8dbabec1c..0ce80ca8d424f4 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -85,6 +85,7 @@ "anchor": true, "align": true, "html": false, + "shadow": true, "spacing": { "padding": true, "margin": [ "top", "bottom" ], From 278810c1b987a6926fc41248f567d8bfa4230b70 Mon Sep 17 00:00:00 2001 From: Dani Guardiola <hi@daniguardio.la> Date: Sat, 25 May 2024 22:57:12 +0200 Subject: [PATCH 85/94] Remove reduceMotion utility. (#61963) * Remove reduceMotion utility. * Update changelog. Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../styles/focal-point-style.ts | 10 ++---- .../components/src/utils/reduce-motion.js | 35 ------------------- packages/components/src/utils/style-mixins.js | 1 - 4 files changed, 4 insertions(+), 43 deletions(-) delete mode 100644 packages/components/src/utils/reduce-motion.js diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3d5b0d9dfe1f35..54f516ed84ba92 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ ### Internal +- Remove `reduceMotion` util ([#61963](https://github.com/WordPress/gutenberg/pull/61963)). - Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)). - Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). - Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)). diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index 5ee0c01c42dd62..6f95978256f72e 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -3,11 +3,6 @@ */ import styled from '@emotion/styled'; -/** - * Internal dependencies - */ -import { reduceMotion } from '../../utils'; - export const PointerCircle = styled.div` background-color: transparent; cursor: grab; @@ -23,9 +18,10 @@ export const PointerCircle = styled.div` border-radius: 50%; backdrop-filter: blur( 16px ) saturate( 180% ); box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px; - transition: transform 100ms linear; - ${ reduceMotion( 'transition' ) } + @media not ( prefers-reduced-motion ) { + transition: transform 100ms linear; + } ${ ( { isDragging }: { isDragging: boolean } ) => isDragging && diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js deleted file mode 100644 index 68089e019e50eb..00000000000000 --- a/packages/components/src/utils/reduce-motion.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Allows users to opt-out of animations via OS-level preferences. - * - * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name - * @return {string} Generated CSS code for the reduced style - * - * @deprecated Write your own media query instead, - * e.g. `@media not ( prefers-reduced-motion ) { ...some animation... }` or - * `@media ( prefers-reduced-motion ) { ...reduced animation... }`. - */ -export function reduceMotion( prop = 'transition' ) { - let style; - - switch ( prop ) { - case 'transition': - style = 'transition-duration: 0ms;'; - break; - - case 'animation': - style = 'animation-duration: 1ms;'; - break; - - default: - style = ` - animation-duration: 1ms; - transition-duration: 0ms; - `; - } - - return ` - @media ( prefers-reduced-motion: reduce ) { - ${ style }; - } - `; -} diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index c858e8731fc523..46ee1183f59698 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -1,6 +1,5 @@ export { boxSizingReset } from './box-sizing'; export { rgba } from './colors'; -export { reduceMotion } from './reduce-motion'; export { rtl } from './rtl'; export { font } from './font'; export { breakpoint } from './breakpoint'; From a307229d830c0caf709986eeb5f81a9ce69a0522 Mon Sep 17 00:00:00 2001 From: Ramon <ramonjd@users.noreply.github.com> Date: Mon, 27 May 2024 15:46:18 +1000 Subject: [PATCH 86/94] Background image: add functionality to remove a theme's default, site-wide background image in the editor by settings the value to `background-image: none` (#61998) Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> --- .../global-styles/background-panel.js | 38 +++++++++++++++---- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index b8c3b6358ab5f3..2e73f52564362e 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -83,6 +83,8 @@ export function hasBackgroundSizeValue( style ) { export function hasBackgroundImageValue( style ) { return ( !! style?.background?.backgroundImage?.id || + // Supports url() string values in theme.json. + 'string' === typeof style?.background?.backgroundImage || !! style?.background?.backgroundImage?.url ); } @@ -279,6 +281,23 @@ function BackgroundImageToolsPanelItem( { const hasValue = hasBackgroundImageValue( style ); + const closeAndFocus = () => { + const [ toggleButton ] = focus.tabbable.find( + replaceContainerRef.current + ); + // Focus the toggle button and close the dropdown menu. + // This ensures similar behaviour as to selecting an image, where the dropdown is + // closed and focus is redirected to the dropdown toggle button. + toggleButton?.focus(); + toggleButton?.click(); + }; + + const onRemove = () => + onChange( + setImmutably( style, [ 'background', 'backgroundImage' ], 'none' ) + ); + const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue ); + return ( <ToolsPanelItem className="single-column" @@ -311,17 +330,20 @@ function BackgroundImageToolsPanelItem( { } variant="secondary" > + { canRemove && ( + <MenuItem + onClick={ () => { + closeAndFocus(); + onRemove(); + } } + > + { __( 'Remove' ) } + </MenuItem> + ) } { hasValue && ( <MenuItem onClick={ () => { - const [ toggleButton ] = focus.tabbable.find( - replaceContainerRef.current - ); - // Focus the toggle button and close the dropdown menu. - // This ensures similar behaviour as to selecting an image, where the dropdown is - // closed and focus is redirected to the dropdown toggle button. - toggleButton?.focus(); - toggleButton?.click(); + closeAndFocus(); resetBackgroundImage(); } } > From 36c71e59ec1a5987738e237579ad079cdfb9a91f Mon Sep 17 00:00:00 2001 From: Jon Surrell <sirreal@users.noreply.github.com> Date: Mon, 27 May 2024 09:51:47 +0200 Subject: [PATCH 87/94] Add 60 minute timeout to performance job (#61957) The performance job on CI sometimes hangs and runs indefinitely. Add a timeout. Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> --- .github/workflows/performance.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index 7f239652774df1..2a80325dba9d4d 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -25,6 +25,7 @@ concurrency: jobs: performance: + timeout-minutes: 60 name: Run performance tests runs-on: ubuntu-latest if: ${{ github.repository == 'WordPress/gutenberg' }} From 0e1c82fd86c344730a7867e121d6da2207c7c2ab Mon Sep 17 00:00:00 2001 From: Jon Surrell <sirreal@users.noreply.github.com> Date: Mon, 27 May 2024 10:16:07 +0200 Subject: [PATCH 88/94] Remove build-types/ clean from clean:packages (#62008) * Remove build-types/ clean from clean:packages * One last distclean try * Revert "One last distclean try" This reverts commit eeddede3b6c6e6fb46bf1b1f523d93800e5af97b. Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c28213ba9999e0..ac50b0caf19479 100644 --- a/package.json +++ b/package.json @@ -273,7 +273,7 @@ "build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js", "build:plugin-zip": "bash ./bin/build-plugin-zip.sh", "clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"", - "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style|build-types)\"", + "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"", "dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"", "dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"", "distclean": "rimraf node_modules packages/*/node_modules", From 0140960bcbb3b9823d1948f8d8c7b87882f63ed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 27 May 2024 11:22:15 +0200 Subject: [PATCH 89/94] Add note about removing in and notIn operators (#62013) Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> --- packages/dataviews/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index cba3c4f9c8cb26..e05e83fbe46e4c 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -4,6 +4,7 @@ ### Breaking Changes +- Legacy support for `in` and `notIn` operators introduced in 0.8 .0 has been removed and they no longer work. Please, convert them to `is` and `isNot` respectively. - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). - Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). From a251d113881240384ee2f5b69c6cdc76b73dc20d Mon Sep 17 00:00:00 2001 From: Jorge Costa <jorge.costa@developer.pt> Date: Mon, 27 May 2024 11:28:11 +0200 Subject: [PATCH 90/94] Update link to architecture key concepts. (#61965) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --- docs/getting-started/faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 72d7bfd760d657..8ac489e3c154a2 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -200,7 +200,7 @@ Our approach—as outlined in [the technical overview introduction](https://make This also [gives us the flexibility](https://github.com/WordPress/gutenberg/issues/1516) to store those blocks that are inherently separate from the content stream (reusable pieces like widgets or small post type elements) elsewhere, and just keep token references for their placement. -We suggest you look at the [Gutenberg key concepts](/docs/getting-started/architecture/key-concepts.md) to learn more about how this aspect of the project works. +We suggest you look at the [Gutenberg key concepts](/docs/explanations/architecture/key-concepts.md) to learn more about how this aspect of the project works. ### How can I parse the post content back out into blocks in PHP or JS? From d6ff9bfa08b8580dc0c50b795c75c2e680a9fab6 Mon Sep 17 00:00:00 2001 From: Daniel Richards <daniel.richards@automattic.com> Date: Mon, 27 May 2024 17:30:22 +0800 Subject: [PATCH 91/94] Fix detaching patterns when a pattern has overrides, but there are no override values (#62014) * Fix detaching patterns when there are no overrides * Add e2e test for detaching pattern that supports overrides but has no override values Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> --- packages/patterns/src/store/actions.js | 4 +- .../editor/various/pattern-overrides.spec.js | 41 +++++++++++++++++++ 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/patterns/src/store/actions.js b/packages/patterns/src/store/actions.js index e288904f25968a..5eef01b2bb8f89 100644 --- a/packages/patterns/src/store/actions.js +++ b/packages/patterns/src/store/actions.js @@ -102,8 +102,8 @@ export const convertSyncedPatternToStatic = metadata = { ...metadata }; delete metadata.id; delete metadata.bindings; - // Use overriden values of the pattern block if they exist. - if ( existingOverrides[ metadata.name ] ) { + // Use overridden values of the pattern block if they exist. + if ( existingOverrides?.[ metadata.name ] ) { // Iterate over each overriden attribute. for ( const [ attributeName, value ] of Object.entries( existingOverrides[ metadata.name ] diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 706ddabd5a35dc..976f1c378daa97 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -272,6 +272,47 @@ test.describe( 'Pattern Overrides', () => { ] ); } ); + // See https://github.com/WordPress/gutenberg/pull/62014. + test( 'can convert a pattern block to regular blocks when the pattern supports overrides but not override values', async ( { + admin, + requestUtils, + editor, + } ) => { + const paragraphName = 'paragraph-name'; + const { id } = await requestUtils.createBlock( { + title: 'Pattern', + content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} --> +<p>Editable</p> +<!-- /wp:paragraph -->`, + status: 'publish', + } ); + + await admin.createNewPost(); + + await editor.insertBlock( { + name: 'core/block', + attributes: { ref: id }, + } ); + + // Convert back to regular blocks. + await editor.selectBlocks( + editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } ) + ); + await editor.showBlockToolbar(); + await editor.clickBlockOptionsMenuItem( 'Detach' ); + + // Check that the overrides remain. + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { + content: 'Editable', + metadata: { name: paragraphName }, + }, + }, + ] ); + } ); + test( "handles button's link settings", async ( { page, admin, From 29d08761a332b9cbd8d4d45217c2167f62c2499b Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 27 May 2024 19:18:01 +0900 Subject: [PATCH 92/94] Shadow Panel: Improve a11y and fix browser console error (#61980) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> --- .../src/components/global-styles/shadows-edit-panel.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js index 65503f2376969d..a9b0c859acff76 100644 --- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js +++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js @@ -362,10 +362,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) { 'edit-site-global-styles__shadow-editor__dropdown-toggle', { 'is-open': isOpen } ), - ariaExpanded: isOpen, - ariaLabel: shadowObj.inset - ? __( 'Inner shadow' ) - : __( 'Drop shadow' ), + 'aria-expanded': isOpen, }; const removeButtonProps = { onClick: onRemove, From 2bbe6bb715dabd2ac125003e9253385801d0808d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 27 May 2024 19:18:22 +0900 Subject: [PATCH 93/94] Show shadow tool by default under global styles (#61981) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: vcanales <vcanales@git.wordpress.org> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> --- .../block-editor/src/components/global-styles/border-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 3816bec9159c37..964fd1b30100e4 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -90,7 +90,7 @@ const DEFAULT_CONTROLS = { radius: true, color: true, width: true, - shadow: false, + shadow: true, }; export default function BorderPanel( { From 8c3a688af79c37adcb89c32aab92c3a7fd3772f1 Mon Sep 17 00:00:00 2001 From: Jon Surrell <sirreal@users.noreply.github.com> Date: Mon, 27 May 2024 12:30:26 +0200 Subject: [PATCH 94/94] Dataviews: Remove unused dependencies (#62010) Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> --- package-lock.json | 4 ---- packages/dataviews/CHANGELOG.md | 4 ++++ packages/dataviews/package.json | 2 -- packages/dataviews/tsconfig.json | 2 -- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e9c834b6e401d..2d2698149813a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53866,13 +53866,11 @@ "dependencies": { "@ariakit/react": "^0.3.12", "@babel/runtime": "^7.16.0", - "@wordpress/a11y": "file:../a11y", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", - "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", @@ -69119,13 +69117,11 @@ "requires": { "@ariakit/react": "^0.3.12", "@babel/runtime": "^7.16.0", - "@wordpress/a11y": "file:../a11y", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", - "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index e05e83fbe46e4c..85aaddc25bb645 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -8,6 +8,10 @@ - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). - Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). +### Internal + +- Remove some unused dependencies ([#62010](https://github.com/WordPress/gutenberg/pull/62010)). + ## 1.2.0 (2024-05-16) ### Internal diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 9fa8ea0c910c5a..5fb67307954014 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -30,13 +30,11 @@ "dependencies": { "@ariakit/react": "^0.3.12", "@babel/runtime": "^7.16.0", - "@wordpress/a11y": "file:../a11y", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", - "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json index 83c47d8320d838..3a944ae6e2d1d4 100644 --- a/packages/dataviews/tsconfig.json +++ b/packages/dataviews/tsconfig.json @@ -7,13 +7,11 @@ "checkJs": false }, "references": [ - { "path": "../a11y" }, { "path": "../components" }, { "path": "../compose" }, { "path": "../element" }, { "path": "../i18n" }, { "path": "../icons" }, - { "path": "../keycodes" }, { "path": "../primitives" }, { "path": "../private-apis" } ],