From 6a0188b697685c9f47e656e497f8d5daba84048e Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed, 8 May 2024 11:49:23 +0900 Subject: [PATCH 01/53] Block editor: scroll block into view on insert (#61418) Co-authored-by: ellatrix Co-authored-by: draganescu Co-authored-by: scruffian --- .../block-list/use-block-props/index.js | 2 + .../use-block-props/use-scroll-into-view.js | 38 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 46ebe502be07e..64e40559bb473 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -28,6 +28,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers'; import { useNavModeExit } from './use-nav-mode-exit'; import { useBlockRefProvider } from './use-block-refs'; import { useIntersectionObserver } from './use-intersection-observer'; +import { useScrollIntoView } from './use-scroll-into-view'; import { useFlashEditableBlocks } from '../../use-flash-editable-blocks'; import { canBindBlock } from '../../../hooks/use-bindings-attributes'; @@ -122,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { clientId, isEnabled: name === 'core/block' || templateLock === 'contentOnly', } ), + useScrollIntoView( { isSelected } ), ] ); const blockEditContext = useBlockEditContext(); diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js new file mode 100644 index 0000000000000..6301dac2c2108 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { useReducedMotion, useRefEffect } from '@wordpress/compose'; + +export function useScrollIntoView( { isSelected } ) { + const prefersReducedMotion = useReducedMotion(); + return useRefEffect( + ( node ) => { + if ( isSelected ) { + const { ownerDocument } = node; + const { defaultView } = ownerDocument; + if ( ! defaultView.IntersectionObserver ) { + return; + } + const observer = new defaultView.IntersectionObserver( + ( entries ) => { + // Once observing starts, we always get an initial + // entry with the intersecting state. + if ( ! entries[ 0 ].isIntersecting ) { + node.scrollIntoView( { + behavior: prefersReducedMotion + ? 'instant' + : 'smooth', + } ); + } + observer.disconnect(); + } + ); + observer.observe( node ); + return () => { + observer.disconnect(); + }; + } + }, + [ isSelected ] + ); +} From a53cdf2266240328df71cdff10a8317bc31c4089 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 May 2024 04:11:04 +0100 Subject: [PATCH 02/53] Editor: Enable Zoom-out mode in the post editor (#61293) Co-authored-by: youknowriad Co-authored-by: ntsekouras Co-authored-by: jeryj Co-authored-by: draganescu Co-authored-by: richtabor Co-authored-by: annezazu --- .../src/components/inserter/menu.js | 8 +++ .../src/components/inserter/style.scss | 9 +-- .../edit-post/src/components/header/index.js | 9 ++- .../edit-post/src/components/layout/index.js | 4 ++ .../src/components/visual-editor/index.js | 11 ++- .../components/block-editor/editor-canvas.js | 19 +----- .../header-edit-mode/document-tools/index.js | 68 ------------------- .../src/components/header-edit-mode/index.js | 30 ++++---- .../components/header-edit-mode/style.scss | 9 --- .../edit-site/src/components/layout/index.js | 5 -- .../src/components/document-tools/index.js | 40 +++++++++-- .../src/components/editor-canvas/index.js | 19 +++++- .../src/components/editor-canvas/utils.js} | 0 13 files changed, 98 insertions(+), 133 deletions(-) delete mode 100644 packages/edit-site/src/components/header-edit-mode/document-tools/index.js rename packages/{edit-site/src/utils/math.js => editor/src/components/editor-canvas/utils.js} (100%) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 63d64290cfa5c..7e3ae9c7a85f7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -17,6 +17,7 @@ import { import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useDebouncedInput } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -31,6 +32,7 @@ import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import InserterTabs from './tabs'; import { useZoomOut } from '../../hooks/use-zoom-out'; +import { store as blockEditorStore } from '../../store'; const NOOP = () => {}; function InserterMenu( @@ -48,6 +50,11 @@ function InserterMenu( }, ref ) { + const isZoomOutMode = useSelect( + ( select ) => + select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', + [] + ); const [ filterValue, setFilterValue, delayedFilterValue ] = useDebouncedInput( __experimentalFilterValue ); const [ hoveredItem, setHoveredItem ] = useState( null ); @@ -289,6 +296,7 @@ function InserterMenu(
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 646bb2c0bc7dd..f8bfef0c37d6c 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -702,12 +702,9 @@ $block-inserter-tabs-height: 44px; display: none; } -.is-zoom-out { - .block-editor-inserter__menu { - display: flex; - } - - .show-panel::after { +.block-editor-inserter__menu.is-zoom-out { + display: flex; + &.show-panel::after { // Makes space for the inserter flyout panel @include break-medium { content: ""; diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 65a9636a6ddb6..86c928ff15766 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -18,6 +18,7 @@ import { useViewportMatch } from '@wordpress/compose'; import { __unstableMotion as motion } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; import { useState } from '@wordpress/element'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -60,9 +61,11 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { showIconLabels, hasHistory, hasFixedToolbar, + isZoomedOutView, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editorStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); return { isTextEditor: getEditorMode() === 'text', @@ -74,6 +77,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { select( editorStore ).isPublishSidebarOpened(), showIconLabels: getPreference( 'core', 'showIconLabels' ), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -131,7 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { // when the publish sidebar has been closed. ) } - + { const { get } = select( preferencesStore ); const { getEditorSettings, getPostTypeLabel } = select( editorStore ); @@ -195,6 +196,8 @@ function Layout( { initialPost } ) { !! select( blockEditorStore ).getBlockSelectionStart(), hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord, hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), + blockEditorMode: + select( blockEditorStore ).__unstableGetEditorMode(), }; }, [] ); @@ -342,6 +345,7 @@ function Layout( { initialPost } ) { ! isMobileViewport && showBlockBreadcrumbs && isRichEditingEnabled && + blockEditorMode !== 'zoom-out' && mode === 'visual' && (
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 56c6bb0404c2a..3bb50999c2a92 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -13,6 +13,7 @@ import { import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as blocksStore } from '@wordpress/blocks'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -32,12 +33,13 @@ export default function VisualEditor( { styles } ) { isBlockBasedTheme, hasV3BlocksOnly, isEditingTemplate, + isZoomedOutView, } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); const { getEditorSettings, getRenderingMode } = select( editorStore ); const { getBlockTypes } = select( blocksStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); const editorSettings = getEditorSettings(); - return { isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), renderingMode: getRenderingMode(), @@ -47,6 +49,7 @@ export default function VisualEditor( { styles } ) { } ), isEditingTemplate: select( editorStore ).getCurrentPostType() === 'wp_template', + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); const hasMetaBoxes = useSelect( @@ -60,7 +63,11 @@ export default function VisualEditor( { styles } ) { // Add a constant padding for the typewritter effect. When typing at the // bottom, there needs to be room to scroll up. - if ( ! hasMetaBoxes && renderingMode === 'post-only' ) { + if ( + ! isZoomedOutView && + ! hasMetaBoxes && + renderingMode === 'post-only' + ) { 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 0c8b474e9a9c5..321749fa70c84 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -25,7 +25,6 @@ import { FOCUSABLE_ENTITIES, NAVIGATION_POST_TYPE, } from '../../utils/constants'; -import { computeIFrameScale } from '../../utils/math'; const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); @@ -41,11 +40,9 @@ function EditorCanvas( { isFocusMode, templateType, canvasMode, - isZoomOutMode, currentPostIsTrashed, } = useSelect( ( select ) => { - const { getBlockCount, __unstableGetEditorMode } = - select( blockEditorStore ); + const { getBlockCount } = select( blockEditorStore ); const { getEditedPostType, getCanvasMode } = unlock( select( editSiteStore ) ); @@ -54,7 +51,6 @@ function EditorCanvas( { return { templateType: _templateType, isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ), - isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', canvasMode: getCanvasMode(), hasBlocks: !! getBlockCount(), currentPostIsTrashed: @@ -139,17 +135,6 @@ function EditorCanvas( { [ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ] ); - const frameSize = isZoomOutMode ? 20 : undefined; - - const scale = isZoomOutMode - ? ( contentWidth ) => - computeIFrameScale( - { width: 1000, scale: 0.55 }, - { width: 400, scale: 0.9 }, - contentWidth - ) - : undefined; - return ( { - const { getEditorMode } = select( editorStore ); - - return { - isVisualMode: getEditorMode() === 'visual', - }; - }, [] ); - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - const { setDeviceType } = useDispatch( editorStore ); - const isLargeViewport = useViewportMatch( 'medium' ); - const isZoomedOutViewExperimentEnabled = - window?.__experimentalEnableZoomedOutView && isVisualMode; - const isZoomedOutView = blockEditorMode === 'zoom-out'; - - return ( - - { isZoomedOutViewExperimentEnabled && - isLargeViewport && - ! isDistractionFree && - ! hasFixedToolbar && ( - { - setDeviceType( 'Desktop' ); - __unstableSetEditorMode( - isZoomedOutView ? 'edit' : 'zoom-out' - ); - } } - size="compact" - /> - ) } - - ); -} diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 4ae9db1fea80c..921ff61dd23a1 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -18,13 +18,13 @@ import { store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import SiteEditorMoreMenuItems from './more-menu'; import SaveButton from '../save-button'; -import DocumentTools from './document-tools'; import { store as editSiteStore } from '../../store'; import { getEditorCanvasContainerTitle, @@ -36,6 +36,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme'; const { CollapsableBlockToolbar, + DocumentTools, MoreMenu, PostViewLink, PreviewDropdown, @@ -52,11 +53,12 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { editorCanvasView, isFixedToolbar, isPublishSidebarOpened, + isVisualMode, } = useSelect( ( select ) => { const { getEditedPostType } = select( editSiteStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const { get: getPreference } = select( preferencesStore ); - const { getDeviceType } = select( editorStore ); + const { getDeviceType, getEditorMode } = select( editorStore ); return { deviceType: getDeviceType(), @@ -70,6 +72,7 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { isFixedToolbar: getPreference( 'core', 'fixedToolbar' ), isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(), + isVisualMode: getEditorMode() === 'visual', }; }, [] ); @@ -115,8 +118,8 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { transition={ toolbarTransition } > { showTopToolbar && ( { isLargeViewport && ( -
- -
+ ) } { diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 5963a1c815141..39a1a3418395a 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -120,15 +120,6 @@ gap: $grid-unit-10; } -.edit-site-header-edit-mode__preview-options { - opacity: 1; - transition: opacity 0.3s; - - &.is-zoomed-out { - opacity: 0; - } -} - // Button text label styles .edit-site-header-edit-mode.show-icon-labels { diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 9a3c3100c4be7..d8b0d85e484ed 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -72,7 +72,6 @@ export default function Layout() { const { isDistractionFree, - isZoomOutMode, hasFixedToolbar, hasBlockSelected, canvasMode, @@ -104,9 +103,6 @@ export default function Layout() { 'core', 'showBlockBreadcrumbs' ), - isZoomOutMode: - select( blockEditorStore ).__unstableGetEditorMode() === - 'zoom-out', hasBlockSelected: select( blockEditorStore ).getBlockSelectionStart(), }; @@ -186,7 +182,6 @@ export default function Layout() { 'is-full-canvas': canvasMode === 'edit', 'has-fixed-toolbar': hasFixedToolbar, 'is-block-toolbar-visible': hasBlockSelected, - 'is-zoom-out': isZoomOutMode, 'has-block-breadcrumbs': hasBlockBreadcrumbs && ! isDistractionFree && diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 64d94cc2e9165..c799e9eae30de 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -15,7 +15,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { Button, ToolbarItem } from '@wordpress/components'; -import { listView, plus } from '@wordpress/icons'; +import { listView, plus, chevronUpDown } from '@wordpress/icons'; import { useRef, useCallback } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -35,13 +35,13 @@ const preventDefault = ( event ) => { function DocumentTools( { className, disableBlockTools = false, - children, // This is a temporary prop until the list view is fully unified between post and site editors. listViewLabel = __( 'Document Overview' ), } ) { const inserterButton = useRef(); - const { setIsInserterOpened, setIsListViewOpened } = + const { setIsInserterOpened, setIsListViewOpened, setDeviceType } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const { isDistractionFree, isInserterOpened, @@ -50,13 +50,15 @@ function DocumentTools( { listViewToggleRef, hasFixedToolbar, showIconLabels, + isVisualMode, + isZoomedOutView, } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); const { get } = select( preferencesStore ); - const { isListViewOpened, getListViewToggleRef } = unlock( - select( editorStore ) - ); + const { isListViewOpened, getListViewToggleRef, getEditorMode } = + unlock( select( editorStore ) ); const { getShortcutRepresentation } = select( keyboardShortcutsStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); return { isInserterOpened: select( editorStore ).isInserterOpened(), @@ -68,11 +70,15 @@ function DocumentTools( { hasFixedToolbar: getSettings().hasFixedToolbar, showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), + isVisualMode: getEditorMode() === 'visual', + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); const isLargeViewport = useViewportMatch( 'medium' ); const isWideViewport = useViewportMatch( 'wide' ); + const isZoomedOutViewExperimentEnabled = + window?.__experimentalEnableZoomedOutView && isVisualMode; /* translators: accessibility text for the editor toolbar */ const toolbarAriaLabel = __( 'Document tools' ); @@ -179,7 +185,27 @@ function DocumentTools( { ) } ) } - { children } + + { isZoomedOutViewExperimentEnabled && + isLargeViewport && + ! isDistractionFree && + ! hasFixedToolbar && ( + { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( + isZoomedOutView ? 'edit' : 'zoom-out' + ); + } } + size="compact" + /> + ) }
); diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 8f63ee6980aac..7608b7bc856e0 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -30,6 +30,7 @@ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; import EditTemplateBlocksNotification from './edit-template-blocks-notification'; import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block'; +import { computeIFrameScale } from './utils'; const { LayoutStyle, @@ -161,13 +162,17 @@ function EditorCanvas( { hasRootPaddingAwareAlignments, themeHasDisabledLayoutStyles, themeSupportsLayout, + isZoomOutMode, } = useSelect( ( select ) => { - const _settings = select( blockEditorStore ).getSettings(); + const { getSettings, __unstableGetEditorMode } = + select( blockEditorStore ); + const _settings = getSettings(); return { themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, themeSupportsLayout: _settings.supportsLayout, hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments, + isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -319,6 +324,16 @@ function EditorCanvas( { } ), ] ); + const frameSize = isZoomOutMode ? 20 : undefined; + const scale = isZoomOutMode + ? ( contentWidth ) => + computeIFrameScale( + { width: 1000, scale: 0.55 }, + { width: 400, scale: 0.9 }, + contentWidth + ) + : undefined; + return ( { themeSupportsLayout && diff --git a/packages/edit-site/src/utils/math.js b/packages/editor/src/components/editor-canvas/utils.js similarity index 100% rename from packages/edit-site/src/utils/math.js rename to packages/editor/src/components/editor-canvas/utils.js From 41c6b1ab4d25ec4d723f02592f2565001d920ed9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 8 May 2024 12:25:50 +0900 Subject: [PATCH 03/53] Revert 61426 (#61466) Co-authored-by: scruffian Co-authored-by: MaggieCabrera --- packages/base-styles/_z-index.scss | 1 - .../src/components/inserter/style.scss | 4 +--- .../src/components/inserter-sidebar/index.js | 13 ++++++------- .../src/components/inserter-sidebar/style.scss | 17 ++++++++--------- 4 files changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 2af796b22d7e6..1191c16670ba1 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -16,7 +16,6 @@ $z-layers: ( // These next three share a stacking context ".block-library-template-part__selection-search": 2, // higher sticky element ".block-library-query-pattern__selection-search": 2, // higher sticky element - ".editor-inserter-sidebar__header": 2, // These next two share a stacking context ".interface-complementary-area .components-panel" : 0, // lower scrolling content diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index f8bfef0c37d6c..bf9d184b81843 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -116,8 +116,7 @@ $block-inserter-tabs-height: 44px; overflow: hidden; .block-editor-inserter__tablist { - // Make room for the close button - width: calc(100% - #{$grid-unit-60}); + border-bottom: $border-width solid $gray-300; button[role="tab"] { flex-grow: 1; @@ -136,7 +135,6 @@ $block-inserter-tabs-height: 44px; flex-grow: 1; flex-direction: column; overflow-y: auto; - border-top: $border-width solid $gray-300; } } diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 0da3d7cada42c..266d0f2692611 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { Button } from '@wordpress/components'; +import { Button, VisuallyHidden } from '@wordpress/components'; import { __experimentalLibrary as Library } from '@wordpress/block-editor'; -import { closeSmall } from '@wordpress/icons'; +import { close } from '@wordpress/icons'; import { useViewportMatch } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { useRef } from '@wordpress/element'; @@ -31,19 +31,18 @@ export default function InserterSidebar( { const { setIsInserterOpened } = useDispatch( editorStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); + const TagName = ! isMobileViewport ? VisuallyHidden : 'div'; const libraryRef = useRef(); return (
-
+
+
Date: Wed, 8 May 2024 12:40:35 +0900 Subject: [PATCH 04/53] Fix inconsistent complementary header styles (#61331) * Use compact buttons, proper gap * Reuse existing class for heading * Remove unused class * Remove unnecessary negative margin top * Use small variant for close in complementary area * Remove unused styles * Emulate 'compact' button size, as Dropdown does not support it * Reduce padding right to account for close buttons holistically * Remove targeted padding right * Add default gap between controls in complementary header * Remove negative margin override, no longer necessary * Only make the close icon small * Use same font weight as tabs for complementary area * Use compact pin/unpin button * Revert "Reuse existing class for heading" This reverts commit e231cb5fe52803a919cedb031a9773a5f7ddd6b9. * Add back the style * Pass toggleProps compact size * Tweak inline comment. Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Remove unnecessary - margin top --------- Co-authored-by: richtabor Co-authored-by: stokesman Co-authored-by: jasmussen Co-authored-by: t-hamano Co-authored-by: youknowriad Co-authored-by: tyxla --- packages/edit-post/src/components/sidebar/style.scss | 4 ---- packages/edit-site/src/components/global-styles/ui.js | 6 +++++- .../sidebar-edit-mode/global-styles-sidebar.js | 7 ++++++- .../sidebar-edit-mode/settings-header/style.scss | 1 - .../src/components/sidebar-edit-mode/style.scss | 11 ----------- .../components/complementary-area-header/style.scss | 11 ++--------- .../src/components/complementary-area/index.js | 2 ++ .../src/components/complementary-area/style.scss | 1 + 8 files changed, 16 insertions(+), 27 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 1921c5cfd7b31..7a20cc5f0f54f 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -12,7 +12,3 @@ } } } - -.edit-post-sidebar__panel { - margin-top: -1px; -} diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index b50e09550f707..09c1a8b341f8f 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -76,7 +76,11 @@ function GlobalStylesActionMenu() { return ( - + { ( { onClose } ) => ( <> diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index f339b34784741..3254f594632c4 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() { closeLabel={ __( 'Close Styles' ) } panelClassName="edit-site-global-styles-sidebar__panel" header={ - +

{ __( 'Styles' ) } @@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() { } disabled={ shouldClearCanvasContainerView } onClick={ toggleStyleBook } + size="compact" /> @@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() { isPressed={ isRevisionsOpened || isRevisionsStyleBookOpened } + size="compact" /> diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss index d74432451e1d4..c615751952616 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss @@ -1,6 +1,5 @@ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs { padding-left: 0; - padding-right: $grid-unit-20; .components-button.has-icon { padding: 0; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index 186908c88a54b..1f631eb24057c 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -38,14 +38,6 @@ margin: 0; } -.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { - margin-left: 0; -} - -.edit-site-global-styles-sidebar__reset-button.components-button { - margin-left: auto; -} - .edit-site-global-styles-sidebar .components-navigation__menu-title-heading { font-size: $default-font-size * 1.2; font-weight: 500; @@ -104,6 +96,3 @@ } } -.edit-site-sidebar__panel { - margin-top: -1px; -} diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 20fbe881d5694..a6b9b53206960 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -17,7 +17,8 @@ .interface-complementary-area-header { background: $white; - padding-right: $grid-unit-05; + padding-right: $grid-unit-15; // Reduced padding to account for close buttons. + gap: $grid-unit-10; // Always ensure space between contents and close buttons. .interface-complementary-area-header__title { margin: 0; @@ -36,11 +37,3 @@ } } } - -// This overrides the negative margins between two consecutives panels. -// since the first panel is hidden. -.components-panel__header + .interface-complementary-area-header { - @include break-medium() { - margin-top: 0; - } -} diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index ca80ae75e2e2f..b37b8b7da33d0 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -302,6 +302,7 @@ function ComplementaryArea( { smallScreenTitle={ smallScreenTitle } toggleButtonProps={ { label: closeLabel, + size: 'small', shortcut: toggleShortcut, scope, identifier, @@ -329,6 +330,7 @@ function ComplementaryArea( { } isPressed={ isPinned } aria-expanded={ isPinned } + size="compact" /> ) } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 143911c43ecc5..7cbad41fa9118 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -39,6 +39,7 @@ h2 { font-size: $default-font-size; + font-weight: 500; color: $gray-900; margin-bottom: 1.5em; } From 58480c3386d48996cc9c2b4aa406dc400f385941 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 8 May 2024 14:26:46 +1000 Subject: [PATCH 05/53] Background images: remove lingering "file" prop (#61469) * Follow up to https://github.com/WordPress/gutenberg/pull/61387 - I missed a source prop Co-authored-by: ramonjd Co-authored-by: andrewserong --- lib/class-wp-theme-json-gutenberg.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 46d7082912f53..1dec7b164d880 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -320,7 +320,6 @@ class WP_Theme_JSON_Gutenberg { ), 'background-image' => array( array( 'background', 'backgroundImage', 'url' ), - array( 'background', 'backgroundImage', 'source' ), ), ); From 24880fa1c56ff9f19ae71f079951b7c7d8c8de4e Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed, 8 May 2024 13:35:30 +0900 Subject: [PATCH 06/53] Zoom out: add bottom and top inserters (#61473) Co-authored-by: ellatrix Co-authored-by: scruffian --- .../components/block-tools/zoom-out-mode-inserters.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 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 e3d411d07f726..5fad0e54e38a6 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 @@ -35,21 +35,18 @@ function ZoomOutModeInserters( { __unstableContentRef } ) { return null; } - return blockOrder.map( ( clientId, index ) => { - if ( index === blockOrder.length - 1 ) { - return null; - } + return [ undefined, ...blockOrder ].map( ( clientId, index ) => { return (
From 1fd02b7bde4804d91f672717083ff034357c5e91 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 8 May 2024 14:03:30 +0900 Subject: [PATCH 07/53] Zoom Out: Pass the section root ID to the inserter (#61464) * Zoom Out: Pass the section root ID to the inserter * Make function comment more similar to other comments * remove the selector --------- Co-authored-by: Sarah Norris Co-authored-by: Andrei Draganescu Co-authored-by: scruffian Co-authored-by: mikachan Co-authored-by: draganescu --- .../src/components/inserter-sidebar/index.js | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 266d0f2692611..7135742b21468 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -3,8 +3,11 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; import { Button, VisuallyHidden } from '@wordpress/components'; -import { __experimentalLibrary as Library } from '@wordpress/block-editor'; import { close } from '@wordpress/icons'; +import { + __experimentalLibrary as Library, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { useRef } from '@wordpress/element'; @@ -20,14 +23,30 @@ export default function InserterSidebar( { closeGeneralSidebar, isRightSidebarOpen, } ) { - const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => { - const { getInsertionPoint } = unlock( select( editorStore ) ); - const { get } = select( preferencesStore ); - return { - insertionPoint: getInsertionPoint(), - showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ), - }; - }, [] ); + const { insertionPoint, showMostUsedBlocks, blockSectionRootClientId } = + useSelect( ( select ) => { + const { getInsertionPoint } = unlock( select( editorStore ) ); + const { + getBlockRootClientId, + __unstableGetEditorMode, + getSettings, + } = select( blockEditorStore ); + const { get } = select( preferencesStore ); + const getBlockSectionRootClientId = () => { + if ( __unstableGetEditorMode() === 'zoom-out' ) { + const { sectionRootClientId } = unlock( getSettings() ); + if ( sectionRootClientId ) { + return sectionRootClientId; + } + } + return getBlockRootClientId(); + }; + return { + insertionPoint: getInsertionPoint(), + showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ), + blockSectionRootClientId: getBlockSectionRootClientId(), + }; + }, [] ); const { setIsInserterOpened } = useDispatch( editorStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); @@ -48,7 +67,9 @@ export default function InserterSidebar( { showMostUsedBlocks={ showMostUsedBlocks } showInserterHelpPanel shouldFocusBlock={ isMobileViewport } - rootClientId={ insertionPoint.rootClientId } + rootClientId={ + blockSectionRootClientId ?? insertionPoint.rootClientId + } __experimentalInsertionIndex={ insertionPoint.insertionIndex } From c36c4d6a6f4c22c7f6fdd5722da918b33028829d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 8 May 2024 14:33:28 +0900 Subject: [PATCH 08/53] Image Block: Enable crop action when image has a link (#61470) --- packages/block-library/src/image/editor.scss | 20 +++++++++++++------- packages/block-library/src/image/image.js | 3 ++- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 90af21b1a9a82..bd9dd0e32a9af 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -141,13 +141,19 @@ figure.wp-block-image:not(.wp-block) { width: 100%; overflow: hidden; - // This removes the border from the img within the image cropper so it - // can be applied to the cropper itself. This then allows the image to be - // cropped within the visual border providing more accurate editing and - // smoother UX. - .reactEasyCrop_Container .reactEasyCrop_Image { - border: none; - border-radius: 0; // Prevent's theme.json radius bleeding into cropper. + .reactEasyCrop_Container { + // The linked Image block has `pointer-events: none` applied. Override it + // here to enable the crop action. + pointer-events: auto; + + // This removes the border from the img within the image cropper so it + // can be applied to the cropper itself. This then allows the image to be + // cropped within the visual border providing more accurate editing and + // smoother UX. + .reactEasyCrop_Image { + border: none; + border-radius: 0; // Prevent's theme.json radius bleeding into cropper. + } } } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 13607508a56f6..2673a6faf9dcf 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -82,7 +82,8 @@ const ImageWrapper = ( { href, children } ) => { // When the Image block is linked, // it's wrapped with a disabled tag. // Restore cursor style so it doesn't appear 'clickable' - // Safari needs the display property. + // and remove pointer events. Safari needs the display property. + pointerEvents: 'none', cursor: 'default', display: 'inline', } } From 07ea95344c5343d8f8f8c8f3ce71de9a66174df8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 8 May 2024 14:56:44 +0900 Subject: [PATCH 09/53] Inserter: Add close button (#61421) * Inserter: Add close button * make button smaller * remove dialogRefs * update classnames Co-authored-by: scruffian Co-authored-by: ntsekouras --- .../src/components/inserter/library.js | 2 + .../src/components/inserter/menu.js | 7 +++- .../src/components/inserter/style.scss | 2 +- .../src/components/inserter/tabs.js | 40 +++++++++++++------ .../src/components/inserter-sidebar/index.js | 12 +----- .../components/inserter-sidebar/style.scss | 11 +++-- 6 files changed, 45 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index a3a4e7feb42b3..7e9b366e5e3a7 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -24,6 +24,7 @@ function InserterLibrary( __experimentalOnPatternCategorySelection, onSelect = noop, shouldFocusBlock = false, + onClose, }, ref ) { @@ -54,6 +55,7 @@ function InserterLibrary( } shouldFocusBlock={ shouldFocusBlock } ref={ ref } + onClose={ onClose } /> ); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7e3ae9c7a85f7..979a3b8199f0b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -47,6 +47,7 @@ function InserterMenu( __experimentalFilterValue = '', shouldFocusBlock = true, __experimentalOnPatternCategorySelection = NOOP, + onClose, }, ref ) { @@ -301,7 +302,11 @@ function InserterMenu( ref={ ref } >
- + { inserterSearch } { selectedTab === 'blocks' && ! delayedFilterValue && diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index bf9d184b81843..1258fe01b285d 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -116,7 +116,7 @@ $block-inserter-tabs-height: 44px; overflow: hidden; .block-editor-inserter__tablist { - border-bottom: $border-width solid $gray-300; + width: 100%; button[role="tab"] { flex-grow: 1; diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index 5506e3c315cbd..c1486dda6dbf2 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -1,9 +1,13 @@ /** * WordPress dependencies */ -import { privateApis as componentsPrivateApis } from '@wordpress/components'; +import { + Button, + privateApis as componentsPrivateApis, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { forwardRef } from '@wordpress/element'; +import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -29,23 +33,33 @@ const mediaTab = { title: __( 'Media' ), }; -function InserterTabs( { onSelect, children }, ref ) { +function InserterTabs( { onSelect, children, onClose }, ref ) { const tabs = [ blocksTab, patternsTab, mediaTab ]; return (
- - { tabs.map( ( tab ) => ( - - { tab.title } - - ) ) } - +
+
{ tabs.map( ( tab ) => ( - -
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss index 6077db9c9feff..e3564cbd03aaf 100644 --- a/packages/editor/src/components/inserter-sidebar/style.scss +++ b/packages/editor/src/components/inserter-sidebar/style.scss @@ -6,11 +6,16 @@ flex-direction: column; } -.editor-inserter-sidebar__header { - padding-top: $grid-unit-10; +.block-editor-inserter-sidebar__header { + border-bottom: $border-width solid $gray-300; padding-right: $grid-unit-10; display: flex; - justify-content: flex-end; + justify-content: space-between; + + .block-editor-inserter-sidebar__close-button { + order: 1; + align-self: center; + } } .editor-inserter-sidebar__content { From ebcf8d0c029c623b5c0f3eaa4da4023d9e1866bd Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 8 May 2024 16:17:25 +1000 Subject: [PATCH 10/53] Background image: size controls should show when an image is set (#61388) * In the site editor, show the background size panel if a value is present, just like block styles. * Show size controls by default * Revert inherited style check Co-authored-by: ramonjd Co-authored-by: andrewserong Co-authored-by: jameskoster --- .../global-styles/background-panel.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 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 2addf109873aa..65dd9738b2b4f 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -20,6 +20,21 @@ const { BackgroundPanel: StylesBackgroundPanel, } = unlock( blockEditorPrivateApis ); +/** + * Checks if there is a current value in the background image block support + * attributes. + * + * @param {Object} style Style attribute. + * @return {boolean} Whether the block has a background image value set. + */ +export function hasBackgroundImageValue( style ) { + return ( + !! style?.background?.backgroundImage?.id || + !! style?.background?.backgroundImage?.url || + typeof style?.background?.backgroundImage === 'string' + ); +} + export default function BackgroundPanel() { const [ style ] = useGlobalStyle( '', undefined, 'user', { shouldDecodeEncode: false, @@ -32,8 +47,8 @@ export default function BackgroundPanel() { const defaultControls = { backgroundImage: true, backgroundSize: - !! style?.background?.backgroundImage && - !! inheritedStyle?.background?.backgroundImage, + hasBackgroundImageValue( style ) || + hasBackgroundImageValue( inheritedStyle ), }; return ( From 60d22696b7ff12689e4c8bdddb5c4119e1a12531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 8 May 2024 07:28:21 +0100 Subject: [PATCH 11/53] Components: Do not render FormTokenField label when not defined (#61336) Co-authored-by: retrofox Co-authored-by: alexstine --- packages/components/CHANGELOG.md | 2 ++ packages/components/src/form-token-field/index.tsx | 14 ++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 205749b3336bb..fa2e6ac57d176 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,7 +7,9 @@ - Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)). ### Enhancements + - `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)). ## 27.5.0 (2024-05-02) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index c7ec536e90eff..d89080b4410c4 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -694,12 +694,14 @@ export function FormTokenField( props: FormTokenFieldProps ) { /* eslint-disable jsx-a11y/no-static-element-interactions */ return (
- - { label } - + { label && ( + + { label } + + ) }
Date: Wed, 8 May 2024 17:25:48 +0900 Subject: [PATCH 12/53] Fix user capabilities check for the Site Editor (#61444) * Fix user Capabilities check for the Site Editor * Remove internal hook Co-authored-by: t-hamano Co-authored-by: fabiankaegy Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: bacoords --- .../core-commands/src/admin-navigation-commands.js | 11 +++++++---- packages/core-commands/src/hooks.js | 7 ------- .../src/site-editor-navigation-commands.js | 10 ++++++---- .../header/more-menu/manage-patterns-menu-item.js | 2 +- .../patterns/src/components/patterns-manage-button.js | 2 +- .../reusable-blocks-manage-button.js | 2 +- 6 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js index 4de403761f4cc..a833ad8c9ad02 100644 --- a/packages/core-commands/src/admin-navigation-commands.js +++ b/packages/core-commands/src/admin-navigation-commands.js @@ -4,20 +4,23 @@ import { useCommand } from '@wordpress/commands'; import { __ } from '@wordpress/i18n'; import { plus, symbol } from '@wordpress/icons'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; import { addQueryArgs, getPath } from '@wordpress/url'; import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import { useIsTemplatesAccessible } from './hooks'; import { unlock } from './lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); export function useAdminNavigationCommands() { const history = useHistory(); - const isTemplatesAccessible = useIsTemplatesAccessible(); + const canCreateTemplate = useSelect( ( select ) => { + return select( coreStore ).canUser( 'create', 'templates' ); + }, [] ); const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' @@ -45,10 +48,10 @@ export function useAdminNavigationCommands() { icon: symbol, callback: ( { close } ) => { // The site editor and templates both check whether the user - // can read templates. We can leverage that here and this + // can create templates. We can leverage that here and this // command links to the classic dashboard manage patterns page // if the user can't access it. - if ( isTemplatesAccessible ) { + if ( canCreateTemplate ) { const args = { path: '/patterns', }; diff --git a/packages/core-commands/src/hooks.js b/packages/core-commands/src/hooks.js index 6d744e3223234..0622a970680c1 100644 --- a/packages/core-commands/src/hooks.js +++ b/packages/core-commands/src/hooks.js @@ -4,13 +4,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -export function useIsTemplatesAccessible() { - return useSelect( - ( select ) => select( coreStore ).canUser( 'read', 'templates' ), - [] - ); -} - export function useIsBlockBasedTheme() { return useSelect( ( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme, diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 695ad00e56720..64e0082d5910a 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -21,7 +21,7 @@ import { useDebounce } from '@wordpress/compose'; /** * Internal dependencies */ -import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks'; +import { useIsBlockBasedTheme } from './hooks'; import { unlock } from './lock-unlock'; import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search'; @@ -257,12 +257,14 @@ function useSiteEditorBasicNavigationCommands() { const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); - const isTemplatesAccessible = useIsTemplatesAccessible(); + const canCreateTemplate = useSelect( ( select ) => { + return select( coreStore ).canUser( 'create', 'templates' ); + }, [] ); const isBlockBasedTheme = useIsBlockBasedTheme(); const commands = useMemo( () => { const result = []; - if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) { + if ( ! canCreateTemplate || ! isBlockBasedTheme ) { return result; } @@ -339,7 +341,7 @@ function useSiteEditorBasicNavigationCommands() { } ); return result; - }, [ history, isSiteEditor, isTemplatesAccessible, isBlockBasedTheme ] ); + }, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] ); return { commands, diff --git a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js index d12ffb88ae557..abb009cbc288e 100644 --- a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js +++ b/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js @@ -20,7 +20,7 @@ function ManagePatternsMenuItem() { // The site editor and templates both check whether the user has // edit_theme_options capabilities. We can leverage that here and not // display the manage patterns link if the user can't access it. - return canUser( 'read', 'templates' ) ? patternsUrl : defaultUrl; + return canUser( 'create', 'templates' ) ? patternsUrl : defaultUrl; }, [] ); return ( diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js index f2bd798a7b6fa..bab9cab11462a 100644 --- a/packages/patterns/src/components/patterns-manage-button.js +++ b/packages/patterns/src/components/patterns-manage-button.js @@ -37,7 +37,7 @@ function PatternsManageButton( { clientId } ) { // The site editor and templates both check whether the user // has edit_theme_options capabilities. We can leverage that here // and omit the manage patterns link if the user can't access it. - managePatternsUrl: canUser( 'read', 'templates' ) + managePatternsUrl: canUser( 'create', 'templates' ) ? addQueryArgs( 'site-editor.php', { path: '/patterns', } ) diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js index a535eade291a0..c0138517400fb 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js @@ -36,7 +36,7 @@ function ReusableBlocksManageButton( { clientId } ) { // The site editor and templates both check whether the user // has edit_theme_options capabilities. We can leverage that here // and omit the manage patterns link if the user can't access it. - managePatternsUrl: canUser( 'read', 'templates' ) + managePatternsUrl: canUser( 'create', 'templates' ) ? addQueryArgs( 'site-editor.php', { path: '/patterns', } ) From 8c16e93c050f1c352a5eedd6ccdd42b929b74288 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 8 May 2024 17:59:53 +0900 Subject: [PATCH 13/53] PluginSidebar: show pin/unpin button on the site eitor (#61448) Co-authored-by: t-hamano Co-authored-by: youknowriad Co-authored-by: richtabor --- packages/edit-site/src/style.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index d0002e1070ce3..f2b8ebd559f2e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -85,13 +85,6 @@ body.js.site-editor-php { .interface-interface-skeleton { top: 0; } - - // Todo: Remove this rule when edit site gets support - // for opening unpinned sidebar items. - .interface-complementary-area__pin-unpin-item.components-button { - display: none; - } - } /** From 4ae0dcaf6a9440f0e3b5b8220c9627c22d7da42c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 8 May 2024 12:13:45 +0200 Subject: [PATCH 14/53] Fix regression on keyboard navigation (#61478) Co-authored-by: oandregal Co-authored-by: youknowriad Co-authored-by: gziolo --- packages/dataviews/src/view-list.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index d88f11de59eed..193e89012fb89 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -40,7 +40,7 @@ interface ListViewProps { } interface ListViewItemProps { - id: string; + id?: string; item: Item; isSelected: boolean; onSelect: ( item: Item ) => void; @@ -183,7 +183,8 @@ export default function ViewList( props: ListViewProps ) { ); const getItemDomId = useCallback( - ( item?: Item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : '' ), + ( item?: Item ) => + item ? `${ baseId }-${ getItemId( item ) }` : undefined, [ baseId, getItemId ] ); From 966f0a15cf57cc169b5a01f92b13b734dbc45834 Mon Sep 17 00:00:00 2001 From: Murphy Randle Date: Wed, 8 May 2024 06:19:33 -0400 Subject: [PATCH 15/53] Upgrade @types/react package and @types/react-dom (#60796) Unlinked contributors: mrmurphy. Co-authored-by: youknowriad Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: sirreal --- package-lock.json | 38 +++++++++---------- package.json | 4 +- packages/components/CHANGELOG.md | 8 ++-- .../components/src/border-control/types.ts | 4 ++ packages/element/package.json | 4 +- 5 files changed, 29 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index c160fcbcb02b8..8b53ef4d93a07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -125,9 +125,9 @@ "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", - "@types/react": "18.0.21", + "@types/react": "18.3.1", "@types/react-dates": "21.8.3", - "@types/react-dom": "18.0.6", + "@types/react-dom": "18.3.0", "@types/requestidlecallback": "0.3.4", "@types/semver": "7.3.8", "@types/sprintf-js": "1.1.2", @@ -15966,12 +15966,11 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.0.21", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", - "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, @@ -15987,9 +15986,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", - "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dependencies": { "@types/react": "*" } @@ -54228,8 +54227,8 @@ "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "^7.16.0", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", "@wordpress/escape-html": "file:../escape-html", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", @@ -66923,12 +66922,11 @@ "dev": true }, "@types/react": { - "version": "18.0.21", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", - "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "requires": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, @@ -66944,9 +66942,9 @@ } }, "@types/react-dom": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", - "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "requires": { "@types/react": "*" } @@ -69296,8 +69294,8 @@ "version": "file:packages/element", "requires": { "@babel/runtime": "^7.16.0", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", "@wordpress/escape-html": "file:../escape-html", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", diff --git a/package.json b/package.json index ff76bff3cf07d..81b467ff1e990 100644 --- a/package.json +++ b/package.json @@ -137,9 +137,9 @@ "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", - "@types/react": "18.0.21", + "@types/react": "18.3.1", "@types/react-dates": "21.8.3", - "@types/react-dom": "18.0.6", + "@types/react-dom": "18.3.0", "@types/requestidlecallback": "0.3.4", "@types/semver": "7.3.8", "@types/sprintf-js": "1.1.2", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fa2e6ac57d176..1abf63e762f50 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - `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)). +- Upgraded the @types/react and @types/react-dom packages ([#60796](https://github.com/WordPress/gutenberg/pull/60796)). ## 27.5.0 (2024-05-02) @@ -20,17 +21,14 @@ - `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)). - `Placeholder`: Unify appearance across. ([#59275](https://github.com/WordPress/gutenberg/pull/59275)). - `Toolbar`: Adjust top toolbar to use same metrics as block toolbar ([#61126](https://github.com/WordPress/gutenberg/pull/61126)). +- `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)). +- `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)). ### Bug Fix - `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)). - `Panel`: Fix issue with collapsing panel header ([#61319](https://github.com/WordPress/gutenberg/pull/61319)). -### Enhancements - -- `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)). -- `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)). - ### Internal - `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)). diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index b1ff87aaf5da3..5e028050d8e18 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -61,6 +61,10 @@ export type BorderControlProps = ColorProps & * interaction that selects or clears, border color, style, or width. */ onChange: ( value?: Border ) => void; + /** + * Placeholder text for the number input. + */ + placeholder?: HTMLInputElement[ 'placeholder' ]; /** * An internal prop used to control the visibility of the dropdown. */ diff --git a/packages/element/package.json b/packages/element/package.json index 153e817837ce4..18abd14b0e0a5 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -29,8 +29,8 @@ "sideEffects": false, "dependencies": { "@babel/runtime": "^7.16.0", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", "@wordpress/escape-html": "file:../escape-html", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", From 2c2f8994420c8fdcc9beeabdaf51de644154d9e8 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed, 8 May 2024 20:30:44 +0900 Subject: [PATCH 16/53] Revert "useBlockSync: remove isControlled effect" (#61480) Co-authored-by: ellatrix Co-authored-by: youknowriad --- .../src/components/provider/use-block-sync.js | 28 ++++++++++++- test/e2e/specs/site-editor/undo.spec.js | 42 +++++++++++++++++++ 2 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 test/e2e/specs/site-editor/undo.spec.js diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js index 57e53979142d6..300c108a70cf1 100644 --- a/packages/block-editor/src/components/provider/use-block-sync.js +++ b/packages/block-editor/src/components/provider/use-block-sync.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useEffect, useRef } from '@wordpress/element'; -import { useRegistry } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; import { cloneBlock } from '@wordpress/blocks'; /** @@ -82,6 +82,15 @@ export default function useBlockSync( { } = registry.dispatch( blockEditorStore ); const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } = registry.select( blockEditorStore ); + const isControlled = useSelect( + ( select ) => { + return ( + ! clientId || + select( blockEditorStore ).areInnerBlocksControlled( clientId ) + ); + }, + [ clientId ] + ); const pendingChanges = useRef( { incoming: null, outgoing: [] } ); const subscribed = useRef( false ); @@ -177,6 +186,23 @@ export default function useBlockSync( { } }, [ controlledBlocks, clientId ] ); + const isMounted = useRef( false ); + + useEffect( () => { + // On mount, controlled blocks are already set in the effect above. + if ( ! isMounted.current ) { + isMounted.current = true; + return; + } + + // When the block becomes uncontrolled, it means its inner state has been reset + // we need to take the blocks again from the external value property. + if ( ! isControlled ) { + pendingChanges.current.outgoing = []; + setControlledBlocks(); + } + }, [ isControlled ] ); + useEffect( () => { const { getSelectedBlocksInitialCaretPosition, diff --git a/test/e2e/specs/site-editor/undo.spec.js b/test/e2e/specs/site-editor/undo.spec.js new file mode 100644 index 0000000000000..17c4e4ada6e61 --- /dev/null +++ b/test/e2e/specs/site-editor/undo.spec.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'undo', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test( 'does not empty header', async ( { admin, page, editor } ) => { + await admin.visitSiteEditor( { canvas: 'edit' } ); + + // Check if there's a valid child block with a type (not appender). + await expect( + editor.canvas.locator( + '[data-type="core/template-part"] [data-type]' + ) + ).not.toHaveCount( 0 ); + + // insert a block + await editor.insertBlock( { name: 'core/paragraph' } ); + + // undo + await page + .getByRole( 'button', { + name: 'Undo', + } ) + .click(); + + // Check if there's a valid child block with a type (not appender). + await expect( + editor.canvas.locator( + '[data-type="core/template-part"] [data-type]' + ) + ).not.toHaveCount( 0 ); + } ); +} ); From 839c17d7354ee91d93dc8189d9a4746e314dde74 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 May 2024 14:39:34 +0100 Subject: [PATCH 17/53] Editor: Unify Header component. (#61273) Co-authored-by: youknowriad Co-authored-by: Mamaduka Co-authored-by: jeryj Co-authored-by: jasmussen --- .../src/editor/publish-post.ts | 2 +- .../src/ensure-sidebar-opened.js | 3 +- packages/e2e-test-utils/src/inserter.js | 3 +- packages/e2e-test-utils/src/site-editor.js | 4 +- .../edit-post/src/components/header/index.js | 128 +-------- .../src/components/header/style.scss | 245 +----------------- packages/edit-post/src/style.scss | 2 +- .../src/components/editor/style.scss | 4 - .../src/components/header-edit-mode/index.js | 187 ++----------- .../components/header-edit-mode/style.scss | 191 +------------- .../src/components/layout/style.scss | 3 +- .../src/components/document-tools/index.js | 1 + .../editor/src/components/header/index.js | 154 +++++++++++ .../editor/src/components/header/style.scss | 231 +++++++++++++++++ packages/editor/src/private-apis.js | 14 +- packages/editor/src/private-apis.native.js | 61 +++++ packages/editor/src/style.scss | 1 + .../specs/site-editor/block-removal.spec.js | 12 +- test/e2e/specs/site-editor/list-view.spec.js | 4 +- test/e2e/specs/site-editor/style-book.spec.js | 12 +- 20 files changed, 512 insertions(+), 750 deletions(-) create mode 100644 packages/editor/src/components/header/index.js create mode 100644 packages/editor/src/components/header/style.scss create mode 100644 packages/editor/src/private-apis.native.js diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts index bf4b240a3fd61..81451cd516f0e 100644 --- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts +++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts @@ -16,7 +16,7 @@ export async function publishPost( this: Editor ) { .getByRole( 'button', { name: 'Save', exact: true } ); const publishButton = this.page .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Publish' } ); + .getByRole( 'button', { name: 'Publish', exact: true } ); const buttonToClick = ( await saveButton.isVisible() ) ? saveButton : publishButton; diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js index 5ea99c629c15e..95c674e980643 100644 --- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js +++ b/packages/e2e-test-utils/src/ensure-sidebar-opened.js @@ -8,7 +8,8 @@ export async function ensureSidebarOpened() { '.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' + '.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' + '.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' + - '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]' + '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' + + '.editor-header__settings [aria-label="Settings"][aria-expanded="false"]' ); if ( toggleSidebarButton ) { diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index cf5d7c48c9dfd..5beab3c6205b6 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -53,7 +53,8 @@ async function isGlobalInserterOpen() { '.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' + '.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' + '.edit-widgets-header [aria-label="Add block"].is-pressed,' + - '.edit-site-header-edit-mode__inserter-toggle.is-pressed' + '.edit-site-header-edit-mode__inserter-toggle.is-pressed,' + + '.editor-header [aria-label="Toggle block inserter"].is-pressed' ); } ); } diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index 4f6cf1773134f..98ba34f7db4f5 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -97,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) { * Toggles the global styles sidebar (opens it if closed and closes it if open). */ export async function toggleGlobalStyles() { - await page.click( - '.edit-site-header-edit-mode__actions button[aria-label="Styles"]' - ); + await page.click( '.editor-header__settings button[aria-label="Styles"]' ); } /** diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 86c928ff15766..311279292d8f6 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -1,24 +1,9 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ -import { - DocumentBar, - PostSavedState, - PostPreviewButton, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; -import { useViewportMatch } from '@wordpress/compose'; import { __unstableMotion as motion } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { useState } from '@wordpress/element'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -29,21 +14,7 @@ import MainDashboardButton from './main-dashboard-button'; import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; -const { - CollapsableBlockToolbar, - DocumentTools, - PostViewLink, - PreviewDropdown, - PinnedItems, - MoreMenu, - PostPublishButtonOrToggle, -} = unlock( editorPrivateApis ); - -const slideY = { - hidden: { y: '-50px' }, - distractionFreeInactive: { y: 0 }, - hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, -}; +const { Header: EditorHeader } = unlock( editorPrivateApis ); const slideX = { hidden: { x: '-100%' }, @@ -52,42 +23,17 @@ const slideX = { }; function Header( { setEntitiesSavedStatesCallback, initialPost } ) { - const isWideViewport = useViewportMatch( 'large' ); - const isLargeViewport = useViewportMatch( 'medium' ); - const { - isTextEditor, - hasActiveMetaboxes, - isPublishSidebarOpened, - showIconLabels, - hasHistory, - hasFixedToolbar, - isZoomedOutView, - } = useSelect( ( select ) => { - const { get: getPreference } = select( preferencesStore ); - const { getEditorMode } = select( editorStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - + const { hasActiveMetaboxes } = useSelect( ( select ) => { return { - isTextEditor: getEditorMode() === 'text', hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - hasHistory: - !! select( editorStore ).getEditorSettings() - .onNavigateToPreviousEntityRecord, - isPublishSidebarOpened: - select( editorStore ).isPublishSidebarOpened(), - showIconLabels: getPreference( 'core', 'showIconLabels' ), - hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), - isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); - const hasTopToolbar = isLargeViewport && hasFixedToolbar; - - const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = - useState( true ); - return ( -
+ - - - { hasTopToolbar && ( - - ) } -
- { hasHistory && } -
- - - { ! isPublishSidebarOpened && ( - // This button isn't completely hidden by the publish sidebar. - // We can't hide the whole toolbar when the publish sidebar is open because - // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. - // We track that DOM node to return focus to the PostPublishButtonOrToggle - // when the publish sidebar has been closed. - - ) } - - - - - { ( isWideViewport || ! showIconLabels ) && ( - - ) } - - - -
+ + ); } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 93c1461774cbd..53672eb09e701 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,251 +1,14 @@ -.edit-post-header { - height: $header-height; - background: $white; - display: flex; - flex-wrap: wrap; - align-items: center; - // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. - max-width: 100vw; - justify-content: space-between; - - // Make toolbar sticky on larger breakpoints - @include break-zoomed-in { - flex-wrap: nowrap; - } -} - -.edit-post-header__toolbar { - display: flex; - // Allow this area to shrink to fit the toolbar buttons. - flex-shrink: 8; - // Take up the space of the toolbar so it can be justified to the left side of the toolbar. - flex-grow: 3; - // Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar. - overflow: hidden; - // Leave enough room for the focus ring to show. - padding: 2px 0; - align-items: center; - // Allow focus ring to be fully visible on furthest right button. - @include break-medium() { - padding-right: var(--wp-admin-border-width-focus); - } - - .table-of-contents { - display: none; - - @include break-small() { - display: block; - } - } -} - -.edit-post-header__center { - flex-grow: 1; - display: flex; - justify-content: center; - - &.is-collapsed { - display: none; - } -} - /** - * Buttons on the right side + * Show icon label overrides. */ - -.edit-post-header__settings { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; - padding-right: $grid-unit-05; - - @include break-small () { - padding-right: $grid-unit-10; - } - - gap: $grid-unit-10; -} - -/** - * Show icon labels. - */ - -.show-icon-labels.interface-pinned-items, -.show-icon-labels .edit-post-header, -.edit-post-header__dropdown { - .components-button.has-icon { - width: auto; - - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - &::after { - content: attr(aria-label); - } - &[aria-disabled="true"] { - background-color: transparent; - } - } - .is-tertiary { - &:active { - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - background-color: transparent; - } - } - // Exception for drodpdown toggle buttons. - // Exception for the fullscreen mode button. - .edit-post-fullscreen-mode-close.has-icon, - .components-button.has-icon.button-toggle { - svg { - display: block; - } - &::after { - content: none; - } - } - // Undo the width override for fullscreen mode button. +.show-icon-labels .editor-header { .edit-post-fullscreen-mode-close.has-icon { width: $header-height; - } - // Don't hide MenuItemsChoice check icons - .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { - display: block; - } - .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, - .interface-pinned-items .components-button { - padding-left: $grid-unit; - padding-right: $grid-unit; - - @include break-small { - padding-left: $grid-unit-15; - padding-right: $grid-unit-15; + svg { + display: block; } - } - - .editor-post-save-draft.editor-post-save-draft, - .editor-post-saved-state.editor-post-saved-state { &::after { content: none; } } } - -.show-icon-labels { - .edit-post-header__toolbar .block-editor-block-mover { - // Modified group borders. - border-left: none; - - &::before { - content: ""; - width: $border-width; - height: $grid-unit-30; - background-color: $gray-300; - margin-top: $grid-unit-05; - margin-left: $grid-unit; - } - - // Modified block movers horizontal separator. - .block-editor-block-mover__move-button-container { - &::before { - width: calc(100% - #{$grid-unit-30}); - background: $gray-300; - left: calc(50% + 1px); - } - } - } -} - -.edit-post-header__dropdown { - .components-menu-item__button.components-menu-item__button, - .components-button.editor-history__undo, - .components-button.editor-history__redo, - .table-of-contents .components-button, - .components-button.block-editor-list-view { - margin: 0; - padding: 6px 6px 6px $grid-unit-50; - width: 14.625rem; - text-align: left; - justify-content: flex-start; - } -} - -.show-icon-labels.interface-pinned-items { - padding: 6px $grid-unit-15 $grid-unit-15; - margin-top: 0; - margin-bottom: 0; - margin-left: -$grid-unit-15; - margin-right: -$grid-unit-15; - border-bottom: 1px solid $gray-400; - display: block; - - > .components-button.has-icon { - margin: 0; - padding: 6px 6px 6px $grid-unit; - width: 14.625rem; - justify-content: flex-start; - - &[aria-expanded="true"] svg { - display: block; - max-width: $grid-unit-30; - } - &[aria-expanded="false"] { - padding-left: $grid-unit-50; - } - svg { - margin-right: 8px; - } - } -} - -.edit-post-header__post-preview-button { - @include break-small { - display: none; - } -} - -.is-distraction-free { - .interface-interface-skeleton__header { - border-bottom: none; - } - - .edit-post-header { - background-color: $white; - border-bottom: 1px solid #e0e0e0; - position: absolute; - width: 100%; - - - // hide some parts - & > .edit-post-header__settings > .edit-post-header__post-preview-button { - visibility: hidden; - } - - & > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle, - & > .edit-post-header__settings > .editor-preview-dropdown, - & > .edit-post-header__settings > .interface-pinned-items { - display: none; - } - - } - - // We need ! important because we override inline styles - // set by the motion component. - .interface-interface-skeleton__header:focus-within { - opacity: 1 !important; - div { - transform: translateX(0) translateZ(0) !important; - } - - } - - .components-editor-notices__dismissible { - position: absolute; - z-index: 35; - } -} - -.components-popover.more-menu-dropdown__content { - z-index: z-index(".components-popover.more-menu__content"); -} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index d780f4257f25a..f477bef7bbffd 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -39,7 +39,7 @@ body.js.block-editor-page { } // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas. -.edit-post-header, +.editor-header, .edit-post-text-editor, .editor-sidebar, .editor-post-publish-panel { diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 8803c0c59ff5a..000c64fd8ae03 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -6,10 +6,6 @@ &.is-loading { opacity: 0; } - - .interface-interface-skeleton__header { - border: 0; - } } .edit-site-editor__toggle-save-panel { diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 921ff61dd23a1..fcd4ea1b38802 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -1,188 +1,51 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ -import { useViewportMatch, useReducedMotion } from '@wordpress/compose'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __unstableMotion as motion } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { - DocumentBar, - PostSavedState, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import SiteEditorMoreMenuItems from './more-menu'; +import SiteEditorMoreMenu from './more-menu'; +import { unlock } from '../../lock-unlock'; import SaveButton from '../save-button'; -import { store as editSiteStore } from '../../store'; +import { isPreviewingTheme } from '../../utils/is-previewing-theme'; import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer, } from '../editor-canvas-container'; -import { unlock } from '../../lock-unlock'; -import { FOCUSABLE_ENTITIES } from '../../utils/constants'; -import { isPreviewingTheme } from '../../utils/is-previewing-theme'; - -const { - CollapsableBlockToolbar, - DocumentTools, - MoreMenu, - PostViewLink, - PreviewDropdown, - PinnedItems, - PostPublishButtonOrToggle, -} = unlock( editorPrivateApis ); +import { store as editSiteStore } from '../../store'; -export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { - const { - templateType, - isDistractionFree, - blockEditorMode, - showIconLabels, - editorCanvasView, - isFixedToolbar, - isPublishSidebarOpened, - isVisualMode, - } = useSelect( ( select ) => { - const { getEditedPostType } = select( editSiteStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - const { get: getPreference } = select( preferencesStore ); - const { getDeviceType, getEditorMode } = select( editorStore ); +const { Header: EditorHeader } = unlock( editorPrivateApis ); +function Header( { setEntitiesSavedStatesCallback } ) { + const _isPreviewingTheme = isPreviewingTheme(); + const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); + const { editorCanvasView } = useSelect( ( select ) => { return { - deviceType: getDeviceType(), - templateType: getEditedPostType(), - blockEditorMode: __unstableGetEditorMode(), - showIconLabels: getPreference( 'core', 'showIconLabels' ), editorCanvasView: unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), - isDistractionFree: getPreference( 'core', 'distractionFree' ), - isFixedToolbar: getPreference( 'core', 'fixedToolbar' ), - isPublishSidebarOpened: - select( editorStore ).isPublishSidebarOpened(), - isVisualMode: getEditorMode() === 'visual', }; }, [] ); - const isLargeViewport = useViewportMatch( 'medium' ); - const showTopToolbar = - isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out'; - const disableMotion = useReducedMotion(); - - const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); - - const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType ); - - const isZoomedOutView = blockEditorMode === 'zoom-out'; - - const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = - useState( true ); - - const toolbarVariants = { - isDistractionFree: { y: '-50px' }, - isDistractionFreeHovering: { y: 0 }, - view: { y: 0 }, - edit: { y: 0 }, - }; - - const toolbarTransition = { - type: 'tween', - duration: disableMotion ? 0 : 0.2, - ease: 'easeOut', - }; - - const _isPreviewingTheme = isPreviewingTheme(); return ( -
+ } + forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ + ! hasDefaultEditorCanvasView + ? getEditorCanvasContainerTitle( editorCanvasView ) + : undefined + } > - { hasDefaultEditorCanvasView && ( - - - { showTopToolbar && ( - - ) } - - ) } - - { ! isDistractionFree && ( -
- { ! hasDefaultEditorCanvasView ? ( - getEditorCanvasContainerTitle( editorCanvasView ) - ) : ( - - ) } -
- ) } - -
- - { isLargeViewport && ( - - ) } - - { - // TODO: For now we conditionally render the Save/Publish buttons based on - // some specific site editor extra handling. Examples are when we're previewing - // a theme, handling of global styles changes or when we're in 'view' mode, - // which opens the save panel in a Modal. - } - { ! _isPreviewingTheme && ! isPublishSidebarOpened && ( - // This button isn't completely hidden by the publish sidebar. - // We can't hide the whole toolbar when the publish sidebar is open because - // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. - // We track that DOM node to return focus to the PostPublishButtonOrToggle - // when the publish sidebar has been closed. - - ) } - { ! _isPreviewingTheme && ( - - ) } - { _isPreviewingTheme && } - { ! isDistractionFree && } - - - -
-
+ + ); } + +export default Header; diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 39a1a3418395a..69b1e9dff3849 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -1,192 +1,3 @@ -.edit-site-header-edit-mode { - height: $header-height; - align-items: center; - background-color: $white; - color: $gray-900; - display: flex; - box-sizing: border-box; - width: 100%; - justify-content: space-between; - border-bottom: $border-width solid $gray-200; +.editor-header { padding-left: $header-height; - - // When top toolbar is engaged and should expand fully. - &.show-block-toolbar { - - .edit-site-header-edit-mode__start, - .edit-site-header-edit-mode__end { - flex-basis: auto; - } - - .edit-site-header-edit-mode__center { - display: none; - } - } - - .edit-site-header-edit-mode__start { - display: flex; - border: none; - align-items: center; - flex-grow: 1; - flex-shrink: 2; - // Take up the full height of the header so the border focus - // is visible on toolbar buttons. - height: 100%; - // Allow focus ring to be fully visible on furthest right button. - @include break-medium() { - padding-right: var(--wp-admin-border-width-focus); - // Account for the site hub, which is 60x60px. - flex-basis: calc(37.5% - 60px); - // We need this to be overflow hidden so the block toolbar can - // overflow scroll. If the overflow is visible, flexbox allows - // the toolbar to grow outside of the allowed container space. - overflow: hidden; - } - } - - .edit-site-header-edit-mode__end { - display: flex; - justify-content: flex-end; - height: 100%; - flex-grow: 1; - flex-shrink: 1; - - @include break-medium() { - flex-basis: 37.5%; - } - } - - .edit-site-header-edit-mode__center { - align-items: center; - display: flex; - flex-basis: 100%; - flex-grow: 1; - flex-shrink: 2; - height: 100%; - justify-content: center; - - // Flex items will, by default, refuse to shrink below a minimum - // intrinsic width. In order to shrink this flexbox item, and - // subsequently truncate child text, we set an explicit min-width. - // See https://dev.w3.org/csswg/css-flexbox/#min-size-auto - min-width: 0; - - @include break-medium() { - flex-basis: 25%; - } - } - -} - -.edit-site-header-edit-mode__toolbar { - align-items: center; - display: flex; - gap: $grid-unit-10; - padding-left: $grid-unit-20; - - @include break-medium() { - padding-left: $grid-unit-50 * 0.5; - } - - @include break-wide() { - padding-right: $grid-unit-10; - } - - .edit-site-header-edit-mode__inserter-toggle { - svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); - } - - &.is-pressed { - svg { - transform: rotate(45deg); - } - } - } -} - -/** - * Buttons on the right side - */ - -.edit-site-header-edit-mode__actions { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; - // Ensure actions do not press against .edit-site-header-edit-mode__center. - padding-left: $grid-unit-10; - padding-right: $grid-unit-10; - gap: $grid-unit-10; -} - -// Button text label styles - -.edit-site-header-edit-mode.show-icon-labels { - .components-button.has-icon { - width: auto; - - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - &::after { - content: attr(aria-label); - } - &[aria-disabled="true"] { - background-color: transparent; - } - } - .is-tertiary { - &:active { - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - background-color: transparent; - } - } - // Some margins and padding have to be adjusted so the buttons can still fit on smaller screens. - .edit-site-save-button__button { - padding-left: 6px; - padding-right: 6px; - } - - // The template details toggle has a custom label, different from its aria-label, so we don't want to display both. - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - &::after { - content: none; - } - } - - .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle, - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - height: 36px; - padding: 0 $grid-unit-10; - } - - .block-editor-block-mover { - // Modified group borders. - border-left: none; - - &::before { - content: ""; - width: $border-width; - height: $grid-unit-30; - background-color: $gray-300; - margin-top: $grid-unit-05; - margin-left: $grid-unit; - } - - // Modified block movers horizontal separator. - .block-editor-block-mover__move-button-container { - &::before { - width: calc(100% - #{$grid-unit-30}); - background: $gray-300; - left: calc(50% + 1px); - } - } - } -} - -.components-popover.more-menu-dropdown__content { - z-index: z-index(".components-popover.more-menu__content"); } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 00b67f00f6f23..55a071caacac4 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -165,8 +165,9 @@ position: relative; color: $white; border-radius: 0; - height: $header-height; + height: $header-height + $border-width; width: $header-height; + margin-bottom: - $border-width; overflow: hidden; padding: 0; display: flex; diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index c799e9eae30de..434b55a7e0fe2 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -204,6 +204,7 @@ function DocumentTools( { ); } } size="compact" + disabled={ disableBlockTools } /> ) }
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js new file mode 100644 index 0000000000000..98501386434b6 --- /dev/null +++ b/packages/editor/src/components/header/index.js @@ -0,0 +1,154 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useViewportMatch } from '@wordpress/compose'; +import { __unstableMotion as motion } from '@wordpress/components'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { useState } from '@wordpress/element'; +import { PinnedItems } from '@wordpress/interface'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import CollapsableBlockToolbar from '../collapsible-block-toolbar'; +import DocumentBar from '../document-bar'; +import DocumentTools from '../document-tools'; +import MoreMenu from '../more-menu'; +import PostPreviewButton from '../post-preview-button'; +import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle'; +import PostSavedState from '../post-saved-state'; +import PostTypeSupportCheck from '../post-type-support-check'; +import PostViewLink from '../post-view-link'; +import PreviewDropdown from '../preview-dropdown'; +import { store as editorStore } from '../../store'; + +const slideY = { + hidden: { y: '-50px' }, + distractionFreeInactive: { y: 0 }, + hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, +}; + +function Header( { + customSaveButton, + forceIsDirty, + forceDisableBlockTools, + setEntitiesSavedStatesCallback, + title, + children, +} ) { + const isWideViewport = useViewportMatch( 'large' ); + const isLargeViewport = useViewportMatch( 'medium' ); + const { + isTextEditor, + isPublishSidebarOpened, + showIconLabels, + hasFixedToolbar, + isNestedEntity, + isZoomedOutView, + } = useSelect( ( select ) => { + const { get: getPreference } = select( preferencesStore ); + const { + getEditorMode, + getEditorSettings, + isPublishSidebarOpened: _isPublishSidebarOpened, + } = select( editorStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); + + return { + isTextEditor: getEditorMode() === 'text', + isPublishSidebarOpened: _isPublishSidebarOpened(), + showIconLabels: getPreference( 'core', 'showIconLabels' ), + hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), + isNestedEntity: + !! getEditorSettings().onNavigateToPreviousEntityRecord, + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + }; + }, [] ); + + const hasTopToolbar = isLargeViewport && hasFixedToolbar; + + const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = + useState( true ); + + // The edit-post-header classname is only kept for backward compatibilty + // as some plugins might be relying on its presence. + return ( +
+ { children } + + + { hasTopToolbar && ( + + ) } +
+ { ! title ? ( + + + + ) : ( + title + ) } +
+ + + { ! customSaveButton && ! isPublishSidebarOpened && ( + // This button isn't completely hidden by the publish sidebar. + // We can't hide the whole toolbar when the publish sidebar is open because + // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. + // We track that DOM node to return focus to the PostPublishButtonOrToggle + // when the publish sidebar has been closed. + + ) } + + + + { ! customSaveButton && ( + + ) } + { customSaveButton } + { ( isWideViewport || ! showIconLabels ) && ( + + ) } + + +
+ ); +} + +export default Header; diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss new file mode 100644 index 0000000000000..3040362a7bd57 --- /dev/null +++ b/packages/editor/src/components/header/style.scss @@ -0,0 +1,231 @@ +.editor-header { + height: $header-height; + background: $white; + display: flex; + flex-wrap: wrap; + align-items: center; + // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. + max-width: 100vw; + justify-content: space-between; + + // Make toolbar sticky on larger breakpoints + @include break-zoomed-in { + flex-wrap: nowrap; + } +} + +.editor-header__toolbar { + display: flex; + // Allow this area to shrink to fit the toolbar buttons. + flex-shrink: 8; + // Take up the space of the toolbar so it can be justified to the left side of the toolbar. + flex-grow: 3; + // Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar. + overflow: hidden; + // Leave enough room for the focus ring to show. + padding: 2px 0; + align-items: center; + // Allow focus ring to be fully visible on furthest right button. + @include break-medium() { + padding-right: var(--wp-admin-border-width-focus); + } + + .table-of-contents { + display: none; + + @include break-small() { + display: block; + } + } +} + +.editor-header__center { + flex-grow: 1; + display: flex; + justify-content: center; + + &.is-collapsed { + display: none; + } +} + +/** + * Buttons on the right side + */ + +.editor-header__settings { + display: inline-flex; + align-items: center; + flex-wrap: nowrap; + padding-right: $grid-unit-05; + + @include break-small () { + padding-right: $grid-unit-10; + } + + gap: $grid-unit-10; +} + +/** + * Show icon labels. + */ + +.show-icon-labels.interface-pinned-items, +.show-icon-labels .editor-header { + .components-button.has-icon { + width: auto; + + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + } + &[aria-disabled="true"] { + background-color: transparent; + } + } + .is-tertiary { + &:active { + box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); + background-color: transparent; + } + } + // Exception for drodpdown toggle buttons. + .components-button.has-icon.button-toggle { + svg { + display: block; + } + &::after { + content: none; + } + } + + // Don't hide MenuItemsChoice check icons + .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { + display: block; + } + .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, + .interface-pinned-items .components-button { + padding-left: $grid-unit; + padding-right: $grid-unit; + + @include break-small { + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + } + } + + .editor-post-save-draft.editor-post-save-draft, + .editor-post-saved-state.editor-post-saved-state { + &::after { + content: none; + } + } +} + +.show-icon-labels { + .editor-header__toolbar .block-editor-block-mover { + // Modified group borders. + border-left: none; + + &::before { + content: ""; + width: $border-width; + height: $grid-unit-30; + background-color: $gray-300; + margin-top: $grid-unit-05; + margin-left: $grid-unit; + } + + // Modified block movers horizontal separator. + .block-editor-block-mover__move-button-container { + &::before { + width: calc(100% - #{$grid-unit-30}); + background: $gray-300; + left: calc(50% + 1px); + } + } + } +} + +.show-icon-labels.interface-pinned-items { + padding: 6px $grid-unit-15 $grid-unit-15; + margin-top: 0; + margin-bottom: 0; + margin-left: -$grid-unit-15; + margin-right: -$grid-unit-15; + border-bottom: 1px solid $gray-400; + display: block; + + > .components-button.has-icon { + margin: 0; + padding: 6px 6px 6px $grid-unit; + width: 14.625rem; + justify-content: flex-start; + + &[aria-expanded="true"] svg { + display: block; + max-width: $grid-unit-30; + } + &[aria-expanded="false"] { + padding-left: $grid-unit-50; + } + svg { + margin-right: 8px; + } + } +} + +.editor-header__post-preview-button { + @include break-small { + display: none; + } +} + +.is-distraction-free { + .interface-interface-skeleton__header { + border-bottom: none; + } + + .editor-header { + background-color: $white; + border-bottom: 1px solid #e0e0e0; + position: absolute; + width: 100%; + + + // hide some parts + & > .edit-post-header__settings > .edit-post-header__post-preview-button { + visibility: hidden; + } + + & > .editor-header__toolbar .editor-document-tools__document-overview-toggle, + & > .editor-header__settings > .editor-preview-dropdown, + & > .editor-header__settings > .interface-pinned-items { + display: none; + } + + } + + // We need ! important because we override inline styles + // set by the motion component. + .interface-interface-skeleton__header:focus-within { + opacity: 1 !important; + div { + transform: translateX(0) translateZ(0) !important; + } + + } + + .components-editor-notices__dismissible { + position: absolute; + z-index: 35; + } +} + +.components-popover.more-menu-dropdown__content { + z-index: z-index(".components-popover.more-menu__content"); +} diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 762c6bec89c88..cee1a734ca34c 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -6,22 +6,18 @@ import * as interfaceApis from '@wordpress/interface'; /** * Internal dependencies */ -import CollapsableBlockToolbar from './components/collapsible-block-toolbar'; import EditorCanvas from './components/editor-canvas'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; -import DocumentTools from './components/document-tools'; +import Header from './components/header'; import InserterSidebar from './components/inserter-sidebar'; import ListViewSidebar from './components/list-view-sidebar'; -import MoreMenu from './components/more-menu'; import PatternOverridesPanel from './components/pattern-overrides-panel'; import PluginPostExcerpt from './components/post-excerpt/plugin'; import PostPanelRow from './components/post-panel-row'; -import PostViewLink from './components/post-view-link'; -import PreviewDropdown from './components/preview-dropdown'; import PreferencesModal from './components/preferences-modal'; import PostActions from './components/post-actions'; import { usePostActions } from './components/post-actions/actions'; @@ -30,7 +26,6 @@ import PostStatus from './components/post-status'; import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; -import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle'; import SavePublishPanels from './components/save-publish-panels'; import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; @@ -39,20 +34,16 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; export const privateApis = {}; lock( privateApis, { - CollapsableBlockToolbar, - DocumentTools, EditorCanvas, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + Header, InserterSidebar, ListViewSidebar, - MoreMenu, PatternOverridesPanel, PluginPostExcerpt, PostActions, PostPanelRow, - PostViewLink, - PreviewDropdown, PreferencesModal, usePostActions, PostCardPanel, @@ -60,7 +51,6 @@ lock( privateApis, { ToolsMoreMenuGroup, ViewMoreMenuGroup, PrivatePostExcerptPanel, - PostPublishButtonOrToggle, SavePublishPanels, PostContentInformation, PostLastEditedPanel, diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js new file mode 100644 index 0000000000000..78ef82c327f8f --- /dev/null +++ b/packages/editor/src/private-apis.native.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +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'; +import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; +import useBlockEditorSettings from './components/provider/use-block-editor-settings'; +import InserterSidebar from './components/inserter-sidebar'; +import ListViewSidebar from './components/list-view-sidebar'; +import PatternOverridesPanel from './components/pattern-overrides-panel'; +import PluginPostExcerpt from './components/post-excerpt/plugin'; +import PostPanelRow from './components/post-panel-row'; +import PreferencesModal from './components/preferences-modal'; +import PostActions from './components/post-actions'; +import { usePostActions } from './components/post-actions/actions'; +import PostCardPanel from './components/post-card-panel'; +import PostStatus from './components/post-status'; +import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; +import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; +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'; + +const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; + +export const privateApis = {}; +lock( privateApis, { + EditorCanvas, + ExperimentalEditorProvider, + EntitiesSavedStatesExtensible, + InserterSidebar, + ListViewSidebar, + PatternOverridesPanel, + PluginPostExcerpt, + PostActions, + PostPanelRow, + PreferencesModal, + usePostActions, + PostCardPanel, + PostStatus, + ToolsMoreMenuGroup, + ViewMoreMenuGroup, + PrivatePostExcerptPanel, + SavePublishPanels, + PostContentInformation, + PostLastEditedPanel, + + // This is a temporary private API while we're updating the site editor to use EditorProvider. + useAutoSwitchEditorSidebars, + useBlockEditorSettings, + interfaceStore, + ...remainingInterfaceApis, +} ); diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index ed61638ffb7ef..e869bf2d68b36 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -9,6 +9,7 @@ @import "./components/editor-notices/style.scss"; @import "./components/entities-saved-states/style.scss"; @import "./components/error-boundary/style.scss"; +@import "./components/header/style.scss"; @import "./components/inserter-sidebar/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; @import "./components/list-view-sidebar/style.scss"; diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index 2b149bcc69bf3..7d656fbd2774f 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -25,7 +25,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select and try to remove Query Loop block const listView = page.getByRole( 'region', { name: 'List View' } ); @@ -45,7 +47,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select and open child blocks of Query Loop block const listView = page.getByRole( 'region', { name: 'List View' } ); @@ -70,7 +74,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select Query Loop list item const listView = page.getByRole( 'region', { name: 'List View' } ); diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index 9b7a1c17a9ce1..9bccc7c56446a 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -106,7 +106,7 @@ test.describe( 'Site Editor List View', () => { // Focus should now be on the list view toggle button. await expect( - page.getByRole( 'button', { name: 'List View' } ) + page.getByRole( 'button', { name: 'Document Overview' } ) ).toBeFocused(); // Open List View. @@ -129,7 +129,7 @@ test.describe( 'Site Editor List View', () => { await pageUtils.pressKeys( 'access+o' ); await expect( listView ).toBeHidden(); await expect( - page.getByRole( 'button', { name: 'List View' } ) + page.getByRole( 'button', { name: 'Document Overview' } ) ).toBeFocused(); } ); } ); diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index 4a5864755614b..087013607be2f 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -30,18 +30,12 @@ test.describe( 'Style Book', () => { test( 'should disable toolbar buttons when open', async ( { page } ) => { await expect( page.locator( 'role=button[name="Toggle block inserter"i]' ) - ).toBeHidden(); + ).toBeDisabled(); await expect( page.locator( 'role=button[name="Tools"i]' ) - ).toBeHidden(); - await expect( - page.locator( 'role=button[name="Undo"i]' ) - ).toBeHidden(); - await expect( - page.locator( 'role=button[name="Redo"i]' ) - ).toBeHidden(); + ).toBeDisabled(); await expect( - page.locator( 'role=button[name="View"i]' ) + page.locator( 'role=button[name="Document Overview"i]' ) ).toBeDisabled(); } ); From e8994759c36b52fab5a6973e4963a6d86a2bfe3b Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed, 8 May 2024 16:48:50 +0300 Subject: [PATCH 18/53] RadioControl: Fix shrinking radio controls (#61476) Co-authored-by: tyxla Co-authored-by: jameskoster --- packages/base-styles/_mixins.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index a1de82c2081cc..730fc6e9b4a8c 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -317,10 +317,14 @@ border-radius: $radius-round; width: $radio-input-size-sm; height: $radio-input-size-sm; + min-width: $radio-input-size-sm; + max-width: $radio-input-size-sm; @include break-small() { height: $radio-input-size; width: $radio-input-size; + min-width: $radio-input-size; + max-width: $radio-input-size; } &:checked::before { From 14ecb1d627335fa5b1f9b6999fb9f4f2fe6127cd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 8 May 2024 09:49:20 -0400 Subject: [PATCH 19/53] Bump actions/checkout from 4.1.4 to 4.1.5 in the github-actions group (#61449) Bumps the github-actions group with 1 update: [actions/checkout](https://github.com/actions/checkout). Updates `actions/checkout` from 4.1.4 to 4.1.5 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/0ad4b8fadaa221de15dcec353f45205ec38ea70b...44c2b7a8a4ea60a981eaca3cf939b5f4305c123b) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-patch dependency-group: github-actions ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: desrosj --- .github/workflows/build-plugin-zip.yml | 10 +++++----- .github/workflows/bundle-size.yml | 2 +- .github/workflows/check-components-changelog.yml | 2 +- .github/workflows/create-block.yml | 2 +- .github/workflows/end2end-test.yml | 4 ++-- .github/workflows/gradle-wrapper-validation.yml | 2 +- .github/workflows/performance.yml | 2 +- .github/workflows/php-changes-detection.yml | 2 +- .github/workflows/publish-npm-packages.yml | 6 +++--- .github/workflows/pull-request-automation.yml | 2 +- .github/workflows/rnmobile-android-runner.yml | 2 +- .github/workflows/rnmobile-ios-runner.yml | 2 +- .github/workflows/static-checks.yml | 2 +- .github/workflows/storybook-pages.yml | 2 +- .github/workflows/unit-test.yml | 12 ++++++------ .github/workflows/upload-release-to-plugin-repo.yml | 2 +- 16 files changed, 28 insertions(+), 28 deletions(-) diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index d1621ed5106aa..149faee274206 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -69,7 +69,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: token: ${{ secrets.GUTENBERG_TOKEN }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -165,7 +165,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ needs.bump-version.outputs.release_branch || github.ref }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -222,7 +222,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 2 ref: ${{ needs.bump-version.outputs.release_branch }} @@ -311,14 +311,14 @@ jobs: if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }} steps: - name: Checkout (for CLI) - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: main ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Checkout (for publishing) - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: publish # Later, we switch this branch in the script that publishes packages. diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 8eafe4267bc43..1065421044373 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -37,7 +37,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 1 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml index 77fdf4759f7de..d995d641fae57 100644 --- a/.github/workflows/check-components-changelog.yml +++ b/.github/workflows/check-components-changelog.yml @@ -20,7 +20,7 @@ jobs: - name: 'Get PR commit count' run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}" - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ github.event.pull_request.head.ref }} repository: ${{ github.event.pull_request.head.repo.full_name }} diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 2b93546926480..7c26cb6e14e76 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -24,7 +24,7 @@ jobs: os: ['macos-latest', 'ubuntu-latest', 'windows-latest'] steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 9e9c22e81fc3f..16680038e0db6 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -27,7 +27,7 @@ jobs: totalParts: [8] steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -102,7 +102,7 @@ jobs: steps: # Checkout defaults to using the branch which triggered the event, which # isn't necessarily `trunk` (e.g. in the case of a merge). - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml index bcd0fee6453fd..633f62d5ed28c 100644 --- a/.github/workflows/gradle-wrapper-validation.yml +++ b/.github/workflows/gradle-wrapper-validation.yml @@ -6,7 +6,7 @@ jobs: name: 'Validation' runs-on: ubuntu-latest steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - uses: gradle/wrapper-validation-action@v3 diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index b78ff9532c22d..c5c8848026d98 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -32,7 +32,7 @@ jobs: WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/php-changes-detection.yml b/.github/workflows/php-changes-detection.yml index ba34e0d806185..3b813c8f8d48f 100644 --- a/.github/workflows/php-changes-detection.yml +++ b/.github/workflows/php-changes-detection.yml @@ -10,7 +10,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} steps: - name: Check out code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 0 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 11dfdb878ef28..94397afd7b4bc 100644 --- a/.github/workflows/publish-npm-packages.yml +++ b/.github/workflows/publish-npm-packages.yml @@ -31,7 +31,7 @@ jobs: steps: - name: Checkout (for CLI) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: cli ref: trunk @@ -39,7 +39,7 @@ jobs: - name: Checkout (for publishing) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: publish # Later, we switch this branch in the script that publishes packages. @@ -49,7 +49,7 @@ jobs: - name: Checkout (for publishing WP major version) if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }} - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: publish ref: wp/${{ github.event.inputs.wp_version }} diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml index 05d28f888d0ae..099203bbffe72 100644 --- a/.github/workflows/pull-request-automation.yml +++ b/.github/workflows/pull-request-automation.yml @@ -12,7 +12,7 @@ jobs: steps: # Checkout defaults to using the branch which triggered the event, which # isn't necessarily `trunk` (e.g. in the case of a merge). - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 5d1d476226b12..a4dce407d1c0f 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -23,7 +23,7 @@ jobs: steps: - name: checkout - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 5056527d097bd..516f783c11e40 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -23,7 +23,7 @@ jobs: native-test-name: [gutenberg-editor-rendering] steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index 12c8931efca06..ff3fe96d505f6 100644 --- a/.github/workflows/static-checks.yml +++ b/.github/workflows/static-checks.yml @@ -22,7 +22,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 56b7471f06d9b..7486ea32533e6 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -12,7 +12,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 22bca2dc78186..a4a639e183d5b 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -32,7 +32,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -70,7 +70,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -121,7 +121,7 @@ jobs: name: Build JavaScript assets for PHP unit tests runs-on: ubuntu-latest steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -170,7 +170,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -281,7 +281,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -351,7 +351,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml index 8a92d0443d577..8f57a749b0601 100644 --- a/.github/workflows/upload-release-to-plugin-repo.yml +++ b/.github/workflows/upload-release-to-plugin-repo.yml @@ -96,7 +96,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ matrix.branch }} token: ${{ secrets.GUTENBERG_TOKEN }} From 1eb76440f7b86ca905ac875d4a2c6ed67fc48daf Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Wed, 8 May 2024 16:33:10 +0100 Subject: [PATCH 20/53] build: Suggest workaround if `tsc --build` fails (#61501) Following the merge of #60796, developers may face build issues that require package types to be rebuilt. The problem is that `tsc --build` fails somewhat silently -- or rather, there is some output, but it's not clear in the console which stage of the `build:package-types` command failed, and hence what the workaround should be. This commit alleviates the issue by logging a helpful message in the console if `tsc --build` fails: tsc failed. Try cleaning up first: `npm run clean:package-types` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 81b467ff1e990..76668f689f904 100644 --- a/package.json +++ b/package.json @@ -268,7 +268,7 @@ "scripts": { "build": "npm run build:packages && wp-scripts build", "build:analyze-bundles": "npm run build -- --webpack-bundle-analyzer", - "build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build && node ./bin/packages/check-build-type-declaration-files.js", + "build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js", "prebuild:packages": "npm run clean:packages && lerna run build", "build:packages": "npm run build:package-types && node ./bin/packages/build.js", "build:plugin-zip": "bash ./bin/build-plugin-zip.sh", From 293537d05f919ac1942a370d9f840c61877c69b6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 May 2024 19:42:47 +0100 Subject: [PATCH 21/53] Editor: Move the sidebar component to the editor package (#61497) Co-authored-by: youknowriad Co-authored-by: Mamaduka Co-authored-by: jameskoster --- .../edit-post/src/components/layout/index.js | 13 ++- .../components/sidebar/post-format/style.scss | 5 -- .../sidebar/post-pending-status/index.js | 27 ------ .../components/sidebar/post-sticky/index.js | 27 ------ .../components/sidebar/post-trash/index.js | 12 --- .../sidebar/post-visibility/index.js | 88 ------------------- .../sidebar/post-visibility/style.scss | 5 -- packages/edit-post/src/style.scss | 4 - .../src/components/post-format/panel.js} | 12 +-- .../src/components/post-format/style.scss | 6 ++ .../src/components/post-slug/panel.js} | 9 +- .../src/components}/post-slug/style.scss | 2 +- .../src/components/post-sticky/panel.js | 18 ++++ .../editor/src/components/post-trash/panel.js | 13 +++ .../src/components/sidebar/constants.js | 4 + .../src/components/sidebar/header.js} | 10 +-- .../src/components/sidebar}/index.js | 69 +++++++-------- .../src/components/sidebar/post-summary.js} | 52 +++++------ .../src/components/sidebar/style.scss | 2 +- packages/editor/src/private-apis.js | 2 + packages/editor/src/style.scss | 2 + .../components/complementary-area/style.scss | 2 +- .../editor-style-overrides.css | 6 +- 23 files changed, 137 insertions(+), 253 deletions(-) delete mode 100644 packages/edit-post/src/components/sidebar/post-format/style.scss delete mode 100644 packages/edit-post/src/components/sidebar/post-pending-status/index.js delete mode 100644 packages/edit-post/src/components/sidebar/post-sticky/index.js delete mode 100644 packages/edit-post/src/components/sidebar/post-trash/index.js delete mode 100644 packages/edit-post/src/components/sidebar/post-visibility/index.js delete mode 100644 packages/edit-post/src/components/sidebar/post-visibility/style.scss rename packages/{edit-post/src/components/sidebar/post-format/index.js => editor/src/components/post-format/panel.js} (60%) rename packages/{edit-post/src/components/sidebar/post-slug/index.js => editor/src/components/post-slug/panel.js} (61%) rename packages/{edit-post/src/components/sidebar => editor/src/components}/post-slug/style.scss (74%) create mode 100644 packages/editor/src/components/post-sticky/panel.js create mode 100644 packages/editor/src/components/post-trash/panel.js create mode 100644 packages/editor/src/components/sidebar/constants.js rename packages/{edit-post/src/components/sidebar/settings-header/index.js => editor/src/components/sidebar/header.js} (82%) rename packages/{edit-post/src/components/sidebar/settings-sidebar => editor/src/components/sidebar}/index.js (80%) rename packages/{edit-post/src/components/sidebar/post-status/index.js => editor/src/components/sidebar/post-summary.js} (69%) rename packages/{edit-post => editor}/src/components/sidebar/style.scss (77%) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 8d00c0e35cdfd..344f73dd6fa04 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -45,7 +45,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts'; import InitPatternModal from '../init-pattern-modal'; import BrowserURL from '../browser-url'; import Header from '../header'; -import SettingsSidebar from '../sidebar/settings-sidebar'; import MetaBoxes from '../meta-boxes'; import WelcomeGuide from '../welcome-guide'; import { store as editPostStore } from '../../store'; @@ -63,6 +62,7 @@ const { SavePublishPanels, InterfaceSkeleton, interfaceStore, + Sidebar, } = unlock( editorPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -161,6 +161,7 @@ function Layout( { initialPost } ) { hasHistory, hasBlockBreadcrumbs, blockEditorMode, + isEditingTemplate, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { getEditorSettings, getPostTypeLabel } = select( editorStore ); @@ -198,6 +199,8 @@ function Layout( { initialPost } ) { hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), blockEditorMode: select( blockEditorStore ).__unstableGetEditorMode(), + isEditingTemplate: + select( editorStore ).getCurrentPostType() === 'wp_template', }; }, [] ); @@ -372,7 +375,13 @@ function Layout( { initialPost } ) { - { ! isDistractionFree && } + { ! isDistractionFree && ( + + } + /> + ) } ); } diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss deleted file mode 100644 index 53d68ea219743..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-format/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.edit-post-post-format { - display: flex; - flex-direction: column; - align-items: stretch; -} diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js deleted file mode 100644 index de1f02b00d746..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-pending-status/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { - PostPendingStatus as PostPendingStatusForm, - PostPendingStatusCheck, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostPendingStatus() { - return ( - - - - - - ); -} - -export default PostPendingStatus; diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js deleted file mode 100644 index 1b31297a41294..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-sticky/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { - PostSticky as PostStickyForm, - PostStickyCheck, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostSticky() { - return ( - - - - - - ); -} - -export default PostSticky; diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js deleted file mode 100644 index d77c7a6d82988..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-trash/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * WordPress dependencies - */ -import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor'; - -export default function PostTrash() { - return ( - - - - ); -} diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js deleted file mode 100644 index 8bffb1b563e1e..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { Dropdown, Button } from '@wordpress/components'; -import { - PostVisibility as PostVisibilityForm, - PostVisibilityLabel, - PostVisibilityCheck, - usePostVisibilityLabel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { useMemo, useState } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostVisibility() { - // Use internal state instead of a ref to make sure that the component - // re-renders when the popover's anchor updates. - const [ popoverAnchor, setPopoverAnchor ] = useState( null ); - // Memoize popoverProps to avoid returning a new object every time. - const popoverProps = useMemo( - () => ( { - // Anchor the popover to the middle of the entire row so that it doesn't - // move around when the label changes. - anchor: popoverAnchor, - placement: 'bottom-end', - } ), - [ popoverAnchor ] - ); - - return ( - ( - - { ! canEdit && ( - - - - ) } - { canEdit && ( - ( - - ) } - renderContent={ ( { onClose } ) => ( - - ) } - /> - ) } - - ) } - /> - ); -} - -function PostVisibilityToggle( { isOpen, onClick } ) { - const label = usePostVisibilityLabel(); - return ( - - ); -} - -export default PostVisibility; diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss deleted file mode 100644 index 0dd9824e5bde7..0000000000000 --- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.edit-post-post-visibility__dialog .editor-post-visibility { - // sidebar width - popover padding - form margin - min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; - margin: $grid-unit-10; -} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index f477bef7bbffd..be959f2d174e8 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,10 +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/sidebar/style.scss"; -@import "./components/sidebar/post-format/style.scss"; -@import "./components/sidebar/post-slug/style.scss"; -@import "./components/sidebar/post-visibility/style.scss"; @import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; @import "./components/welcome-guide/style.scss"; diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/editor/src/components/post-format/panel.js similarity index 60% rename from packages/edit-post/src/components/sidebar/post-format/index.js rename to packages/editor/src/components/post-format/panel.js index 5127fa0930f3f..cbd065183eefa 100644 --- a/packages/edit-post/src/components/sidebar/post-format/index.js +++ b/packages/editor/src/components/post-format/panel.js @@ -2,15 +2,17 @@ * WordPress dependencies */ import { PanelRow } from '@wordpress/components'; -import { - PostFormat as PostFormatForm, - PostFormatCheck, -} from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import PostFormatForm from './'; +import PostFormatCheck from './check'; export function PostFormat() { return ( - + diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss index 09fb0f11b9f94..135ee7f357902 100644 --- a/packages/editor/src/components/post-format/style.scss +++ b/packages/editor/src/components/post-format/style.scss @@ -1,3 +1,9 @@ [class].editor-post-format__suggestion { margin: $grid-unit-05 0 0 0; } + +.editor-post-format__panel { + display: flex; + flex-direction: column; + align-items: stretch; +} diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/editor/src/components/post-slug/panel.js similarity index 61% rename from packages/edit-post/src/components/sidebar/post-slug/index.js rename to packages/editor/src/components/post-slug/panel.js index 8b52f94bd33f5..6ab97a28b251c 100644 --- a/packages/edit-post/src/components/sidebar/post-slug/index.js +++ b/packages/editor/src/components/post-slug/panel.js @@ -2,12 +2,17 @@ * WordPress dependencies */ import { PanelRow } from '@wordpress/components'; -import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import PostSlugForm from './'; +import PostSlugCheck from './check'; export function PostSlug() { return ( - + diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/editor/src/components/post-slug/style.scss similarity index 74% rename from packages/edit-post/src/components/sidebar/post-slug/style.scss rename to packages/editor/src/components/post-slug/style.scss index 067dfcb08d6f0..551450582128e 100644 --- a/packages/edit-post/src/components/sidebar/post-slug/style.scss +++ b/packages/editor/src/components/post-slug/style.scss @@ -1,4 +1,4 @@ -.edit-post-post-slug { +.editor-post-slug { display: flex; flex-direction: column; align-items: stretch; diff --git a/packages/editor/src/components/post-sticky/panel.js b/packages/editor/src/components/post-sticky/panel.js new file mode 100644 index 0000000000000..b5ede0c1ab882 --- /dev/null +++ b/packages/editor/src/components/post-sticky/panel.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import PostPanelRow from '../post-panel-row'; +import PostStickyForm from './'; +import PostStickyCheck from './check'; + +export function PostStickyPanel() { + return ( + + + + + + ); +} + +export default PostStickyPanel; diff --git a/packages/editor/src/components/post-trash/panel.js b/packages/editor/src/components/post-trash/panel.js new file mode 100644 index 0000000000000..9111c048eb60b --- /dev/null +++ b/packages/editor/src/components/post-trash/panel.js @@ -0,0 +1,13 @@ +/** + * Internal dependencies + */ +import PostTrashCheck from './check'; +import PostTrashLink from './'; + +export default function PostTrashPanel() { + return ( + + + + ); +} diff --git a/packages/editor/src/components/sidebar/constants.js b/packages/editor/src/components/sidebar/constants.js new file mode 100644 index 0000000000000..be660c2169239 --- /dev/null +++ b/packages/editor/src/components/sidebar/constants.js @@ -0,0 +1,4 @@ +export const sidebars = { + document: 'edit-post/document', + block: 'edit-post/block', +}; diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/editor/src/components/sidebar/header.js similarity index 82% rename from packages/edit-post/src/components/sidebar/settings-header/index.js rename to packages/editor/src/components/sidebar/header.js index 244e21b1acd43..fc4d44ba9e295 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/editor/src/components/sidebar/header.js @@ -5,17 +5,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import { forwardRef } from '@wordpress/element'; -import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies */ -import { unlock } from '../../../lock-unlock'; -import { sidebars } from '../settings-sidebar'; +import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +import { sidebars } from './constants'; const { Tabs } = unlock( componentsPrivateApis ); -const SettingsHeader = ( _, ref ) => { +const SidebarHeader = ( _, ref ) => { const { documentLabel } = useSelect( ( select ) => { const { getPostTypeLabel } = select( editorStore ); @@ -46,4 +46,4 @@ const SettingsHeader = ( _, ref ) => { ); }; -export default forwardRef( SettingsHeader ); +export default forwardRef( SidebarHeader ); diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/editor/src/components/sidebar/index.js similarity index 80% rename from packages/edit-post/src/components/sidebar/settings-sidebar/index.js rename to packages/editor/src/components/sidebar/index.js index fd5b136ba461d..4aa4d03569e11 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -16,45 +16,43 @@ import { import { isRTL, __, sprintf } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { - store as editorStore, - PageAttributesPanel, - PluginDocumentSettingPanel, - PluginSidebar, - PostDiscussionPanel, - PostLastRevisionPanel, - PostTaxonomiesPanel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; import { addQueryArgs } from '@wordpress/url'; import { store as noticesStore } from '@wordpress/notices'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies */ -import SettingsHeader from '../settings-header'; -import PostStatus from '../post-status'; -import MetaBoxes from '../../meta-boxes'; -import { store as editPostStore } from '../../../store'; -import { privateApis as componentsPrivateApis } from '@wordpress/components'; -import { unlock } from '../../../lock-unlock'; +import PageAttributesPanel from '../page-attributes/panel'; +import PatternOverridesPanel from '../pattern-overrides-panel'; +import PluginDocumentSettingPanel from '../plugin-document-setting-panel'; +import PluginSidebar from '../plugin-sidebar'; +import PostActions from '../post-actions'; +import PostCardPanel from '../post-card-panel'; +import PostDiscussionPanel from '../post-discussion/panel'; +import PostLastRevisionPanel from '../post-last-revision/panel'; +import PostSummary from './post-summary'; +import PostTaxonomiesPanel from '../post-taxonomies/panel'; +import SidebarHeader from './header'; +import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars'; +import { sidebars } from './constants'; +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; -const { PostCardPanel, PostActions, interfaceStore } = - unlock( editorPrivateApis ); const { Tabs } = unlock( componentsPrivateApis ); -const { PatternOverridesPanel, useAutoSwitchEditorSidebars } = - unlock( editorPrivateApis ); const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { web: true, native: false, } ); -export const sidebars = { - document: 'edit-post/document', - block: 'edit-post/block', -}; -const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { +const SidebarContent = ( { + tabName, + keyboardShortcut, + isEditingTemplate, + extraPanels, +} ) => { const tabListRef = useRef( null ); // Because `PluginSidebar` renders a `ComplementaryArea`, we // need to forward the `Tabs` context so it can be passed through the @@ -143,15 +141,15 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { identifier={ tabName } header={ - + } closeLabel={ __( 'Close Settings' ) } // This classname is added so we can apply a corrective negative // margin to the panel. // see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049 - className="edit-post-sidebar__panel" - headerClassName="edit-post-sidebar__panel-tabs" + className="editor-sidebar__panel" + headerClassName="editor-sidebar__panel-tabs" /* translators: button label text should, if possible, be under 16 characters. */ title={ __( 'Settings' ) } toggleShortcut={ keyboardShortcut } @@ -167,14 +165,14 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { /> } /> - { ! isEditingTemplate && } + { ! isEditingTemplate && } - { ! isEditingTemplate && } + { extraPanels } @@ -184,7 +182,7 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { ); }; -const SettingsSidebar = () => { +const Sidebar = ( { extraPanels } ) => { useAutoSwitchEditorSidebars(); const { tabName, keyboardShortcut, isEditingTemplate } = useSelect( ( select ) => { @@ -218,15 +216,15 @@ const SettingsSidebar = () => { [] ); - const { openGeneralSidebar } = useDispatch( editPostStore ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); const onTabSelect = useCallback( ( newSelectedTabId ) => { if ( !! newSelectedTabId ) { - openGeneralSidebar( newSelectedTabId ); + enableComplementaryArea( 'core', newSelectedTabId ); } }, - [ openGeneralSidebar ] + [ enableComplementaryArea ] ); return ( @@ -239,9 +237,10 @@ const SettingsSidebar = () => { tabName={ tabName } keyboardShortcut={ keyboardShortcut } isEditingTemplate={ isEditingTemplate } + extraPanels={ extraPanels } /> ); }; -export default SettingsSidebar; +export default Sidebar; diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/editor/src/components/sidebar/post-summary.js similarity index 69% rename from packages/edit-post/src/components/sidebar/post-status/index.js rename to packages/editor/src/components/sidebar/post-summary.js index 99c202463162d..3ab5d5bab5c6c 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -8,40 +8,33 @@ import { PanelBody, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; -import { - PluginPostStatusInfo, - PostAuthorPanel, - PostSchedulePanel, - PostSyncStatus, - PostURLPanel, - PostTemplatePanel, - PostFeaturedImagePanel, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; /** * Internal dependencies */ -import PostTrash from '../post-trash'; -import PostSticky from '../post-sticky'; -import PostSlug from '../post-slug'; -import PostFormat from '../post-format'; -import { unlock } from '../../../lock-unlock'; - -const { - PostStatus: PostStatusPanel, - PrivatePostExcerptPanel, - PostContentInformation, - PostLastEditedPanel, -} = unlock( editorPrivateApis ); +import PluginPostStatusInfo from '../plugin-post-status-info'; +import PostAuthorPanel from '../post-author/panel'; +import PostContentInformation from '../post-content-information'; +import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel'; +import PostFeaturedImagePanel from '../post-featured-image/panel'; +import PostFormatPanel from '../post-format/panel'; +import PostLastEditedPanel from '../post-last-edited-panel'; +import PostSchedulePanel from '../post-schedule/panel'; +import PostSlugPanel from '../post-slug/panel'; +import PostStatusPanel from '../post-status'; +import PostStickyPanel from '../post-sticky'; +import PostSyncStatus from '../post-sync-status'; +import PostTemplatePanel from '../post-template/panel'; +import PostTrashPanel from '../post-trash/panel'; +import PostURLPanel from '../post-url/panel'; +import { store as editorStore } from '../../store'; /** * Module Constants */ const PANEL_NAME = 'post-status'; -export default function PostStatus() { +export default function PostSummary() { const { isOpened, isRemoved, showPostContentPanels } = useSelect( ( select ) => { // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do @@ -74,7 +67,6 @@ export default function PostStatus() { return ( toggleEditorPanelOpened( PANEL_NAME ) } @@ -91,7 +83,7 @@ export default function PostStatus() { - + @@ -108,9 +100,9 @@ export default function PostStatus() { - - - + + + { fills } - + ) } diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss similarity index 77% rename from packages/edit-post/src/components/sidebar/style.scss rename to packages/editor/src/components/sidebar/style.scss index 7a20cc5f0f54f..000f4c6123766 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/editor/src/components/sidebar/style.scss @@ -1,4 +1,4 @@ -.components-panel__header.edit-post-sidebar__panel-tabs { +.components-panel__header.editor-sidebar__panel-tabs { padding-left: 0; padding-right: $grid-unit-20; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index cee1a734ca34c..951cc4128badb 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 Sidebar from './components/sidebar'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -54,6 +55,7 @@ lock( privateApis, { SavePublishPanels, PostContentInformation, PostLastEditedPanel, + Sidebar, // This is a temporary private API while we're updating the site editor to use EditorProvider. useAutoSwitchEditorSidebars, diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index e869bf2d68b36..b382fd82c583a 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -27,6 +27,7 @@ @import "./components/post-publish-panel/style.scss"; @import "./components/post-saved-state/style.scss"; @import "./components/post-schedule/style.scss"; +@import "./components/post-slug/style.scss"; @import "./components/post-status/style.scss"; @import "./components/post-sync-status/style.scss"; @import "./components/post-taxonomies/style.scss"; @@ -39,5 +40,6 @@ @import "./components/preview-dropdown/style.scss"; @import "./components/save-publish-panels/style.scss"; @import "./components/start-page-options/style.scss"; +@import "./components/sidebar/style.scss"; @import "./components/table-of-contents/style.scss"; @import "./components/template-areas/style.scss"; diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 7cbad41fa9118..c15be5678a446 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -24,7 +24,7 @@ top: 0; z-index: z-index(".interface-complementary-area .components-panel__header"); - &.edit-post-sidebar__panel-tabs { + &.editor-sidebar__panel-tabs { top: $panel-header-height; @include break-medium() { diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css index ce39beede024f..484cdfebfbd9b 100644 --- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css +++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css @@ -64,17 +64,17 @@ } /* Remove tabs from sidebar panel, leaving the \'x\' button */ -.edit-post-sidebar__panel-tabs { +.editor-sidebar__panel-tabs { display: none; } /* Remove \'(no-title)\' string from sidebar header */ -.edit-post-sidebar-header__title { +.editor-sidebar-header__title { display: none; } /* Move \'x\' close button to the end on sidebar header */ -.edit-post-sidebar-header__small { +.editor-sidebar-header__small { justify-content: flex-end; } From 72e40c1522c307f8ae93bc4900f71f550811b490 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 8 May 2024 21:04:55 +0000 Subject: [PATCH 22/53] Bump plugin version to 18.3.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 dc7a76c1531ba..bfac7d69c8bbb 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.3.0-rc.1 + * Version: 18.3.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 8b53ef4d93a07..1a4684312d137 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "18.3.0-rc.1", + "version": "18.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "18.3.0-rc.1", + "version": "18.3.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 76668f689f904..7c7dc70cfee56 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "18.3.0-rc.1", + "version": "18.3.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", From 91b2221254c848abfcbcd1f3d99eb04815b0f63d Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 8 May 2024 21:19:23 +0000 Subject: [PATCH 23/53] Update Changelog for 18.3.0 --- changelog.txt | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/changelog.txt b/changelog.txt index aee9a5c1a1575..0bb052d82feb0 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,7 +1,6 @@ == Changelog == -= 18.3.0-rc.1 = - += 18.3.0 = ## Changelog @@ -233,6 +232,8 @@ The following contributors merged PRs in this release: @aaronrobertshaw @afercia @ajlende @carolinan @cbravobernal @colorful-tones @DaniGuardiola @desrosj @draganescu @ellatrix @fabiankaegy @fullofcaffeine @geriux @huubl @itzmekhokan @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @juanmaguitar @lanresmith @MaggieCabrera @Mamaduka @mirka @ntsekouras @oandregal @ockham @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shail-mehta @sirreal @stokesman @sunil25393 @swissspidy @t-hamano @talldan @twstokes @tyxla @youknowriad + + = 18.2.0 = ## Changelog From e492737e141b989fd0efa36144351e59bd0bbeb7 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 9 May 2024 09:57:18 +0900 Subject: [PATCH 24/53] Zoom out: don't select last block (#61484) Co-authored-by: ellatrix --- packages/block-editor/src/store/actions.js | 49 +++++++++------------- 1 file changed, 19 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 61acae16fcca2..d6eaac9c7e8c9 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1612,42 +1612,31 @@ export const __unstableSetEditorMode = // When switching to zoom-out mode, we need to select the parent section if ( mode === 'zoom-out' ) { const firstSelectedClientId = select.getBlockSelectionStart(); - const allBlocks = select.getBlocks(); - const { sectionRootClientId } = unlock( registry.select( STORE_NAME ).getSettings() ); - if ( sectionRootClientId ) { - const sectionClientIds = - select.getBlockOrder( sectionRootClientId ); - const lastSectionClientId = - sectionClientIds[ sectionClientIds.length - 1 ]; - if ( sectionClientIds ) { - if ( firstSelectedClientId ) { - const parents = select.getBlockParents( - firstSelectedClientId - ); - const firstSectionClientId = parents.find( ( parent ) => + if ( firstSelectedClientId ) { + let sectionClientId; + + if ( sectionRootClientId ) { + const sectionClientIds = + select.getBlockOrder( sectionRootClientId ); + sectionClientId = select + .getBlockParents( firstSelectedClientId ) + .find( ( parent ) => sectionClientIds.includes( parent ) ); - if ( firstSectionClientId ) { - dispatch.selectBlock( firstSectionClientId ); - } else { - dispatch.selectBlock( lastSectionClientId ); - } - } else { - dispatch.selectBlock( lastSectionClientId ); - } + } else { + sectionClientId = select.getBlockHierarchyRootClientId( + firstSelectedClientId + ); + } + + if ( sectionClientId ) { + dispatch.selectBlock( sectionClientId ); + } else { + dispatch.clearSelectedBlock(); } - } else if ( firstSelectedClientId ) { - const rootClientId = select.getBlockHierarchyRootClientId( - firstSelectedClientId - ); - dispatch.selectBlock( rootClientId ); - } else { - // If there's no block selected and no sectionRootClientId, select the last root block. - const lastRootBlock = allBlocks[ allBlocks.length - 1 ]; - dispatch.selectBlock( lastRootBlock?.clientId ); } } From 802519e6e89926d6be4f5a63c979773744291c71 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 9 May 2024 11:59:27 +0900 Subject: [PATCH 25/53] Fix scenario where blocks have been inserted but focus has not left the canvas (#61472) Now that the inserter stays open when focus leaves it, an edge case can occur where blocks are inserted before the canvas has ever been focused. When that happens, focus is trying to get sent to the previously focused block, but no block has been focused. This focuses the currently selected block when entering the canvas. Co-authored-by: jeryj Co-authored-by: mikachan Co-authored-by: priethor --- .../inserter/hooks/use-insertion-point.js | 16 +++++++++++++++- .../src/components/writing-flow/use-tab-nav.js | 11 ++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 8252de58b49d5..0dae090578ab4 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -11,6 +11,7 @@ import { useCallback } from '@wordpress/element'; * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; /** * @typedef WPInserterConfig @@ -86,10 +87,23 @@ function useInsertionPoint( { insertBlocks, showInsertionPoint, hideInsertionPoint, - } = useDispatch( blockEditorStore ); + setLastFocus, + } = unlock( useDispatch( blockEditorStore ) ); const onInsertBlocks = useCallback( ( blocks, meta, shouldForceFocusBlock = false ) => { + // When we are trying to move focus or select a new block on insert, we also + // need to clear the last focus to avoid the focus being set to the wrong block + // when tabbing back into the canvas if the block was added from outside the + // editor canvas. + if ( + shouldForceFocusBlock || + shouldFocusBlock || + selectBlockOnInsert + ) { + setLastFocus( null ); + } + const selectedBlock = getSelectedBlock(); if ( diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index 818a2cdbbda02..1394fbbd37e25 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js @@ -45,7 +45,16 @@ export default function useTabNav() { } else if ( hasMultiSelection() ) { container.current.focus(); } else if ( getSelectedBlockClientId() ) { - getLastFocus()?.current.focus(); + if ( getLastFocus()?.current ) { + getLastFocus().current.focus(); + } else { + // Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter. + container.current + .querySelector( + `[data-block="${ getSelectedBlockClientId() }"]` + ) + .focus(); + } } else { setNavigationMode( true ); From 83ddbfb6f878e433563fa184c218f11a030cb07c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 May 2024 05:12:47 +0200 Subject: [PATCH 26/53] Add block class name to the list block (#56469) Adds the `wp-block-list` class name to the list block in the editor and front. This means that global styles applied to `core/list` affects the list block, instead of affecting all lists. Ensures that pre-existing list blocks use the class name on the front, `
    ` is transformed to `
      `. Deprecates the version of the list block that did not support `className`. The ` __experimentalSelector` on the list item block is changed to `.wp-block-list > li`, Updates tests and test fixtures that use the list block. Co-authored-by: carolinan Co-authored-by: tellthemachines Co-authored-by: mtias Co-authored-by: oandregal Co-authored-by: fabiankaegy --- docs/reference-guides/core-blocks.md | 2 +- lib/blocks.php | 2 +- .../__snapshots__/transforms.native.js.snap | 2 +- .../block-library/src/list-item/block.json | 2 +- packages/block-library/src/list/block.json | 2 - packages/block-library/src/list/deprecated.js | 89 ++++++++++- packages/block-library/src/list/index.php | 54 +++++++ .../test/__snapshots__/edit.native.js.snap | 22 +-- .../__snapshots__/transforms.native.js.snap | 6 +- .../src/list/test/edit.native.js | 48 +++--- .../src/list/test/transforms.native.js | 2 +- .../__snapshots__/transforms.native.js.snap | 2 +- post-content.php | 2 +- test/e2e/specs/editor/blocks/list.spec.js | 142 +++++++++--------- ...-paste-preformatted-in-list-1-chromium.txt | 2 +- .../specs/editor/various/writing-flow.spec.js | 2 +- .../blocks-raw-handling.test.js.snap | 6 +- test/integration/blocks-raw-handling.test.js | 6 +- .../core__list__deprecated-v0.serialized.html | 2 +- ...list__deprecated-v1-nested.serialized.html | 10 +- .../core__list__deprecated-v1.serialized.html | 2 +- .../core__list__deprecated-v2.serialized.html | 2 +- .../core__list__deprecated-v3-css-class.html | 3 + .../core__list__deprecated-v3-css-class.json | 60 ++++++++ ..._list__deprecated-v3-css-class.parsed.json | 11 ++ ...t__deprecated-v3-css-class.serialized.html | 25 +++ .../fixtures/blocks/core__list__ul.html | 2 +- .../blocks/core__list__ul.parsed.json | 4 +- .../blocks/core__list__ul.serialized.html | 2 +- .../fixtures/documents/apple-out.html | 6 +- .../fixtures/documents/evernote-out.html | 8 +- .../documents/google-docs-list-only-out.html | 4 +- .../fixtures/documents/google-docs-out.html | 6 +- .../google-docs-with-comments-out.html | 6 +- .../fixtures/documents/markdown-out.html | 6 +- .../fixtures/documents/ms-word-list-out.html | 2 +- .../documents/ms-word-online-out.html | 4 +- .../fixtures/documents/ms-word-out.html | 6 +- .../integration/blocks-raw-handling.native.js | 10 +- 39 files changed, 406 insertions(+), 168 deletions(-) create mode 100644 packages/block-library/src/list/index.php create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3a0a88048e982..c08869db34b48 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -415,7 +415,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten - **Name:** core/list - **Category:** text - **Allowed Blocks:** core/list-item -- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~, ~~html~~ +- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** ordered, placeholder, reversed, start, type, values ## List item diff --git a/lib/blocks.php b/lib/blocks.php index eed9142db436a..679219cc6ff77 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() { 'form-submit-button', 'group', 'html', - 'list', 'list-item', 'missing', 'more', @@ -76,6 +75,7 @@ function gutenberg_reregister_core_block_types() { 'heading.php' => 'core/heading', 'latest-comments.php' => 'core/latest-comments', 'latest-posts.php' => 'core/latest-posts', + 'list.php' => 'core/list', 'loginout.php' => 'core/loginout', 'media-text.php' => 'core/media-text', 'navigation.php' => 'core/navigation', diff --git a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap index 4f6512b3f8662..c773f86307771 100644 --- a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap +++ b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap @@ -20,7 +20,7 @@ exports[`Heading block transforms to Group block 1`] = ` exports[`Heading block transforms to List block 1`] = ` " -