From 1ed6db3ca27d427664455d86a4a10015d3a88740 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 27 Sep 2023 11:49:20 +0000 Subject: [PATCH 1/8] Bump plugin version to 16.7.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 632f52eb5aa75..ea22c8c7ad82d 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.2 * Requires PHP: 7.0 - * Version: 16.7.0-rc.2 + * Version: 16.7.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 8f7616dd1e556..5895a051a0741 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "16.7.0-rc.2", + "version": "16.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "16.7.0-rc.2", + "version": "16.7.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 4dd57cd0d9b7b..02fe8c3843ba4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "16.7.0-rc.2", + "version": "16.7.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", From aa7cc4d0404e0a830144c57e5211335b48f9ba2d Mon Sep 17 00:00:00 2001 From: Andrew Hayward Date: Wed, 27 Sep 2023 12:55:14 +0100 Subject: [PATCH 2/8] Deprecating `isPressed` in `Button` component (#54740) * Deprecating `isPressed` in `Button` component * Updating CHANGELOG.md * Undoing deprecation/other changes, to reduce overall impact * Updating README.md * Updating `aria-pressed` doc metadata * Refactoring `is-pressed` logic * Adding extra tests for `aria-pressed` values --- packages/components/CHANGELOG.md | 1 + packages/components/src/button/README.md | 2 + packages/components/src/button/index.tsx | 37 ++++++++-- .../src/button/stories/index.story.tsx | 11 +++ packages/components/src/button/style.scss | 3 +- packages/components/src/button/test/index.tsx | 73 +++++++++++++++++-- 6 files changed, 113 insertions(+), 14 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5aac419d20932..36ba45825e54f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `SearchControl`: polish metrics for `compact` size variant ([#54663](https://github.com/WordPress/gutenberg/pull/54663)). +- `Button`: deprecating `isPressed` prop in favour of `aria-pressed` ([#54740](https://github.com/WordPress/gutenberg/pull/54740)). ### Bug Fix diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index fdd46b0255ccf..3af46280b1bc9 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -186,6 +186,8 @@ Renders a red text-based button style to indicate destructive behavior. Renders a pressed button style. +If the native `aria-pressed` attribute is also set, it will take precedence. + - Required: No #### `isSmall`: `boolean` diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index a199c1bb350cd..b14e85fa52f7f 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -34,6 +34,7 @@ function useDeprecatedProps( { isSecondary, isTertiary, isLink, + isPressed, isSmall, size, variant, @@ -42,6 +43,11 @@ function useDeprecatedProps( { let computedSize = size; let computedVariant = variant; + const newProps: { 'aria-pressed'?: boolean } = { + // @TODO Mark `isPressed` as deprecated + 'aria-pressed': isPressed, + }; + if ( isSmall ) { computedSize ??= 'small'; } @@ -73,6 +79,7 @@ function useDeprecatedProps( { } return { + ...newProps, ...otherProps, size: computedSize, variant: computedVariant, @@ -85,7 +92,6 @@ export function UnforwardedButton( ) { const { __next40pxDefaultSize, - isPressed, isBusy, isDestructive, className, @@ -106,10 +112,16 @@ export function UnforwardedButton( ...buttonOrAnchorProps } = useDeprecatedProps( props ); - const { href, target, ...additionalProps } = - 'href' in buttonOrAnchorProps - ? buttonOrAnchorProps - : { href: undefined, target: undefined, ...buttonOrAnchorProps }; + const { + href, + target, + 'aria-checked': ariaChecked, + 'aria-pressed': ariaPressed, + 'aria-selected': ariaSelected, + ...additionalProps + } = 'href' in buttonOrAnchorProps + ? buttonOrAnchorProps + : { href: undefined, target: undefined, ...buttonOrAnchorProps }; const instanceId = useInstanceId( Button, @@ -124,6 +136,12 @@ export function UnforwardedButton( // Tooltip should not considered as a child children?.[ 0 ]?.props?.className !== 'components-tooltip' ); + const truthyAriaPressedValues: ( typeof ariaPressed )[] = [ + true, + 'true', + 'mixed', + ]; + const classes = classnames( 'components-button', className, { 'is-next-40px-default-size': __next40pxDefaultSize, 'is-secondary': variant === 'secondary', @@ -131,7 +149,10 @@ export function UnforwardedButton( 'is-small': size === 'small', 'is-compact': size === 'compact', 'is-tertiary': variant === 'tertiary', - 'is-pressed': isPressed, + + 'is-pressed': truthyAriaPressedValues.includes( ariaPressed ), + 'is-pressed-mixed': ariaPressed === 'mixed', + 'is-busy': isBusy, 'is-link': variant === 'link', 'is-destructive': isDestructive, @@ -146,7 +167,9 @@ export function UnforwardedButton( ? { type: 'button', disabled: trulyDisabled, - 'aria-pressed': isPressed, + 'aria-checked': ariaChecked, + 'aria-pressed': ariaPressed, + 'aria-selected': ariaSelected, } : {}; const anchorProps: ComponentPropsWithoutRef< 'a' > = diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx index a1dadab081d8a..2981319cfb323 100644 --- a/packages/components/src/button/stories/index.story.tsx +++ b/packages/components/src/button/stories/index.story.tsx @@ -26,6 +26,17 @@ const meta: Meta< typeof Button > = { component: Button, argTypes: { // Overrides a limitation of the docgen interpreting our TS types for this as required. + 'aria-pressed': { + control: { type: 'select' }, + description: + 'Indicates the current "pressed" state, implying it is a toggle button. Implicitly set by `isPressed`, but takes precedence if both are provided.', + options: [ undefined, 'true', 'false', 'mixed' ], + table: { + type: { + summary: 'boolean | "true" | "false" | "mixed"', + }, + }, + }, href: { type: { name: 'string', required: false } }, icon: { control: { type: 'select' }, diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index b572e96e4335f..0487d19db99df 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -308,7 +308,8 @@ } // Toggled style. - &.is-pressed { + &[aria-pressed="true"], + &[aria-pressed="mixed"] { color: $components-color-foreground-inverted; background: $components-color-foreground; diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx index d70b8b075aa1e..fb6c6a72b9adc 100644 --- a/packages/components/src/button/test/index.tsx +++ b/packages/components/src/button/test/index.tsx @@ -72,12 +72,6 @@ describe( 'Button', () => { expect( button ).toHaveClass( 'is-link' ); } ); - it( 'should render a button element with is-pressed without button class', () => { - render(