From 3cb93e95e5f1f8875362f9e7c4246884d0fe7ad7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 9 Jan 2025 16:37:53 +0100 Subject: [PATCH 01/81] Add npm script to profile TypeScript builds (#68533) Co-authored-by: ciampo Co-authored-by: tyxla Co-authored-by: t-hamano --- .gitignore | 1 + package.json | 1 + react-scanner.config.js | 1 + 3 files changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 1d75f9f429d869..9e7e4333af8689 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ results /test/e2e/artifacts /perf-envs /composer.lock +/ts-traces # The /.cache folder is needed for phpcs to cache results between runs, while other .cache folders must be ignored # It is not possible to re-include a file if a parent directory of that file is excluded diff --git a/package.json b/package.json index ba2ef003b0dd1d..1d54299515ff64 100644 --- a/package.json +++ b/package.json @@ -181,6 +181,7 @@ "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 || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js", + "build:profile-types": "rimraf ./ts-traces && npm run clean:package-types && node ./bin/packages/validate-typescript-version.js && ( tsc --build --extendedDiagnostics --generateTrace ./ts-traces || ( echo 'tsc failed.'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js && npx --yes @typescript/analyze-trace ts-traces > ts-traces/analysis.txt && echo $'\n\nDone! Build traces saved to ts-traces/ directory.\nTrace analysis saved to ts-traces/analysis.txt.'", "prebuild:packages": "npm run clean:packages && npm run --if-present --workspaces build", "build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js", "postbuild:packages": " npm run --if-present --workspaces build:wp", diff --git a/react-scanner.config.js b/react-scanner.config.js index 7501e7e8fc3ab0..853bbde69327c6 100644 --- a/react-scanner.config.js +++ b/react-scanner.config.js @@ -19,6 +19,7 @@ module.exports = { 'storybook', 'test', 'tools', + 'ts-traces', 'typings', 'vendor', ], From ddfc0258d0891d302c3965238ac711fa02bdde62 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 9 Jan 2025 17:17:21 +0100 Subject: [PATCH 02/81] Menu: auto-generate README (#68249) Co-authored-by: ciampo Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/src/menu/README.md | 595 +++++++++++++----- .../components/src/menu/checkbox-item.tsx | 24 +- packages/components/src/menu/context.tsx | 6 +- .../components/src/menu/docs-manifest.json | 62 ++ packages/components/src/menu/group-label.tsx | 14 +- packages/components/src/menu/group.tsx | 18 +- packages/components/src/menu/index.tsx | 132 +++- .../components/src/menu/item-help-text.tsx | 12 +- packages/components/src/menu/item-label.tsx | 12 +- packages/components/src/menu/item.tsx | 24 +- packages/components/src/menu/popover.tsx | 18 +- packages/components/src/menu/radio-item.tsx | 24 +- packages/components/src/menu/separator.tsx | 14 +- .../src/menu/stories/best-practices.mdx | 38 ++ .../src/menu/stories/index.story.tsx | 16 +- packages/components/src/menu/styles.ts | 48 +- .../src/menu/submenu-trigger-item.tsx | 18 +- .../components/src/menu/trigger-button.tsx | 12 +- packages/components/src/menu/types.ts | 20 +- storybook/manager-head.html | 1 + 20 files changed, 758 insertions(+), 350 deletions(-) create mode 100644 packages/components/src/menu/docs-manifest.json create mode 100644 packages/components/src/menu/stories/best-practices.mdx diff --git a/packages/components/src/menu/README.md b/packages/components/src/menu/README.md index 6732610c0c6cae..12f120b871f85d 100644 --- a/packages/components/src/menu/README.md +++ b/packages/components/src/menu/README.md @@ -1,344 +1,591 @@ -# `Menu` +# Menu -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
+ -`Menu` displays a menu to the user (such as a set of actions or functions). The menu is rendered in a popover (this pattern is also known as a "Dropdown menu"), which is triggered by a button. +🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project. -## Design guidelines +

See the WordPress Storybook for more detailed, interactive documentation.

-### Usage +Menu is a collection of React components that combine to render +ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and +[menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns. -#### When to use a `Menu` +`Menu` itself is a wrapper component and context provider. +It is responsible for managing the state of the menu and its items, and for +rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`) +component, and the `Menu.Popover` component. -Use a `Menu` when you want users to: +## Props -- Choose an action or change a setting from a list, AND -- Only see the available choices contextually. +### `as` -`Menu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `` element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button. + +If you need to display all the available options at all times, consider using a Toolbar instead. Use a `Menu` to display a list of actions after the user interacts with a button. + +**Do** +Use a `Menu` to display a list of actions after the user interacts with an icon. + +**Don’t** use a `Menu` for important actions that should always be visible. Use a `Toolbar` instead. + +**Don’t** +Don’t use a `Menu` for frequently used actions. Use a `Toolbar` instead. + +### Behavior + +Generally, the parent button should indicate that interacting with it will show a `Menu`. + +The parent button should retain the same visual styling regardless of whether the `Menu` is displayed or not. + +### Placement + +The `Menu` should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full `Menu`, it can be displayed instead above the parent button. diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 37ebb6f905dc84..de9e4cdd652102 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -20,10 +20,10 @@ import Button from '../../button'; import Modal from '../../modal'; import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; import { ContextSystemProvider } from '../../context'; -import type { MenuProps } from '../types'; +import type { Props } from '../types'; const meta: Meta< typeof Menu > = { - id: 'components-experimental-menu', + id: 'components-menu', title: 'Components (Experimental)/Actions/Menu', component: Menu, subcomponents: { @@ -183,7 +183,7 @@ export const WithSubmenu: StoryObj< typeof Menu > = { }; export const WithCheckboxes: StoryObj< typeof Menu > = { - render: function WithCheckboxes( props: MenuProps ) { + render: function WithCheckboxes( props: Props ) { const [ isAChecked, setAChecked ] = useState( false ); const [ isBChecked, setBChecked ] = useState( true ); const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = @@ -333,7 +333,7 @@ export const WithCheckboxes: StoryObj< typeof Menu > = { }; export const WithRadios: StoryObj< typeof Menu > = { - render: function WithRadios( props: MenuProps ) { + render: function WithRadios( props: Props ) { const [ radioValue, setRadioValue ] = useState( 'two' ); const onRadioChange: React.ComponentProps< typeof Menu.RadioItem @@ -411,7 +411,7 @@ const modalOnTopOfMenuPopover = css` `; export const WithModals: StoryObj< typeof Menu > = { - render: function WithModals( props: MenuProps ) { + render: function WithModals( props: Props ) { const [ isOuterModalOpen, setOuterModalOpen ] = useState( false ); const [ isInnerModalOpen, setInnerModalOpen ] = useState( false ); @@ -527,7 +527,7 @@ const Fill = ( { children }: { children: React.ReactNode } ) => { }; export const WithSlotFill: StoryObj< typeof Menu > = { - render: ( props: MenuProps ) => { + render: ( props: Props ) => { return ( @@ -579,7 +579,7 @@ const toolbarVariantContextValue = { }; export const ToolbarVariant: StoryObj< typeof Menu > = { - render: ( props: MenuProps ) => ( + render: ( props: Props ) => ( // TODO: add toolbar @@ -619,7 +619,7 @@ export const ToolbarVariant: StoryObj< typeof Menu > = { }; export const InsideModal: StoryObj< typeof Menu > = { - render: function InsideModal( props: MenuProps ) { + render: function InsideModal( props: Props ) { const [ isModalOpen, setModalOpen ] = useState( false ); return ( <> diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts index cda5c7321f38b4..1235d6ae7ec1b4 100644 --- a/packages/components/src/menu/styles.ts +++ b/packages/components/src/menu/styles.ts @@ -12,7 +12,7 @@ import { COLORS, font, rtl, CONFIG } from '../utils'; import { space } from '../utils/space'; import Icon from '../icon'; import { Truncate } from '../truncate'; -import type { MenuContext } from './types'; +import type { ContextProps } from './types'; const ANIMATION_PARAMS = { SCALE_AMOUNT_OUTER: 0.82, @@ -42,8 +42,8 @@ const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VAR const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr'; -export const MenuPopoverOuterWrapper = styled.div< - Pick< MenuContext, 'variant' > +export const PopoverOuterWrapper = styled.div< + Pick< ContextProps, 'variant' > >` position: relative; @@ -95,7 +95,7 @@ export const MenuPopoverOuterWrapper = styled.div< } `; -export const MenuPopoverInnerWrapper = styled.div` +export const PopoverInnerWrapper = styled.div` position: relative; /* Same as popover component */ /* TODO: is there a way to read the sass variable? */ @@ -219,7 +219,7 @@ const baseItem = css` } /* When the item is the trigger of an open submenu */ - ${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] { + ${ PopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] { background-color: ${ LIGHT_BACKGROUND_COLOR }; color: ${ COLORS.theme.foreground }; } @@ -229,15 +229,15 @@ const baseItem = css` } `; -export const MenuItem = styled( Ariakit.MenuItem )` +export const Item = styled( Ariakit.MenuItem )` ${ baseItem }; `; -export const MenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )` +export const CheckboxItem = styled( Ariakit.MenuItemCheckbox )` ${ baseItem }; `; -export const MenuRadioItem = styled( Ariakit.MenuItemRadio )` +export const RadioItem = styled( Ariakit.MenuItemRadio )` ${ baseItem }; `; @@ -249,14 +249,14 @@ export const ItemPrefixWrapper = styled.span` * Even when the item is not checked, occupy the same screen space to avoid * the space collapside when no items are checked. */ - ${ MenuCheckboxItem } > &, - ${ MenuRadioItem } > & { + ${ CheckboxItem } > &, + ${ RadioItem } > & { /* Same width as the check icons */ min-width: ${ space( 6 ) }; } - ${ MenuCheckboxItem } > &, - ${ MenuRadioItem } > &, + ${ CheckboxItem } > &, + ${ RadioItem } > &, &:not( :empty ) { margin-inline-end: ${ space( 2 ) }; } @@ -278,7 +278,7 @@ export const ItemPrefixWrapper = styled.span` } `; -export const MenuItemContentWrapper = styled.div` +export const ItemContentWrapper = styled.div` /* * Always occupy the second column, since the first column * is taken by the prefix wrapper (when displayed). @@ -293,7 +293,7 @@ export const MenuItemContentWrapper = styled.div` pointer-events: none; `; -export const MenuItemChildrenWrapper = styled.div` +export const ItemChildrenWrapper = styled.div` flex: 1; display: inline-flex; @@ -317,19 +317,19 @@ export const ItemSuffixWrapper = styled.span` * When the parent menu item is active, except when it's a non-focused/hovered * submenu trigger (in that case, color should not be inherited) */ - [data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &, + [data-active-item]:not( [data-focus-visible] ) *:not(${ PopoverInnerWrapper }) &, /* When the parent menu item is disabled */ - [aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & { + [aria-disabled='true'] *:not(${ PopoverInnerWrapper }) & { color: inherit; } `; -export const MenuGroup = styled( Ariakit.MenuGroup )` +export const Group = styled( Ariakit.MenuGroup )` /* Ignore this element when calculating the layout. Useful for subgrid */ display: contents; `; -export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )` +export const GroupLabel = styled( Ariakit.MenuGroupLabel )` /* Occupy the width of all grid columns (ie. full width) */ grid-column: 1 / -1; @@ -338,8 +338,8 @@ export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )` padding-inline: ${ ITEM_PADDING_INLINE }; `; -export const MenuSeparator = styled( Ariakit.MenuSeparator )< - Pick< MenuContext, 'variant' > +export const Separator = styled( Ariakit.MenuSeparator )< + Pick< ContextProps, 'variant' > >` /* Occupy the width of all grid columns (ie. full width) */ grid-column: 1 / -1; @@ -370,22 +370,22 @@ export const SubmenuChevronIcon = styled( Icon )` ) }; `; -export const MenuItemLabel = styled( Truncate )` +export const ItemLabel = styled( Truncate )` font-size: ${ font( 'default.fontSize' ) }; line-height: 20px; color: inherit; `; -export const MenuItemHelpText = styled( Truncate )` +export const ItemHelpText = styled( Truncate )` font-size: ${ font( 'helpText.fontSize' ) }; line-height: 16px; color: ${ LIGHTER_TEXT_COLOR }; overflow-wrap: anywhere; [data-active-item]:not( [data-focus-visible] ) - *:not( ${ MenuPopoverInnerWrapper } ) + *:not( ${ PopoverInnerWrapper } ) &, - [aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & { + [aria-disabled='true'] *:not( ${ PopoverInnerWrapper } ) & { color: inherit; } `; diff --git a/packages/components/src/menu/submenu-trigger-item.tsx b/packages/components/src/menu/submenu-trigger-item.tsx index 23932a14bdaff4..9ea24d259af300 100644 --- a/packages/components/src/menu/submenu-trigger-item.tsx +++ b/packages/components/src/menu/submenu-trigger-item.tsx @@ -13,16 +13,16 @@ import { chevronRightSmall } from '@wordpress/icons'; * Internal dependencies */ import type { WordPressComponentProps } from '../context'; -import type { MenuItemProps } from './types'; -import { MenuContext } from './context'; -import { MenuItem } from './item'; +import type { ItemProps } from './types'; +import { Context } from './context'; +import { Item } from './item'; import * as Styled from './styles'; -export const MenuSubmenuTriggerItem = forwardRef< +export const SubmenuTriggerItem = forwardRef< HTMLDivElement, - WordPressComponentProps< MenuItemProps, 'div', false > ->( function MenuSubmenuTriggerItem( { suffix, ...otherProps }, ref ) { - const menuContext = useContext( MenuContext ); + WordPressComponentProps< ItemProps, 'div', false > +>( function SubmenuTriggerItem( { suffix, ...otherProps }, ref ) { + const menuContext = useContext( Context ); if ( ! menuContext?.store.parent ) { throw new Error( @@ -36,10 +36,10 @@ export const MenuSubmenuTriggerItem = forwardRef< accessibleWhenDisabled store={ menuContext.store } render={ - ->( function MenuTriggerButton( { children, disabled = false, ...props }, ref ) { - const menuContext = useContext( MenuContext ); + WordPressComponentProps< TriggerButtonProps, 'button', false > +>( function TriggerButton( { children, disabled = false, ...props }, ref ) { + const menuContext = useContext( Context ); if ( ! menuContext?.store ) { throw new Error( diff --git a/packages/components/src/menu/types.ts b/packages/components/src/menu/types.ts index f9bb0782529d1f..4532d97fb13dd9 100644 --- a/packages/components/src/menu/types.ts +++ b/packages/components/src/menu/types.ts @@ -3,7 +3,7 @@ */ import type * as Ariakit from '@ariakit/react'; -export interface MenuContext { +export interface ContextProps { /** * The ariakit store shared across all Menu subcomponents. */ @@ -14,7 +14,7 @@ export interface MenuContext { variant?: 'toolbar'; } -export interface MenuProps { +export interface Props { /** * The elements, which should include one instance of the `Menu.TriggerButton` * component and one instance of the `Menu.Popover` component. @@ -50,7 +50,7 @@ export interface MenuProps { placement?: Ariakit.MenuProviderProps[ 'placement' ]; } -export interface MenuPopoverProps { +export interface PopoverProps { /** * The contents of the menu popover, which should include instances of the * `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioItem`, `Menu.Group`, and @@ -98,7 +98,7 @@ export interface MenuPopoverProps { hideOnEscape?: Ariakit.MenuProps[ 'hideOnEscape' ]; } -export interface MenuTriggerButtonProps { +export interface TriggerButtonProps { /** * The contents of the menu trigger button. */ @@ -139,7 +139,7 @@ export interface MenuTriggerButtonProps { accessibleWhenDisabled?: Ariakit.MenuButtonProps[ 'accessibleWhenDisabled' ]; } -export interface MenuGroupProps { +export interface GroupProps { /** * The contents of the menu group, which should include one instance of the * `Menu.GroupLabel` component and one or more instances of `Menu.Item`, @@ -148,7 +148,7 @@ export interface MenuGroupProps { children: Ariakit.MenuGroupProps[ 'children' ]; } -export interface MenuGroupLabelProps { +export interface GroupLabelProps { /** * The contents of the menu group label, which should provide an accessible * label for the menu group. @@ -156,7 +156,7 @@ export interface MenuGroupLabelProps { children: Ariakit.MenuGroupLabelProps[ 'children' ]; } -export interface MenuItemProps { +export interface ItemProps { /** * The contents of the menu item, which could include one instance of the * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` @@ -203,7 +203,7 @@ export interface MenuItemProps { store?: Ariakit.MenuItemProps[ 'store' ]; } -export interface MenuCheckboxItemProps { +export interface CheckboxItemProps { /** * The contents of the menu item, which could include one instance of the * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` @@ -267,7 +267,7 @@ export interface MenuCheckboxItemProps { onChange?: Ariakit.MenuItemCheckboxProps[ 'onChange' ]; } -export interface MenuRadioItemProps { +export interface RadioItemProps { /** * The contents of the menu item, which could include one instance of the * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` @@ -330,4 +330,4 @@ export interface MenuRadioItemProps { onChange?: Ariakit.MenuItemRadioProps[ 'onChange' ]; } -export interface MenuSeparatorProps {} +export interface SeparatorProps {} diff --git a/storybook/manager-head.html b/storybook/manager-head.html index d3f156a6eb788b..a4f6941e981114 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -7,6 +7,7 @@ 'boxcontrol', 'customselectcontrol-v2', 'dimensioncontrol', + 'menu', 'navigation', 'navigator', 'progressbar', From 98cb5d67267253af26535421207d03c4970e9924 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Thu, 9 Jan 2025 19:23:24 +0000 Subject: [PATCH 03/81] Bump plugin version to 20.0.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 f736359a8b357b..559efc57417abe 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.6 * Requires PHP: 7.2 - * Version: 20.0.0-rc.1 + * Version: 20.0.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 7c7a12a1e7bc7b..a88c85764dbd4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "20.0.0-rc.1", + "version": "20.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "20.0.0-rc.1", + "version": "20.0.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "workspaces": [ diff --git a/package.json b/package.json index 1d54299515ff64..c427e3dcb9bab8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "20.0.0-rc.1", + "version": "20.0.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", From be95ec381f847b1ca1adb96527966bc10b84551d Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Thu, 9 Jan 2025 20:33:31 +0100 Subject: [PATCH 04/81] iAPI: Fix the logic path that merges plain objects (#68579) * Fix the logic path that merges plain objects * Add changelog --------- Co-authored-by: DAreRodz Co-authored-by: luisherranz Co-authored-by: priethor --- packages/interactivity/CHANGELOG.md | 4 +++ packages/interactivity/src/proxies/state.ts | 7 ++-- .../src/proxies/test/deep-merge.ts | 32 +++++++++++++++++++ 3 files changed, 41 insertions(+), 2 deletions(-) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 818a16b8dd5e60..cdc44dca80741b 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- Fix the logic path that merges plain objects ([#68579](https://github.com/WordPress/gutenberg/pull/68579)). + ## 6.15.0 (2025-01-02) ### Enhancements diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts index e86ec05c484611..08977e8e18efae 100644 --- a/packages/interactivity/src/proxies/state.ts +++ b/packages/interactivity/src/proxies/state.ts @@ -340,7 +340,9 @@ const deepMergeRecursive = ( // Handle nested objects } else if ( isPlainObject( source[ key ] ) ) { - if ( isNew || ( override && ! isPlainObject( target[ key ] ) ) ) { + const targetValue = Object.getOwnPropertyDescriptor( target, key ) + ?.value; + if ( isNew || ( override && ! isPlainObject( targetValue ) ) ) { // Create a new object if the property is new or needs to be overridden target[ key ] = {}; if ( propSignal ) { @@ -350,9 +352,10 @@ const deepMergeRecursive = ( proxifyState( ns, target[ key ] as Object ) ); } + deepMergeRecursive( target[ key ], source[ key ], override ); } // Both target and source are plain objects, merge them recursively - if ( isPlainObject( target[ key ] ) ) { + else if ( isPlainObject( targetValue ) ) { deepMergeRecursive( target[ key ], source[ key ], override ); } diff --git a/packages/interactivity/src/proxies/test/deep-merge.ts b/packages/interactivity/src/proxies/test/deep-merge.ts index aaa762cb979f3c..c1e32763a01ef5 100644 --- a/packages/interactivity/src/proxies/test/deep-merge.ts +++ b/packages/interactivity/src/proxies/test/deep-merge.ts @@ -455,6 +455,38 @@ describe( 'Interactivity API', () => { expect( target.message.fontStyle ).toBeUndefined(); } ); + it( 'should not overwrite getters that become objects if `override` is false', () => { + const target: any = proxifyState( 'test', { + get message() { + return 'hello'; + }, + } ); + + const getterSpy = jest.spyOn( target, 'message', 'get' ); + + let message: any; + const spy = jest.fn( () => ( message = target.message ) ); + effect( spy ); + + expect( spy ).toHaveBeenCalledTimes( 1 ); + expect( message ).toBe( 'hello' ); + + deepMerge( + target, + { message: { content: 'hello', fontStyle: 'italic' } }, + false + ); + + // The effect callback reads `target.message`, so the getter is executed once as well. + expect( spy ).toHaveBeenCalledTimes( 1 ); + expect( getterSpy ).toHaveBeenCalledTimes( 1 ); + + expect( message ).toBe( 'hello' ); + expect( target.message ).toBe( 'hello' ); + expect( target.message.content ).toBeUndefined(); + expect( target.message.fontStyle ).toBeUndefined(); + } ); + it( 'should keep reactivity of arrays that are initially undefined', () => { const target: any = proxifyState( 'test', {} ); From b80c1e9a858a31d3825477c1790cc19285c08ca1 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Thu, 9 Jan 2025 19:51:02 +0000 Subject: [PATCH 05/81] Update Changelog for 20.0.0 --- changelog.txt | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/changelog.txt b/changelog.txt index bb71ae8617d7f4..25e633d96949f8 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,7 +1,6 @@ == Changelog == -= 20.0.0-rc.1 = - += 20.0.0 = ## Changelog @@ -453,6 +452,8 @@ The following contributors merged PRs in this release: @aaronrobertshaw @afercia @akasunil @benazeer-ben @bph @Chrico @ciampo @d-alleyne @DAreRodz @dhruvikpatel18 @draganescu @ellatrix @fabiankaegy @fushar @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @im3dabasia @Infinite-Null @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @justlevine @karthick-murugan @kmanijak @louwie17 @Lovor01 @Mamaduka @manzoorwanijk @matiasbenedetto @Mayank-Tripathi32 @mayurprajapatii @mcsf @michalczaplinski @mikachan @mirka @ntsekouras @oandregal @ockham @PARTHVATALIYA @prasadkarmalkar @ramonjd @rilwis @rinkalpagdar @Rishit30G @rohitmathur-7 @SainathPoojary @sarthaknagoshe2002 @SH4LIN @shail-mehta @shimotmk @sirreal @stokesman @Sukhendu2002 @swissspidy @t-hamano @talldan @tellthemachines @timse201 @tyxla @up1512001 @vampdroid @Vrishabhsk @yogeshbhutkar @youknowriad + + = 19.9.0 = ## Changelog From 3a0fb96e3d51fe18b17aaf0243382e4eab1a800c Mon Sep 17 00:00:00 2001 From: tomoki shimomura Date: Fri, 10 Jan 2025 15:37:39 +0900 Subject: [PATCH 06/81] Add clear button to social links (#68564) Add Clear buttons to the icon color and icon background color options on the social links block, to improve consistency with other options. Co-authored-by: shimotmk --- packages/block-library/src/social-links/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 72fd265d629fb7..0b8b5c04deffba 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -269,6 +269,7 @@ export function SocialLinksEdit( props ) { isShownByDefault: true, resetAllFilter, enableAlpha: true, + clearable: true, }, ] } panelId={ clientId } From ddfbdcc33538d6522d64e517ecd02f7952c28d6f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Jan 2025 12:48:56 +0400 Subject: [PATCH 07/81] Plugin: Remove ESLint rule for deprecated functions (#68590) Co-authored-by: Mamaduka Co-authored-by: fabiankaegy --- .eslintrc.js | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index e5f42eea656b90..6626a55a762d1c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,21 +4,6 @@ const glob = require( 'glob' ).sync; const { join } = require( 'path' ); -/** - * Internal dependencies - */ -const { version } = require( './package' ); - -/** - * Regular expression string matching a SemVer string with equal major/minor to - * the current package version. Used in identifying deprecations. - * - * @type {string} - */ -const majorMinorRegExp = - version.replace( /\.\d+$/, '' ).replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' ) + - '(\\.\\d+)?'; - /** * The list of patterns matching files used only for development purposes. * @@ -92,14 +77,6 @@ const restrictedSyntax = [ 'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]', message: 'Path access on WordPress dependencies is not allowed.', }, - { - selector: - 'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' + - majorMinorRegExp + - '/]', - message: - 'Deprecated functions must be removed before releasing this version.', - }, { selector: 'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]', From 79234bd5b182a8be79129cb26db6b76a63daac0d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Jan 2025 13:50:25 +0400 Subject: [PATCH 08/81] Components: Fix icon condition for Badge (#68588) Co-authored-by: Mamaduka Co-authored-by: ciampo --- packages/components/src/badge/index.tsx | 55 +++++++++++++------------ 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index ee08003c3911dc..e57be66db0a7aa 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -15,45 +15,46 @@ import type { BadgeProps } from './types'; import type { WordPressComponentProps } from '../context'; import Icon from '../icon'; +/** + * Returns an icon based on the badge context. + * + * @return The corresponding icon for the provided context. + */ +function contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) { + switch ( intent ) { + case 'info': + return info; + case 'success': + return published; + case 'warning': + return caution; + case 'error': + return error; + default: + return null; + } +} + function Badge( { className, intent = 'default', children, ...props }: WordPressComponentProps< BadgeProps, 'span', false > ) { - /** - * Returns an icon based on the badge context. - * - * @return The corresponding icon for the provided context. - */ - function contextBasedIcon() { - switch ( intent ) { - case 'info': - return info; - case 'success': - return published; - case 'warning': - return caution; - case 'error': - return error; - default: - return null; - } - } + const icon = contextBasedIcon( intent ); + const hasIcon = !! icon; return ( - { intent !== 'default' && ( + { hasIcon && ( Date: Fri, 10 Jan 2025 13:22:27 +0100 Subject: [PATCH 09/81] List View: Use badge component for block anchors (#68566) Co-authored-by: juanfra Co-authored-by: Mamaduka Co-authored-by: jameskoster --- .../src/components/list-view/block-select-button.js | 10 +++++----- .../block-editor/src/components/list-view/style.scss | 6 +----- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 3b21fd4a04e6d0..3afbf3f5b5bc16 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -9,6 +9,7 @@ import clsx from 'clsx'; import { __experimentalHStack as HStack, __experimentalTruncate as Truncate, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { forwardRef } from '@wordpress/element'; import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons'; @@ -25,6 +26,8 @@ import ListViewExpander from './expander'; import { useBlockLock } from '../block-lock'; import useListViewImages from './use-list-view-images'; import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +const { Badge } = unlock( componentsPrivateApis ); function ListViewBlockSelectButton( { @@ -117,12 +120,9 @@ function ListViewBlockSelectButton( { blockInformation?.anchor && ( - + { blockInformation.anchor } - + ) } { isSticky && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index b010fbf8e73dea..138029262cd7f5 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -408,15 +408,11 @@ position: absolute; right: 0; transform: translateY(-50%); - background: rgba($black, 0.1); - border-radius: $radius-x-small; - padding: 2px 6px; - max-width: 100%; - box-sizing: border-box; } &.is-selected .block-editor-list-view-block-select-button__anchor { background: rgba($black, 0.3); + color: $white; } .block-editor-list-view-block-select-button__lock, From 22fbc32ed55c239a0589595a08a6dae82e454c02 Mon Sep 17 00:00:00 2001 From: Yogesh Bhutkar Date: Fri, 10 Jan 2025 18:53:05 +0530 Subject: [PATCH 10/81] Navigation: Add clearable option for color tools in navigation edit (#68454) Co-authored-by: yogeshbhutkar Co-authored-by: Mayank-Tripathi32 Co-authored-by: hbhalodia Co-authored-by: t-hamano --- packages/block-library/src/navigation/edit/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ae7dd60bd0c5ba..a9722c0b4f070e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -142,24 +142,28 @@ function ColorTools( { label: __( 'Text' ), onColorChange: setTextColor, resetAllFilter: () => setTextColor(), + clearable: true, }, { colorValue: backgroundColor.color, label: __( 'Background' ), onColorChange: setBackgroundColor, resetAllFilter: () => setBackgroundColor(), + clearable: true, }, { colorValue: overlayTextColor.color, label: __( 'Submenu & overlay text' ), onColorChange: setOverlayTextColor, resetAllFilter: () => setOverlayTextColor(), + clearable: true, }, { colorValue: overlayBackgroundColor.color, label: __( 'Submenu & overlay background' ), onColorChange: setOverlayBackgroundColor, resetAllFilter: () => setOverlayBackgroundColor(), + clearable: true, }, ] } panelId={ clientId } From b2a83a36f7901f5df7df1b742549ee5c65b73dad Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 10 Jan 2025 22:58:27 +0900 Subject: [PATCH 11/81] StoryBook: Fix error that could occur when loading compiled CSS (#68526) * Revert "fix: Fix media query and reduced motion error (#68464)" This reverts commit 921536e1fbddda54e518fb29e6904555c23452ae. * Add extension explicitly in import statements Co-authored-by: t-hamano Co-authored-by: ciampo Co-authored-by: tyxla --- packages/edit-site/src/components/layout/style.scss | 2 +- storybook/package-styles/block-editor-ltr.lazy.scss | 2 +- storybook/package-styles/block-editor-rtl.lazy.scss | 2 +- storybook/package-styles/block-library-ltr.lazy.scss | 6 +++--- storybook/package-styles/block-library-rtl.lazy.scss | 6 +++--- storybook/package-styles/components-ltr.lazy.scss | 2 +- storybook/package-styles/components-rtl.lazy.scss | 2 +- storybook/package-styles/dataviews-ltr.lazy.scss | 2 +- storybook/package-styles/dataviews-rtl.lazy.scss | 2 +- storybook/package-styles/edit-site-ltr.lazy.scss | 2 +- storybook/package-styles/edit-site-rtl.lazy.scss | 2 +- storybook/package-styles/format-library-ltr.lazy.scss | 2 +- storybook/package-styles/format-library-rtl.lazy.scss | 2 +- 13 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 8d44015d529671..caf7dd78da4b34 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -118,7 +118,7 @@ // This ensure the radius work properly. overflow: hidden; - @media (prefers-reduced-motion: no-preference) { + @media not (prefers-reduced-motion) { transition: border-radius, box-shadow 0.4s; } diff --git a/storybook/package-styles/block-editor-ltr.lazy.scss b/storybook/package-styles/block-editor-ltr.lazy.scss index 4a84559461387f..6e2cce4438268d 100644 --- a/storybook/package-styles/block-editor-ltr.lazy.scss +++ b/storybook/package-styles/block-editor-ltr.lazy.scss @@ -1 +1 @@ -@import "../../packages/block-editor/build-style/style"; +@import "../../packages/block-editor/build-style/style.css"; diff --git a/storybook/package-styles/block-editor-rtl.lazy.scss b/storybook/package-styles/block-editor-rtl.lazy.scss index d8eacb3d25b585..8657d37518abac 100644 --- a/storybook/package-styles/block-editor-rtl.lazy.scss +++ b/storybook/package-styles/block-editor-rtl.lazy.scss @@ -1 +1 @@ -@import "../../packages/block-editor/build-style/style-rtl"; +@import "../../packages/block-editor/build-style/style-rtl.css"; diff --git a/storybook/package-styles/block-library-ltr.lazy.scss b/storybook/package-styles/block-library-ltr.lazy.scss index a5e373b1c061cd..af63958aa4f2fd 100644 --- a/storybook/package-styles/block-library-ltr.lazy.scss +++ b/storybook/package-styles/block-library-ltr.lazy.scss @@ -1,3 +1,3 @@ -@import "../../packages/block-library/build-style/style"; -@import "../../packages/block-library/build-style/theme"; -@import "../../packages/block-library/build-style/editor"; +@import "../../packages/block-library/build-style/style.css"; +@import "../../packages/block-library/build-style/theme.css"; +@import "../../packages/block-library/build-style/editor.css"; diff --git a/storybook/package-styles/block-library-rtl.lazy.scss b/storybook/package-styles/block-library-rtl.lazy.scss index de83f997385539..f472b81d720507 100644 --- a/storybook/package-styles/block-library-rtl.lazy.scss +++ b/storybook/package-styles/block-library-rtl.lazy.scss @@ -1,3 +1,3 @@ -@import "../../packages/block-library/build-style/style-rtl"; -@import "../../packages/block-library/build-style/theme-rtl"; -@import "../../packages/block-library/build-style/editor-rtl"; +@import "../../packages/block-library/build-style/style-rtl.css"; +@import "../../packages/block-library/build-style/theme-rtl.css"; +@import "../../packages/block-library/build-style/editor-rtl.css"; diff --git a/storybook/package-styles/components-ltr.lazy.scss b/storybook/package-styles/components-ltr.lazy.scss index e7891f25026c4c..c9d2002e2aff74 100644 --- a/storybook/package-styles/components-ltr.lazy.scss +++ b/storybook/package-styles/components-ltr.lazy.scss @@ -1 +1 @@ -@import "../../packages/components/build-style/style"; +@import "../../packages/components/build-style/style.css"; diff --git a/storybook/package-styles/components-rtl.lazy.scss b/storybook/package-styles/components-rtl.lazy.scss index 6cba6edf353da5..18eccbb8bd7c11 100644 --- a/storybook/package-styles/components-rtl.lazy.scss +++ b/storybook/package-styles/components-rtl.lazy.scss @@ -1 +1 @@ -@import "../../packages/components/build-style/style-rtl"; +@import "../../packages/components/build-style/style-rtl.css"; diff --git a/storybook/package-styles/dataviews-ltr.lazy.scss b/storybook/package-styles/dataviews-ltr.lazy.scss index b5e1aa042803aa..02ed0c9779f805 100644 --- a/storybook/package-styles/dataviews-ltr.lazy.scss +++ b/storybook/package-styles/dataviews-ltr.lazy.scss @@ -1 +1 @@ -@import "../../packages/dataviews/build-style/style"; +@import "../../packages/dataviews/build-style/style.css"; diff --git a/storybook/package-styles/dataviews-rtl.lazy.scss b/storybook/package-styles/dataviews-rtl.lazy.scss index d97479a1a5658e..f84964f93850d2 100644 --- a/storybook/package-styles/dataviews-rtl.lazy.scss +++ b/storybook/package-styles/dataviews-rtl.lazy.scss @@ -1 +1 @@ -@import "../../packages/dataviews/build-style/style-rtl"; +@import "../../packages/dataviews/build-style/style-rtl.css"; diff --git a/storybook/package-styles/edit-site-ltr.lazy.scss b/storybook/package-styles/edit-site-ltr.lazy.scss index c704fe9d9530ae..c650798e554856 100644 --- a/storybook/package-styles/edit-site-ltr.lazy.scss +++ b/storybook/package-styles/edit-site-ltr.lazy.scss @@ -1 +1 @@ -@import "../../packages/edit-site/build-style/style"; +@import "../../packages/edit-site/build-style/style.css"; diff --git a/storybook/package-styles/edit-site-rtl.lazy.scss b/storybook/package-styles/edit-site-rtl.lazy.scss index ae9ac27d6b51ef..a1f44ec2f7c51d 100644 --- a/storybook/package-styles/edit-site-rtl.lazy.scss +++ b/storybook/package-styles/edit-site-rtl.lazy.scss @@ -1 +1 @@ -@import "../../packages/edit-site/build-style/style-rtl"; +@import "../../packages/edit-site/build-style/style-rtl.css"; diff --git a/storybook/package-styles/format-library-ltr.lazy.scss b/storybook/package-styles/format-library-ltr.lazy.scss index 0f7db59c5d5dfb..7a7468769865db 100644 --- a/storybook/package-styles/format-library-ltr.lazy.scss +++ b/storybook/package-styles/format-library-ltr.lazy.scss @@ -1 +1 @@ -@import "../../packages/format-library/build-style/style"; +@import "../../packages/format-library/build-style/style.css"; diff --git a/storybook/package-styles/format-library-rtl.lazy.scss b/storybook/package-styles/format-library-rtl.lazy.scss index de2553bb5efa20..7d62ab7000b68b 100644 --- a/storybook/package-styles/format-library-rtl.lazy.scss +++ b/storybook/package-styles/format-library-rtl.lazy.scss @@ -1 +1 @@ -@import "../../packages/format-library/build-style/style-rtl"; +@import "../../packages/format-library/build-style/style-rtl.css"; From d9e4df8a5af298083b7816b35b7f73ab657beb99 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Fri, 10 Jan 2025 19:57:56 +0530 Subject: [PATCH 12/81] fix: Simplify the sprintf translations for percentage widths (#68587) Co-authored-by: im3dabasia Co-authored-by: t-hamano Co-authored-by: Mamaduka --- .../block-editor/src/components/image-size-control/index.js | 2 +- packages/block-library/src/button/edit.js | 2 +- packages/block-library/src/search/edit.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js index 3432e85728fd38..1cd2b51054e7ee 100644 --- a/packages/block-editor/src/components/image-size-control/index.js +++ b/packages/block-editor/src/components/image-size-control/index.js @@ -139,7 +139,7 @@ export default function ImageSizeControl( { value={ scale } label={ sprintf( /* translators: Percentage value. */ - __( '%1$d%%' ), + __( '%d%%' ), scale ) } /> diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 06e10f604650eb..67e1218ca2f65d 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -150,7 +150,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) { value={ widthValue } label={ sprintf( /* translators: Percentage value. */ - __( '%1$d%%' ), + __( '%d%%' ), widthValue ) } /> diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index b4ac37220c816c..ed8edf4a5aca8c 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -472,7 +472,7 @@ export default function SearchEdit( { value={ widthValue } label={ sprintf( /* translators: Percentage value. */ - __( '%1$d%%' ), + __( '%d%%' ), widthValue ) } /> From 4f541ae8b688850b4abcb34425b673d938c10da7 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 10 Jan 2025 15:51:49 +0100 Subject: [PATCH 13/81] Remove unnecessary CSS order property for the contrast checker in the Color hook. (#68055) Co-authored-by: afercia Co-authored-by: carolinan Co-authored-by: aaronrobertshaw --- packages/block-editor/src/hooks/color.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss index 8be620bf40d938..0f6fa60a6224ed 100644 --- a/packages/block-editor/src/hooks/color.scss +++ b/packages/block-editor/src/hooks/color.scss @@ -1,12 +1,5 @@ .color-block-support-panel { .block-editor-contrast-checker { - /** - * Contrast checkers are forced to the bottom of the panel so all - * injected color controls can appear as a single item group without - * the contrast checkers suddenly appearing between items. - */ - /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */ - order: 9999; grid-column: span 2; margin-top: $grid-unit-20; From 594d834cb390dae77b3541ee71567e38c992caf4 Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Sat, 11 Jan 2025 10:00:36 +0530 Subject: [PATCH 14/81] Updated Small Typo in Feature-flags.md file (#68612) Co-authored-by: shail-mehta Co-authored-by: t-hamano --- docs/how-to-guides/feature-flags.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to-guides/feature-flags.md b/docs/how-to-guides/feature-flags.md index 11c5ae881337dd..04fc6c08d98249 100644 --- a/docs/how-to-guides/feature-flags.md +++ b/docs/how-to-guides/feature-flags.md @@ -54,7 +54,7 @@ if ( globalThis.IS_GUTENBERG_PLUGIN ) { ```js if ( true ) { - // Wepack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true` + // Webpack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true` pluginOnlyFeature(); } ``` From bbb06ff13bbd58c210985d400cf3cf93d32ea005 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Sun, 12 Jan 2025 00:17:25 +0400 Subject: [PATCH 15/81] Block Editor: Move state logic inside 'BlockRenameModal' (#68560) Co-authored-by: Mamaduka Co-authored-by: t-hamano --- .../src/components/block-rename/modal.js | 52 +++++++++++++----- .../components/block-rename/rename-control.js | 54 +------------------ .../editor/various/block-renaming.spec.js | 3 +- 3 files changed, 43 insertions(+), 66 deletions(-) diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js index 2679c8157cc0a2..3f99e71b7b699e 100644 --- a/packages/block-editor/src/components/block-rename/modal.js +++ b/packages/block-editor/src/components/block-rename/modal.js @@ -11,24 +11,44 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { speak } from '@wordpress/a11y'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ +import { store as blockEditorStore } from '../../store'; +import { useBlockDisplayInformation } from '..'; import isEmptyString from './is-empty-string'; -export default function BlockRenameModal( { - blockName, - originalBlockName, - onClose, - onSave, +export default function BlockRenameModal( { clientId, onClose } ) { + const [ editedBlockName, setEditedBlockName ] = useState(); + + const blockInformation = useBlockDisplayInformation( clientId ); + const { metadata } = useSelect( + ( select ) => { + const { getBlockAttributes } = select( blockEditorStore ); + + return { + metadata: getBlockAttributes( clientId )?.metadata, + }; + }, + [ clientId ] + ); + const { updateBlockAttributes } = useDispatch( blockEditorStore ); + + const blockName = metadata?.name || ''; + const originalBlockName = blockInformation?.title; // Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API. // Ideally this should not be inside the block editor package, but we keep it here for simplicity. - hasOverridesWarning, -} ) { - const [ editedBlockName, setEditedBlockName ] = useState( blockName ); + const hasOverridesWarning = + !! blockName && + !! metadata?.bindings && + Object.values( metadata.bindings ).some( + ( binding ) => binding.source === 'core/pattern-overrides' + ); - const nameHasChanged = editedBlockName !== blockName; + const nameHasChanged = + editedBlockName !== undefined && editedBlockName !== blockName; const nameIsOriginal = editedBlockName === originalBlockName; const nameIsEmpty = isEmptyString( editedBlockName ); @@ -37,6 +57,8 @@ export default function BlockRenameModal( { const autoSelectInputText = ( event ) => event.target.select(); const handleSubmit = () => { + const newName = + nameIsOriginal || nameIsEmpty ? undefined : editedBlockName; const message = nameIsOriginal || nameIsEmpty ? sprintf( @@ -52,7 +74,12 @@ export default function BlockRenameModal( { // Must be assertive to immediately announce change. speak( message, 'assertive' ); - onSave( editedBlockName ); + updateBlockAttributes( [ clientId ], { + metadata: { + ...metadata, + name: newName, + }, + } ); // Immediate close avoids ability to hit save multiple times. onClose(); @@ -81,7 +108,7 @@ export default function BlockRenameModal( { diff --git a/packages/block-editor/src/components/block-rename/rename-control.js b/packages/block-editor/src/components/block-rename/rename-control.js index fb6b446782aa78..641ff7cebe951b 100644 --- a/packages/block-editor/src/components/block-rename/rename-control.js +++ b/packages/block-editor/src/components/block-rename/rename-control.js @@ -2,54 +2,17 @@ * WordPress dependencies */ import { MenuItem } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { store as blockEditorStore } from '../../store'; -import { useBlockDisplayInformation } from '..'; -import isEmptyString from './is-empty-string'; import BlockRenameModal from './modal'; export default function BlockRenameControl( { clientId } ) { const [ renamingBlock, setRenamingBlock ] = useState( false ); - const { metadata } = useSelect( - ( select ) => { - const { getBlockAttributes } = select( blockEditorStore ); - - const _metadata = getBlockAttributes( clientId )?.metadata; - return { - metadata: _metadata, - }; - }, - [ clientId ] - ); - - const { updateBlockAttributes } = useDispatch( blockEditorStore ); - - const customName = metadata?.name; - const hasPatternOverrides = - !! customName && - !! metadata?.bindings && - Object.values( metadata.bindings ).some( - ( binding ) => binding.source === 'core/pattern-overrides' - ); - - function onChange( newName ) { - updateBlockAttributes( [ clientId ], { - metadata: { - ...metadata, - name: newName, - }, - } ); - } - - const blockInformation = useBlockDisplayInformation( clientId ); - return ( <> { renamingBlock && ( setRenamingBlock( false ) } - onSave={ ( newName ) => { - // If the new value is the block's original name (e.g. `Group`) - // or it is an empty string then assume the intent is to reset - // the value. Therefore reset the metadata. - if ( - newName === blockInformation?.title || - isEmptyString( newName ) - ) { - newName = undefined; - } - - onChange( newName ); - } } /> ) } diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js index 6998683cb96163..5b7ac1226d1589 100644 --- a/test/e2e/specs/editor/various/block-renaming.spec.js +++ b/test/e2e/specs/editor/various/block-renaming.spec.js @@ -126,8 +126,9 @@ test.describe( 'Block Renaming', () => { await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.press( 'Delete' ); - // Check placeholder for input is the original block name. + // Check that input is empty and placeholder is the original block name. await expect( nameInput ).toHaveAttribute( 'placeholder', 'Group' ); + await expect( nameInput ).toHaveValue( '' ); // It should be possible to submit empty. await expect( saveButton ).toBeEnabled(); From 2397525dfbe29814ace66dd1dbca152208aad9a8 Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Sun, 12 Jan 2025 12:11:36 +0530 Subject: [PATCH 16/81] Added Global Documentation in inline documentation (#68613) * Added Global Documentation * fixed lint issue * Added Global Documentation in demo.php Co-authored-by: shail-mehta Co-authored-by: Mamaduka --- bin/generate-gutenberg-php.php | 2 ++ lib/demo.php | 2 ++ 2 files changed, 4 insertions(+) diff --git a/bin/generate-gutenberg-php.php b/bin/generate-gutenberg-php.php index 4ed6b661a21c23..1dc2cf6db4ef59 100755 --- a/bin/generate-gutenberg-php.php +++ b/bin/generate-gutenberg-php.php @@ -15,6 +15,8 @@ /** * Prints `define` statements for the production version of `gutenberg.php` * (the plugin entry point). + * + * @global string $plugin_version The version number of the plugin. */ function print_production_defines() { global $plugin_version; diff --git a/lib/demo.php b/lib/demo.php index 11272050bf4c2e..0e7ad5c2c8cc78 100644 --- a/lib/demo.php +++ b/lib/demo.php @@ -11,6 +11,8 @@ /** * Redirects the demo page to edit a new post. + * + * @global string $pagenow The name of the current admin page being viewed. */ function gutenberg_redirect_demo() { global $pagenow; From fb3a6a055b813de64deeaaed3de6d9712917393f Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Sun, 12 Jan 2025 15:21:14 +0530 Subject: [PATCH 17/81] Query: Refactor settings panel to use ToolsPanel (#68008) Co-authored-by: himanshupathak95 Co-authored-by: t-hamano Co-authored-by: fabiankaegy --- .../query/edit/inspector-controls/index.js | 236 +++++++++++------- 1 file changed, 148 insertions(+), 88 deletions(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 0ae4b052b57873..3470846a14795b 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { - PanelBody, TextControl, SelectControl, RangeControl, @@ -187,110 +186,171 @@ export default function QueryInspectorControls( props ) { return ( <> { showSettingsPanel && ( - + { + setQuery( { + postType: 'post', + order: 'desc', + orderBy: 'date', + sticky: '', + inherit: true, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > { showInheritControl && ( - ! inherit } label={ __( 'Query type' ) } - isBlock - onChange={ ( value ) => { - setQuery( { inherit: value === 'default' } ); - } } - help={ - inherit - ? __( - 'Display a list of posts or custom post types based on the current template.' - ) - : __( - 'Display a list of posts or custom post types based on specific criteria.' - ) - } - value={ !! inherit ? 'default' : 'custom' } + onDeselect={ () => setQuery( { inherit: true } ) } + isShownByDefault > - - - - ) } - { showPostTypeControl && - ( postTypesSelectOptions.length > 2 ? ( - - ) : ( { + setQuery( { + inherit: value === 'default', + } ); + } } + help={ + inherit + ? __( + 'Display a list of posts or custom post types based on the current template.' + ) + : __( + 'Display a list of posts or custom post types based on specific criteria.' + ) + } + value={ !! inherit ? 'default' : 'custom' } > - { postTypesSelectOptions.map( ( option ) => ( - - ) ) } + + - ) ) } + + ) } - { showColumnsControl && ( - <> - - setDisplayLayout( { - columns: value, - } ) - } - min={ 2 } - max={ Math.max( 6, displayLayout.columns ) } - /> - { displayLayout.columns > 6 && ( - postType !== 'post' } + label={ postTypeControlLabel } + onDeselect={ () => onPostTypeChange( 'post' ) } + isShownByDefault + > + { postTypesSelectOptions.length > 2 ? ( + + ) : ( + - { __( - 'This column count exceeds the recommended amount and may cause visual breakage.' + { postTypesSelectOptions.map( + ( option ) => ( + + ) ) } - + ) } - + ) } + + { showColumnsControl && ( + displayLayout?.columns !== 2 } + label={ __( 'Columns' ) } + onDeselect={ () => + setDisplayLayout( { columns: 2 } ) + } + isShownByDefault + > + <> + + setDisplayLayout( { + columns: value, + } ) + } + min={ 2 } + max={ Math.max( 6, displayLayout.columns ) } + /> + { displayLayout.columns > 6 && ( + + { __( + 'This column count exceeds the recommended amount and may cause visual breakage.' + ) } + + ) } + + + ) } + { showOrderControl && ( - + + order !== 'desc' || orderBy !== 'date' + } + label={ __( 'Order by' ) } + onDeselect={ () => + setQuery( { order: 'desc', orderBy: 'date' } ) + } + isShownByDefault + > + + ) } + { showStickyControl && ( - - setQuery( { sticky: value } ) - } - /> + !! sticky } + label={ __( 'Sticky posts' ) } + onDeselect={ () => setQuery( { sticky: '' } ) } + isShownByDefault + > + + setQuery( { sticky: value } ) + } + /> + ) } - + ) } { ! inherit && showDisplayPanel && ( Date: Sun, 12 Jan 2025 16:49:18 +0400 Subject: [PATCH 18/81] Global Styles: Remove unused prop for 'BackgroundImageControls' (#68616) Co-authored-by: Mamaduka --- .../src/components/background-image-control/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js index 6c703ad2eadb4d..3411d7d3ee8a96 100644 --- a/packages/block-editor/src/components/background-image-control/index.js +++ b/packages/block-editor/src/components/background-image-control/index.js @@ -378,7 +378,6 @@ function BackgroundImageControls( { label={ imgLabel } /> } - variant="secondary" renderToggle={ ( props ) => ( - - + ) : ( + <> + + ) : ( + __( 'Choose logo' ) + ) + } + renderToggle={ ( props ) => ( + ) } /> - + + ) } diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 2f9d1917079bec..da6d8d0830411a 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -108,17 +108,16 @@ } } -.block-library-site-logo__inspector-upload-container { +.block-library-site-logo__inspector-media-replace-container { + // Ensure the dropzone is positioned to the size of the item. position: relative; + // Since there is no option to skip rendering the drag'n'drop icon in drop // zone, we hide it for now. .components-drop-zone__content-icon { display: none; } -} -.block-library-site-logo__inspector-upload-container, -.block-library-site-logo__inspector-media-replace-container { button.components-button { color: $gray-900; box-shadow: inset 0 0 0 1px $gray-400; @@ -144,9 +143,7 @@ text-align: start; text-align-last: center; } -} -.block-library-site-logo__inspector-media-replace-container { .components-dropdown { display: block; } From cca80834c28619f9f630fb918c8b1a1816e07076 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 13 Jan 2025 17:29:33 +0200 Subject: [PATCH 29/81] docs: fix param name in `gutenberg_add_can_update_block_bindings_editor_setting()` (#68390) Co-authored-by: justlevine Co-authored-by: Mamaduka --- lib/compat/wordpress-6.7/block-bindings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php index 3cecb7fbc0985c..08608a8d394e72 100644 --- a/lib/compat/wordpress-6.7/block-bindings.php +++ b/lib/compat/wordpress-6.7/block-bindings.php @@ -32,7 +32,7 @@ function gutenberg_bootstrap_server_block_bindings_sources() { /** * Initialize `canUpdateBlockBindings` editor setting if it doesn't exist. By default, it is `true` only for admin users. * - * @param array $settings The block editor settings from the `block_editor_settings_all` filter. + * @param array $editor_settings The block editor settings from the `block_editor_settings_all` filter. * @return array The editor settings including `canUpdateBlockBindings`. */ function gutenberg_add_can_update_block_bindings_editor_setting( $editor_settings ) { From cd8e65571b1d2c6316bcaa7e3e747857d92aa15b Mon Sep 17 00:00:00 2001 From: Vrishabh Jasani <71686151+Vrishabhsk@users.noreply.github.com> Date: Mon, 13 Jan 2025 19:36:03 +0400 Subject: [PATCH 30/81] Block Directory : Block Inserter Search Infinity Spinner (#68600) Co-authored-by: Vrishabhsk Co-authored-by: Mamaduka --- packages/block-directory/src/store/resolvers.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-directory/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js index cd13ba5ccd7134..b697b1dd630297 100644 --- a/packages/block-directory/src/store/resolvers.js +++ b/packages/block-directory/src/store/resolvers.js @@ -35,5 +35,7 @@ export const getDownloadableBlocks = ); dispatch( receiveDownloadableBlocks( blocks, filterValue ) ); - } catch {} + } catch { + dispatch( receiveDownloadableBlocks( [], filterValue ) ); + } }; From aa38b2205f7fcbe18c8f06f48b06ba0dcc183b08 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Mon, 13 Jan 2025 20:26:07 +0100 Subject: [PATCH 31/81] Details block: remove auto-close behaviour (#67766) Co-authored-by: ellatrix Co-authored-by: Mamaduka Co-authored-by: annezazu --- packages/block-library/src/details/edit.js | 32 +++++++--------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js index 9cf6a7a8456121..89aac092df22c1 100644 --- a/packages/block-library/src/details/edit.js +++ b/packages/block-library/src/details/edit.js @@ -5,16 +5,15 @@ import { RichText, useBlockProps, useInnerBlocksProps, - store as blockEditorStore, InspectorControls, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; import { ToggleControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -30,7 +29,7 @@ const TEMPLATE = [ ], ]; -function DetailsEdit( { attributes, setAttributes, clientId } ) { +function DetailsEdit( { attributes, setAttributes } ) { const { showContent, summary, allowedBlocks } = attributes; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { @@ -38,22 +37,9 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) { __experimentalCaptureToolbars: true, allowedBlocks, } ); + const [ isOpen, setIsOpen ] = useState( showContent ); const dropdownMenuProps = useToolsPanelDropdownMenuProps(); - // Check if either the block or the inner blocks are selected. - const hasSelection = useSelect( - ( select ) => { - const { isBlockSelected, hasSelectedInnerBlock } = - select( blockEditorStore ); - /* Sets deep to true to also find blocks inside the details content block. */ - return ( - hasSelectedInnerBlock( clientId, true ) || - isBlockSelected( clientId ) - ); - }, - [ clientId ] - ); - return ( <> @@ -89,11 +75,13 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) { -
- event.preventDefault() }> +
+ { + event.preventDefault(); + setIsOpen( ! isOpen ); + } } + > Date: Tue, 14 Jan 2025 09:57:29 +0530 Subject: [PATCH 32/81] Color Gradients: Adjust `max-width` for color gradient swatch to accommodate `reset` button size (#68626) * Style: Adjust max-width for color gradient swatch to accommodate button size * Color: incorporate grid unit to provide `reset` button more space Co-authored-by: yogeshbhutkar Co-authored-by: Mamaduka --- packages/block-editor/src/components/colors-gradients/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index fbdf144a4176b2..661318e5582414 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -111,6 +111,7 @@ $swatch-gap: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05)); } } From b949616c85b4edeb3401028ea0086c7446f188c1 Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Tue, 14 Jan 2025 11:10:16 +0530 Subject: [PATCH 33/81] Updated Inline Document order (#68650) * Changed Document Order in editor-behavior-overrides.js * Changed Inline Document Order in complementary-area-toggle/index.js Co-authored-by: shail-mehta Co-authored-by: Mamaduka --- .../interface/src/components/complementary-area-toggle/index.js | 2 +- .../gutenberg-web-single-block/editor-behavior-overrides.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index 40b4dd99be7432..9c629a9bff2765 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -13,9 +13,9 @@ import { store as interfaceStore } from '../../store'; /** * Whether the role supports checked state. * + * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked * @param {import('react').AriaRole} role Role. * @return {boolean} Whether the role supports checked state. - * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked */ function roleSupportsCheckedState( role ) { return [ diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js index f0dec3339b9da9..e606b694e8efdd 100644 --- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js +++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js @@ -13,8 +13,8 @@ function isAndroid() { * tapped. This is done via the 'hideTextSelectionContextMenu' method, which * is sent back to the Android app, where the dismissal is then handle. * - * @return {void} * @see https://github.com/WordPress/gutenberg/pull/34668 + * @return {void} */ function manageTextSelectionContextMenu() { // Listeners for native context menu visibility changes. From f73a06f4e7f5a54b1314777ac5421d050e9e1764 Mon Sep 17 00:00:00 2001 From: Karthick M <97787966+karthick-murugan@users.noreply.github.com> Date: Tue, 14 Jan 2025 12:16:44 +0530 Subject: [PATCH 34/81] Change "Swap" to "Replace" for Template Action (#68234) Unlinked contributors: bgardner, kohheepeace. Co-authored-by: karthick-murugan Co-authored-by: annezazu Co-authored-by: richtabor Co-authored-by: Mamaduka --- .../components/post-template/swap-template-button.js | 2 +- packages/fields/src/fields/template/template-edit.tsx | 2 +- .../editor/various/post-editor-template-mode.spec.js | 8 ++++---- test/e2e/specs/site-editor/pages.spec.js | 6 +++--- .../specs/site-editor/template-registration.spec.js | 10 +++++----- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/post-template/swap-template-button.js b/packages/editor/src/components/post-template/swap-template-button.js index bdda349398406b..f85b18e3559697 100644 --- a/packages/editor/src/components/post-template/swap-template-button.js +++ b/packages/editor/src/components/post-template/swap-template-button.js @@ -37,7 +37,7 @@ export default function SwapTemplateButton( { onClick } ) { return ( <> setShowModal( true ) }> - { __( 'Swap template' ) } + { __( 'Change template' ) } { showModal && ( - { __( 'Swap template' ) } + { __( 'Change template' ) } { // The default template in a post is indicated by an empty string diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js index 981f8ccbbd5d38..b78a059a6be2c8 100644 --- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js +++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js @@ -77,7 +77,7 @@ test.describe( 'Post Editor Template mode', () => { ).toBeVisible(); } ); - test( 'Swap templates and proper template resolution when switching to default template', async ( { + test( 'Change templates and proper template resolution when switching to default template', async ( { editor, page, requestUtils, @@ -88,10 +88,10 @@ test.describe( 'Post Editor Template mode', () => { await page.reload(); await postEditorTemplateMode.disableTemplateWelcomeGuide(); await postEditorTemplateMode.openTemplatePopover(); - // Swap to a custom template, save and reload. + // Change to a custom template, save and reload. await page .getByRole( 'menuitem', { - name: 'Swap template', + name: 'Change template', } ) .click(); await page @@ -101,7 +101,7 @@ test.describe( 'Post Editor Template mode', () => { .click(); await editor.saveDraft(); await page.reload(); - // Swap to the default template. + // Change to the default template. await postEditorTemplateMode.openTemplatePopover(); await page .getByRole( 'menuitem', { diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 37b164e85a5973..54f8a64e067cbf 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -281,7 +281,7 @@ test.describe( 'Pages', () => { await templateOptionsButton.click(); await page .getByRole( 'menu', { name: 'Template options' } ) - .getByText( 'Swap template' ) + .getByText( 'Change template' ) .click(); const templateItem = page.locator( '.block-editor-block-patterns-list__item-title' @@ -305,7 +305,7 @@ test.describe( 'Pages', () => { await expect( templateOptionsButton ).toHaveText( 'Single Entries' ); } ); - test( 'swap template options should respect the declared `postTypes`', async ( { + test( 'change template options should respect the declared `postTypes`', async ( { page, editor, } ) => { @@ -321,7 +321,7 @@ test.describe( 'Pages', () => { await expect( page .getByRole( 'menu', { name: 'Template options' } ) - .getByText( 'Swap template' ) + .getByText( 'Change template' ) ).toHaveCount( 0 ); } ); } ); diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 2960367fc32ef1..9856db97130386 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -94,7 +94,7 @@ test.describe( 'Block template registration', () => { ).toBeHidden(); } ); - test( 'registered templates are available in the Swap template screen', async ( { + test( 'registered templates are available in the Change template screen', async ( { admin, editor, page, @@ -106,10 +106,10 @@ test.describe( 'Block template registration', () => { attributes: { content: 'User-created post.' }, } ); - // Swap template. + // Change template. await page.getByRole( 'button', { name: 'Post', exact: true } ).click(); await page.getByRole( 'button', { name: 'Template options' } ).click(); - await page.getByRole( 'menuitem', { name: 'Swap template' } ).click(); + await page.getByRole( 'menuitem', { name: 'Change template' } ).click(); await page.getByText( 'Plugin Template' ).click(); // Verify the template is applied. @@ -133,10 +133,10 @@ test.describe( 'Block template registration', () => { attributes: { content: 'User-created post.' }, } ); - // Swap template. + // Change template. await page.getByRole( 'button', { name: 'Post', exact: true } ).click(); await page.getByRole( 'button', { name: 'Template options' } ).click(); - await page.getByRole( 'menuitem', { name: 'Swap template' } ).click(); + await page.getByRole( 'menuitem', { name: 'Change template' } ).click(); await page.getByText( 'Custom', { exact: true } ).click(); // Verify the theme template is applied. From 680f51ffb6a34bb27e3ee46d09052b2b68401d7c Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:08:13 +0530 Subject: [PATCH 35/81] Customize Widgets: Standardize reduced motion handling using media queries (#68425) Co-authored-by: im3dabasia Co-authored-by: t-hamano --- packages/customize-widgets/src/components/header/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/customize-widgets/src/components/header/style.scss b/packages/customize-widgets/src/components/header/style.scss index 73789282108af6..51699957cae065 100644 --- a/packages/customize-widgets/src/components/header/style.scss +++ b/packages/customize-widgets/src/components/header/style.scss @@ -42,8 +42,9 @@ } svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + } } &.is-pressed { From 64e1a8bf71c4d085e14d48e4724b3a2631101fe0 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Jan 2025 11:40:34 +0400 Subject: [PATCH 36/81] Inline Commenting: Avoid querying comments when the experiment is disabled (#68632) Co-authored-by: Mamaduka Co-authored-by: t-hamano --- packages/editor/src/components/collab-sidebar/index.js | 5 +---- packages/editor/src/components/header/index.js | 8 +++++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index c53ee9e7e919c6..dfece6c6f73190 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -29,8 +29,6 @@ import AddCommentToolbarButton from './comment-button-toolbar'; import { useGlobalStylesContext } from '../global-styles-provider'; import { getCommentIdsFromBlocks } from './utils'; -const isBlockCommentExperimentEnabled = - window?.__experimentalEnableBlockComment; const modifyBlockCommentAttributes = ( settings ) => { if ( ! settings.attributes.blockCommentId ) { settings.attributes = { @@ -329,8 +327,7 @@ export default function CollabSidebar() { } ); } - // Check if the experimental flag is enabled. - if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) { + if ( postStatus === 'publish' ) { return null; // or maybe return some message indicating no threads are available. } diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 3adc5842d20b86..d0af73e7dcb0ca 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -32,6 +32,9 @@ import { } from '../../store/constants'; import { unlock } from '../../lock-unlock'; +const isBlockCommentExperimentEnabled = + window?.__experimentalEnableBlockComment; + const toolbarVariations = { distractionFreeDisabled: { y: '-50px' }, distractionFreeHover: { y: 0 }, @@ -195,7 +198,10 @@ function Header( { } /> ) } - + + { isBlockCommentExperimentEnabled ? ( + + ) : undefined } { customSaveButton } From 5b1dacc0c278476bba6c7b023d43f15a6c680c3c Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:17:34 +0530 Subject: [PATCH 37/81] Edit Post: Standardize reduced motion handling using media queries (#68426) Co-authored-by: im3dabasia Co-authored-by: t-hamano --- packages/edit-post/src/components/back-button/style.scss | 5 +++-- packages/edit-post/src/components/layout/style.scss | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/back-button/style.scss b/packages/edit-post/src/components/back-button/style.scss index aced752bfedfae..3082cb80a3e4e2 100644 --- a/packages/edit-post/src/components/back-button/style.scss +++ b/packages/edit-post/src/components/back-button/style.scss @@ -23,8 +23,9 @@ } &::before { - transition: box-shadow 0.1s ease; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: box-shadow 0.1s ease; + } content: ""; display: block; position: absolute; diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 7a7f13382661ac..c63f3eb2528177 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -73,8 +73,9 @@ width: inherit; height: $grid-unit-05; border-radius: $radius-small; - transition: width 0.3s ease-out; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: width 0.3s ease-out; + } } } From 067ee7b6ee22a4c6b01ffd557c1899e09eedfb0d Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Tue, 14 Jan 2025 10:22:59 +0200 Subject: [PATCH 38/81] docs: fix type syntax _gutenberg_add_block_template_plugin_attribute() (#68391) Co-authored-by: justlevine Co-authored-by: Mamaduka --- lib/compat/wordpress-6.7/compat.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.7/compat.php b/lib/compat/wordpress-6.7/compat.php index 33c123a14860d2..98ea34c813ae43 100644 --- a/lib/compat/wordpress-6.7/compat.php +++ b/lib/compat/wordpress-6.7/compat.php @@ -73,8 +73,8 @@ function ( $registered_template ) use ( $template_files ) { /** * Hooks into `get_block_template` to add the `plugin` property when necessary. * - * @param [WP_Block_Template|null] $block_template The found block template, or null if there isn’t one. - * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was registered by a plugin. + * @param WP_Block_Template|null $block_template The found block template, or null if there isn’t one. + * @return WP_Block_Template|null The block template that was already found with the plugin property defined if it was registered by a plugin. */ function _gutenberg_add_block_template_plugin_attribute( $block_template ) { if ( $block_template ) { From 1b188a97b8b9c31758e5f33f0ddc42d014595bd1 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Tue, 14 Jan 2025 10:33:00 +0200 Subject: [PATCH 39/81] docs: fix missing `false` return type on gutenberg_register_block_module_id() (#68393) Co-authored-by: justlevine Co-authored-by: Mamaduka --- lib/experimental/script-modules.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php index 5a14e1418ed6de..9657fdad4a7254 100644 --- a/lib/experimental/script-modules.php +++ b/lib/experimental/script-modules.php @@ -55,7 +55,7 @@ function gutenberg_filter_block_type_metadata_settings_register_view_module( $se * @param string $field_name Field name to pick from metadata. * @param int $index Optional. Index of the script to register when multiple items passed. * Default 0. - * @return string Module ID. + * @return string|false Module ID. */ function gutenberg_register_block_module_id( $metadata, $field_name, $index = 0 ) { if ( empty( $metadata[ $field_name ] ) ) { From 669662c740bf0e69f58ad1d7e570607c066f31ef Mon Sep 17 00:00:00 2001 From: Akira Tachibana Date: Tue, 14 Jan 2025 17:33:28 +0900 Subject: [PATCH 40/81] Docs: Interactivity API - missing styles in the sample code (#66253) Co-authored-by: atachibana Co-authored-by: Mamaduka --- .../the-reactive-and-declarative-mindset.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md index 3760fdf3867802..4f167d4e37de8a 100644 --- a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md +++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md @@ -28,6 +28,15 @@ Take, for example, this interactive block with two buttons and a paragraph: + +