From 55075afa7fd094c1cdd2c91cafbc337902d6269a Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Tue, 10 Dec 2024 14:30:13 +0530 Subject: [PATCH 01/25] Added https in several urls in docs (#67706) Co-authored-by: shail-mehta Co-authored-by: t-hamano --- docs/contributors/code/release.md | 4 ++-- docs/contributors/design/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index ec3af0d7bd4cb..6e99286895c7c 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -5,7 +5,7 @@ The [Gutenberg repository](https://github.com/WordPress/gutenberg) on GitHub is Before you begin, there are some requirements that must be met in order to successfully release a stable version of the Gutenberg plugin. You will need to: - Be a member of the [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams). This gives you the ability to launch the GitHub actions that are related to the release process and to backport pull requests (PRs) to the release branch. -- Have write permissions on the [Make WordPress Core](http://make.wordpress.org/core) blog. This allows you to draft the release post. +- Have write permissions on the [Make WordPress Core](https://make.wordpress.org/core) blog. This allows you to draft the release post. - Obtain approval from a member of the Gutenberg Core team in order to upload the new version Gutenberg to the WordPress.org plugin directory. Similar requirements apply to releasing WordPress's [npm packages](https://developer.wordpress.org/block-editor/contributors/code/release/#packages-releases-to-npm-and-wordpress-core-updates). @@ -344,7 +344,7 @@ To do this, when running the Workflow, select the appropriate `release/` branch It is possible to create a minor release for any release branch even after a more recent stable release has been published. This can be done for _any_ previous release branches, allowing more flexibility in delivering updates to users. In the past, users had to wait for the next stable release, potentially taking days. Now, fixes can be swiftly shipped to any previous release branches as required. -The process is identical to the one documented above when an RC is already out: choose a previous release branch, type `stable`, and click "Run workflow". The release will be published on the GitHub releases page for Gutenberg and to the WordPress core repository SVN as a `tag` under http://plugins.svn.wordpress.org/gutenberg/tags/. The SVN `trunk` directory will not be touched. +The process is identical to the one documented above when an RC is already out: choose a previous release branch, type `stable`, and click "Run workflow". The release will be published on the GitHub releases page for Gutenberg and to the WordPress core repository SVN as a `tag` under https://plugins.svn.wordpress.org/gutenberg/tags/. The SVN `trunk` directory will not be touched. **IMPORTANT:** When publishing the draft created by the ["Build Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml), make sure to leave the "Set as last release" checkbox unchecked. If it is left checked by accident, the ["Upload Gutenberg plugin to WordPress.org plugin" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) will still correctly upload it **as a tag (and will _not_ replace the `trunk` version)** to the WordPress plugin repository SVN - the workflow will perform some version arithmetic to determine how the plugin should be shipped - but you'll still need to fix the state on GitHub by setting the right release as `latest` on the [releases](https://github.com/WordPress/gutenberg/releases/) page! diff --git a/docs/contributors/design/README.md b/docs/contributors/design/README.md index abc077b8fdc07..0a50be2bf4ae3 100644 --- a/docs/contributors/design/README.md +++ b/docs/contributors/design/README.md @@ -14,7 +14,7 @@ The Gutenberg project uses GitHub for managing code and tracking issues. The mai If you'd like to contribute to the design or front-end, feel free to contribute to tickets labeled [Needs Design](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A%22Needs+Design%22) or [Needs Design Feedback](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A"Needs+Design+Feedback%22). We could use your thoughtful replies, mockups, animatics, sketches, doodles. Proposed changes are best done as minimal and specific iterations on the work that precedes it so we can compare. -The [WordPress Design team](http://make.wordpress.org/design/) uses [Figma](https://www.figma.com/) to collaborate and share work. If you'd like to contribute, join the [#design channel](http://wordpress.slack.com/messages/design/) in [Slack](https://make.wordpress.org/chat/) and ask the team to set you up with a free Figma account. This will give you access to a helpful [library of components](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=0%3A1) used in WordPress. +The [WordPress Design team](https://make.wordpress.org/design/) uses [Figma](https://www.figma.com/) to collaborate and share work. If you'd like to contribute, join the [#design channel](https://wordpress.slack.com/messages/design/) in [Slack](https://make.wordpress.org/chat/) and ask the team to set you up with a free Figma account. This will give you access to a helpful [library of components](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=0%3A1) used in WordPress. ## Principles From 8884fb83b21499205dd3377661d22f3b9640d468 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:01:59 +0900 Subject: [PATCH 02/25] Shadows: Improve design and a11y of remove button (#67705) Co-authored-by: t-hamano Co-authored-by: juanfra Co-authored-by: madhusudhand Co-authored-by: mikachan Co-authored-by: jasmussen --- .../global-styles/shadows-edit-panel.js | 41 +++++++++---------- .../src/components/global-styles/style.scss | 40 ++++++++++++------ 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js index f26a8a5ed1743..0de1f2c99362c 100644 --- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js +++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js @@ -35,7 +35,7 @@ import { reset, moreVertical, } from '@wordpress/icons'; -import { useState, useMemo, useEffect } from '@wordpress/element'; +import { useState, useMemo, useEffect, useRef } from '@wordpress/element'; /** * Internal dependencies @@ -300,6 +300,7 @@ function ShadowsPreview( { shadow } ) { } function ShadowEditor( { shadow, onChange } ) { + const addShadowButtonRef = useRef(); const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] ); const onChangeShadowPart = ( index, part ) => { @@ -314,6 +315,7 @@ function ShadowEditor( { shadow, onChange } ) { const onRemoveShadowPart = ( index ) => { onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) ); + addShadowButtonRef.current.focus(); }; return ( @@ -334,6 +336,7 @@ function ShadowEditor( { shadow, onChange } ) { onClick={ () => { onAddShadowPart(); } } + ref={ addShadowButtonRef } /> @@ -393,28 +396,24 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) { }; return ( - - - - + <> + { canRemove && ( - - + <> + + { hasValue() && ( + + ); } } From 9a63c4b51943c52b826628757dbcea20afe0fcb5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 10 Dec 2024 17:10:05 +0100 Subject: [PATCH 20/25] CI: Skip native jobs (#67799) Co-authored-by: youknowriad Co-authored-by: tyxla Co-authored-by: dcalhoun --- .github/workflows/rnmobile-android-runner.yml | 5 +++-- .github/workflows/rnmobile-ios-runner.yml | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index e4d9da813417e..e0365c9b4d3d2 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -14,8 +14,9 @@ concurrency: jobs: test: - runs-on: macos-12 - if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} + runs-on: macos-13 + if: false + #if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} strategy: matrix: native-test-name: [gutenberg-editor-rendering] diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index e1e7fd8c755c9..1665d769e25f0 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -14,8 +14,9 @@ concurrency: jobs: test: - runs-on: macos-12 - if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} + runs-on: macos-13 + if: false + #if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} strategy: matrix: xcode: ['14.2'] From da012ed2178b5b8475b8d6ec85553279490332ab Mon Sep 17 00:00:00 2001 From: David Arenas Date: Tue, 10 Dec 2024 17:16:09 +0100 Subject: [PATCH 21/25] Image Block: Change how the Image's overlay styles are applied (#67788) Co-authored-by: DAreRodz Co-authored-by: SantosGuillamot --- packages/block-library/src/image/index.php | 2 +- packages/block-library/src/image/view.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 1a5fae7ce9cbb..ac03011d73f63 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -290,6 +290,7 @@ class="wp-lightbox-overlay zoom" data-wp-on-async--click="actions.hideLightbox" data-wp-on-async-window--resize="callbacks.setOverlayStyles" data-wp-on-async-window--scroll="actions.handleScroll" + data-wp-bind--style="state.overlayStyles" tabindex="-1" > ; +const Mybutton = () => ( + +); ``` +## Props -### Props +### `__next40pxDefaultSize` -The presence of a `href` prop determines whether an `anchor` element is rendered instead of a `button`. +Start opting into the larger default height that will become the +default size in a future version. -Props not included in this set will be applied to the `a` or `button` element. + - Type: `boolean` + - Required: No + - Default: `false` -#### `accessibleWhenDisabled`: `boolean` +### `accessibleWhenDisabled` Whether to keep the button focusable when disabled. -In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or by preventing focus from returning to a trigger element. +In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability +can cause accessibility issues, by hiding their presence from screen reader users, +or by preventing focus from returning to a trigger element. -Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) in the WAI-ARIA Authoring Practices Guide. +Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) +in the WAI-ARIA Authoring Practices Guide. -- Required: No -- Default: `false` + - Type: `boolean` + - Required: No + - Default: `false` -#### `children`: `ReactNode` +### `children` The button's children. -- Required: No + - Type: `ReactNode` + - Required: No -#### `className`: `string` +### `description` -An optional additional class name to apply to the rendered button. +A visually hidden accessible description for the button. -- Required: No + - Type: `string` + - Required: No -#### `description`: `string` +### `disabled` -An accessible description for the button. - -- Required: No - -#### `disabled`: `boolean` - -Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given. +Whether the button is disabled. If `true`, this will force a `button` element +to be rendered, even when an `href` is given. In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`. -- Required: No + - Type: `boolean` + - Required: No -#### `href`: `string` +### `href` If provided, renders `a` instead of `button`. -- Required: No + - Type: `string` + - Required: Yes -#### `icon`: `IconProps< unknown >[ 'icon' ]` +### `icon` -If provided, renders an [Icon](/packages/components/src/icon/README.md) component inside the button. +If provided, renders an Icon component inside the button. -- Required: No + - Type: `IconType` + - Required: No -#### `iconPosition`: `'left' | 'right'` +### `iconPosition` -If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`. +If provided with `icon`, sets the position of icon relative to the `text`. -- Required: No -- Default: `left` + - Type: `"left" | "right"` + - Required: No + - Default: `'left'` -#### `iconSize`: `IconProps< unknown >[ 'size' ]` +### `iconSize` -If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop. +If provided with `icon`, sets the icon size. +Please refer to the Icon component for more details regarding +the default value of its `size` prop. -- Required: No + - Type: `number` + - Required: No -#### `isBusy`: `boolean` +### `isBusy` Indicates activity while a action is being performed. -- Required: No + - Type: `boolean` + - Required: No -#### `isDestructive`: `boolean` +### `isDestructive` Renders a red text-based button style to indicate destructive behavior. -- Required: No - -#### `isLink`: `boolean` + - Type: `boolean` + - Required: No -Deprecated: Renders a button with an anchor style. -Use `variant` prop with `link` value instead. - -- Required: No -- Default: `false` - -#### `isPressed`: `boolean` +### `isPressed` Renders a pressed button style. -If the native `aria-pressed` attribute is also set, it will take precedence. - -- Required: No - -#### `isPrimary`: `boolean` + - Type: `boolean` + - Required: No -Deprecated: Renders a primary button style. -Use `variant` prop with `primary` value instead. +### `label` -- Required: No -- Default: `false` +Sets the `aria-label` of the component, if none is provided. +Sets the Tooltip content if `showTooltip` is provided. -#### `isSecondary`: `boolean` + - Type: `string` + - Required: No -Deprecated: Renders a default button style. -Use `variant` prop with `secondary` value instead. +### `shortcut` -- Required: No -- Default: `false` +If provided with `showTooltip`, appends the Shortcut label to the tooltip content. +If an object is provided, it should contain `display` and `ariaLabel` keys. -#### `isSmall`: `boolean` + - Type: `string | { display: string; ariaLabel: string; }` + - Required: No -Decreases the size of the button. +### `showTooltip` -Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence. +If provided, renders a Tooltip component for the button. -- Required: No + - Type: `boolean` + - Required: No -#### `isTertiary`: `boolean` - -Deprecated: Renders a text-based button style. -Use `variant` prop with `tertiary` value instead. - -- Required: No -- Default: `false` - -#### `label`: `string` - -Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided. - -- Required: No - -#### `shortcut`: `string | { display: string; ariaLabel: string; }` - -If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an object is provided, it should contain `display` and `ariaLabel` keys. - -- Required: No - -#### `showTooltip`: `boolean` - -If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) component for the button. - -- Required: No - -#### `size`: `'default'` | `'compact'` | `'small'` +### `size` The size of the button. -- `'default'`: For normal text-label buttons, unless it is a toggle button. -- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either. -- `'small'`: For icon buttons associated with more advanced or auxiliary features. +- `'default'`: For normal text-label buttons, unless it is a toggle button. +- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either. +- `'small'`: For icon buttons associated with more advanced or auxiliary features. If the deprecated `isSmall` prop is also defined, this prop will take precedence. -- Required: No -- Default: `'default'` - -#### `target`: `string` + - Type: `"small" | "default" | "compact"` + - Required: No + - Default: `'default'` -If provided with `href`, sets the `target` attribute to the `a`. - -- Required: No - -#### `text`: `string` +### `text` If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them. -- Required: No + - Type: `string` + - Required: No -#### `tooltipPosition`: `PopoverProps[ 'position' ]` +### `tooltipPosition` -If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults. +If provided with `showTooltip`, sets the position of the tooltip. +Please refer to the Tooltip component for more details regarding the defaults. -- Required: No + - Type: `"top" | "middle" | "bottom" | "top center" | "top left" | "top right" | "middle center" | "middle left" | "middle right" | "bottom center" | ...` + - Required: No -#### `variant`: `'primary' | 'secondary' | 'tertiary' | 'link'` +### `target` -Specifies the button's style. The accepted values are `'primary'` (the primary button styles), `'secondary'` (the default button styles), `'tertiary'` (the text-based button styles), and `'link'` (the link button styles). +If provided with `href`, sets the `target` attribute to the `a`. -- Required: No + - Type: `string` + - Required: No -#### `__next40pxDefaultSize`: `boolean` +### `variant` -Start opting into the larger default height that will become the default size in a future version. +Specifies the button's style. -- Required: No -- Default: `false` +The accepted values are: -## Related components +1. `'primary'` (the primary button styles) +2. `'secondary'` (the default button styles) +3. `'tertiary'` (the text-based button styles) +4. `'link'` (the link button styles) -- To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component. + - Type: `"link" | "primary" | "secondary" | "tertiary"` + - Required: No diff --git a/packages/components/src/button/docs-manifest.json b/packages/components/src/button/docs-manifest.json new file mode 100644 index 0000000000000..0fd0f84f44e10 --- /dev/null +++ b/packages/components/src/button/docs-manifest.json @@ -0,0 +1,5 @@ +{ + "$schema": "../../schemas/docs-manifest.json", + "displayName": "Button", + "filePath": "./index.tsx" +} diff --git a/packages/components/src/button/stories/best-practices.mdx b/packages/components/src/button/stories/best-practices.mdx new file mode 100644 index 0000000000000..66ec44e6738d5 --- /dev/null +++ b/packages/components/src/button/stories/best-practices.mdx @@ -0,0 +1,31 @@ +import { Meta } from '@storybook/blocks'; + + + +# Button + +## Usage +Buttons indicate available actions and allow user interaction within the interface. As key elements in the WordPress UI, they appear in toolbars, modals, and forms. Default buttons support most actions, while primary buttons emphasize the main action in a view. Secondary buttons pair as secondary actions next to a primary action. + +Each layout contains one prominently placed, high-emphasis button. If you need multiple buttons, use one primary button for the main action, secondary for the rest of the actions and tertiary sparingly when an action needs to not stand out at all. + +### Sizes + +- `'default'`: For normal text-label buttons, unless it is a toggle button. +- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either. +- `'small'`: For icon buttons associated with more advanced or auxiliary features. + +## Best practices + +- Label buttons to show that a click or tap initiates an action. +- Use established color conventions; for example, reserve red buttons for irreversible or dangerous actions. +- Avoid crowding the screen with multiple calls to action, which confuses users. +- Keep button locations consistent across the interface. + +## Content guidelines + +Buttons should be clear and predictable, showing users what will happen when clicked. Make labels reflect actions accurately to avoid confusion. + +Start button text with a strong action verb and include a noun to specify the change, except for common actions like Save, Close, Cancel, or OK. + +For other actions, use a `{verb}+{noun}` format for context. Keep button text brief and remove unnecessary words like "the," "an," or "a" for easy scanning. diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx index 808914893de61..605b56686c702 100644 --- a/packages/components/src/button/stories/index.story.tsx +++ b/packages/components/src/button/stories/index.story.tsx @@ -65,30 +65,48 @@ Default.args = { children: 'Code is poetry', }; +/** + * Primary buttons stand out with bold color fills, making them distinct + * from the background. Since they naturally draw attention, each layout should contain + * only one primary button to guide users toward the most important action. + */ export const Primary = Template.bind( {} ); Primary.args = { ...Default.args, variant: 'primary', }; +/** + * Secondary buttons complement primary buttons. Use them for standard actions that may appear alongside a primary action. + */ export const Secondary = Template.bind( {} ); Secondary.args = { ...Default.args, variant: 'secondary', }; +/** + * Tertiary buttons have minimal emphasis. Use them sparingly to subtly highlight an action. + */ export const Tertiary = Template.bind( {} ); Tertiary.args = { ...Default.args, variant: 'tertiary', }; +/** + * Link buttons have low emphasis and blend into the page, making them suitable for supplementary actions, + * especially those involving navigation away from the current view. + */ export const Link = Template.bind( {} ); Link.args = { ...Default.args, variant: 'link', }; +/** + * Use this variant for irreversible actions. Apply sparingly and only for actions with significant impact. + */ export const IsDestructive = Template.bind( {} ); IsDestructive.args = { ...Default.args, diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 7d67b721a5036..d730f49b1e813 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -111,11 +111,13 @@ type BaseButtonProps = { tooltipPosition?: PopoverProps[ 'position' ]; /** * Specifies the button's style. + * * The accepted values are: - * 'primary' (the primary button styles) - * 'secondary' (the default button styles) - * 'tertiary' (the text-based button styles) - * 'link' (the link button styles) + * + * 1. `'primary'` (the primary button styles) + * 2. `'secondary'` (the default button styles) + * 3. `'tertiary'` (the text-based button styles) + * 4. `'link'` (the link button styles) */ variant?: 'primary' | 'secondary' | 'tertiary' | 'link'; }; diff --git a/storybook/components/figma-embed/index.js b/storybook/components/figma-embed/index.js new file mode 100644 index 0000000000000..8d8ac6488a933 --- /dev/null +++ b/storybook/components/figma-embed/index.js @@ -0,0 +1,47 @@ +/** + * Internal dependencies + */ +import './style.scss'; + +// See https://www.figma.com/developers/embed#embed-a-figma-file +const CONFIG = { + 'embed-host': 'wordpress-storybook', + footer: false, + 'page-selector': false, + 'viewport-controls': true, +}; + +/** + * Embed Figma links in the Storybook. + * + * @param {Object} props + * @param {string} props.url - Figma URL to embed. + * @param {string} props.title - Accessible title for the iframe. + */ +function FigmaEmbed( { url, title, ...props } ) { + const urlObj = new URL( url ); + + const queryParams = new URLSearchParams( urlObj.search ); + Object.entries( CONFIG ).forEach( ( [ key, value ] ) => { + queryParams.set( key, value ); + } ); + urlObj.search = queryParams.toString(); + + urlObj.hostname = urlObj.hostname.replace( + 'www.figma.com', + 'embed.figma.com' + ); + + const normalizedUrl = urlObj.toString(); + + return ( +