From 9d8420f8cb6bced827c9879c810023aabc84eaef Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Thu, 6 Jun 2024 12:29:55 +0530 Subject: [PATCH 001/119] Data Views: Bulk toolbar covering other clickable elements (#62333) * Fix bulk toolbar position on scroll * fix bulk toolbar taking full width and constraining clicks on elements it overlays --- packages/dataviews/src/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index a2154790053d0..0390a360f66d2 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -886,12 +886,14 @@ } .dataviews-bulk-actions { - position: absolute; + position: sticky; display: flex; flex-direction: column; align-content: center; flex-wrap: wrap; - width: 100%; + width: fit-content; + margin-left: auto; + margin-right: auto; bottom: $grid-unit-30; z-index: z-index(".dataviews-bulk-actions"); From 6c406e5433ac0bf09e2c21ee9015c9e421b3c438 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 6 Jun 2024 01:18:15 -0700 Subject: [PATCH 002/119] Editor: Refine availability of rename post action (#62248) Co-authored-by: stokesman Co-authored-by: ntsekouras --- .../editor/src/components/post-actions/actions.js | 4 +++- .../specs/editor/plugins/custom-post-types.spec.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index e12195e63c0df..69337e181f5e5 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -1049,6 +1049,7 @@ export function usePostActions( postType, onActionPerformed ) { const isPattern = postType === PATTERN_POST_TYPE; const isLoaded = !! postTypeObject; const supportsRevisions = !! postTypeObject?.supports?.revisions; + const supportsTitle = !! postTypeObject?.supports?.title; return useMemo( () => { if ( ! isLoaded ) { return []; @@ -1064,7 +1065,7 @@ export function usePostActions( postType, onActionPerformed ) { : false, isTemplateOrTemplatePart && duplicateTemplatePartAction, isPattern && duplicatePatternAction, - renamePostAction, + supportsTitle && renamePostAction, isPattern && exportPatternAsJSONAction, isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction, isTemplateOrTemplatePart || isPattern @@ -1124,5 +1125,6 @@ export function usePostActions( postType, onActionPerformed ) { onActionPerformed, isLoaded, supportsRevisions, + supportsTitle, ] ); } diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js index 36050415925c1..67372d46c61a7 100644 --- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js +++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js @@ -59,6 +59,19 @@ test.describe( 'Test Custom Post Types', () => { await expect( parentPageLocator ).toHaveValue( parentPage ); } ); + test( 'should not be able to rename a post that lacks title support', async ( { + admin, + editor, + page, + } ) => { + await admin.createNewPost( { postType: 'hierar-no-title' } ); + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'button', { name: 'Actions' } ).click(); + await expect( + page.getByRole( 'menuitem', { name: 'Rename' } ) + ).toHaveCount( 0 ); + } ); + test( 'should create a cpt with a legacy block in its template without WSOD', async ( { admin, editor, From a5a8117f66359e32d17c866c7d64346197dc4347 Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Thu, 6 Jun 2024 11:06:34 +0200 Subject: [PATCH 003/119] Revert changes to bindings replacement logic to not use regex (#62355) * Revert changes to bindings replacement logic * Add backport changelog Co-authored-by: SantosGuillamot Co-authored-by: kevin940726 Co-authored-by: talldan --- backport-changelog/6.6/6744.md | 3 ++ lib/compat/wordpress-6.5/blocks.php | 75 ++++++++++++++++++++++------- 2 files changed, 61 insertions(+), 17 deletions(-) create mode 100644 backport-changelog/6.6/6744.md diff --git a/backport-changelog/6.6/6744.md b/backport-changelog/6.6/6744.md new file mode 100644 index 0000000000000..032f5420cb718 --- /dev/null +++ b/backport-changelog/6.6/6744.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6744 + +* https://github.com/WordPress/gutenberg/pull/62355 \ No newline at end of file diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php index d3a8b3f557181..5c5688e7cdf43 100644 --- a/lib/compat/wordpress-6.5/blocks.php +++ b/lib/compat/wordpress-6.5/blocks.php @@ -65,27 +65,68 @@ function gutenberg_block_bindings_replace_html( $block_content, $block_name, str switch ( $block_type->attributes[ $attribute_name ]['source'] ) { case 'html': case 'rich-text': - // Hardcode the selectors and processing until the HTML API is able to read CSS selectors and replace inner HTML. - // TODO: Use the HTML API instead. - if ( 'core/paragraph' === $block_name && 'content' === $attribute_name ) { - $selector = 'p'; - } - if ( 'core/heading' === $block_name && 'content' === $attribute_name ) { - $selector = 'h[1-6]'; + $block_reader = new WP_HTML_Tag_Processor( $block_content ); + + // TODO: Support for CSS selectors whenever they are ready in the HTML API. + // In the meantime, support comma-separated selectors by exploding them into an array. + $selectors = explode( ',', $block_type->attributes[ $attribute_name ]['selector'] ); + // Add a bookmark to the first tag to be able to iterate over the selectors. + $block_reader->next_tag(); + $block_reader->set_bookmark( 'iterate-selectors' ); + + // TODO: This shouldn't be needed when the `set_inner_html` function is ready. + // Store the parent tag and its attributes to be able to restore them later in the button. + // The button block has a wrapper while the paragraph and heading blocks don't. + if ( 'core/button' === $block_name ) { + $button_wrapper = $block_reader->get_tag(); + $button_wrapper_attribute_names = $block_reader->get_attribute_names_with_prefix( '' ); + $button_wrapper_attrs = array(); + foreach ( $button_wrapper_attribute_names as $name ) { + $button_wrapper_attrs[ $name ] = $block_reader->get_attribute( $name ); + } } - if ( 'core/button' === $block_name && 'text' === $attribute_name ) { - // Check if it is a + ) + } + + ) } { supportsGlobalStyles && } diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index f44b5a6f02ce2..b157057062c9d 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -17,7 +17,3 @@ display: flex; justify-content: center; } - -.editor-header { - padding-left: $header-height; -} diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 4bbf29cced39e..58de32d4b4687 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -16,9 +16,10 @@ import { useReducedMotion, useViewportMatch, useResizeObserver, + usePrevious, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useState, useRef, useEffect } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { CommandMenu, @@ -72,7 +73,7 @@ export default function Layout() { useCommonCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - + const toggleRef = useRef(); const { isDistractionFree, hasFixedToolbar, @@ -120,27 +121,6 @@ export default function Layout() { triggerAnimationOnChange: canvasMode + '__' + routeKey, } ); - // This determines which animation variant should apply to the header. - // There is also a `isDistractionFreeHovering` state that gets priority - // when hovering the `edit-site-layout__header-container` in distraction - // free mode. It's set via framer and trickles down to all the children - // so they can use this variant state too. - // - // TODO: The issue with this is we want to have the hover state stick when hovering - // a popover opened via the header. We'll probably need to lift this state to - // handle it ourselves. Also, focusWithin the header needs to be handled. - let headerAnimationState; - - if ( canvasMode === 'view' ) { - // We need 'view' to always take priority so 'isDistractionFree' - // doesn't bleed over into the view (sidebar) state - headerAnimationState = 'view'; - } else if ( isDistractionFree ) { - headerAnimationState = 'isDistractionFree'; - } else { - headerAnimationState = canvasMode; // edit, view, init - } - // Sets the right context for the command palette let commandContext = 'site-editor'; @@ -154,6 +134,14 @@ export default function Layout() { const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); + const previousCanvaMode = usePrevious( canvasMode ); + useEffect( () => { + if ( previousCanvaMode === 'edit' ) { + toggleRef.current?.focus(); + } + // Should not depend on the previous canvas mode value but the next. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ canvasMode ] ); // Synchronizing the URL with the store value of canvasMode happens in an effect // This condition ensures the component is only rendered after the synchronization happens @@ -183,41 +171,6 @@ export default function Layout() { } ) } > - - - -
{ /* The NavigableRegion must always be rendered and not use @@ -246,6 +199,12 @@ export default function Layout() { } } className="edit-site-layout__sidebar" > + { areas.sidebar } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0c5412b6d765b..01c31de0d65d6 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -11,37 +11,6 @@ } } -.edit-site-layout__hub { - position: fixed; - top: 0; - left: 0; - width: calc(100vw - #{$canvas-padding * 2}); - height: $header-height; - z-index: z-index(".edit-site-layout__hub"); - - @include break-medium { - width: calc(#{$nav-sidebar-width} - #{$grid-unit-15}); - } - - .edit-site-layout.is-full-canvas & { - padding-right: 0; - border-radius: 0; - width: $header-height; - box-shadow: none; - } -} - -.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) { - margin-bottom: $header-height; - @include break-medium { - margin-bottom: 0; - } -} - -.edit-site-layout__header-container { - z-index: z-index(".edit-site-layout__header-container"); -} - .edit-site-layout__content { height: 100%; flex-grow: 1; @@ -163,10 +132,22 @@ height: 100%; } +/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ +html.canvas-mode-edit-transition::view-transition-group(toggle) { + animation-delay: 255ms; +} +/* stylelint-enable */ + +.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle { + display: none; +} + .edit-site-layout__view-mode-toggle.components-button { + /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ + view-transition-name: toggle; + /* stylelint-enable */ position: relative; color: $white; - border-radius: 0; height: $header-height; width: $header-height; overflow: hidden; @@ -174,6 +155,8 @@ display: flex; align-items: center; justify-content: center; + background: $gray-900; + border-radius: 0; &:hover, &:active { @@ -207,7 +190,6 @@ .edit-site-layout__view-mode-toggle-icon { display: flex; - border-radius: $radius-block-ui; height: $grid-unit-80; width: $grid-unit-80; justify-content: center; @@ -244,33 +226,6 @@ } } -.edit-site-layout.is-distraction-free { - .edit-site-layout__header-container { - height: $header-height; - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: z-index(".edit-site-layout__header-container"); - width: 100%; - - // We need ! important because we override inline styles - // set by the motion component. - &:focus-within { - opacity: 1 !important; - div { - transform: translateX(0) translateY(0) translateZ(0) !important; - } - } - } - - .edit-site-site-hub { - position: absolute; - top: 0; - z-index: z-index(".edit-site-layout__hub"); - } -} - .edit-site-layout__area { flex-grow: 1; margin: 0; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 7691f9ba2cdb0..43b789d669ba4 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -59,7 +59,7 @@ position: sticky; top: 0; background: $gray-900; - padding-top: $grid-unit-60 + $header-height; + padding-top: $grid-unit-60; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon"); diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 160015a4bf3b1..b53fed2d7a94f 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -7,19 +7,11 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { - Button, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, - __experimentalHStack as HStack, -} from '@wordpress/components'; -import { useReducedMotion } from '@wordpress/compose'; +import { Button, __experimentalHStack as HStack } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; -import { memo } from '@wordpress/element'; +import { memo, forwardRef } from '@wordpress/element'; import { search } from '@wordpress/icons'; import { store as commandsStore } from '@wordpress/commands'; import { displayShortcut } from '@wordpress/keycodes'; @@ -32,14 +24,10 @@ import { store as editSiteStore } from '../../store'; import SiteIcon from '../site-icon'; import { unlock } from '../../lock-unlock'; -const HUB_ANIMATION_DURATION = 0.3; - -const SiteHub = memo( ( { isTransparent, className } ) => { - const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect( - ( select ) => { - const { getCanvasMode, getSettings } = unlock( - select( editSiteStore ) - ); +const SiteHub = memo( + forwardRef( ( { isTransparent }, ref ) => { + const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); const { getSite, @@ -47,7 +35,6 @@ const SiteHub = memo( ( { isTransparent, className } ) => { } = select( coreStore ); const _site = getSite(); return { - canvasMode: getCanvasMode(), dashboardLink: getSettings().__experimentalDashboardLink || 'index.php', homeUrl: getUnstableBase()?.home, @@ -56,141 +43,63 @@ const SiteHub = memo( ( { isTransparent, className } ) => { ? filterURLForDisplay( _site?.url ) : _site?.title, }; - }, - [] - ); - const { open: openCommandCenter } = useDispatch( commandsStore ); - - const disableMotion = useReducedMotion(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const { setDeviceType } = useDispatch( editorStore ); - const isBackToDashboardButton = canvasMode === 'view'; - const siteIconButtonProps = isBackToDashboardButton - ? { - href: dashboardLink, - label: __( 'Go to the Dashboard' ), - } - : { - href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a ` - + +
- - { canvasMode === 'view' && ( + +
+ +
-
- -
- -
+ label={ __( 'First page' ) } + icon={ previous } + size="compact" + /> + label={ __( 'Previous page' ) } + icon={ chevronLeft } + size="compact" + /> { sprintf( @@ -76,19 +77,19 @@ export default function Pagination( { onClick={ () => changePage( currentPage + 1 ) } __experimentalIsFocusable disabled={ disabled || currentPage === numPages } - aria-label={ __( 'Next page' ) } - > - › - + label={ __( 'Next page' ) } + icon={ chevronRight } + size="compact" + /> + label={ __( 'Last page' ) } + icon={ next } + size="compact" + /> ); From 9c3dabc595101bd285723a4fac266c132fbd489c Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 10 Jun 2024 17:07:41 +0800 Subject: [PATCH 044/119] Fix applying bindings or pattern overrides to button blocks with empty text (#62220) * Dynamically check button text and avoid rendering a button when empty * Handle both anchor and button tags * Fix lint issues * Address review feedback * Simplify checks for empty content * Check for comment tokens * Update native test snapshots * Update initial HTML native test snippet ---- Co-authored-by: talldan Co-authored-by: dmsnell Co-authored-by: kevin940726 Co-authored-by: SantosGuillamot --- lib/blocks.php | 1 + packages/block-library/src/button/index.php | 80 +++++++++++++++++++ packages/block-library/src/button/save.js | 4 - .../test/__snapshots__/edit.native.js.snap | 40 +++++++--- .../src/buttons/test/edit.native.js | 11 +-- 5 files changed, 117 insertions(+), 19 deletions(-) create mode 100644 packages/block-library/src/button/index.php diff --git a/lib/blocks.php b/lib/blocks.php index 679219cc6ff77..c3fdb26700c58 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -48,6 +48,7 @@ function gutenberg_reregister_core_block_types() { 'archives.php' => 'core/archives', 'avatar.php' => 'core/avatar', 'block.php' => 'core/block', + 'button.php' => 'core/button', 'calendar.php' => 'core/calendar', 'categories.php' => 'core/categories', 'cover.php' => 'core/cover', diff --git a/packages/block-library/src/button/index.php b/packages/block-library/src/button/index.php new file mode 100644 index 0000000000000..f272fa9eb62b1 --- /dev/null +++ b/packages/block-library/src/button/index.php @@ -0,0 +1,80 @@ +` or `