From defa4790b7393ed72f72014c963aff35747c4650 Mon Sep 17 00:00:00 2001 From: "okmttdhr, tada" Date: Mon, 5 Jun 2023 18:03:41 +0900 Subject: [PATCH 001/120] Add tests for useIsDirty (#51036) --- .../test/use-is-dirty.js | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 packages/editor/src/components/entities-saved-states/test/use-is-dirty.js diff --git a/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js b/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js new file mode 100644 index 00000000000000..04b6b4e566ef1f --- /dev/null +++ b/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import { act, renderHook } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { useIsDirty } from '../hooks/use-is-dirty'; + +jest.mock( '@wordpress/data', () => { + return { + useSelect: jest.fn().mockImplementation( ( fn ) => { + const select = () => { + return { + __experimentalGetDirtyEntityRecords: jest + .fn() + .mockReturnValue( [ + { + kind: 'root', + name: 'site', + title: 'title', + property: 'property', + }, + { + kind: 'postType', + name: 'post', + title: 'title', + property: 'property', + }, + ] ), + getEntityRecordEdits: jest.fn().mockReturnValue( { + title: 'My Site', + } ), + }; + }; + return fn( select ); + } ), + }; +} ); + +jest.mock( '@wordpress/core-data', () => { + return { + store: { + __experimentalGetDirtyEntityRecords: jest.fn(), + getEntityRecordEdits: jest.fn(), + }, + }; +} ); + +describe( 'useIsDirty', () => { + it( 'should calculate dirtyEntityRecords', () => { + const { result } = renderHook( () => useIsDirty() ); + expect( result.current.dirtyEntityRecords ).toEqual( [ + { + kind: 'postType', + name: 'post', + property: 'property', + title: 'title', + }, + { kind: 'root', name: 'site', property: 'title', title: 'Title' }, + ] ); + } ); + it( 'should return `isDirty: true` when there are changes', () => { + const { result } = renderHook( () => useIsDirty() ); + expect( result.current.isDirty ).toBeTruthy(); + } ); + it( 'should return `isDirty: false` when there are NO changes', async () => { + const { result } = renderHook( () => useIsDirty() ); + act( () => { + result.current.setUnselectedEntities( + { + kind: 'postType', + name: 'post', + key: 'key', + property: 'property', + }, + false + ); + } ); + act( () => { + result.current.setUnselectedEntities( + { + kind: 'root', + name: 'site', + key: 'key', + property: 'property', + }, + false + ); + } ); + expect( result.current.isDirty ).toBeFalsy(); + } ); +} ); From 1328f2db78cc5bc68f417d4f9c83329272c72474 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 6 Jun 2023 11:20:33 +1000 Subject: [PATCH 002/120] DocumentActions: Animate between page and template mode (#51224) * DocumentActions: Animate between page and template mode * Remove unnecessary setHasEditedTemplate() * refine toolbar animation --------- Co-authored-by: Saxon Fletcher --- .../document-actions/index.js | 39 ++++++++++---- .../document-actions/style.scss | 53 ++++++++++++++++--- 2 files changed, 75 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js index 5f14445ccefcd8..c4f70f8b9c8c1e 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js @@ -22,6 +22,7 @@ import { } from '@wordpress/icons'; import { useEntityRecord } from '@wordpress/core-data'; import { displayShortcut } from '@wordpress/keycodes'; +import { useState, useEffect, useRef } from '@wordpress/element'; /** * Internal dependencies @@ -51,6 +52,15 @@ function PageDocumentActions() { const { setHasPageContentLock } = useDispatch( editSiteStore ); + const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false ); + const prevHasPageContentLock = useRef( false ); + useEffect( () => { + if ( prevHasPageContentLock.current && ! hasPageContentLock ) { + setHasEditedTemplate( true ); + } + prevHasPageContentLock.current = hasPageContentLock; + }, [ hasPageContentLock ] ); + if ( ! hasResolved ) { return null; } @@ -64,17 +74,23 @@ function PageDocumentActions() { } return hasPageContentLock ? ( - + { editedRecord.title } ) : ( setHasPageContentLock( true ) } /> ); } -function TemplateDocumentActions( { onBack } ) { +function TemplateDocumentActions( { className, onBack } ) { const { isLoaded, record, getTitle, icon } = useEditedEntityRecord(); if ( ! isLoaded ) { @@ -95,7 +111,11 @@ function TemplateDocumentActions( { onBack } ) { : __( 'template' ); return ( - + { sprintf( /* translators: %s: the entity being edited, like "template"*/ @@ -108,10 +128,12 @@ function TemplateDocumentActions( { onBack } ) { ); } -function BaseDocumentActions( { icon, children, onBack, isPage = false } ) { +function BaseDocumentActions( { className, icon, children, onBack } ) { const { open: openCommandCenter } = useDispatch( commandsStore ); return ( -
+
{ onBack && ( + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js index 0ad7df02020d15..25979fcd4a036b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -7,10 +7,12 @@ import { __experimentalTruncate as Truncate, __experimentalVStack as VStack, } from '@wordpress/components'; +import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; -import { layout, page, home, loop } from '@wordpress/icons'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { layout, page, home, loop, plus } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; /** @@ -19,6 +21,11 @@ import { useSelect } from '@wordpress/data'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import { useLink } from '../routes/link'; import SidebarNavigationItem from '../sidebar-navigation-item'; +import SidebarButton from '../sidebar-button'; +import AddNewPageModal from '../add-new-page'; +import { unlock } from '../../private-apis'; + +const { useHistory } = unlock( routerPrivateApis ); const PageItem = ( { postType = 'page', postId, ...props } ) => { const linkInfo = useLink( { @@ -85,98 +92,127 @@ export default function SidebarNavigationScreenPages() { reorderedPages.splice( 1, 0, ...blogPage ); } + const [ showAddPage, setShowAddPage ] = useState( false ); + + const history = useHistory(); + + const handleNewPage = ( { type, id } ) => { + // Navigate to the created template editor. + history.push( { + postId: id, + postType: type, + canvas: 'edit', + } ); + setShowAddPage( false ); + }; + return ( - - { ( isLoadingPages || isLoadingTemplates ) && ( - - { __( 'Loading pages' ) } - - ) } - { ! ( isLoadingPages || isLoadingTemplates ) && ( - - { ! pagesAndTemplates?.length && ( - { __( 'No page found' ) } - ) } - { isHomePageBlog && homeTemplate && ( - - - { decodeEntities( - homeTemplate.title?.rendered || - __( '(no title)' ) - ) } - - - ) } - { reorderedPages?.map( ( item ) => { - let itemIcon; - switch ( item.id ) { - case frontPage: - itemIcon = home; - break; - case postsPage: - itemIcon = loop; - break; - default: - itemIcon = page; - } - return ( - - - { decodeEntities( - item?.title?.rendered || - __( '(no title)' ) - ) } - - - ); - } ) } - - { dynamicPageTemplates?.map( ( item ) => ( + <> + { showAddPage && ( + setShowAddPage( false ) } + /> + ) } + setShowAddPage( true ) } + /> + } + content={ + <> + { ( isLoadingPages || isLoadingTemplates ) && ( + + { __( 'Loading pages' ) } + + ) } + { ! ( isLoadingPages || isLoadingTemplates ) && ( + + { ! pagesAndTemplates?.length && ( + { __( 'No page found' ) } + ) } + { isHomePageBlog && homeTemplate && ( { decodeEntities( - item.title?.rendered || + homeTemplate.title?.rendered || __( '(no title)' ) ) } - ) ) } - { - document.location = - 'edit.php?post_type=page'; - } } - > - { __( 'Manage all pages' ) } - - - - ) } - - } - /> + ) } + { reorderedPages?.map( ( item ) => { + let itemIcon; + switch ( item.id ) { + case frontPage: + itemIcon = home; + break; + case postsPage: + itemIcon = loop; + break; + default: + itemIcon = page; + } + return ( + + + { decodeEntities( + item?.title?.rendered || + __( '(no title)' ) + ) } + + + ); + } ) } + + { dynamicPageTemplates?.map( ( item ) => ( + + + { decodeEntities( + item.title?.rendered || + __( '(no title)' ) + ) } + + + ) ) } + { + document.location = + 'edit.php?post_type=page'; + } } + > + { __( 'Manage all pages' ) } + + + + ) } + + } + /> + ); } diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js new file mode 100644 index 00000000000000..ba4f1986050300 --- /dev/null +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Pages', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + test( 'Create a new page', async ( { admin, page } ) => { + const pageName = 'demo'; + await admin.visitSiteEditor(); + await page.getByRole( 'button', { name: 'Pages' } ).click(); + await page.getByRole( 'button', { name: 'Draft a new page' } ).click(); + // Fill the page title and submit. + const newPageDialog = page.locator( + 'role=dialog[name="Draft a new page"i]' + ); + const pageTitleInput = newPageDialog.locator( + 'role=textbox[name="Page title"i]' + ); + await pageTitleInput.fill( pageName ); + await page.keyboard.press( 'Enter' ); + await expect( + page.locator( + `role=button[name="Dismiss this notice"i] >> text="${ pageName }" successfully created.` + ) + ).toBeVisible(); + } ); +} ); From a1d941e23033efc3a8a5147a67451bdbb03f188b Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 6 Jun 2023 14:06:40 +1000 Subject: [PATCH 004/120] Styles Screen: Add link to global styles revisions (#51149) * Styles Screen: Add link to global styles revisions * Add button label * Update packages/edit-site/src/components/global-styles/ui.js Co-authored-by: Ramon * Small code quality improvements * Try sticking the navigation screen footer to the bottom of the screen at all times * Add as span to the HStack * Update border radius and left padding so that the button lines up * Remove classnames call * Add redirect for style book, too * Only redirect to root when opening the style book on the revisions screen * Use truthy check for editor canvas container when redirecting from the revisions screen. Co-authored-by: ramon --------- Co-authored-by: Ramon Co-authored-by: ramon --- .../src/components/global-styles/ui.js | 28 ++++ .../index.js | 100 ++++++++++++-- .../style.scss | 15 ++ .../sidebar-navigation-screen-page/index.js | 2 +- .../sidebar-navigation-screen-page/style.scss | 6 + .../sidebar-navigation-screen/index.js | 128 +++++++++--------- .../sidebar-navigation-screen/style.scss | 13 ++ .../src/components/sidebar/style.scss | 3 + packages/edit-site/src/style.scss | 1 + 9 files changed, 222 insertions(+), 74 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-global-styles/style.scss diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index f15fcff11aa560..953904e314928c 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -237,6 +237,33 @@ function GlobalStylesBlockLink() { }, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] ); } +function GlobalStylesEditorCanvasContainerLink() { + const { goTo, location } = useNavigator(); + const editorCanvasContainerView = useSelect( + ( select ) => + unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + [] + ); + + // If the user switches the editor canvas container view, redirect + // to the appropriate screen. This effectively allows deep linking to the + // desired screens from outside the global styles navigation provider. + useEffect( () => { + if ( editorCanvasContainerView === 'global-styles-revisions' ) { + // Switching to the revisions container view should + // redirect to the revisions screen. + goTo( '/revisions' ); + } else if ( + !! editorCanvasContainerView && + location?.path === '/revisions' + ) { + // Switching to any container other than revisions should + // redirect from the revisions screen to the root global styles screen. + goTo( '/' ); + } + }, [ editorCanvasContainerView, location?.path, goTo ] ); +} + function GlobalStylesUI() { const blocks = getBlockTypes(); const editorCanvasContainerView = useSelect( @@ -326,6 +353,7 @@ function GlobalStylesUI() { + ); } 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 8e6f080e74a80a..926f8b8611af0d 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 @@ -2,12 +2,19 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { edit, seen } from '@wordpress/icons'; +import { backup, edit, seen } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components'; +import { + Icon, + __experimentalNavigatorButton as NavigatorButton, + __experimentalVStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { BlockEditorProvider } from '@wordpress/block-editor'; +import { humanTimeDiff } from '@wordpress/date'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -19,6 +26,7 @@ import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import SidebarNavigationItem from '../sidebar-navigation-item'; import StyleBook from '../style-book'; +import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; const noop = () => {}; @@ -74,13 +82,64 @@ function SidebarNavigationScreenGlobalStylesContent() { onChange={ noop } onInput={ noop } > -
- -
+ ); } +function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) { + const { revisions, isLoading } = useGlobalStylesRevisions(); + const { revisionsCount } = useSelect( ( select ) => { + const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = + select( coreStore ); + + const globalStylesId = __experimentalGetCurrentGlobalStylesId(); + const globalStyles = globalStylesId + ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) + : undefined; + + return { + revisionsCount: + globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0, + }; + }, [] ); + + const hasRevisions = revisionsCount >= 2; + const modified = revisions?.[ 0 ]?.modified; + + if ( ! hasRevisions || isLoading || ! modified ) { + return null; + } + + return ( + + + + + { __( 'Last modified' ) } + + + + + + + + + ); +} + export default function SidebarNavigationScreenGlobalStyles() { const { openGeneralSidebar } = useDispatch( editSiteStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); @@ -95,19 +154,31 @@ export default function SidebarNavigationScreenGlobalStyles() { [] ); - const openGlobalStyles = async () => - Promise.all( [ - setCanvasMode( 'edit' ), - openGeneralSidebar( 'edit-site/global-styles' ), - ] ); + const openGlobalStyles = useCallback( + async () => + Promise.all( [ + setCanvasMode( 'edit' ), + openGeneralSidebar( 'edit-site/global-styles' ), + ] ), + [ setCanvasMode, openGeneralSidebar ] + ); - const openStyleBook = async () => { + const openStyleBook = useCallback( async () => { await openGlobalStyles(); // Open the Style Book once the canvas mode is set to edit, // and the global styles sidebar is open. This ensures that // the Style Book is not prematurely closed. setEditorCanvasContainerView( 'style-book' ); - }; + }, [ openGlobalStyles, setEditorCanvasContainerView ] ); + + const openRevisions = useCallback( async () => { + await openGlobalStyles(); + // Open the global styles revisions once the canvas mode is set to edit, + // and the global styles sidebar is open. The global styles UI is responsible + // for redirecting to the revisions screen once the editor canvas container + // has been set to 'global-styles-revisions'. + setEditorCanvasContainerView( 'global-styles-revisions' ); + }, [ openGlobalStyles, setEditorCanvasContainerView ] ); return ( <> @@ -117,6 +188,11 @@ export default function SidebarNavigationScreenGlobalStyles() { 'Choose a different style combination for the theme styles.' ) } content={ } + footer={ + + } actions={ <> { ! isMobileViewport && ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/style.scss new file mode 100644 index 00000000000000..26ac157cb24bef --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/style.scss @@ -0,0 +1,15 @@ +.edit-site-sidebar-navigation-screen-global-styles__footer { + padding-left: $grid-unit-15; +} + +.edit-site-sidebar-navigation-screen-global-styles__revisions { + border-radius: $radius-block-ui; + + &:not(:hover) { + color: $gray-200; + + .edit-site-sidebar-navigation-screen-global-styles__revisions__label { + color: $gray-600; + } + } +} 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 index 5e0c113b3544ad..176470b3576b84 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -147,7 +147,7 @@ export default function SidebarNavigationScreenPage() { { __( 'Last modified' ) } 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 index 6ec9e565f9e8ff..c58e9f09392465 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss @@ -61,6 +61,12 @@ } } +.edit-site-sidebar-navigation-screen-page__footer { + padding-top: $grid-unit-10; + padding-bottom: $grid-unit-10; + padding-left: $grid-unit-20; +} + .edit-site-sidebar-navigation-screen-page__details { .edit-site-sidebar-navigation-screen-page__details-label { color: $gray-600; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 67e22721e78f0b..026cbaba8e860f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -42,74 +42,80 @@ export default function SidebarNavigationScreen( { const theme = getTheme( currentlyPreviewingTheme() ); return ( - - + - { ! isRoot ? ( - - ) : ( - - ) } - - { ! isPreviewingTheme() - ? title - : sprintf( - 'Previewing %1$s: %2$s', - theme?.name?.rendered, - title - ) } - - { actions && ( -
- { actions } -
+ { ! isRoot ? ( + + ) : ( + + ) } + + { ! isPreviewingTheme() + ? title + : sprintf( + 'Previewing %1$s: %2$s', + theme?.name?.rendered, + title + ) } + + { actions && ( +
+ { actions } +
+ ) } + + { meta && ( + <> +
+ { meta } +
+ ) } - - { meta && ( - <> -
- { meta } -
- - ) } - + + { footer && ( -
+
{ footer }
) } - + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 111b2650e41256..713a3ca1449e65 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -5,6 +5,12 @@ position: relative; } +.edit-site-sidebar-navigation-screen__main { + // Ensure the sidebar is always at least as tall as the viewport. + // This allows the footer section to be sticky at the bottom of the viewport. + flex-grow: 1; +} + .edit-site-sidebar-navigation-screen__content { margin: 0 0 $grid-unit-20 0; color: $gray-400; @@ -86,3 +92,10 @@ margin: $grid-unit-40 $grid-unit-20; border-top: 1px solid $gray-800; } + +.edit-site-sidebar-navigation-screen__footer { + position: sticky; + bottom: 0; + background-color: $gray-900; + padding: $grid-unit-20 0; +} diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 03d4410941167e..9a3644cc830d56 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -5,6 +5,9 @@ .components-navigator-screen { @include custom-scrollbars-on-hover(transparent, $gray-700); scrollbar-gutter: stable; + display: flex; + flex-direction: column; + height: 100%; } } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index e31978cf0f45df..1004684c17cc2c 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -27,6 +27,7 @@ @import "./components/sidebar-button/style.scss"; @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; +@import "./components/sidebar-navigation-screen-global-styles/style.scss"; @import "./components/sidebar-navigation-screen-page/style.scss"; @import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; From 2a08cbcf671df4b63291fa131643f0b6c0c038ed Mon Sep 17 00:00:00 2001 From: Ramon Date: Tue, 6 Jun 2023 16:37:31 +1000 Subject: [PATCH 005/120] Fluid typography: extract logic to derive fluid typography settings (#51188) * This commit updates the utilities to house logic to get the typography settings. Why is this required? Because there's a little tap dance that's needed to check whether fluid typography is enabled via boolean or object, and also whether a maximum viewport size value can be extracted from layout settings. Adds tests as well. * - rename typographySettings here to typographyOptions to indicate that we're supposed to pass it the return value from getFluidTypographyOptionsFromSettings - use TypographySettings as object return type - test for null values in isFluidTypographyEnabled check --- .../global-styles/test/typography-utils.js | 88 ++++++++++++++++++- .../global-styles/typography-utils.js | 67 +++++++++----- .../global-styles/use-global-styles-output.js | 19 ++-- .../src/components/global-styles/utils.js | 16 ++-- 4 files changed, 143 insertions(+), 47 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index 29f0ff52a95010..cfbf0ea68edd94 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -1,7 +1,10 @@ /** * Internal dependencies */ -import { getTypographyFontSizeValue } from '../typography-utils'; +import { + getTypographyFontSizeValue, + getFluidTypographyOptionsFromSettings, +} from '../typography-utils'; describe( 'typography utils', () => { describe( 'getTypographyFontSizeValue', () => { @@ -483,4 +486,87 @@ describe( 'typography utils', () => { } ); } ); } ); + + describe( 'typography utils', () => { + [ + { + message: + 'should return `undefined` when settings is `undefined`', + settings: undefined, + expected: { fluid: undefined }, + }, + + { + message: + 'should return `undefined` when typography is `undefined`', + settings: {}, + expected: { fluid: undefined }, + }, + + { + message: + 'should return `undefined` when typography.fluid is `undefined`', + settings: { typography: {} }, + expected: { fluid: undefined }, + }, + + { + message: + 'should return `false` when typography.fluid is disabled by `false`', + settings: { typography: { fluid: false } }, + expected: { fluid: false }, + }, + + { + message: 'should return `{}` when typography.fluid is empty', + settings: { typography: { fluid: {} } }, + expected: { fluid: {} }, + }, + + { + message: + 'should return false when typography.fluid is disabled and layout.wideSize is defined', + settings: { + typography: { fluid: false }, + layout: { wideSize: '1000rem' }, + }, + expected: { fluid: false }, + }, + + { + message: + 'should return true when fluid is enabled by a boolean', + settings: { typography: { fluid: true } }, + expected: { fluid: true }, + }, + + { + message: + 'should return fluid settings with merged `layout.wideSize`d', + settings: { + typography: { fluid: { minFontSize: '16px' } }, + layout: { wideSize: '1000rem' }, + }, + expected: { + fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' }, + }, + }, + + { + message: + 'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`', + settings: { + typography: { fluid: { maxViewPortWidth: '10px' } }, + layout: { wideSize: '1000rem' }, + }, + expected: { fluid: { maxViewPortWidth: '10px' } }, + }, + ].forEach( ( { message, settings, expected } ) => { + it( `${ message }`, () => { + expect( + getFluidTypographyOptionsFromSettings( settings ) + ).toEqual( expected ); + } ); + } ); + } ); } ); diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js index 6d7c7f9f910cc9..8eaefefbdb83eb 100644 --- a/packages/block-editor/src/components/global-styles/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/typography-utils.js @@ -37,38 +37,29 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils'; * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values. * * @param {Preset} preset - * @param {Object} typographySettings - * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options. + * @param {Object} typographyOptions + * @param {boolean|TypographySettings} typographyOptions.fluid Whether fluid typography is enabled, and, optionally, fluid font size options. * * @return {string|*} A font-size value or the value of preset.size. */ -export function getTypographyFontSizeValue( preset, typographySettings ) { +export function getTypographyFontSizeValue( preset, typographyOptions ) { const { size: defaultSize } = preset; - /* - * Catches falsy values and 0/'0'. - * Fluid calculations cannot be performed on 0. - */ - if ( ! defaultSize || '0' === defaultSize ) { - return defaultSize; - } - - if ( - ! typographySettings?.fluid || - ( typeof typographySettings?.fluid === 'object' && - Object.keys( typographySettings.fluid ).length === 0 ) - ) { + if ( ! isFluidTypographyEnabled( typographyOptions ) ) { return defaultSize; } - - // A font size has explicitly bypassed fluid calculations. - if ( false === preset?.fluid ) { + /* + * Checks whether a font size has explicitly bypassed fluid calculations. + * Also catches falsy values and 0/'0'. + * Fluid calculations cannot be performed on `0`. + */ + if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) { return defaultSize; } const fluidTypographySettings = - typeof typographySettings?.fluid === 'object' - ? typographySettings?.fluid + typeof typographyOptions?.fluid === 'object' + ? typographyOptions?.fluid : {}; const fluidFontSizeValue = getComputedFluidTypographyValue( { @@ -85,3 +76,37 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } + +function isFluidTypographyEnabled( typographySettings ) { + const fluidSettings = typographySettings?.fluid; + return ( + true === fluidSettings || + ( fluidSettings && + typeof fluidSettings === 'object' && + Object.keys( fluidSettings ).length > 0 ) + ); +} + +/** + * Returns fluid typography settings from theme.json setting object. + * + * @param {Object} settings Theme.json settings + * @param {Object} settings.typography Theme.json typography settings + * @param {Object} settings.layout Theme.json layout settings + * @return {TypographySettings} Fluid typography settings + */ +export function getFluidTypographyOptionsFromSettings( settings ) { + const typographySettings = settings?.typography; + const layoutSettings = settings?.layout; + return isFluidTypographyEnabled( typographySettings ) && + layoutSettings?.wideSize + ? { + fluid: { + maxViewPortWidth: layoutSettings.wideSize, + ...typographySettings.fluid, + }, + } + : { + fluid: typographySettings?.fluid, + }; +} 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 b20ddd0f02f54d..3de3be736e43ec 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 @@ -22,7 +22,10 @@ import { getCSSRules } from '@wordpress/style-engine'; */ import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils'; import { getBlockCSSSelector } from './get-block-css-selector'; -import { getTypographyFontSizeValue } from './typography-utils'; +import { + getTypographyFontSizeValue, + getFluidTypographyOptionsFromSettings, +} from './typography-utils'; import { GlobalStylesContext } from './context'; import { useGlobalSetting } from './hooks'; import { PresetDuotoneFilter } from '../duotone/components'; @@ -396,21 +399,9 @@ export function getStylesDeclarations( * Values that already have a "clamp()" function will not pass the test, * and therefore the original $value will be returned. */ - const typographySettings = - !! tree?.settings?.typography?.fluid && - tree?.settings?.layout?.wideSize - ? { - fluid: { - maxViewPortWidth: tree.settings.layout.wideSize, - ...tree.settings.typography.fluid, - }, - } - : { - fluid: tree?.settings?.typography?.fluid, - }; ruleValue = getTypographyFontSizeValue( { size: ruleValue }, - typographySettings + getFluidTypographyOptionsFromSettings( tree?.settings ) ); } diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index c25b70bbab89d5..a12ea2af9f79ea 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -7,7 +7,10 @@ import fastDeepEqual from 'fast-deep-equal/es6'; /** * Internal dependencies */ -import { getTypographyFontSizeValue } from './typography-utils'; +import { + getTypographyFontSizeValue, + getFluidTypographyOptionsFromSettings, +} from './typography-utils'; /* Supporting data. */ export const ROOT_BLOCK_NAME = 'root'; @@ -76,16 +79,7 @@ export const PRESET_METADATA = [ valueFunc: ( preset, settings ) => getTypographyFontSizeValue( preset, - !! settings?.typography?.fluid && settings?.layout?.wideSize - ? { - fluid: { - maxViewPortWidth: settings?.layout?.wideSize, - ...settings?.typography?.fluid, - }, - } - : { - fluid: settings?.typography?.fluid, - } + getFluidTypographyOptionsFromSettings( settings ) ), valueKey: 'size', cssVarInfix: 'font-size', From b30e1efb3415a8d43a82a9c735078fdbd351105e Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 6 Jun 2023 18:09:21 +1000 Subject: [PATCH 006/120] Directly save if only changing current context (#50567) --- .../src/components/save-button/index.js | 6 + .../src/components/save-hub/index.js | 181 ++++++++++++++---- .../src/components/save-hub/style.scss | 6 + .../edit-site/src/components/sidebar/index.js | 4 +- 4 files changed, 156 insertions(+), 41 deletions(-) diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js index 0d78e32307797a..01a8972fc23315 100644 --- a/packages/edit-site/src/components/save-button/index.js +++ b/packages/edit-site/src/components/save-button/index.js @@ -17,6 +17,7 @@ export default function SaveButton( { className = 'edit-site-save-button__button', variant = 'primary', showTooltip = true, + defaultLabel, icon, } ) { const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => { @@ -38,10 +39,15 @@ export default function SaveButton( { const disabled = isSaving || ! activateSaveEnabled; const getLabel = () => { + if ( isSaving ) { + return __( 'Saving' ); + } if ( disabled ) { return __( 'Saved' ); } + if ( defaultLabel ) return defaultLabel; + if ( isPreviewingTheme() && isDirty ) { return __( 'Activate & Save' ); } else if ( isPreviewingTheme() ) { diff --git a/packages/edit-site/src/components/save-hub/index.js b/packages/edit-site/src/components/save-hub/index.js index 0c99cfd9d4d44c..4b4d1c92442a16 100644 --- a/packages/edit-site/src/components/save-hub/index.js +++ b/packages/edit-site/src/components/save-hub/index.js @@ -1,60 +1,165 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; -import { __experimentalHStack as HStack } from '@wordpress/components'; -import { sprintf, _n } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { Button, __experimentalHStack as HStack } from '@wordpress/components'; +import { __, sprintf, _n } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; import { check } from '@wordpress/icons'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies */ import SaveButton from '../save-button'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; +import { unlock } from '../../private-apis'; + +const { useLocation } = unlock( routerPrivateApis ); + +const PUBLISH_ON_SAVE_ENTITIES = [ + { + kind: 'postType', + name: 'wp_navigation', + }, +]; export default function SaveHub() { - const { countUnsavedChanges, isDirty, isSaving } = useSelect( - ( select ) => { - const { - __experimentalGetDirtyEntityRecords, - isSavingEntityRecord, - } = select( coreStore ); - const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); - return { - isDirty: dirtyEntityRecords.length > 0, - isSaving: dirtyEntityRecords.some( ( record ) => - isSavingEntityRecord( record.kind, record.name, record.key ) - ), - countUnsavedChanges: dirtyEntityRecords.length, - }; - }, - [] - ); + const { params } = useLocation(); + + const { __unstableMarkLastChangeAsPersistent } = + useDispatch( blockEditorStore ); + + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + + const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } = + useSelect( + ( select ) => { + const { + __experimentalGetDirtyEntityRecords, + isSavingEntityRecord, + } = select( coreStore ); + const dirtyEntityRecords = + __experimentalGetDirtyEntityRecords(); + let calcDirtyCurrentEntity = null; + + if ( dirtyEntityRecords.length === 1 ) { + // if we are on global styles + if ( params.path?.includes( 'wp_global_styles' ) ) { + calcDirtyCurrentEntity = dirtyEntityRecords.find( + ( record ) => record.name === 'globalStyles' + ); + } + // if we are on pages + else if ( params.postId ) { + calcDirtyCurrentEntity = dirtyEntityRecords.find( + ( record ) => + record.name === params.postType && + String( record.key ) === params.postId + ); + } + } + + return { + dirtyCurrentEntity: calcDirtyCurrentEntity, + isDirty: dirtyEntityRecords.length > 0, + isSaving: dirtyEntityRecords.some( ( record ) => + isSavingEntityRecord( + record.kind, + record.name, + record.key + ) + ), + countUnsavedChanges: dirtyEntityRecords.length, + }; + }, + [ params.path, params.postType, params.postId ] + ); + + const { + editEntityRecord, + saveEditedEntityRecord, + __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits, + } = useDispatch( coreStore ); const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() ); + // if we have only one unsaved change and it matches current context, we can show a more specific label + let label = dirtyCurrentEntity + ? __( 'Save' ) + : sprintf( + // translators: %d: number of unsaved changes (number). + _n( + 'Review %d change…', + 'Review %d changes…', + countUnsavedChanges + ), + countUnsavedChanges + ); + + if ( isSaving ) { + label = __( 'Saving' ); + } + + const saveCurrentEntity = async () => { + if ( ! dirtyCurrentEntity ) return; + + const { kind, name, key, property } = dirtyCurrentEntity; + + try { + if ( 'root' === dirtyCurrentEntity.kind && 'site' === name ) { + await saveSpecifiedEntityEdits( 'root', 'site', undefined, [ + property, + ] ); + } else { + if ( + PUBLISH_ON_SAVE_ENTITIES.some( + ( typeToPublish ) => + typeToPublish.kind === kind && + typeToPublish.name === name + ) + ) { + editEntityRecord( kind, name, key, { status: 'publish' } ); + } + + await saveEditedEntityRecord( kind, name, key ); + } + + __unstableMarkLastChangeAsPersistent(); + + createSuccessNotice( __( 'Site updated.' ), { + type: 'snackbar', + } ); + } catch ( error ) { + createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` ); + } + }; + return ( - { isDirty && ( - - { sprintf( - // translators: %d: number of unsaved changes (number). - _n( - '%d unsaved change', - '%d unsaved changes', - countUnsavedChanges - ), - countUnsavedChanges - ) } - + { dirtyCurrentEntity ? ( + + ) : ( + ) } - ); } diff --git a/packages/edit-site/src/components/save-hub/style.scss b/packages/edit-site/src/components/save-hub/style.scss index 0b8fb9c510f7a9..5daefd70d896ff 100644 --- a/packages/edit-site/src/components/save-hub/style.scss +++ b/packages/edit-site/src/components/save-hub/style.scss @@ -1,9 +1,15 @@ .edit-site-save-hub { color: $gray-600; + border-top: 1px solid $gray-800; + flex-shrink: 0; + margin: 0; + padding: $canvas-padding; } .edit-site-save-hub__button { color: inherit; + width: 100%; + justify-content: center; &[aria-disabled="true"] { opacity: 1; diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index b569def0152ad9..c28a93d523dce8 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -80,9 +80,7 @@ function Sidebar() { > -
- -
+ ); } From 305d5e1820d209a66154f8dc48e73dc1e38db5e6 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 6 Jun 2023 12:24:08 +0300 Subject: [PATCH 007/120] Link Control: Fix the 'Save' button's disabled state (#51117) * Link Control: Fix the 'Save' button's disabled state * Adjust unit tests * Update tab navigation in e2e tests --- .../src/components/link-control/index.js | 7 +++--- .../src/components/link-control/test/index.js | 22 ++++++++++++++----- .../specs/editor/various/links.test.js | 2 +- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 71cb6815e264a5..1d4003486727ba 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -307,6 +307,7 @@ function LinkControl( { const showTextControl = hasLinkValue && hasTextControl; const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; + const isDisabled = ! valueHasChanges || currentInputIsEmpty; return (
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 55aab3816b27e0..bff4a49eff94c8 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -658,7 +658,10 @@ describe( 'Manual link entry', () => { name: 'Save', } ); - expect( submitButton ).toBeDisabled(); + expect( submitButton ).toHaveAttribute( + 'aria-disabled', + 'true' + ); expect( submitButton ).toBeVisible(); if ( searchString.length ) { @@ -678,7 +681,10 @@ describe( 'Manual link entry', () => { // Verify the UI hasn't allowed submission. expect( searchInput ).toBeVisible(); - expect( submitButton ).toBeDisabled(); + expect( submitButton ).toHaveAttribute( + 'aria-disabled', + 'true' + ); expect( submitButton ).toBeVisible(); } ); @@ -699,7 +705,10 @@ describe( 'Manual link entry', () => { name: 'Save', } ); - expect( submitButton ).toBeDisabled(); + expect( submitButton ).toHaveAttribute( + 'aria-disabled', + 'true' + ); expect( submitButton ).toBeVisible(); // Simulate searching for a term. @@ -720,7 +729,10 @@ describe( 'Manual link entry', () => { // Verify the UI hasn't allowed submission. expect( searchInput ).toBeVisible(); - expect( submitButton ).toBeDisabled(); + expect( submitButton ).toHaveAttribute( + 'aria-disabled', + 'true' + ); expect( submitButton ).toBeVisible(); } ); @@ -1812,7 +1824,7 @@ describe( 'Addition Settings UI', () => { name: 'Save', } ); - expect( submitButton ).toBeDisabled(); + expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' ); await toggleSettingsDrawer( user ); diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 33d3a08732ccfb..d902e35fc09ebd 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -665,7 +665,7 @@ describe( 'Links', () => { await page.waitForXPath( `//label[text()='Open in new tab']` ); // Move focus back to RichText for the underlying link. - await pressKeyTimes( 'Tab', 3 ); + await pressKeyTimes( 'Tab', 4 ); // Make a selection within the RichText. await pressKeyWithModifier( 'shift', 'ArrowRight' ); From cfdbd85dd61b4f5d43bffdab8545e81a628d217d Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Tue, 6 Jun 2023 05:44:42 -0500 Subject: [PATCH 008/120] Image: Fix design of close button for the lightbox (correct PR) (#51206) * Revise CSS to contain images within overlay properly * Set horizontal images to occupy space of container * Make square images fit by height rather than expand to full width * Revise so lightbox loads original image; remove padding and hide caption The lightbox will now load the original image when opened; the src attribute is set dynamically so it will not be unnecessarily loaded by the browser. In addition, removed the padding and hid the caption. * Fix PHP spacing for linter * Fix test; image src is now only set after lightbox opens * Improve styles for lightbox close button * Fix PHP spacing for linter * Darken the scrim * Remove obsolte code --- packages/block-library/src/image/index.php | 17 +++++++++--- .../block-library/src/image/interactivity.js | 5 ++++ packages/block-library/src/image/style.scss | 26 ++++++++++++++----- test/e2e/specs/editor/blocks/image.spec.js | 4 +-- 4 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 3c90f0fbc21cfe..70a40f4b59db9c 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -75,8 +75,17 @@ function render_block_core_image( $attributes, $content ) { '
'; $body_content = preg_replace( '/]+>/', $button, $body_content ); - $background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) ); - $close_button_icon = ''; + // Add directive to expand modal image if appropriate. + $m = new WP_HTML_Tag_Processor( $content ); + $m->next_tag( 'img' ); + $m->set_attribute( 'data-wp-context', '{ "core": { "image": { "imageSrc": "' . wp_get_attachment_url( $attributes['id'] ) . '"} } }' ); + $m->set_attribute( 'data-wp-bind--src', 'selectors.core.image.imageSrc' ); + $modal_content = $m->get_updated_html(); + + $background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) ); + + $close_button_icon = ''; + $close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) ); $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' ); $close_button_label = esc_attr__( 'Close' ); @@ -94,10 +103,10 @@ function render_block_core_image( $attributes, $content ) { data-wp-on--mousewheel="actions.core.image.hideLightbox" data-wp-on--click="actions.core.image.hideLightbox" > - - $content + $modal_content
HTML; diff --git a/packages/block-library/src/image/interactivity.js b/packages/block-library/src/image/interactivity.js index 6b6f246b830256..552bdf13a66ca2 100644 --- a/packages/block-library/src/image/interactivity.js +++ b/packages/block-library/src/image/interactivity.js @@ -89,6 +89,11 @@ store( { roleAttribute: ( { context } ) => { return context.core.image.lightboxEnabled ? 'dialog' : ''; }, + imageSrc: ( { context } ) => { + return context.core.image.initialized + ? context.core.image.imageSrc + : ''; + }, }, }, }, diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index e6ad33308bc94c..6de2bdd6898596 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -186,23 +186,35 @@ visibility: hidden; .close-button { - font-size: 40px; position: absolute; - top: 20px; - right: 20px; + top: 12.5px; + right: 12.5px; + padding: 0; cursor: pointer; z-index: 5000000; } .wp-block-image { - display: flex; - justify-content: center; - align-items: center; width: 100%; height: 100%; - z-index: 3000000; position: absolute; + z-index: 3000000; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; flex-direction: column; + padding: 30px; + + figcaption { + display: none; + } + + img { + max-width: 100%; + max-height: 100%; + width: auto; + } } button { diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 6ad2384e11045f..2516a6d9c5ceaa 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -840,11 +840,11 @@ test.describe( 'Image - interactivity', () => { const lightbox = page.locator( '.wp-lightbox-overlay' ); await expect( lightbox ).toBeHidden(); + await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); + const image = lightbox.locator( 'img' ); await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); - await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); - await expect( lightbox ).toBeVisible(); const closeButton = lightbox.getByRole( 'button', { From e8e2ae3a219b3392ffd4417b16884ed074c78c7f Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 6 Jun 2023 12:50:16 +0200 Subject: [PATCH 009/120] Post Excerpt: improve preview on the editor site (#50167) * rename post-excerpt to excerpt and update labels * improve description * improve warning label --- docs/reference-guides/core-blocks.md | 4 ++-- .../block-library/src/post-excerpt/block.json | 4 ++-- .../block-library/src/post-excerpt/edit.js | 19 +++++-------------- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 43aabae2aca086..df16ea29219d54 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -566,9 +566,9 @@ Add the date of this post. ([Source](https://github.com/WordPress/gutenberg/tree - **Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** displayType, format, isLink, textAlign -## Post Excerpt +## Excerpt -Display a post's excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt)) +Display the excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt)) - **Name:** core/post-excerpt - **Category:** theme diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 2aae78089e38a1..60743a127100bf 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -2,9 +2,9 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "core/post-excerpt", - "title": "Post Excerpt", + "title": "Excerpt", "category": "theme", - "description": "Display a post's excerpt.", + "description": "Display the excerpt.", "textdomain": "default", "attributes": { "textAlign": { diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index b84abaa4e98d83..c4b53b22833698 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -109,16 +109,7 @@ export default function PostExcerptEditor( { />
-

- { __( - 'This is the Post Excerpt block, it will display the excerpt from single posts.' - ) } -

-

- { __( - 'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.' - ) } -

+

{ __( 'This block will display the excerpt.' ) }

); @@ -128,7 +119,7 @@ export default function PostExcerptEditor( {
{ __( - 'There is no excerpt because this is a protected post.' + 'The content is currently protected and does not have the available excerpt.' ) }
@@ -195,14 +186,14 @@ export default function PostExcerptEditor( { const excerptContent = isEditable ? ( { ! isTrimmed - ? rawOrRenderedExcerpt || __( 'No post excerpt found' ) + ? rawOrRenderedExcerpt || __( 'No excerpt found' ) : trimmedExcerpt + ELLIPSIS }

); From 3c45f35765a48df84fca27f3f8e96e547619e99a Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 6 Jun 2023 06:16:19 -0500 Subject: [PATCH 010/120] Use generic div instead of nav foor SidebarNavigationScreen (#51111) --- .../src/components/sidebar-navigation-screen/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 026cbaba8e860f..ecdd6f712ac08e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -102,14 +102,14 @@ export default function SidebarNavigationScreen( { ) } - +
{ footer && (