diff --git a/backport-changelog/6.8/8212.md b/backport-changelog/6.8/8212.md new file mode 100644 index 00000000000000..a4488d2da99f2b --- /dev/null +++ b/backport-changelog/6.8/8212.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/8212 + +* https://github.com/WordPress/gutenberg/pull/68926 diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7ac8591cd19318..3579b9b81bf48f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -811,7 +811,7 @@ Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPres - **Name:** core/rss - **Category:** widgets -- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), ~~html~~ +- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), ~~html~~ - **Attributes:** blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow ## Search diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php index 6cfa98691020ef..90be78cd1457fb 100644 --- a/lib/compat/wordpress-6.8/blocks.php +++ b/lib/compat/wordpress-6.8/blocks.php @@ -5,14 +5,79 @@ * @package gutenberg */ -function gutenberg_apply_block_hooks_to_post_content( $content ) { - // The `the_content` filter does not provide the post that the content is coming from. - // However, we can infer it by calling `get_post()`, which will return the current post - // if no post ID is provided. - return apply_block_hooks_to_content( $content, get_post(), 'insert_hooked_blocks' ); +if ( ! function_exists( 'apply_block_hooks_to_content_from_post_object' ) ) { + /** + * Run the Block Hooks algorithm on a post object's content. + * + * This function is different from `apply_block_hooks_to_content` in that + * it takes ignored hooked block information from the post's metadata into + * account. This ensures that any blocks hooked as first or last child + * of the block that corresponds to the post type are handled correctly. + * + * @since 6.8.0 + * @access private + * + * @param string $content Serialized content. + * @param WP_Post|null $post A post object that the content belongs to. If set to `null`, + * `get_post()` will be called to use the current post as context. + * Default: `null`. + * @param callable $callback A function that will be called for each block to generate + * the markup for a given list of blocks that are hooked to it. + * Default: 'insert_hooked_blocks'. + * @return string The serialized markup. + */ + function apply_block_hooks_to_content_from_post_object( $content, WP_Post $post = null, $callback = 'insert_hooked_blocks' ) { + // Default to the current post if no context is provided. + if ( null === $post ) { + $post = get_post(); + } + + if ( ! $post instanceof WP_Post ) { + return apply_block_hooks_to_content( $content, $post, $callback ); + } + + $attributes = array(); + + // If context is a post object, `ignoredHookedBlocks` information is stored in its post meta. + $ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true ); + if ( ! empty( $ignored_hooked_blocks ) ) { + $ignored_hooked_blocks = json_decode( $ignored_hooked_blocks, true ); + $attributes['metadata'] = array( + 'ignoredHookedBlocks' => $ignored_hooked_blocks, + ); + } + + // We need to wrap the content in a temporary wrapper block with that metadata + // so the Block Hooks algorithm can insert blocks that are hooked as first or last child + // of the wrapper block. + // To that end, we need to determine the wrapper block type based on the post type. + if ( 'wp_navigation' === $post->post_type ) { + $wrapper_block_type = 'core/navigation'; + } elseif ( 'wp_block' === $post->post_type ) { + $wrapper_block_type = 'core/block'; + } else { + $wrapper_block_type = 'core/post-content'; + } + + $content = get_comment_delimited_block_content( + $wrapper_block_type, + $attributes, + $content + ); + + // Apply Block Hooks. + $content = apply_block_hooks_to_content( $content, $post, $callback ); + + // Finally, we need to remove the temporary wrapper block. + $content = remove_serialized_parent_block( $content ); + + return $content; + } + // We need to apply this filter before `do_blocks` (which is hooked to `the_content` at priority 9). + add_filter( 'the_content', 'apply_block_hooks_to_content_from_post_object', 8 ); + // Remove apply_block_hooks_to_content filter (previously added in Core). + remove_filter( 'the_content', 'apply_block_hooks_to_content', 8 ); } -// We need to apply this filter before `do_blocks` (which is hooked to `the_content` at priority 9). -add_filter( 'the_content', 'gutenberg_apply_block_hooks_to_post_content', 8 ); /** * Hooks into the REST API response for the Posts endpoint and adds the first and last inner blocks. @@ -29,57 +94,32 @@ function gutenberg_insert_hooked_blocks_into_rest_response( $response, $post ) { return $response; } - $attributes = array(); - $ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true ); - if ( ! empty( $ignored_hooked_blocks ) ) { - $ignored_hooked_blocks = json_decode( $ignored_hooked_blocks, true ); - $attributes['metadata'] = array( - 'ignoredHookedBlocks' => $ignored_hooked_blocks, - ); - } - - if ( 'wp_navigation' === $post->post_type ) { - $wrapper_block_type = 'core/navigation'; - } elseif ( 'wp_block' === $post->post_type ) { - $wrapper_block_type = 'core/block'; - } else { - $wrapper_block_type = 'core/post-content'; - } - - $content = get_comment_delimited_block_content( - $wrapper_block_type, - $attributes, - $response->data['content']['raw'] - ); - - $content = apply_block_hooks_to_content( - $content, + $response->data['content']['raw'] = apply_block_hooks_to_content_from_post_object( + $response->data['content']['raw'], $post, 'insert_hooked_blocks_and_set_ignored_hooked_blocks_metadata' ); - // Remove mock block wrapper. - $content = remove_serialized_parent_block( $content ); - - $response->data['content']['raw'] = $content; - // If the rendered content was previously empty, we leave it like that. if ( empty( $response->data['content']['rendered'] ) ) { return $response; } // No need to inject hooked blocks twice. - $priority = has_filter( 'the_content', 'apply_block_hooks_to_content' ); + $priority = has_filter( 'the_content', 'apply_block_hooks_to_content_from_post_object' ); if ( false !== $priority ) { - remove_filter( 'the_content', 'apply_block_hooks_to_content', $priority ); + remove_filter( 'the_content', 'apply_block_hooks_to_content_from_post_object', $priority ); } /** This filter is documented in wp-includes/post-template.php */ - $response->data['content']['rendered'] = apply_filters( 'the_content', $content ); + $response->data['content']['rendered'] = apply_filters( + 'the_content', + $response->data['content']['raw'] + ); // Add back the filter. if ( false !== $priority ) { - add_filter( 'the_content', 'apply_block_hooks_to_content', $priority ); + add_filter( 'the_content', 'apply_block_hooks_to_content_from_post_object', $priority ); } return $response; diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index ea54646e64a59a..c6688f5f387e0e 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -4,7 +4,8 @@ iframe[name="editor-canvas"] { height: 100%; display: block; // Handles transitions between device previews - transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96); - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96); + } background-color: $gray-300; } diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index f716f2d32a1d40..f420251510ac64 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -59,7 +59,9 @@ justify-content: center; align-items: center; background-color: transparent; - transition: all 0.1s linear 0.1s; + @media not ( prefers-reduced-motion ) { + transition: all 0.1s linear 0.1s; + } .block-editor-block-draggable-chip__disabled-icon { width: $grid-unit-50 * 0.5; diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index cd517fced833ef..b39e9b144bbc9e 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -58,10 +58,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b background: var(--wp-admin-theme-color); opacity: 0.4; - // Animate. - animation: selection-overlay__fade-in-animation 0.1s ease-out; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + + // Animate. + animation: selection-overlay__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + } // Show outline in high contrast mode. outline: 2px solid transparent; @@ -271,8 +273,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Spotlight mode. Fade out blocks unless they contain a selected block. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { opacity: 0.2; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: opacity 0.1s linear; + } // Nested blocks should never be faded. If the parent block is already faded // out, it shouldn't be faded out more. If the parent block in not faded @@ -339,9 +342,10 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Hide the appender that sits at the end of block lists, when inside a nested block, // unless the block itself, or a parent, is selected. .wp-block .block-list-appender .block-editor-inserter__toggle { - animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; + animation-fill-mode: forwards; + } } .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender { @@ -367,8 +371,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b font-family: $editor-html-font; font-size: $text-editor-font-size; line-height: 1.5; - transition: padding 0.2s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: padding 0.2s linear; + } &:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); @@ -400,7 +405,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Additional -1px is required to avoid sub pixel rounding errors allowing background to show. margin-left: -1px; margin-right: -1px; - transition: background-color 0.3s ease; + @media not ( prefers-reduced-motion ) { + transition: background-color 0.3s ease; + } display: flex; align-items: center; justify-content: center; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index bcf6783a10d1c3..d3a2f0ae0795c8 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -19,6 +19,7 @@ import { useCallback, useEffect, } from '@wordpress/element'; +import { getDefaultBlockName } from '@wordpress/blocks'; /** * Internal dependencies @@ -171,13 +172,13 @@ function Items( { const { getSettings, getBlockOrder, - getSelectedBlockClientId, getSelectedBlockClientIds, __unstableGetVisibleBlocks, getTemplateLock, getBlockEditingMode, isSectionBlock, isZoomOut: _isZoomOut, + canInsertBlockType, } = unlock( select( blockEditorStore ) ); const _order = getBlockOrder( rootClientId ); @@ -190,10 +191,20 @@ function Items( { }; } - const selectedBlockClientId = getSelectedBlockClientId(); + const selectedBlockClientIds = getSelectedBlockClientIds(); + const selectedBlockClientId = selectedBlockClientIds[ 0 ]; + const showRootAppender = + ! rootClientId && + ! selectedBlockClientId && + ( ! _order.length || + ! canInsertBlockType( + getDefaultBlockName(), + rootClientId + ) ); + return { order: _order, - selectedBlocks: getSelectedBlockClientIds(), + selectedBlocks: selectedBlockClientIds, visibleBlocks: __unstableGetVisibleBlocks(), isZoomOut: _isZoomOut(), shouldRenderAppender: @@ -203,10 +214,8 @@ function Items( { hasAppender && ! _isZoomOut() && ( hasCustomAppender || - rootClientId === selectedBlockClientId || - ( ! rootClientId && - ! selectedBlockClientId && - ! _order.length ) ), + showRootAppender || + rootClientId === selectedBlockClientId ), }; }, [ rootClientId, hasAppender, hasCustomAppender ] diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 7d23c0f1e5a988..2560fe59de4fab 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -87,10 +87,11 @@ right: $grid-unit-10; z-index: -1; - // Animate in. - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + } } // Don't show the focus inherited by the Button component. diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index 10582a7a2ce496..98537f9cb9b7dd 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -130,7 +130,9 @@ background-color: $white; margin: auto; padding: 0; - transition: transform 0.5s, z-index 0.5s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.5s, z-index 0.5s; + } z-index: z-index(".block-editor-block-pattern-setup .pattern-slide"); &.active-slide { diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index 8b1b0b54c9b1a0..fcf1a23c0b7cae 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -44,9 +44,9 @@ outline: $border-width solid rgba($black, 0.1); outline-offset: -$border-width; border-radius: $radius-medium; - - transition: outline 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: outline 0.1s linear; + } } } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 62a7bebe95d278..2762308eec961e 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -129,7 +129,9 @@ .block-editor-block-switcher__preview-patterns-container-list__item { height: 100%; border-radius: $radius-small; - transition: all 0.05s ease-in-out; + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } position: relative; border: $border-width solid transparent; diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 26bf71356925e9..2a3543f5ec7977 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -12,9 +12,11 @@ overflow-y: hidden; overflow-x: auto; - // Animation - transition: border-color 0.1s linear, box-shadow 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + + // Animation + transition: border-color 0.1s linear, box-shadow 0.1s linear; + } @include break-small() { overflow: inherit; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 35d075c1a99b78..35d0f99c827b67 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -191,9 +191,12 @@ .is-dragging-components-draggable & { opacity: 0; - // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. - // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. - animation: hide-during-dragging 1ms linear forwards; + @media not ( prefers-reduced-motion ) { + + // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. + // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. + animation: hide-during-dragging 1ms linear forwards; + } } .block-editor-block-parent-selector { diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss index f5486d3f6f6086..dd6f0924835677 100644 --- a/packages/block-editor/src/components/button-block-appender/content.scss +++ b/packages/block-editor/src/components/button-block-appender/content.scss @@ -79,10 +79,8 @@ background-color: var(--wp-admin-theme-color); box-shadow: inset 0 0 0 $border-width $light-gray-placeholder; color: $light-gray-placeholder; - transition: background-color 0.2s ease-in-out; - - @media ( prefers-reduced-motion: reduce ) { - transition: none; + @media not ( prefers-reduced-motion ) { + transition: background-color 0.2s ease-in-out; } } } diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 661318e5582414..6a882c4b1883ce 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -129,8 +129,9 @@ $swatch-gap: 12px; top: $grid-unit; margin: auto $grid-unit auto; opacity: 0; - transition: opacity 0.1s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: opacity 0.1s ease-in-out; + } &.block-editor-panel-color-gradient-settings__reset { border-radius: $radius-small; diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index e0782fdb01b1d0..c51ffa3116d9f0 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -53,7 +53,9 @@ box-sizing: border-box; transform: scale(1); - transition: transform 0.1s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } will-change: transform; &:focus { diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index e6d9e65d6db9ee..ab36ed12984bd7 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -126,10 +126,11 @@ right: $grid-unit-10; z-index: -1; - // Animate in. - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + } } // Don't show the focus inherited by the Button component. diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 05bbdb25c2dc63..8a85ea186b2e64 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -4,8 +4,11 @@ .block-editor-iframe__html { transform-origin: top center; - // Prevents a flash of background color change when entering/exiting zoom out - transition: background-color 400ms; + + @media not ( prefers-reduced-motion ) { + // Prevents a flash of background color change when entering/exiting zoom out + transition: background-color 400ms; + } &.zoom-out-animation { $scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0); diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 435f60ed9e2f14..68d4059340f5c9 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -43,8 +43,9 @@ cursor: pointer; background: transparent; word-break: break-word; - transition: all 0.05s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } position: relative; height: auto; @@ -97,8 +98,9 @@ .block-editor-block-types-list__item-icon { padding: 12px 20px; color: $gray-900; - transition: all 0.05s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } .block-editor-block-icon { margin-left: auto; @@ -106,8 +108,9 @@ } svg { - transition: all 0.15s ease-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.15s ease-out; + } } .block-editor-block-types-list__list-item[draggable="true"] & { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index c6522671f938d7..fe0893b0619a72 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px; border: none; outline: none; padding: 0; - transition: color 0.2s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: color 0.2s ease; + } } .block-editor-inserter__menu { @@ -563,8 +564,9 @@ $block-inserter-tabs-height: 44px; outline-color: var(--wp-admin-theme-color); outline-width: var(--wp-admin-border-width-focus); outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); - transition: outline 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: outline 0.1s linear; + } } } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 16493e1a5aa7f0..c10135f8e441a7 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1; right: 0; bottom: 0; border-radius: 100%; - animation: loadingpulse 1s linear infinite; - animation-delay: 0.5s; // avoid animating for fast network responses + @media not ( prefers-reduced-motion ) { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; // avoid animating for fast network responses + } } } } @@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1; // Point downwards when open (same as list view expander) &[aria-expanded="true"] svg { visibility: visible; - transition: transform 0.1s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } transform: rotate(90deg); - @include reduce-motion("transition"); + } // Point rightwards when closed (same as list view expander) &[aria-expanded="false"] svg { visibility: visible; transform: rotate(0deg); - transition: transform 0.1s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } } } } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 138029262cd7f5..bc68cb26637905 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -158,21 +158,27 @@ // without attaching the transition to the list view leaf itself. This prevents rows // from animating too much once the user has dropped the block. &.is-displacement-normal { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(0); - @include reduce-motion("transition"); + } &.is-displacement-up { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(-32px); - @include reduce-motion("transition"); + } &.is-displacement-down { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(32px); - @include reduce-motion("transition"); + } // Collapse multi-selections down into a single row space while dragging. The following @@ -180,23 +186,30 @@ // when displacing up and down. The result is that there should only ever be a single row's // worth of space for the visual indicator of where a block will be placed when dropped. &.is-after-dragged-blocks { - transition: transform 0.2s; + + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } &.is-after-dragged-blocks.is-displacement-up { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } &.is-after-dragged-blocks.is-displacement-down { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } // To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged @@ -233,7 +246,9 @@ font-weight: 400; margin: 0; text-decoration: none; - transition: box-shadow 0.1s linear; + @media not ( prefers-reduced-motion ) { + transition: box-shadow 0.1s linear; + } .components-modal__content & { padding-left: 0; @@ -496,9 +511,10 @@ $block-navigation-max-indent: 8; .block-editor-list-view__expander svg { visibility: visible; - transition: transform 0.2s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s ease; + } transform: rotate(90deg); - @include reduce-motion("transition"); } // Point rightwards when closed @@ -507,8 +523,9 @@ svg { svg { visibility: visible; transform: rotate(0deg); - transition: transform 0.2s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s ease; + } } .block-editor-list-view-drop-indicator { diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index ef37566f8e34e0..579b3117662998 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -33,8 +33,9 @@ $input-size: 300px; // Suggestions .block-editor-url-input__suggestions { max-height: 200px; - transition: all 0.15s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.15s ease-in-out; + } padding: 4px 0; // To match the url-input width: input width + padding + 2 buttons. width: $input-size + 2; diff --git a/packages/block-library/src/block/index.php b/packages/block-library/src/block/index.php index e8075115cabda4..94df5d5df6c077 100644 --- a/packages/block-library/src/block/index.php +++ b/packages/block-library/src/block/index.php @@ -87,25 +87,8 @@ function render_block_core_block( $attributes ) { add_filter( 'render_block_context', $filter_block_context, 1 ); } - $ignored_hooked_blocks = get_post_meta( $attributes['ref'], '_wp_ignored_hooked_blocks', true ); - if ( ! empty( $ignored_hooked_blocks ) ) { - $ignored_hooked_blocks = json_decode( $ignored_hooked_blocks, true ); - $attributes['metadata'] = array( - 'ignoredHookedBlocks' => $ignored_hooked_blocks, - ); - } - - // Wrap in "Block" block so the Block Hooks algorithm can insert blocks - // that are hooked as first or last child of `core/block`. - $content = get_comment_delimited_block_content( - 'core/block', - $attributes, - $content - ); // Apply Block Hooks. - $content = apply_block_hooks_to_content( $content, $reusable_block ); - // Remove block wrapper. - $content = remove_serialized_parent_block( $content ); + $content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block ); $content = do_blocks( $content ); unset( $seen_refs[ $attributes['ref'] ] ); diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 43ca8331534275..d52b67b7e1958c 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -241,11 +241,12 @@ private static function get_inner_blocks_from_navigation_post( $attributes ) { // it encounters whitespace. This code strips it. $blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); - // Run Block Hooks algorithm to inject hooked blocks. - $markup = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post ); - $root_nav_block = parse_blocks( $markup )[0]; - - $blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks; + // Re-serialize, and run Block Hooks algorithm to inject hooked blocks. + // TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call + // before the parse_blocks() call further above, to avoid the extra serialization/parsing. + $markup = serialize_blocks( $blocks ); + $markup = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post ); + $blocks = parse_blocks( $markup ); // TODO - this uses the full navigation block attributes for the // context which could be refined. @@ -1077,12 +1078,11 @@ function block_core_navigation_get_fallback_blocks() { // Run Block Hooks algorithm to inject hooked blocks. // We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks. - $markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post ); - $blocks = parse_blocks( $markup ); - - if ( isset( $blocks[0]['innerBlocks'] ) ) { - $fallback_blocks = $blocks[0]['innerBlocks']; - } + // TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call + // before the parse_blocks() call further above, to avoid the extra serialization/parsing. + $markup = serialize_blocks( $fallback_blocks ); + $markup = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post ); + $fallback_blocks = parse_blocks( $markup ); } /** @@ -1436,61 +1436,3 @@ function block_core_navigation_get_most_recently_published_navigation() { return null; } - -/** - * Mock a parsed block for the Navigation block given its inner blocks and the `wp_navigation` post object. - * The `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is queried to add the `metadata.ignoredHookedBlocks` attribute. - * - * @since 6.5.0 - * - * @param array $inner_blocks Parsed inner blocks of a Navigation block. - * @param WP_Post $post `wp_navigation` post object corresponding to the block. - * - * @return array the normalized parsed blocks. - */ -function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) { - $attributes = array(); - - if ( isset( $post->ID ) ) { - $ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true ); - if ( ! empty( $ignored_hooked_blocks ) ) { - $ignored_hooked_blocks = json_decode( $ignored_hooked_blocks, true ); - $attributes['metadata'] = array( - 'ignoredHookedBlocks' => $ignored_hooked_blocks, - ); - } - } - - $mock_anchor_parent_block = array( - 'blockName' => 'core/navigation', - 'attrs' => $attributes, - 'innerBlocks' => $inner_blocks, - 'innerContent' => array_fill( 0, count( $inner_blocks ), null ), - ); - - return $mock_anchor_parent_block; -} - -/** - * Insert hooked blocks into a Navigation block. - * - * Given a Navigation block's inner blocks and its corresponding `wp_navigation` post object, - * this function inserts hooked blocks into it, and returns the serialized inner blocks in a - * mock Navigation block wrapper. - * - * If there are any hooked blocks that need to be inserted as the Navigation block's first or last - * children, the `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is checked to see if any - * of those hooked blocks should be exempted from insertion. - * - * @since 6.5.0 - * - * @param array $inner_blocks Parsed inner blocks of a Navigation block. - * @param WP_Post $post `wp_navigation` post object corresponding to the block. - * @return string Serialized inner blocks in mock Navigation block wrapper, with hooked blocks inserted, if any. - */ -function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) { - $mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post ); - - $mock_navigation_block_markup = serialize_block( $mock_navigation_block ); - return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' ); -} diff --git a/packages/block-library/src/post-content/index.php b/packages/block-library/src/post-content/index.php index e0a06b7217eebe..25be880cc47887 100644 --- a/packages/block-library/src/post-content/index.php +++ b/packages/block-library/src/post-content/index.php @@ -46,33 +46,10 @@ function render_block_core_post_content( $attributes, $content, $block ) { $content .= wp_link_pages( array( 'echo' => 0 ) ); } - $ignored_hooked_blocks = get_post_meta( $post_id, '_wp_ignored_hooked_blocks', true ); - if ( ! empty( $ignored_hooked_blocks ) ) { - $ignored_hooked_blocks = json_decode( $ignored_hooked_blocks, true ); - $attributes['metadata'] = array( - 'ignoredHookedBlocks' => $ignored_hooked_blocks, - ); - } - - // Wrap in Post Content block so the Block Hooks algorithm can insert blocks - // that are hooked as first or last child of `core/post-content`. - $content = get_comment_delimited_block_content( - 'core/post-content', - $attributes, - $content - ); - - // We need to remove the `core/post-content` block wrapper after the Block Hooks algorithm, - // but before `do_blocks` runs, as it would otherwise attempt to render the same block again -- - // thus recursing infinitely. - add_filter( 'the_content', 'remove_serialized_parent_block', 8 ); - /** This filter is documented in wp-includes/post-template.php */ $content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) ); unset( $seen_ids[ $post_id ] ); - remove_filter( 'the_content', 'remove_serialized_parent_block', 8 ); - if ( empty( $content ) ) { return ''; } diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 844104b7d8113d..112dec4a32c78b 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -47,6 +47,20 @@ "interactivity": { "clientNavigation": true }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true + }, + "spacing": { + "margin": true, + "padding": true, + "__experimentalDefaultControls": { + "padding": false, + "margin": false + } + }, "color": { "background": true, "text": true, diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index 39564da79b16e5..d931bc8cb01d87 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -119,6 +119,19 @@ export default function RSSEdit( { attributes, setAttributes } ) { }, ]; + /* + * This function merges the existing attributes with additional style properties. + * The `border` and `spacing` properties are set to `undefined` to ensure that + * these styles are reset and not applied on the server side. + */ + const serverSideAttributes = { + ...attributes, + style: { + ...attributes?.style, + border: undefined, + spacing: undefined, + }, + }; return ( <> @@ -190,7 +203,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss index c5e79d6254460b..83fef1d73f4f37 100644 --- a/packages/block-library/src/rss/editor.scss +++ b/packages/block-library/src/rss/editor.scss @@ -5,3 +5,10 @@ .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input { flex: 1 1 auto; } +// Reset all styles when skipping block supports while server-side rendering. +// This prevents issues such as duplicate padding, borders etc. +.wp-block-rss .wp-block-rss { + all: inherit; + margin: 0; + padding: 0; +} diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss index f7360ec76f85ac..76cc232044ff30 100644 --- a/packages/block-library/src/rss/style.scss +++ b/packages/block-library/src/rss/style.scss @@ -1,11 +1,4 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styles in the editor. - list-style: none; - padding: 0; - - // This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54 - &.wp-block-rss { - box-sizing: border-box; - } &.alignleft { /*rtl:ignore*/ @@ -19,7 +12,6 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: flex; flex-wrap: wrap; padding: 0; - list-style: none; li { margin: 0 1em 1em 0; @@ -41,3 +33,9 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: block; font-size: 0.8125em; } +.wp-block-rss { + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; + list-style: none; + padding: 0; +} diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js index 7d67bac28824fe..570ac7abef269d 100644 --- a/packages/edit-site/src/components/global-styles/screen-css.js +++ b/packages/edit-site/src/components/global-styles/screen-css.js @@ -4,11 +4,13 @@ import { __ } from '@wordpress/i18n'; import { ExternalLink } from '@wordpress/components'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { useDispatch } from '@wordpress/data'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { store as editSiteStore } from '../../store'; import ScreenHeader from './header'; const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock( @@ -26,6 +28,10 @@ function ScreenCSS() { shouldDecodeEncode: false, } ); + const { setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + return ( <> } + onBack={ () => { + setEditorCanvasContainerView( undefined ); + } } />
600, 'is-button': !! onClick, } ) } style={ { @@ -290,7 +287,6 @@ function StyleBook( { background: backgroundColor, } } > - { resizeObserver } { showTabs ? (
@@ -331,7 +327,6 @@ function StyleBook( { isSelected={ isSelected } onSelect={ onSelect } settings={ settings } - sizes={ sizes } title={ tab.title } goTo={ goTo } /> @@ -346,7 +341,6 @@ function StyleBook( { onClick={ onClick } onSelect={ onSelect } settings={ settings } - sizes={ sizes } goTo={ goTo } /> ) } @@ -420,7 +414,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` ); }; - const [ resizeObserver, sizes ] = useResizeObserver(); const colors = useMultiOriginPalettes(); const examples = getExamples( colors ); const examplesForSinglePageUse = getExamplesForSinglePageUse( examples ); @@ -489,14 +482,12 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { return (
- { resizeObserver } @@ -511,7 +502,6 @@ export const StyleBookBody = ( { onClick, onSelect, settings, - sizes, title, goTo, } ) => { @@ -574,9 +564,7 @@ export const StyleBookBody = ( { 'body { cursor: pointer; } body * { pointer-events: none; }' } 600, - } ) } + className="edit-site-style-book__examples" filteredExamples={ examples } label={ title diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 11083eb6ab8a45..e064c73b0ae639 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -23,7 +23,11 @@ import { mergeBaseAndUserConfigs, GlobalStylesProvider, } from './components/global-styles-provider'; -import { CreateTemplatePartModal } from '@wordpress/fields'; +import { + CreateTemplatePartModal, + patternTitleField, + templateTitleField, +} from '@wordpress/fields'; import { registerCoreBlockBindingsSources } from './bindings/api'; import { getTemplateInfo } from './utils/get-template-info'; @@ -32,6 +36,8 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; export const privateApis = {}; lock( privateApis, { CreateTemplatePartModal, + patternTitleField, + templateTitleField, BackButton, EntitiesSavedStatesExtensible, Editor,