diff --git a/.eslintrc.js b/.eslintrc.js index 01f6967e8fe947..0fc37713dce4d1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -296,6 +296,7 @@ module.exports = { 'RangeControl', 'SearchControl', 'TextareaControl', + 'ToggleGroupControl', 'TreeSelect', ].map( ( componentName ) => ( { selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`, diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml index 606ca4c91683ce..366bad9fdbc247 100644 --- a/.github/workflows/check-backport-changelog.yml +++ b/.github/workflows/check-backport-changelog.yml @@ -1,4 +1,4 @@ -name: Verify Core Backport Changlog +name: Verify Core Backport Changelog on: pull_request: diff --git a/.stylelintrc.json b/.stylelintrc.json index df01978222e632..663befa2e4ce06 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,6 +4,14 @@ "at-rule-empty-line-before": null, "at-rule-no-unknown": null, "comment-empty-line-before": null, + "declaration-property-value-allowed-list": [ + { + "flex-direction": "/^(?!(row|column)-reverse).*$/" + }, + { + "message": "Avoid the flex-direction reverse values. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction." + } + ], "declaration-property-value-disallowed-list": [ { "/.*/": [ "/--wp-components-color-/" ] @@ -18,7 +26,7 @@ "property-disallowed-list": [ [ "order" ], { - "message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction" + "message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction." } ], "rule-empty-line-before": null, diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md index 921c8ad6ddc3e7..df6b305f35983e 100644 --- a/docs/contributors/code/getting-started-with-code-contribution.md +++ b/docs/contributors/code/getting-started-with-code-contribution.md @@ -16,7 +16,7 @@ We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nv We recommend using the [wp-env package](/packages/env/README.md) for setting WordPress environment locally. You'll need to install Docker to use `wp-env`. See the [Development Environment tutorial for additional details](/docs/getting-started/devenv/README.md). > Note: To install Docker on Windows 10 Home Edition, follow the [install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/). -As an alternative to Docker setup, you can use [Local](https://localwp.com/), [WampServer](http://www.wampserver.com/en/), or [MAMP](https://www.mamp.info/), or even use a remote server. +As an alternative to Docker setup, you can use [Local](https://localwp.com/), [WampServer](https://wampserver.aviatechno.net/), or [MAMP](https://www.mamp.info/), or even use a remote server. - GitHub CLI Although not a requirement, the [GitHub CLI](https://cli.github.com/) can be very useful in helping you checkout pull requests locally. Both from the Gutenberg repo and forked repos. This can be a major time saver while code reviewing and testing pull requests. @@ -134,7 +134,7 @@ If you run into an issue, check the [troubleshooting section in `wp-env` documen ### Using Local or MAMP -As an alternative to Docker and `wp-env`, you can also use [Local](https://localwp.com/), [WampServer](http://www.wampserver.com/en/), or [MAMP](https://www.mamp.info/) to run a local WordPress environment. To do so clone and install Gutenberg as a regular plugin in your installation by creating a symlink or copying the directory to the proper `wp-content/plugins` directory. +As an alternative to Docker and `wp-env`, you can also use [Local](https://localwp.com/), [WampServer](https://wampserver.aviatechno.net/), or [MAMP](https://www.mamp.info/) to run a local WordPress environment. To do so clone and install Gutenberg as a regular plugin in your installation by creating a symlink or copying the directory to the proper `wp-content/plugins` directory. You will also need some extra configuration to be able to run the e2e tests. diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3309a676dfc84a..e9818724b37271 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -360,7 +360,7 @@ Introduce new sections and organize content to help visitors (and search engines - **Name:** core/heading - **Category:** text - **Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight) -- **Attributes:** content, level, placeholder, textAlign +- **Attributes:** content, level, levelOptions, placeholder, textAlign ## Home Link diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md index 9648b0118a5aa1..f5d410a8439f45 100644 --- a/docs/reference-guides/interactivity-api/README.md +++ b/docs/reference-guides/interactivity-api/README.md @@ -119,7 +119,7 @@ Here you have some more resources to learn/read more about the Interactivity API - [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions. - [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo - Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples): - - [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/833d15) + - [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15) - [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e) - [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa) diff --git a/docs/reference-guides/interactivity-api/iapi-faq.md b/docs/reference-guides/interactivity-api/iapi-faq.md index 5e5036779baaeb..dea7bc1d4367be 100644 --- a/docs/reference-guides/interactivity-api/iapi-faq.md +++ b/docs/reference-guides/interactivity-api/iapi-faq.md @@ -66,7 +66,7 @@ To summarize, using the Interactivity API rather than just using React comes wit - If you use React, your interactive blocks must generate the same markup on the client as they do on the server in PHP. Using the Interactivity API, there is no such requirement as directives are added to server-rendered HTML. - The Interactivity API is PHP-friendlier. It works out of the box with WordPress hooks or other server functionalities such as internationalization. For example, with React, you can’t know which hooks are applied on the server, and their modifications would be overwritten after hydration. -- All the benefits of [using a standard](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/what-is-interactivity-api#why-a-standard). +- All the benefits of [using a standard](/docs/reference-guides/interactivity-api/iapi-about.md#why-a-standard). ## What are the benefits of Interactivity API over just using jQuery or vanilla JavaScript? diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index b10eeeb167dadf..f5a9ec38824ff3 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -22,7 +22,6 @@ $text-editor-font-size: 15px; $editor-line-height: 1.8; $mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in". - /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index b3f2d3dee12013..8bd790c5c8fb21 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -5,6 +5,7 @@ import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { chevronRightSmall, Icon } from '@wordpress/icons'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies @@ -12,7 +13,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons'; import BlockTitle from '../block-title'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs'; import getEditorRegion from '../../utils/get-editor-region'; /** @@ -41,7 +42,8 @@ function BlockBreadcrumb( { rootLabelText } ) { // We don't care about this specific ref, but this is a way // to get a ref within the editor canvas so we can focus it later. - const blockRef = useBlockRef( clientId ); + const blockRef = useRef(); + useBlockElementRef( clientId, blockRef ); /* * Disable reason: The `list` ARIA role is redundant but diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js index 0ba2b857bc693e..e1afc1f2513841 100644 --- a/packages/block-editor/src/components/block-draggable/index.js +++ b/packages/block-editor/src/components/block-draggable/index.js @@ -13,7 +13,7 @@ import { throttle } from '@wordpress/compose'; import BlockDraggableChip from './draggable-chip'; import useScrollWhenDragging from './use-scroll-when-dragging'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import { isDropTargetValid } from '../use-block-drop-zone'; const BlockDraggable = ( { @@ -82,8 +82,8 @@ const BlockDraggable = ( { }, [] ); // Find the root of the editor iframe. - const blockRef = useBlockRef( clientIds[ 0 ] ); - const editorRoot = blockRef.current?.closest( 'body' ); + const blockEl = useBlockElement( clientIds[ 0 ] ); + const editorRoot = blockEl?.closest( 'body' ); /* * Add a dragover event listener to the editor root to track the blocks being dragged over. diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js index 056ade045d1654..16fd3ff1ca81dd 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js @@ -1,13 +1,7 @@ /** * WordPress dependencies */ -import { - useContext, - useMemo, - useRef, - useState, - useLayoutEffect, -} from '@wordpress/element'; +import { useContext, useState, useLayoutEffect } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -16,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose'; import { BlockRefs } from '../../provider/block-refs-provider'; /** @typedef {import('@wordpress/element').RefCallback} RefCallback */ -/** @typedef {import('@wordpress/element').RefObject} RefObject */ +/** @typedef {import('@wordpress/element').Ref} Ref */ /** * Provides a ref to the BlockRefs context. @@ -36,31 +30,33 @@ export function useBlockRefProvider( clientId ) { ); } +function assignRef( ref, value ) { + if ( typeof ref === 'function' ) { + ref( value ); + } else if ( ref ) { + ref.current = value; + } +} + /** - * Gets a ref pointing to the current block element. Continues to return the same - * stable ref object even if the `clientId` argument changes. This hook is not - * reactive, i.e., it won't trigger a rerender of the calling component if the - * ref value changes. For reactive use cases there is the `useBlockElement` hook. - * - * @param {string} clientId The client ID to get a ref for. + * Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref` + * whenever it changes. * - * @return {RefObject} A ref containing the element. + * @param {string} clientId The client ID to track. + * @param {Ref} ref The ref object/callback to assign to. */ -function useBlockRef( clientId ) { +export function useBlockElementRef( clientId, ref ) { const { refsMap } = useContext( BlockRefs ); - const latestClientId = useRef(); - latestClientId.current = clientId; - - // Always return an object, even if no ref exists for a given client ID, so - // that `current` works at a later point. - return useMemo( - () => ( { - get current() { - return refsMap.get( latestClientId.current ) ?? null; - }, - } ), - [ refsMap ] - ); + useLayoutEffect( () => { + assignRef( ref, refsMap.get( clientId ) ); + const unsubscribe = refsMap.subscribe( clientId, () => + assignRef( ref, refsMap.get( clientId ) ) + ); + return () => { + unsubscribe(); + assignRef( ref, null ); + }; + }, [ refsMap, clientId, ref ] ); } /** @@ -71,20 +67,8 @@ function useBlockRef( clientId ) { * * @return {Element|null} The block's wrapper element. */ -function useBlockElement( clientId ) { - const { refsMap } = useContext( BlockRefs ); +export function useBlockElement( clientId ) { const [ blockElement, setBlockElement ] = useState( null ); - // Delay setting the resulting `blockElement` until an effect. If the block element - // changes (i.e., the block is unmounted and re-mounted), this allows enough time - // for the ref callbacks to clean up the old element and set the new one. - useLayoutEffect( () => { - setBlockElement( refsMap.get( clientId ) ); - return refsMap.subscribe( clientId, () => - setBlockElement( refsMap.get( clientId ) ) - ); - }, [ refsMap, clientId ] ); + useBlockElementRef( clientId, setBlockElement ); return blockElement; } - -export { useBlockRef as __unstableUseBlockRef }; -export { useBlockElement as __unstableUseBlockElement }; diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index aaaf6c64b55953..3b7f25800095a5 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -69,7 +69,11 @@ function BlockMover( { [ clientIds ] ); - if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) { + if ( + ! canMove || + ( isFirst && isLast && ! rootClientId ) || + ( hideDragHandle && isManualGrid ) + ) { return null; } diff --git a/packages/block-editor/src/components/block-popover/cover.js b/packages/block-editor/src/components/block-popover/cover.js index caad2ddbb7ec56..401431defe4fd5 100644 --- a/packages/block-editor/src/components/block-popover/cover.js +++ b/packages/block-editor/src/components/block-popover/cover.js @@ -6,7 +6,7 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element'; /** * Internal dependencies */ -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import { PrivateBlockPopover } from '.'; function BlockPopoverCover( diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index bc2eaeae0be603..2ed9ee0bcb284f 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -20,7 +20,7 @@ import { isRTL } from '@wordpress/i18n'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import usePopoverScroll from './use-popover-scroll'; const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER; diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index cc8d832c31bc70..2413601a590e2e 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -18,7 +18,7 @@ import { /** * Internal dependencies */ -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import usePopoverScroll from './use-popover-scroll'; const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER; diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 036aef4f135d3c..8d99b829a84bf4 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -37,7 +37,7 @@ import BlockTitle from '../block-title'; import BlockIcon from '../block-icon'; import { store as blockEditorStore } from '../../store'; import BlockDraggable from '../block-draggable'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; /** * Block selection button component, displaying the label of the block. If the block diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js index f99323dd5c80a7..0ca0f6e5a43dda 100644 --- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js +++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js @@ -15,7 +15,7 @@ import { * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import { hasStickyOrFixedPositionValue } from '../../hooks/position'; const COMMON_PROPS = { diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 7a04f41a29b050..bd9175782a224a 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -45,7 +45,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js index 05a7d2f4d251a7..a23fad586d4705 100644 --- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js @@ -105,6 +105,7 @@ export default function ScaleTool( { panelId={ panelId } > - { - onChange( { - columnStart: columnStart - 1, - } ); - __unstableMarkNextChangeAsNotPersistent(); - moveBlocksToPosition( - [ blockClientId ], - gridClientId, - gridClientId, - getNumberOfBlocksBeforeCell( - columnStart - 1, - rowStart - ) - ); - } } - /> +
+ { + onChange( { + columnStart: columnStart - 1, + } ); + __unstableMarkNextChangeAsNotPersistent(); + moveBlocksToPosition( + [ blockClientId ], + gridClientId, + gridClientId, + getNumberOfBlocksBeforeCell( + columnStart - 1, + rowStart + ) + ); + } } + /> +
- = columnCount } - onClick={ () => { - onChange( { - columnStart: columnStart + 1, - } ); - __unstableMarkNextChangeAsNotPersistent(); - moveBlocksToPosition( - [ blockClientId ], - gridClientId, - gridClientId, - getNumberOfBlocksBeforeCell( - columnStart + 1, - rowStart - ) - ); - } } - /> +
+ = columnCount } + onClick={ () => { + onChange( { + columnStart: columnStart + 1, + } ); + __unstableMarkNextChangeAsNotPersistent(); + moveBlocksToPosition( + [ blockClientId ], + gridClientId, + gridClientId, + getNumberOfBlocksBeforeCell( + columnStart + 1, + rowStart + ) + ); + } } + /> +
); diff --git a/packages/block-editor/src/components/grid/grid-item-resizer.js b/packages/block-editor/src/components/grid/grid-item-resizer.js index 34bc1db6048067..28d9678772f76c 100644 --- a/packages/block-editor/src/components/grid/grid-item-resizer.js +++ b/packages/block-editor/src/components/grid/grid-item-resizer.js @@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import BlockPopoverCover from '../block-popover/cover'; import { getComputedCSS, getGridTracks, getClosestTrack } from './utils'; diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js index 5e5e1e3bfa2f77..e1d35f012b4d81 100644 --- a/packages/block-editor/src/components/grid/grid-visualizer.js +++ b/packages/block-editor/src/components/grid/grid-visualizer.js @@ -13,7 +13,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose'; /** * Internal dependencies */ -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import BlockPopoverCover from '../block-popover/cover'; import { range, GridRect, getGridInfo } from './utils'; import { store as blockEditorStore } from '../../store'; diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index 32f0cfc0c62dc2..6790d683ca7d03 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -105,7 +105,6 @@ .block-editor-grid-item-mover-button { width: $block-toolbar-height * 0.5; min-width: 0 !important; // overrides default button width. - overflow: hidden; padding-left: 0; padding-right: 0; @@ -155,7 +154,7 @@ justify-content: space-around; > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button { - height: $block-toolbar-height * 0.5 - $grid-unit-05; + height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height. width: 100%; min-width: 0 !important; // overrides default button width. @@ -173,18 +172,53 @@ } } +.editor-collapsible-block-toolbar { + .block-editor-grid-item-mover__move-vertical-button-container { + // Move up a little to prevent the toolbar shift when focus is on the vertical movers. + @include break-small() { + height: $grid-unit-50; + position: relative; + top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header. + } + } +} + .show-icon-labels { - .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button { - border-right: 1px solid $gray-700; - padding-right: 12px; - } + .block-editor-grid-item-mover__move-horizontal-button-container { + position: relative; - .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button { - border-left: 1px solid $gray-700; - padding-left: 12px; - } + &::before { + @include break-small() { + content: ""; + height: 100%; + width: $border-width; + background: $gray-200; + position: absolute; + top: 0; + } + + @include break-medium() { + background: $gray-900; + } + } + + &.is-left { + padding-right: 6px; + &::before { + right: 0; + } + } + + &.is-right { + padding-left: 6px; + + &::before { + left: 0; + } + } + } .block-editor-grid-item-mover__move-vertical-button-container { &::before { @@ -208,5 +242,21 @@ } } + .block-editor-grid-item-mover-button { + white-space: nowrap; + } + + .editor-collapsible-block-toolbar { + .block-editor-grid-item-mover__move-horizontal-button-container::before { + height: $grid-unit-30; + background: $gray-300; + top: $grid-unit-05; + } + + .block-editor-grid-item-mover__move-vertical-button-container::before { + background: $gray-300; + width: calc(100% - #{$grid-unit-30}); + } + } } diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js index 51062e32934f0b..2f78f706112c38 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/index.js +++ b/packages/block-editor/src/components/skip-to-selected-block/index.js @@ -4,12 +4,13 @@ import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; +import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs'; /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md @@ -19,9 +20,10 @@ export default function SkipToSelectedBlock() { ( select ) => select( blockEditorStore ).getBlockSelectionStart(), [] ); - const ref = useBlockRef( selectedBlockClientId ); + const ref = useRef(); + useBlockElementRef( selectedBlockClientId, ref ); const onClick = () => { - ref.current.focus(); + ref.current?.focus(); }; return selectedBlockClientId ? ( diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/packages/block-editor/src/hooks/block-hooks.scss index 4d871233de482b..c8f2027483ccf3 100644 --- a/packages/block-editor/src/hooks/block-hooks.scss +++ b/packages/block-editor/src/hooks/block-hooks.scss @@ -4,6 +4,7 @@ * we need to right-align the toggle. */ .components-toggle-control .components-h-stack { + /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */ flex-direction: row-reverse; } diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js index ef04da63e4946b..6e503ae8f3319d 100644 --- a/packages/block-editor/src/hooks/contrast-checker.js +++ b/packages/block-editor/src/hooks/contrast-checker.js @@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element'; * Internal dependencies */ import ContrastChecker from '../components/contrast-checker'; -import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs'; +import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs'; function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); @@ -17,23 +17,23 @@ export default function BlockColorContrastChecker( { clientId } ) { const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); const [ detectedColor, setDetectedColor ] = useState(); const [ detectedLinkColor, setDetectedLinkColor ] = useState(); - const ref = useBlockRef( clientId ); + const blockEl = useBlockElement( clientId ); // There are so many things that can change the color of a block // So we perform this check on every render. // eslint-disable-next-line react-hooks/exhaustive-deps useEffect( () => { - if ( ! ref.current ) { + if ( ! blockEl ) { return; } - setDetectedColor( getComputedStyle( ref.current ).color ); + setDetectedColor( getComputedStyle( blockEl ).color ); - const firstLinkElement = ref.current?.querySelector( 'a' ); + const firstLinkElement = blockEl.querySelector( 'a' ); if ( firstLinkElement && !! firstLinkElement.innerText ) { setDetectedLinkColor( getComputedStyle( firstLinkElement ).color ); } - let backgroundColorNode = ref.current; + let backgroundColorNode = blockEl; let backgroundColor = getComputedStyle( backgroundColorNode ).backgroundColor; while ( @@ -48,7 +48,7 @@ export default function BlockColorContrastChecker( { clientId } ) { } setDetectedBackgroundColor( backgroundColor ); - } ); + }, [ blockEl ] ); return ( ) } - + { Platform.isNative ? ( + + ) : null } + { Platform.isWeb ? ( + + + { ( { onClose } ) => ( + + { linkOptions.map( ( linkItem ) => { + const isOptionSelected = + linkTo === linkItem.value; + return ( + { + setLinkTo( linkItem.value ); + onClose(); + } } + role="menuitemradio" + > + { linkItem.label } + + ); + } ) } + + ) } + + + ) : null } { Platform.isWeb && ( <> { ! multiGallerySelection && ( diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 9efaf88e5acc71..025e86277f7edc 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -70,7 +70,6 @@ .gallery-image-sizes { .components-base-control__label { - display: block; margin-bottom: 4px; } diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index b79bd7c3877c7e..088a7d25282451 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -82,7 +82,7 @@ exports[`Gallery block inserts block 1`] = ` " `; -exports[`Gallery block overrides "Link to" setting of gallery items 1`] = ` +exports[`Gallery block overrides "Link" setting of gallery items 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index fd95053bea62c0..f294555e41f2c1 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -594,9 +594,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - // Test case related to TC012 - Settings - Link to + // Test case related to TC012 - Settings - Link // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012 - it( 'overrides "Link to" setting of gallery items', async () => { + it( 'overrides "Link" setting of gallery items', async () => { // Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute const screen = await initializeWithGalleryBlock( { html: ` @@ -612,10 +612,10 @@ describe( 'Gallery block', () => { } ); const { getByText } = screen; - // Set "Link to" setting via Gallery block settings + // Set "Link" setting via Gallery block settings await openBlockSettings( screen ); - fireEvent.press( getByText( 'Link to' ) ); - fireEvent.press( getByText( 'Media File' ) ); + fireEvent.press( getByText( 'Link' ) ); + fireEvent.press( getByText( 'Link images to media files' ) ); expect( getEditorHtml() ).toMatchSnapshot(); } ); diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index 1ccfa4fa89c1aa..06ed4aa1001edf 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -22,56 +22,53 @@ export { metadata, name }; export const settings = { icon, example: { - innerBlocks: [ - { - name: 'core/paragraph', - attributes: { - customTextColor: '#cf2e2e', - fontSize: 'large', - content: __( 'One.' ), - }, + attributes: { + layout: { + type: 'constrained', + justifyContent: 'center', }, - { - name: 'core/paragraph', - attributes: { - customTextColor: '#ff6900', - fontSize: 'large', - content: __( 'Two.' ), + style: { + spacing: { + padding: { + top: '4em', + right: '3em', + bottom: '4em', + left: '3em', + }, }, }, + }, + innerBlocks: [ { - name: 'core/paragraph', + name: 'core/heading', attributes: { - customTextColor: '#fcb900', - fontSize: 'large', - content: __( 'Three.' ), + content: __( 'La Mancha' ), + textAlign: 'center', }, }, { name: 'core/paragraph', attributes: { - customTextColor: '#00d084', - fontSize: 'large', - content: __( 'Four.' ), + align: 'center', + content: __( + 'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.' + ), }, }, { - name: 'core/paragraph', + name: 'core/spacer', attributes: { - customTextColor: '#0693e3', - fontSize: 'large', - content: __( 'Five.' ), + height: '10px', }, }, { - name: 'core/paragraph', + name: 'core/button', attributes: { - customTextColor: '#9b51e0', - fontSize: 'large', - content: __( 'Six.' ), + text: __( 'Read more' ), }, }, ], + viewportWidth: 600, }, transforms, edit, diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index 8589b7f73fed43..5ded2c724bfa9b 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -4,6 +4,59 @@ import { __, _x } from '@wordpress/i18n'; import { group, row, stack, grid } from '@wordpress/icons'; +const example = { + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + customTextColor: '#cf2e2e', + fontSize: 'large', + content: __( 'One.' ), + }, + }, + { + name: 'core/paragraph', + attributes: { + customTextColor: '#ff6900', + fontSize: 'large', + content: __( 'Two.' ), + }, + }, + { + name: 'core/paragraph', + attributes: { + customTextColor: '#fcb900', + fontSize: 'large', + content: __( 'Three.' ), + }, + }, + { + name: 'core/paragraph', + attributes: { + customTextColor: '#00d084', + fontSize: 'large', + content: __( 'Four.' ), + }, + }, + { + name: 'core/paragraph', + attributes: { + customTextColor: '#0693e3', + fontSize: 'large', + content: __( 'Five.' ), + }, + }, + { + name: 'core/paragraph', + attributes: { + customTextColor: '#9b51e0', + fontSize: 'large', + content: __( 'Six.' ), + }, + }, + ], +}; + const variations = [ { name: 'group', @@ -30,6 +83,7 @@ const variations = [ ( ! blockAttributes.layout?.orientation || blockAttributes.layout?.orientation === 'horizontal' ), icon: row, + example, }, { name: 'group-stack', @@ -41,6 +95,7 @@ const variations = [ blockAttributes.layout?.type === 'flex' && blockAttributes.layout?.orientation === 'vertical', icon: stack, + example, }, { name: 'group-grid', @@ -51,6 +106,7 @@ const variations = [ isActive: ( blockAttributes ) => blockAttributes.layout?.type === 'grid', icon: grid, + example, }, ]; diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 0bbe19b01098ea..6e43a18cfba452 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -21,6 +21,9 @@ "type": "number", "default": 2 }, + "levelOptions": { + "type": "array" + }, "placeholder": { "type": "string" } diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 86ac776b9b16e4..ea58a75d51cda5 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -32,7 +32,8 @@ function HeadingEdit( { style, clientId, } ) { - const { textAlign, content, level, placeholder, anchor } = attributes; + const { textAlign, content, level, levelOptions, placeholder, anchor } = + attributes; const tagName = 'h' + level; const blockProps = useBlockProps( { className: clsx( { @@ -95,6 +96,7 @@ function HeadingEdit( { setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss index d3f0b5275653e3..02651ee8495125 100644 --- a/packages/block-library/src/latest-posts/editor.scss +++ b/packages/block-library/src/latest-posts/editor.scss @@ -10,10 +10,6 @@ } .editor-latest-posts-image-alignment-control { - .components-base-control__label { - display: block; - } - .components-toolbar { border-radius: $radius-block-ui; } diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss index 07b584059203ed..4c0f80a5008a8d 100644 --- a/packages/block-library/src/media-text/style.native.scss +++ b/packages/block-library/src/media-text/style.native.scss @@ -7,6 +7,7 @@ $media-to-text: 12px; } .has-media-on-the-right { + /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */ flex-direction: row-reverse; } @@ -14,6 +15,7 @@ $media-to-text: 12px; flex-direction: column; &.has-media-on-the-right { + /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */ flex-direction: column-reverse; } } diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json index a57d45ceed1495..470bddae53bdfc 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -56,6 +56,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } } } diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 796da166710eb7..9c3ba3e214e4b1 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -63,6 +63,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "style": "wp-block-post-title" 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 81c21a236322ce..5e83ea3aaa9730 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -147,6 +147,7 @@ export default function QueryInspectorControls( props ) { { showInheritControl && ( { diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 790e09535f4b69..5e33980badd76c 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -52,6 +52,7 @@ @import "./spacer/style.scss"; @import "./tag-cloud/style.scss"; @import "./table/style.scss"; +@import "./table-of-contents/style.scss"; @import "./term-description/style.scss"; @import "./text-columns/style.scss"; @import "./verse/style.scss"; diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json index 0c9c4bb4a2868d..451d245d867b07 100644 --- a/packages/block-library/src/table-of-contents/block.json +++ b/packages/block-library/src/table-of-contents/block.json @@ -48,7 +48,20 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, - "example": {} + "example": {}, + "style": "wp-block-table-of-contents" } diff --git a/packages/block-library/src/table-of-contents/style.scss b/packages/block-library/src/table-of-contents/style.scss new file mode 100644 index 00000000000000..4a3fbb6108bee5 --- /dev/null +++ b/packages/block-library/src/table-of-contents/style.scss @@ -0,0 +1,4 @@ +:root :where(.wp-block-table-of-contents) { + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; +} diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index bfdeadab4d3322..792939356b1de9 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -57,10 +57,6 @@ } .editor-video-poster-control { - .components-base-control__label { - display: block; - } - .components-button { margin-right: $grid-unit-10; } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f8666e96a20a15..327f80ba2468ed 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,11 +4,13 @@ ### Bug Fixes +- `ColorPalette`: Remove extra bottom margin when `CircularOptionPicker` is unneeded ([#63961](https://github.com/WordPress/gutenberg/pull/63961)). - `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)). ### Internal - `DropdownMenuV2`: break menu item help text on multiple lines for better truncation. ([#63916](https://github.com/WordPress/gutenberg/pull/63916)). +- `CustomSelectControl`: Support generic props type ([#63985](https://github.com/WordPress/gutenberg/pull/63985)). ## 28.4.0 (2024-07-24) @@ -18,6 +20,7 @@ ### Bug Fixes +- `BaseControl`: change label's `display` to `block`. ([#63911](https://github.com/WordPress/gutenberg/pull/63911)) - `ComboboxControl`: Fix ComboboxControl reset button when using the keyboard. ([#63410](https://github.com/WordPress/gutenberg/pull/63410)) - `Button`: Never apply `aria-disabled` to anchor ([#63376](https://github.com/WordPress/gutenberg/pull/63376)). - `SelectControl`: Fix hover/focus color in wp-admin ([#63855](https://github.com/WordPress/gutenberg/pull/63855)). diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts index 6ddfe10229fdbb..d633fcdd7e7a77 100644 --- a/packages/components/src/base-control/styles/base-control-styles.ts +++ b/packages/components/src/base-control/styles/base-control-styles.ts @@ -37,7 +37,7 @@ export const StyledField = styled.div` const labelStyles = css` ${ baseLabelTypography }; - display: inline-block; + display: block; margin-bottom: ${ space( 2 ) }; /** * Removes Chrome/Safari/Firefox user agent stylesheet padding from diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 6a8892e78ef553..28669ebf3ccc78 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -16,10 +16,6 @@ import { import type { Border } from './types'; -const labelStyles = css` - font-weight: 500; -`; - const focusBoxShadow = css` box-shadow: inset ${ CONFIG.controlBoxShadowFocus }; `; @@ -140,7 +136,6 @@ export const borderControlPopoverControls = css` > div:first-of-type > ${ StyledLabel } { margin-bottom: 0; - ${ labelStyles } } && ${ StyledLabel } + button:not( .has-text ) { diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index 1c1bb1204afef2..c744faee9b0c3f 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -335,26 +335,28 @@ function UnforwardedColorPalette( ) } /> ) } - - ) : ( - - ) - } - /> + { ( colors.length > 0 || actions ) && ( + + ) : ( + + ) + } + /> + ) } ); } diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx index 8735b8d320991e..ecd9dc37a8f491 100644 --- a/packages/components/src/custom-select-control/index.tsx +++ b/packages/components/src/custom-select-control/index.tsx @@ -16,13 +16,13 @@ import { __, sprintf } from '@wordpress/i18n'; import _CustomSelect from '../custom-select-control-v2/custom-select'; import CustomSelectItem from '../custom-select-control-v2/item'; import * as Styled from '../custom-select-control-v2/styles'; -import type { CustomSelectProps } from './types'; +import type { CustomSelectProps, CustomSelectOption } from './types'; import { VisuallyHidden } from '../visually-hidden'; -function useDeprecatedProps( { +function useDeprecatedProps< T extends CustomSelectOption >( { __experimentalShowSelectedHint, ...otherProps -}: CustomSelectProps ) { +}: CustomSelectProps< T > ) { return { showSelectedHint: __experimentalShowSelectedHint, ...otherProps, @@ -35,7 +35,7 @@ function useDeprecatedProps( { function applyOptionDeprecations( { __experimentalHint, ...rest -}: CustomSelectProps[ 'options' ][ number ] ) { +}: CustomSelectOption ) { return { hint: __experimentalHint, ...rest, @@ -51,7 +51,9 @@ function getDescribedBy( currentValue: string, describedBy?: string ) { return sprintf( __( 'Currently selected: %s' ), currentValue ); } -function CustomSelectControl( props: CustomSelectProps ) { +function CustomSelectControl< T extends CustomSelectOption >( + props: CustomSelectProps< T > +) { const { __next40pxDefaultSize = false, describedBy, diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts index 98e9633b02f1a8..e37ba349a2b843 100644 --- a/packages/components/src/custom-select-control/types.ts +++ b/packages/components/src/custom-select-control/types.ts @@ -6,7 +6,7 @@ import type { FocusEventHandler, MouseEventHandler } from 'react'; /** * The object structure for the options array. */ -type Option = { +export type CustomSelectOption = { key: string; name: string; style?: React.CSSProperties; @@ -24,15 +24,15 @@ type Option = { /** * The object returned from the onChange event. */ -type ChangeObject = { +type CustomSelectChangeObject< T extends CustomSelectOption > = { highlightedIndex?: number; inputValue?: string; isOpen?: boolean; type?: string; - selectedItem: Option; + selectedItem: T; }; -export type CustomSelectProps = { +export type CustomSelectProps< T extends CustomSelectOption > = { /** * Optional classname for the component. */ @@ -55,7 +55,7 @@ export type CustomSelectProps = { * Function called with the control's internal state changes. The `selectedItem` * property contains the next selected item. */ - onChange?: ( newValue: ChangeObject ) => void; + onChange?: ( newValue: CustomSelectChangeObject< T > ) => void; /** * A handler for `blur` events on the trigger button. * @@ -83,7 +83,7 @@ export type CustomSelectProps = { /** * The list of options that can be chosen from. */ - options: Array< Option >; + options: Array< T >; /** * The size of the control. * @@ -93,7 +93,7 @@ export type CustomSelectProps = { /** * Can be used to externally control the value of the control. */ - value?: Option; + value?: T; /** * Use the `showSelectedHint` property instead. * @deprecated diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx index f0f800514a411f..8a90fe4561bff4 100644 --- a/packages/components/src/form-toggle/index.tsx +++ b/packages/components/src/form-toggle/index.tsx @@ -17,26 +17,7 @@ import type { WordPressComponentProps } from '../context'; export const noop = () => {}; -/** - * FormToggle switches a single setting on or off. - * - * ```jsx - * import { FormToggle } from '@wordpress/components'; - * import { useState } from '@wordpress/element'; - * - * const MyFormToggle = () => { - * const [ isChecked, setChecked ] = useState( true ); - * - * return ( - * setChecked( ( state ) => ! state ) } - * /> - * ); - * }; - * ``` - */ -export function FormToggle( +function UnforwardedFormToggle( props: WordPressComponentProps< FormToggleProps, 'input', false >, ref: ForwardedRef< HTMLInputElement > ) { @@ -71,4 +52,25 @@ export function FormToggle( ); } -export default forwardRef( FormToggle ); +/** + * FormToggle switches a single setting on or off. + * + * ```jsx + * import { FormToggle } from '@wordpress/components'; + * import { useState } from '@wordpress/element'; + * + * const MyFormToggle = () => { + * const [ isChecked, setChecked ] = useState( true ); + * + * return ( + * setChecked( ( state ) => ! state ) } + * /> + * ); + * }; + * ``` + */ +export const FormToggle = forwardRef( UnforwardedFormToggle ); + +export default FormToggle; diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx index 89ef34f6d6e5e6..2c405352ab215f 100644 --- a/packages/components/src/toggle-control/index.tsx +++ b/packages/components/src/toggle-control/index.tsx @@ -23,27 +23,7 @@ import { HStack } from '../h-stack'; import { useCx } from '../utils'; import { space } from '../utils/space'; -/** - * ToggleControl is used to generate a toggle user interface. - * - * ```jsx - * import { ToggleControl } from '@wordpress/components'; - * import { useState } from '@wordpress/element'; - * - * const MyToggleControl = () => { - * const [ value, setValue ] = useState( false ); - * - * return ( - * setValue( ( state ) => ! state ) } - * /> - * ); - * }; - * ``` - */ -export function ToggleControl( +function UnforwardedToggleControl( { __nextHasNoMarginBottom, label, @@ -121,4 +101,26 @@ export function ToggleControl( ); } -export default forwardRef( ToggleControl ); +/** + * ToggleControl is used to generate a toggle user interface. + * + * ```jsx + * import { ToggleControl } from '@wordpress/components'; + * import { useState } from '@wordpress/element'; + * + * const MyToggleControl = () => { + * const [ value, setValue ] = useState( false ); + * + * return ( + * setValue( ( state ) => ! state ) } + * /> + * ); + * }; + * ``` + */ +export const ToggleControl = forwardRef( UnforwardedToggleControl ); + +export default ToggleControl; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index cdfa4b1883cc16..908e15927e3b86 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -33,7 +33,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } @@ -369,7 +369,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } @@ -593,7 +593,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } @@ -923,7 +923,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts index 9a9b2ef5100784..7eb67973c67281 100644 --- a/packages/core-data/src/private-selectors.ts +++ b/packages/core-data/src/private-selectors.ts @@ -73,3 +73,22 @@ export const getEntityRecordsPermissions = createRegistrySelector( ( select ) => ( state ) => [ state.userPermissions ] ) ); + +/** + * Returns the entity record permissions for the given entity record id. + * + * @param state Data state. + * @param kind Entity kind. + * @param name Entity name. + * @param id Entity record id. + * + * @return The entity record permissions. + */ +export function getEntityRecordPermissions( + state: State, + kind: string, + name: string, + id: string +) { + return getEntityRecordsPermissions( state, kind, name, [ id ] )[ 0 ]; +} diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx index 42a6766813975e..bd38dca472af0e 100644 --- a/packages/dataviews/src/components/dataform/index.tsx +++ b/packages/dataviews/src/components/dataform/index.tsx @@ -9,7 +9,9 @@ import type { Dispatch, SetStateAction } from 'react'; import { TextControl, __experimentalNumberControl as NumberControl, + SelectControl, } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; import { useCallback, useMemo } from '@wordpress/element'; /** @@ -65,8 +67,7 @@ function DataFormNumberControl< Item >( { onChange, }: DataFormControlProps< Item > ) { const { id, label, description } = field; - const value = field.getValue( { item: data } ); - + const value = field.getValue( { item: data } ) ?? ''; const onChangeControl = useCallback( ( newValue: string | undefined ) => onChange( ( prevItem: Item ) => ( { @@ -76,6 +77,29 @@ function DataFormNumberControl< Item >( { [ id, onChange ] ); + if ( field.elements ) { + const elements = [ + /* + * Value can be undefined when: + * + * - the field is not required + * - in bulk editing + * + */ + { label: __( 'Select item' ), value: '' }, + ...field.elements, + ]; + + return ( + + ); + } + return ( { const [ post, setPost ] = useState( { title: 'Hello, World!', order: 2, + author: 1, } ); const form = { - visibleFields: [ 'title', 'order' ], + visibleFields: [ 'title', 'order', 'author' ], }; return ( diff --git a/packages/dataviews/src/test/validation.ts b/packages/dataviews/src/test/validation.ts index d90d4744ac3272..ded002e5bc042e 100644 --- a/packages/dataviews/src/test/validation.ts +++ b/packages/dataviews/src/test/validation.ts @@ -60,4 +60,21 @@ describe( 'validation', () => { const result = isItemValid( item, fields, form ); expect( result ).toBe( false ); } ); + + it( 'field is invalid if value is not one of the elements', () => { + const item = { id: 1, author: 3 }; + const fields: Field< {} >[] = [ + { + id: 'author', + type: 'integer', + elements: [ + { value: 1, label: 'Jane' }, + { value: 2, label: 'John' }, + ], + }, + ]; + const form = { visibleFields: [ 'author' ] }; + const result = isItemValid( item, fields, form ); + expect( result ).toBe( false ); + } ); } ); diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts index 5b20d094a41861..a6d3515fe6e57e 100644 --- a/packages/dataviews/src/validation.ts +++ b/packages/dataviews/src/validation.ts @@ -27,6 +27,13 @@ export function isItemValid< Item >( return false; } + if ( field.elements ) { + const validValues = field.elements.map( ( f ) => f.value ); + if ( ! validValues.includes( Number( value ) ) ) { + return false; + } + } + // Nothing to validate. return true; } ); 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 ece57f92237fb9..acca656428d187 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 @@ -11,7 +11,6 @@ import { __experimentalVStack as VStack, __experimentalSpacer as Spacer, __experimentalItemGroup as ItemGroup, - __experimentalHeading as Heading, __experimentalInputControl as InputControl, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, @@ -395,13 +394,14 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) { ); } } renderContent={ () => ( - -
- -
+ + ) } /> @@ -421,71 +421,64 @@ function ShadowPopover( { shadowObj, onChange } ) { }; return ( -
- - { __( 'Shadow' ) } -
- - onShadowChange( 'color', value ) - } - /> -
- - onShadowChange( 'inset', value === 'inset' ) - } - hideLabelFromVision - __next40pxDefaultSize - > - - - - - onShadowChange( 'x', value ) } - /> - onShadowChange( 'y', value ) } - /> - - onShadowChange( 'blur', value ) - } - /> - - onShadowChange( 'spread', value ) - } - /> - - -
+ + onShadowChange( 'color', value ) } + /> + + onShadowChange( 'inset', value === 'inset' ) + } + hideLabelFromVision + __next40pxDefaultSize + > + + + + + onShadowChange( 'x', value ) } + /> + onShadowChange( 'y', value ) } + /> + onShadowChange( 'blur', value ) } + /> + onShadowChange( 'spread', value ) } + /> + + ); } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 48a12081e98178..f85d69ad864ad8 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -135,16 +135,13 @@ } } -.edit-site-global-styles__shadow-editor-panel { +.edit-site-global-styles__shadow-editor__dropdown-content { width: 280px; - padding: $grid-unit-20; +} + +.edit-site-global-styles__shadow-editor-panel { // because tooltip of the range control is too close to the edge and creates overflow margin-bottom: $grid-unit-05; - - & .edit-site-global-styles__shadow-editor-color-palette { - // color palette adds empty .components-circular-option-picker - margin-bottom: -1 * $grid-unit-05; - } } .edit-site-global-styles__shadow-editor__dropdown { diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index ecbc6adee75587..2947088bb19b5f 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -5,6 +5,7 @@ import { parse } from '@wordpress/blocks'; import { useSelect, createSelector } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -260,7 +261,7 @@ export const usePatterns = ( categoryId, { search = '', syncStatus } = {} ) => { - return useSelect( + const { patterns, ...rest } = useSelect( ( select ) => { if ( postType === TEMPLATE_PART_POST_TYPE ) { return selectTemplateParts( select, categoryId, search ); @@ -283,6 +284,35 @@ export const usePatterns = ( }, [ categoryId, postType, search, syncStatus ] ); + + const ids = useMemo( + () => patterns?.map( ( record ) => record.id ) ?? [], + [ patterns ] + ); + + const permissions = useSelect( + ( select ) => { + const { getEntityRecordsPermissions } = unlock( + select( coreStore ) + ); + return getEntityRecordsPermissions( 'postType', postType, ids ); + }, + [ ids, postType ] + ); + + const patternsWithPermissions = useMemo( + () => + patterns?.map( ( record, index ) => ( { + ...record, + permissions: permissions[ index ], + } ) ) ?? [], + [ patterns, permissions ] + ); + + return { + ...rest, + patterns: patternsWithPermissions, + }; }; export default usePatterns; diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 9c5db8fb1699d5..05c3b9673eaf98 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useState, useMemo, useCallback, useEffect } from '@wordpress/element'; -import { useEntityRecords } from '@wordpress/core-data'; +import { privateApis as corePrivateApis } from '@wordpress/core-data'; import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; @@ -31,6 +31,7 @@ import { const { usePostActions } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useEntityRecordsWithPermissions } = unlock( corePrivateApis ); const EMPTY_ARRAY = []; @@ -134,13 +135,10 @@ export default function PageTemplates() { } ) ); }, [ activeView ] ); - const { records, isResolving: isLoadingData } = useEntityRecords( - 'postType', - TEMPLATE_POST_TYPE, - { + const { records, isResolving: isLoadingData } = + useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, { per_page: -1, - } - ); + } ); const history = useHistory(); const onChangeSelection = useCallback( ( items ) => { diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss index f3d596cc90f18e..067720ad9a1e97 100644 --- a/packages/edit-site/src/components/page-templates/style.scss +++ b/packages/edit-site/src/components/page-templates/style.scss @@ -52,7 +52,13 @@ } .page-templates-description { - white-space: normal; + max-width: 50em; + text-wrap: balance; // Fallback for Safari + text-wrap: pretty; + + .dataviews-view-table & { + margin-bottom: $grid-unit-10; + } } .edit-site-page-templates { diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 21dbb10e514660..f8519470749a94 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -7,7 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { DataForm } from '@wordpress/dataviews'; +import { DataForm, isItemValid } from '@wordpress/dataviews'; import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; import { store as coreDataStore } from '@wordpress/core-data'; import { Button } from '@wordpress/components'; @@ -42,7 +42,7 @@ function PostEditForm( { postType, postId } ) { const { saveEntityRecord } = useDispatch( coreDataStore ); const { fields } = usePostFields(); const form = { - visibleFields: [ 'title' ], + visibleFields: [ 'title', 'author' ], }; const [ edits, setEdits ] = useState( {} ); const itemWithEdits = useMemo( () => { @@ -53,6 +53,11 @@ function PostEditForm( { postType, postId } ) { }, [ initialEdits, edits ] ); const onSubmit = async ( event ) => { event.preventDefault(); + + if ( ! isItemValid( itemWithEdits, fields, form ) ) { + return; + } + const { getEntityRecord } = registry.resolveSelect( coreDataStore ); for ( const id of ids ) { const item = await getEntityRecord( 'postType', postType, id ); @@ -64,6 +69,7 @@ function PostEditForm( { postType, postId } ) { setEdits( {} ); }; + const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form ); return (
- diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index f4e8e553c8fa47..ebd228dcf63aa0 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -235,7 +235,7 @@ function usePostFields( viewType ) { { label: __( 'Author' ), id: 'author', - getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name, + type: 'integer', elements: authors?.map( ( { id, name } ) => ( { value: id, @@ -292,19 +292,13 @@ function usePostFields( viewType ) { ); } - // Pending & Published posts show the modified date if it's newer. - const dateToDisplay = - getDate( item.modified ) > getDate( item.date ) - ? item.modified - : item.date; - - const isPending = item.status === 'pending'; - if ( isPending ) { + const isPublished = item.status === 'publish'; + if ( isPublished ) { return createInterpolateElement( sprintf( - /* translators: %s: the newest of created or modified date for the page */ - __( 'Modified: ' ), - getFormattedDate( dateToDisplay ) + /* translators: %s: page creation time */ + __( 'Published: ' ), + getFormattedDate( item.date ) ), { span: , @@ -313,12 +307,18 @@ function usePostFields( viewType ) { ); } - const isPublished = item.status === 'publish'; - if ( isPublished ) { + // Pending posts show the modified date if it's newer. + const dateToDisplay = + getDate( item.modified ) > getDate( item.date ) + ? item.modified + : item.date; + + const isPending = item.status === 'pending'; + if ( isPending ) { return createInterpolateElement( sprintf( /* translators: %s: the newest of created or modified date for the page */ - __( 'Published: ' ), + __( 'Modified: ' ), getFormattedDate( dateToDisplay ) ), { diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 82b94504e63a9b..7ee8eed375f9a9 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -13,6 +13,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { getCategories, + getBlockType, getBlockTypes, getBlockFromExample, createBlock, @@ -128,41 +129,7 @@ function isObjectEmpty( object ) { } function getExamples() { - // Use our own example for the Heading block so that we can show multiple - // heading levels. - const headingsExample = { - name: 'core/heading', - title: __( 'Headings' ), - category: 'text', - blocks: [ - createBlock( 'core/heading', { - content: __( 'Heading 1' ), - level: 1, - } ), - createBlock( 'core/heading', { - content: __( 'Heading 2' ), - level: 2, - } ), - createBlock( 'core/heading', { - content: __( 'Heading 3' ), - level: 3, - } ), - createBlock( 'core/heading', { - content: __( 'Heading 4' ), - level: 4, - } ), - createBlock( 'core/heading', { - content: __( 'Heading 5' ), - level: 5, - } ), - createBlock( 'core/heading', { - content: __( 'Heading 6' ), - level: 6, - } ), - ], - }; - - const otherExamples = getBlockTypes() + const nonHeadingBlockExamples = getBlockTypes() .filter( ( blockType ) => { const { name, example, supports } = blockType; return ( @@ -178,7 +145,31 @@ function getExamples() { blocks: getBlockFromExample( blockType.name, blockType.example ), } ) ); - return [ headingsExample, ...otherExamples ]; + const isHeadingBlockRegistered = !! getBlockType( 'core/heading' ); + + if ( ! isHeadingBlockRegistered ) { + return nonHeadingBlockExamples; + } + + // Use our own example for the Heading block so that we can show multiple + // heading levels. + const headingsExample = { + name: 'core/heading', + title: __( 'Headings' ), + category: 'text', + blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => { + return createBlock( 'core/heading', { + content: sprintf( + // translators: %d: heading level e.g: "1", "2", "3" + __( 'Heading %d' ), + level + ), + level, + } ); + } ), + }; + + return [ headingsExample, ...nonHeadingBlockExamples ]; } function StyleBook( { diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index 190b8ea6ca32f5..47e49fb8f8f1da 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -3,7 +3,7 @@ */ import { external, trash, backup } from '@wordpress/icons'; import { addQueryArgs } from '@wordpress/url'; -import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { decodeEntities } from '@wordpress/html-entities'; import { store as coreStore } from '@wordpress/core-data'; import { __, _n, sprintf, _x } from '@wordpress/i18n'; @@ -88,7 +88,10 @@ const trashPostAction = { isPrimary: true, icon: trash, isEligible( item ) { - return ! [ 'auto-draft', 'trash' ].includes( item.status ); + return ( + ! [ 'auto-draft', 'trash' ].includes( item.status ) && + item.permissions?.delete + ); }, supportsBulk: true, hideModalHeader: true, @@ -240,40 +243,12 @@ const trashPostAction = { }, }; -function useCanUserEligibilityCheckPostType( capability, postType, action ) { - const registry = useRegistry(); - return useMemo( - () => ( { - ...action, - isEligible( item ) { - return ( - action.isEligible( item ) && - registry.select( coreStore ).canUser( capability, { - kind: 'postType', - name: postType, - id: item.id, - } ) - ); - }, - } ), - [ action, registry, capability, postType ] - ); -} - -function useTrashPostAction( postType ) { - return useCanUserEligibilityCheckPostType( - 'delete', - postType, - trashPostAction - ); -} - const permanentlyDeletePostAction = { id: 'permanently-delete', label: __( 'Permanently delete' ), supportsBulk: true, - isEligible( { status } ) { - return status === 'trash'; + isEligible( { status, permissions } ) { + return status === 'trash' && permissions?.delete; }, async callback( posts, { registry, onActionPerformed } ) { const { createSuccessNotice, createErrorNotice } = @@ -359,22 +334,14 @@ const permanentlyDeletePostAction = { }, }; -function usePermanentlyDeletePostAction( postType ) { - return useCanUserEligibilityCheckPostType( - 'delete', - postType, - permanentlyDeletePostAction - ); -} - const restorePostAction = { id: 'restore', label: __( 'Restore' ), isPrimary: true, icon: backup, supportsBulk: true, - isEligible( { status } ) { - return status === 'trash'; + isEligible( { status, permissions } ) { + return status === 'trash' && permissions?.update; }, async callback( posts, { registry, onActionPerformed } ) { const { createSuccessNotice, createErrorNotice } = @@ -474,14 +441,6 @@ const restorePostAction = { }, }; -function useRestorePostAction( postType ) { - return useCanUserEligibilityCheckPostType( - 'update', - postType, - restorePostAction - ); -} - const viewPostAction = { id: 'view-post', label: __( 'View' ), @@ -548,11 +507,15 @@ const renamePostAction = { ...Object.values( PATTERN_TYPES ), ].includes( post.type ) ) { - return true; + return post.permissions?.update; } // In the case of templates, we can only rename custom templates. if ( post.type === TEMPLATE_POST_TYPE ) { - return isTemplateRemovable( post ) && post.is_custom; + return ( + isTemplateRemovable( post ) && + post.is_custom && + post.permissions?.update + ); } // Make necessary checks for template parts and patterns. const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE; @@ -564,7 +527,7 @@ const renamePostAction = { isUserPattern || ( isTemplatePart && post.source === TEMPLATE_ORIGINS.custom ); const hasThemeFile = post?.has_theme_file; - return isCustomPattern && ! hasThemeFile; + return isCustomPattern && ! hasThemeFile && post.permissions?.update; }, RenderModal: ( { items, closeModal, onActionPerformed } ) => { const [ item ] = items; @@ -635,14 +598,6 @@ const renamePostAction = { }, }; -function useRenamePostAction( postType ) { - return useCanUserEligibilityCheckPostType( - 'update', - postType, - renamePostAction - ); -} - function ReorderModal( { items, closeModal, onActionPerformed } ) { const [ item, setItem ] = useState( items[ 0 ] ); const orderInput = item.menu_order; @@ -1004,11 +959,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) { ); const duplicatePostAction = useDuplicatePostAction( postType ); - const trashPostActionForPostType = useTrashPostAction( postType ); - const permanentlyDeletePostActionForPostType = - usePermanentlyDeletePostAction( postType ); - const renamePostActionForPostType = useRenamePostAction( postType ); - const restorePostActionForPostType = useRestorePostAction( postType ); const reorderPagesAction = useReorderPagesAction( postType ); const isTemplateOrTemplatePart = [ TEMPLATE_POST_TYPE, @@ -1035,14 +985,13 @@ export function usePostActions( { postType, onActionPerformed, context } ) { userCanCreatePostType && duplicateTemplatePartAction, isPattern && userCanCreatePostType && duplicatePatternAction, - supportsTitle && renamePostActionForPostType, + supportsTitle && renamePostAction, reorderPagesAction, - ! isTemplateOrTemplatePart && restorePostActionForPostType, + ! isTemplateOrTemplatePart && ! isPattern && restorePostAction, + ! isTemplateOrTemplatePart && ! isPattern && trashPostAction, ! isTemplateOrTemplatePart && ! isPattern && - trashPostActionForPostType, - ! isTemplateOrTemplatePart && - permanentlyDeletePostActionForPostType, + permanentlyDeletePostAction, ...defaultActions, ].filter( Boolean ); // Filter actions based on provided context. If not provided @@ -1117,10 +1066,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) { postTypeObject?.viewable, duplicatePostAction, reorderPagesAction, - trashPostActionForPostType, - restorePostActionForPostType, - renamePostActionForPostType, - permanentlyDeletePostActionForPostType, onActionPerformed, isLoaded, supportsRevisions, diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js index b2730e760c4270..5b023956178938 100644 --- a/packages/editor/src/components/post-actions/index.js +++ b/packages/editor/src/components/post-actions/index.js @@ -29,26 +29,38 @@ const { export default function PostActions( { onActionPerformed, buttonProps } ) { const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false ); - const { item, postType } = useSelect( ( select ) => { + const { item, permissions, postType } = useSelect( ( select ) => { const { getCurrentPostType, getCurrentPostId } = select( editorStore ); - const { getEditedEntityRecord } = select( coreStore ); + const { getEditedEntityRecord, getEntityRecordPermissions } = unlock( + select( coreStore ) + ); const _postType = getCurrentPostType(); + const _id = getCurrentPostId(); return { - item: getEditedEntityRecord( + item: getEditedEntityRecord( 'postType', _postType, _id ), + permissions: getEntityRecordPermissions( 'postType', _postType, - getCurrentPostId() + _id ), postType: _postType, }; }, [] ); + const itemWithPermissions = useMemo( () => { + return { + ...item, + permissions, + }; + }, [ item, permissions ] ); const allActions = usePostActions( { postType, onActionPerformed } ); const actions = useMemo( () => { return allActions.filter( ( action ) => { - return ! action.isEligible || action.isEligible( item ); + return ( + ! action.isEligible || action.isEligible( itemWithPermissions ) + ); } ); - }, [ allActions, item ] ); + }, [ allActions, itemWithPermissions ] ); return ( { setIsActionsMenuOpen( false ); } } diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index 7f31c97018d092..42fc0f7fe0f245 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -22,7 +22,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } @@ -214,7 +214,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc font-weight: 500; line-height: 1.4; text-transform: uppercase; - display: inline-block; + display: block; margin-bottom: calc(4px * 2); padding: 0; } diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index bc652ea4015c11..e8c48a739d29ba 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -6,11 +6,12 @@ import { DropdownMenu, MenuGroup, MenuItem, + MenuItemsChoice, VisuallyHidden, Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { check, desktop, mobile, tablet, external } from '@wordpress/icons'; +import { desktop, mobile, tablet, external } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -20,6 +21,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ import { store as editorStore } from '../../store'; import PostPreviewButton from '../post-preview-button'; +import { speak } from '@wordpress/a11y'; export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } = @@ -62,6 +64,61 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { desktop, }; + /** + * The choices for the device type. + * + * @type {Array} + */ + const choices = [ + { + value: 'Desktop', + label: __( 'Desktop' ), + icon: desktop, + }, + { + value: 'Tablet', + label: __( 'Tablet' ), + icon: tablet, + }, + { + value: 'Mobile', + label: __( 'Mobile' ), + icon: mobile, + }, + ]; + + /** + * The selected choice. + * + * @type {Object} + */ + let selectedChoice = choices.find( + ( choice ) => choice.value === deviceType + ); + + /** + * If no selected choice is found, default to the first + */ + if ( ! selectedChoice ) { + selectedChoice = choices[ 0 ]; + } + + /** + * Handles the selection of a device type. + * + * @param {string} value The device type. + */ + const onSelect = ( value ) => { + setDeviceType( value ); + if ( value === 'Desktop' ) { + speak( __( 'Desktop selected' ), 'assertive' ); + } else if ( value === 'Tablet' ) { + speak( __( 'Tablet selected' ), 'assertive' ); + } else { + speak( __( 'Mobile selected' ), 'assertive' ); + } + }; + return ( ( <> - setDeviceType( 'Desktop' ) } - icon={ deviceType === 'Desktop' && check } - > - { __( 'Desktop' ) } - - setDeviceType( 'Tablet' ) } - icon={ deviceType === 'Tablet' && check } - > - { __( 'Tablet' ) } - - setDeviceType( 'Mobile' ) } - icon={ deviceType === 'Mobile' && check } - > - { __( 'Mobile' ) } - + { isTemplate && ( @@ -118,6 +162,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { className="editor-preview-dropdown__button-external" role="menuitem" forceIsAutosaveable={ forceIsAutosaveable } + aria-label={ __( 'Preview in new tab' ) } textContent={ <> { __( 'Preview in new tab' ) } diff --git a/packages/element/src/react.js b/packages/element/src/react.js index dfe776370b2d32..cf2f9614bc3316 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -54,12 +54,26 @@ import { */ /** - * Object containing a React synthetic event. + * Object containing a React ref object. * * @template T * @typedef {import('react').RefObject} RefObject */ +/** + * Object containing a React ref callback. + * + * @template T + * @typedef {import('react').RefCallback} RefCallback + */ + +/** + * Object containing a React ref. + * + * @template T + * @typedef {import('react').Ref} Ref + */ + /** * Object that provides utilities for dealing with React children. */ diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 627e1e966b655c..794af776c88e76 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -76,19 +76,19 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { event.preventDefault(); } } > - + setWidth( newWidth ) } + size="__unstable-large" />