From c14c434a5353fcd3db0a23b1daf3c9db0369fb08 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 26 Jun 2024 11:18:20 +0100 Subject: [PATCH 01/10] Fix filter chip contrast (#62865) Co-authored-by: jameskoster Co-authored-by: jasmussen Co-authored-by: annezazu Co-authored-by: joedolson --- packages/dataviews/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 5844e0c9133369..20190623a3da81 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -759,7 +759,7 @@ padding: 0 $grid-unit-15; height: $grid-unit-40; background: $gray-100; - color: $gray-700; + color: $gray-800; position: relative; display: flex; align-items: center; From 3f0c4e09ba3e34718cc2b2ac8bc8ddff8e668754 Mon Sep 17 00:00:00 2001 From: Marcin Pietrzak Date: Wed, 26 Jun 2024 12:26:49 +0200 Subject: [PATCH 02/10] Editor: Translation should depend on number of items (#62857) Co-authored-by: iworks Co-authored-by: Mamaduka Co-authored-by: ellatrix --- packages/editor/src/components/post-actions/actions.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index edf67bb1da9244..0783478126a1eb 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -223,7 +223,11 @@ const trashPostAction = { } else if ( items[ 0 ].type === 'page' ) { successMessage = sprintf( /* translators: The number of items. */ - __( '%s items moved to trash.' ), + _n( + '%s item moved to trash.', + '%s items moved to trash.', + items.length + ), items.length ); } else { From 59e38b2133bed3352fa7024cef1d0e26ce3a779c Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Wed, 26 Jun 2024 16:06:47 +0530 Subject: [PATCH 03/10] Patterns Explorer: Makes the pagination items horizontally stacked on larger screens only * Adds CSS to make the Patterns Explorer pagination items horizontally stacked on larger screens * Stacks the pagination items vertically in catogories list Co-authored-by: amitraj2203 Co-authored-by: afercia --- .../block-patterns-paging/style.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss index ce57f96cd327a5..383d4d72a8e38a 100644 --- a/packages/block-editor/src/components/block-patterns-paging/style.scss +++ b/packages/block-editor/src/components/block-patterns-paging/style.scss @@ -42,4 +42,22 @@ } } } + + @media screen and (min-width: $break-large) { + .block-editor-patterns__grid-pagination { + flex-direction: row; + .block-editor-patterns__grid-pagination-previous, + .block-editor-patterns__grid-pagination-next { + flex-direction: row; + } + } + } +} + +.block-editor-block-patterns-list .block-editor-patterns__grid-pagination { + flex-direction: column; + .block-editor-patterns__grid-pagination-previous, + .block-editor-patterns__grid-pagination-next { + flex-direction: column; + } } From 2972e37b2c61bf195bbd96fa4e9f7aebc9fbfdb2 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 26 Jun 2024 21:45:35 +0900 Subject: [PATCH 04/10] Featured Image Panel: Align text and icons horizontally to avoid clipping (#62842) * Featured Image Panel: Align text and icons horizontally to avoid clipping * Apply rounded corner to drop zone Co-authored-by: t-hamano Co-authored-by: jasmussen Co-authored-by: annezazu --- .../src/components/post-featured-image/style.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 052f6943012595..d3a4fbbcaef689 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -20,6 +20,21 @@ opacity: 1; } } + + .components-drop-zone__content { + border-radius: $radius-block-ui; + } + + // Align text and icons horizontally to avoid clipping when the featured image is not set. + &:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner { + display: flex; + align-items: center; + gap: $grid-unit-10; + + .components-drop-zone__content-icon { + margin: 0; + } + } } .editor-post-featured-image__toggle, From 2be17bbda1bd81010f004d30115d418902fa1b1c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 26 Jun 2024 17:19:46 +0200 Subject: [PATCH 05/10] CustomSelectControlV2: Add root element wrapper (#62803) * Add root element wrapper * Add legacy root className + ability to pass one externally * CHANGELOG --- Co-authored-by: ciampo Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 4 ++++ .../src/custom-select-control-v2/custom-select.tsx | 6 ++++-- .../src/custom-select-control-v2/legacy-component/index.tsx | 6 ++++++ packages/components/src/custom-select-control-v2/types.ts | 4 ++++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index cbf32c9eab93ba..708fd49b13ed43 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803)) + ## 28.2.0 (2024-06-26) ### Enhancements diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx index 414a805eccfb1a..f76c7f67ea77b4 100644 --- a/packages/components/src/custom-select-control-v2/custom-select.tsx +++ b/packages/components/src/custom-select-control-v2/custom-select.tsx @@ -88,11 +88,13 @@ function _CustomSelect( label, size, store, + className, ...restProps } = props; return ( - <> + // Where should `restProps` be forwarded to? +
{ hideLabelFromVision ? ( // TODO: Replace with BaseControl { label } ) : ( @@ -116,7 +118,7 @@ function _CustomSelect( - +
); } diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index e2b9a8a7471e5f..209483775db9e4 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -3,6 +3,7 @@ */ // eslint-disable-next-line no-restricted-imports import * as Ariakit from '@ariakit/react'; +import clsx from 'clsx'; /** * Internal dependencies @@ -21,6 +22,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { onChange, size = 'default', value, + className: classNameProp, ...restProps } = props; @@ -122,6 +124,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { } size={ translatedSize } store={ store } + className={ clsx( + 'components-custom-select-control', + classNameProp + ) } { ...restProps } > { children } diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts index 12b41ba54f4a20..3c192cfa56711f 100644 --- a/packages/components/src/custom-select-control-v2/types.ts +++ b/packages/components/src/custom-select-control-v2/types.ts @@ -50,6 +50,10 @@ export type CustomSelectButtonProps = { }; export type _CustomSelectProps = CustomSelectButtonProps & { + /** + * Additional className added to the root wrapper element. + */ + className?: string; /** * The child elements. This should be composed of `CustomSelectItem` components. */ From 4ef2a6206da8dd1ff02693e08506b370bad6552a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 26 Jun 2024 18:00:24 +0200 Subject: [PATCH 06/10] CustomSelectControlV2: fix popover styles (#62821) * Set max height and overflow behaviour * add z-index matching legacy popover * CHANGELOG * Remove extra prop, revert to 400px * Switch to flexbox * Better z-index comment --- Co-authored-by: ciampo Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../src/custom-select-control-v2/styles.ts | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 708fd49b13ed43..7d84ff872be224 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Internal - `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803)) +- `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821)) ## 28.2.0 (2024-06-26) diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts index c75a9a79c71c5f..683bb1d157994d 100644 --- a/packages/components/src/custom-select-control-v2/styles.ts +++ b/packages/components/src/custom-select-control-v2/styles.ts @@ -105,10 +105,20 @@ export const Select = styled( Ariakit.Select, { } ); export const SelectPopover = styled( Ariakit.SelectPopover )` + display: flex; + flex-direction: column; + + background-color: ${ COLORS.theme.background }; border-radius: 2px; - background: ${ COLORS.theme.background }; border: 1px solid ${ COLORS.theme.foreground }; + /* z-index(".components-popover") */ + z-index: 1000000; + + max-height: min( var( --popover-available-height, 400px ), 400px ); + overflow: auto; + overscroll-behavior: contain; + &[data-focus-visible] { outline: none; // outline will be on the trigger, rather than the popover } From 4b49d833ae7532fb57be9eae88de1e98a7813832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 26 Jun 2024 18:55:34 +0200 Subject: [PATCH 07/10] DataViews: make `view.hiddenFields` optional (#62876) Co-authored-by: oandregal Co-authored-by: youknowriad --- packages/dataviews/src/types.ts | 2 +- packages/dataviews/src/view-grid.tsx | 2 +- packages/dataviews/src/view-list.tsx | 2 +- packages/dataviews/src/view-table.tsx | 8 ++++---- packages/edit-site/src/components/page-patterns/index.js | 1 - 5 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 8c1819b3a7c674..b01394c7f846a1 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -216,7 +216,7 @@ interface ViewBase { /** * The hidden fields. */ - hiddenFields: string[]; + hiddenFields?: string[]; } export interface ViewTable extends ViewBase { diff --git a/packages/dataviews/src/view-grid.tsx b/packages/dataviews/src/view-grid.tsx index 77ac3c92738523..4538ab145d2134 100644 --- a/packages/dataviews/src/view-grid.tsx +++ b/packages/dataviews/src/view-grid.tsx @@ -206,7 +206,7 @@ export default function ViewGrid< Item extends AnyItem >( { const { visibleFields, badgeFields } = fields.reduce( ( accumulator: Record< string, NormalizedField< Item >[] >, field ) => { if ( - view.hiddenFields.includes( field.id ) || + view.hiddenFields?.includes( field.id ) || [ view.layout.mediaField, view.layout.primaryField ].includes( field.id ) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 295c3d28856ebe..eb2b9c6c077a6a 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -329,7 +329,7 @@ export default function ViewList< Item extends AnyItem >( ); const visibleFields = fields.filter( ( field ) => - ! view.hiddenFields.includes( field.id ) && + ! view.hiddenFields?.includes( field.id ) && ! [ view.layout.primaryField, view.layout.mediaField ].includes( field.id ) diff --git a/packages/dataviews/src/view-table.tsx b/packages/dataviews/src/view-table.tsx index 2ddb09e2640a01..66e59a8ebb4230 100644 --- a/packages/dataviews/src/view-table.tsx +++ b/packages/dataviews/src/view-table.tsx @@ -223,9 +223,9 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item extends AnyItem >( onHide( field ); onChangeView( { ...view, - hiddenFields: view.hiddenFields.concat( - field.id - ), + hiddenFields: ( + view.hiddenFields ?? [] + ).concat( field.id ), } ); } } > @@ -473,7 +473,7 @@ function ViewTable< Item extends AnyItem >( { }; const visibleFields = fields.filter( ( field ) => - ! view.hiddenFields.includes( field.id ) && + ! view.hiddenFields?.includes( field.id ) && ! [ view.layout.mediaField ].includes( field.id ) ); const hasData = !! data?.length; diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 7080ff8f185f4f..0a6a4469cef4e7 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -76,7 +76,6 @@ const DEFAULT_VIEW = { search: '', page: 1, perPage: 20, - hiddenFields: [], layout: { ...defaultConfigPerViewType[ LAYOUT_GRID ], }, From 37a60b2068ccd1db022d07305eb4f385d8182f69 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 26 Jun 2024 12:12:50 -0500 Subject: [PATCH 08/10] Escape moves focus to editor region when in select mode (#62196) An escape keypress previously toggled the state between editing and select mode. This returns the behavior to the previous implementation of Escape clearing block focus and returning focus to the wrapping region, if available, showing a blue outline. If no region is available, it will focus the editor iframe or content region. --- .../block-tools/block-selection-button.js | 13 ++----- .../block-tools/block-toolbar-breadcrumb.js | 13 +++++-- .../src/components/block-tools/index.js | 38 ++++++++++++++++++- .../higher-order/navigate-regions/style.scss | 38 ++++++++++++------- .../specs/editor/various/writing-flow.spec.js | 14 +++---- 5 files changed, 81 insertions(+), 35 deletions(-) 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 d4ec0f8cf79fb6..805e41c580f950 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 @@ -9,7 +9,7 @@ import clsx from 'clsx'; import { dragHandle, trash } from '@wordpress/icons'; import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useRef } from '@wordpress/element'; +import { forwardRef, useEffect } from '@wordpress/element'; import { BACKSPACE, DELETE, @@ -48,10 +48,11 @@ import Shuffle from '../block-toolbar/shuffle'; * * @param {string} props Component props. * @param {string} props.clientId Client ID of block. + * @param {Object} ref Reference to the component. * * @return {Component} The component to be rendered. */ -function BlockSelectionButton( { clientId, rootClientId } ) { +function BlockSelectionButton( { clientId, rootClientId }, ref ) { const selected = useSelect( ( select ) => { const { @@ -125,7 +126,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) { canMove, } = selected; const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore ); - const ref = useRef(); // Focus the breadcrumb in navigation mode. useEffect( () => { @@ -164,11 +164,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) { const isEnter = keyCode === ENTER; const isSpace = keyCode === SPACE; const isShift = event.shiftKey; - if ( isEscape && editorMode === 'navigation' ) { - setNavigationMode( false ); - event.preventDefault(); - return; - } if ( keyCode === BACKSPACE || keyCode === DELETE ) { removeBlock( clientId ); @@ -368,4 +363,4 @@ function BlockSelectionButton( { clientId, rootClientId } ) { ); } -export default BlockSelectionButton; +export default forwardRef( BlockSelectionButton ); diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js index 0ae67e1be0001e..ae03bdb4f51647 100644 --- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js +++ b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js @@ -3,6 +3,11 @@ */ import clsx from 'clsx'; +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + /** * Internal dependencies */ @@ -11,10 +16,7 @@ import { PrivateBlockPopover } from '../block-popover'; import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props'; import useSelectedBlockToolProps from './use-selected-block-tool-props'; -export default function BlockToolbarBreadcrumb( { - clientId, - __unstableContentRef, -} ) { +function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) { const { capturingClientId, isInsertionPointVisible, @@ -38,9 +40,12 @@ export default function BlockToolbarBreadcrumb( { { ...popoverProps } > ); } + +export default forwardRef( BlockToolbarBreadcrumb ); diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index ad744a81cca623..0e89e7991320e0 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -81,6 +81,7 @@ export default function BlockTools( { } = useShowBlockTools(); const { + clearSelectedBlock, duplicateBlocks, removeBlocks, replaceBlocks, @@ -92,6 +93,8 @@ export default function BlockTools( { expandBlock, } = unlock( useDispatch( blockEditorStore ) ); + const blockSelectionButtonRef = useRef(); + function onKeyDown( event ) { if ( event.defaultPrevented ) { return; @@ -152,6 +155,39 @@ export default function BlockTools( { // block so that focus is directed back to the beginning of the selection. // In effect, to the user this feels like deselecting the multi-selection. selectBlock( clientIds[ 0 ] ); + } else if ( + clientIds.length === 1 && + event.target === blockSelectionButtonRef?.current + ) { + event.preventDefault(); + clearSelectedBlock(); + // If there are multiple editors, we need to find the iframe that contains our contentRef to make sure + // we're focusing the region that contains this editor. + const editorCanvas = + Array.from( + document + .querySelectorAll( 'iframe[name="editor-canvas"]' ) + .values() + ).find( ( iframe ) => { + // Find the iframe that contains our contentRef + const iframeDocument = + iframe.contentDocument || + iframe.contentWindow.document; + + return ( + iframeDocument === + __unstableContentRef.current.ownerDocument + ); + } ) ?? __unstableContentRef.current; + + // The region is provivided by the editor, not the block-editor. + // We should send focus to the region if one is available to reuse the + // same interface for navigating landmarks. If no region is available, + // use the canvas instead. + const focusableWrapper = + editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas; + + focusableWrapper.focus(); } } else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) { // If focus is currently within a text field, such as a rich text block or other editable field, @@ -182,7 +218,6 @@ export default function BlockTools( { } } } - const blockToolbarRef = usePopoverScroll( __unstableContentRef ); const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef ); @@ -213,6 +248,7 @@ export default function BlockTools( { { showBreadcrumb && ( diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index b3a4a0c1a9d1b5..5c3767e310b8f4 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -1,22 +1,35 @@ // Allow the position to be easily overridden to e.g. fixed. + +@mixin region-selection-outline { + outline: 4px solid $components-color-accent; + outline-offset: -4px; +} + +@mixin region-selection-focus { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + pointer-events: none; + @include region-selection-outline; + z-index: z-index(".is-focusing-regions {region} :focus::after"); +} + [role="region"] { position: relative; + + // Handles the focus when we programatically send focus to this region + &.interface-interface-skeleton__content:focus-visible::after { + @include region-selection-focus; + } } .is-focusing-regions { [role="region"]:focus::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - content: ""; - pointer-events: none; - outline: 4px solid $components-color-accent; - outline-offset: -4px; - z-index: z-index(".is-focusing-regions {region} :focus::after"); + @include region-selection-focus; } - // Fixes for edge cases. // Some of the regions are currently used for layout purposes as 'interface skeleton' // items. When they're absolutely positioned or when they contain absolutely @@ -33,7 +46,6 @@ .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel, .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel, .editor-post-publish-panel { - outline: 4px solid $components-color-accent; - outline-offset: -4px; + @include region-selection-outline; } } diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js index 1af46a80896f07..bd1552ad4cb66a 100644 --- a/test/e2e/specs/editor/various/writing-flow.spec.js +++ b/test/e2e/specs/editor/various/writing-flow.spec.js @@ -958,7 +958,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { ` ); } ); - test( 'escape should toggle between edit and navigation modes', async ( { + test( 'escape should set select mode and then focus the canvas', async ( { page, writingFlowUtils, } ) => { @@ -975,15 +975,13 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { .poll( writingFlowUtils.getActiveBlockName ) .toBe( 'core/paragraph' ); - // Second escape Toggles back to Edit Mode + // Second escape should send focus to the canvas await page.keyboard.press( 'Escape' ); + // The navigation button should be hidden. await expect( navigationButton ).toBeHidden(); - const blockToolbar = page.getByLabel( 'Block tools' ); - - await expect( blockToolbar ).toBeVisible(); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/paragraph' ); + await expect( + page.getByRole( 'region', { name: 'Editor content' } ) + ).toBeFocused(); } ); // Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091. From cea3b8dcbf092879790d3eb422bcdd9212e2eae7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 26 Jun 2024 19:19:10 +0200 Subject: [PATCH 09/10] CustomSelectControl V2: fix trigger RTL text alignment(#62869) * CustomSelectControl V2: fix trigger text alignment in RTL languages * CHANGELOG --- Co-authored-by: ciampo Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/custom-select-control-v2/styles.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7d84ff872be224..728151987c9ef4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803)) - `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821)) +- `CustomSelectControlV2`: fix trigger text alignment in RTL languages ([#62869](https://github.com/WordPress/gutenberg/pull/62869)). ## 28.2.0 (2024-06-26) diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts index 683bb1d157994d..c806bbee794d1a 100644 --- a/packages/components/src/custom-select-control-v2/styles.ts +++ b/packages/components/src/custom-select-control-v2/styles.ts @@ -92,7 +92,7 @@ export const Select = styled( Ariakit.Select, { cursor: pointer; font-family: inherit; font-size: ${ CONFIG.fontSize }; - text-align: left; + text-align: start; width: 100%; &[data-focus-visible] { From 2139bc2ceb6101537be196ef3fddc965b90a6b75 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 26 Jun 2024 14:11:32 -0500 Subject: [PATCH 10/10] Focus Editor Region from Template Footer Click (#62595) --- .../src/components/block-breadcrumb/index.js | 17 +++++++++- .../src/components/block-tools/index.js | 29 ++--------------- .../src/utils/get-editor-region.js | 31 +++++++++++++++++++ 3 files changed, 49 insertions(+), 28 deletions(-) create mode 100644 packages/block-editor/src/utils/get-editor-region.js diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index b1fd13dbf3475a..70f038181237b4 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -12,6 +12,8 @@ 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 getEditorRegion from '../../utils/get-editor-region'; /** * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb. @@ -37,6 +39,10 @@ function BlockBreadcrumb( { rootLabelText } ) { }, [] ); const rootLabel = rootLabelText || __( 'Document' ); + // 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 ); + /* * Disable reason: The `list` ARIA role is redundant but * Safari+VoiceOver won't announce the list otherwise. @@ -60,7 +66,16 @@ function BlockBreadcrumb( { rootLabelText } ) { diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 0e89e7991320e0..5cde3cccaf57e5 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -25,6 +25,7 @@ import usePopoverScroll from '../block-popover/use-popover-scroll'; import ZoomOutModeInserters from './zoom-out-mode-inserters'; import { useShowBlockTools } from './use-show-block-tools'; import { unlock } from '../../lock-unlock'; +import getEditorRegion from '../../utils/get-editor-region'; function selector( select ) { const { @@ -161,33 +162,7 @@ export default function BlockTools( { ) { event.preventDefault(); clearSelectedBlock(); - // If there are multiple editors, we need to find the iframe that contains our contentRef to make sure - // we're focusing the region that contains this editor. - const editorCanvas = - Array.from( - document - .querySelectorAll( 'iframe[name="editor-canvas"]' ) - .values() - ).find( ( iframe ) => { - // Find the iframe that contains our contentRef - const iframeDocument = - iframe.contentDocument || - iframe.contentWindow.document; - - return ( - iframeDocument === - __unstableContentRef.current.ownerDocument - ); - } ) ?? __unstableContentRef.current; - - // The region is provivided by the editor, not the block-editor. - // We should send focus to the region if one is available to reuse the - // same interface for navigating landmarks. If no region is available, - // use the canvas instead. - const focusableWrapper = - editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas; - - focusableWrapper.focus(); + getEditorRegion( __unstableContentRef.current ).focus(); } } else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) { // If focus is currently within a text field, such as a rich text block or other editable field, diff --git a/packages/block-editor/src/utils/get-editor-region.js b/packages/block-editor/src/utils/get-editor-region.js new file mode 100644 index 00000000000000..7edc57d1157fb4 --- /dev/null +++ b/packages/block-editor/src/utils/get-editor-region.js @@ -0,0 +1,31 @@ +/** + * Gets the editor region for a given editor canvas element or + * returns the passed element if no region is found + * + * @param { Object } editor The editor canvas element. + * @return { Object } The editor region or given editor element + */ +export default function getEditorRegion( editor ) { + if ( ! editor ) { + return null; + } + + // If there are multiple editors, we need to find the iframe that contains our contentRef to make sure + // we're focusing the region that contains this editor. + const editorCanvas = + Array.from( + document.querySelectorAll( 'iframe[name="editor-canvas"]' ).values() + ).find( ( iframe ) => { + // Find the iframe that contains our contentRef + const iframeDocument = + iframe.contentDocument || iframe.contentWindow.document; + + return iframeDocument === editor.ownerDocument; + } ) ?? editor; + + // The region is provivided by the editor, not the block-editor. + // We should send focus to the region if one is available to reuse the + // same interface for navigating landmarks. If no region is available, + // use the canvas instead. + return editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas; +}