From bd6dae7647ad9855ff3f7071f28b37ae6e83e0b1 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 27 Sep 2021 18:11:09 +1000 Subject: [PATCH 01/14] Enable ellipsis button --- packages/dom/src/focusable.js | 15 +++++++++++++-- .../secondary-sidebar/list-view-sidebar.js | 1 + 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js index 80e9dcb496831..dd5fbf17c2795 100644 --- a/packages/dom/src/focusable.js +++ b/packages/dom/src/focusable.js @@ -56,10 +56,21 @@ function isVisible( element ) { * @return {boolean} Whether element should be skipped from focusable elements. */ function skipFocus( element ) { - return ( + if ( element.nodeName.toLowerCase() === 'iframe' && element.getAttribute( 'tabindex' ) === '-1' - ); + ) { + return true; + } + + if ( + element.classList.contains( 'components-dropdown' ) && + element.getAttribute( 'tabindex' ) === '-1' + ) { + return true; + } + + return false; } /** diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index 469dabaff5619..bf9641ca0c90b 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -64,6 +64,7 @@ export default function ListViewSidebar() { From 21e00c703fac91b4ace9aec72811f3948a73c610 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 28 Sep 2021 15:18:58 +1000 Subject: [PATCH 02/14] Adjust ellipsis button border --- .../src/components/list-view/block.js | 1 + .../src/components/list-view/style.scss | 33 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index f0a5eeda36b96..9774eb725a432 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -198,6 +198,7 @@ export default function ListViewBlock( { icon={ moreVertical } toggleProps={ { ref, + className: 'block-editor-list-view-block__menu', tabIndex, onFocus, } } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index a8f766af5bae4..6a07d902b9dad 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -72,19 +72,6 @@ position: relative; white-space: nowrap; - &:hover, - &:focus { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - - // Hide hover styles while a user is dragging blocks/files etc. - .is-dragging-components-draggable & { - box-shadow: none; - } - } - &:focus { - z-index: 1; - } - &.is-dropping-before::before { content: ""; position: absolute; @@ -102,6 +89,22 @@ } } + .block-editor-list-view-block-contents, + .block-editor-list-view-block__menu { + &:hover, + &:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + + // Hide hover styles while a user is dragging blocks/files etc. + .is-dragging-components-draggable & { + box-shadow: none; + } + } + &:focus { + z-index: 1; + } + } + &.is-visible .block-editor-list-view-block-contents { opacity: 1; @include edit-post__fade-in-animation; @@ -145,10 +148,6 @@ } } - .block-editor-list-view-block__menu-cell { - padding-top: $grid-unit-10; - } - .block-editor-list-view-block__mover-cell-alignment-wrapper { display: flex; height: 100%; From 8bf2d9b8ed98eabdc3fbd663959a12eac2ff91e0 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 28 Sep 2021 15:53:01 +1000 Subject: [PATCH 03/14] Make 'Edit template part' menu item work in list view --- .../block-settings-menu-controls/index.js | 15 ++-- .../edit-template-part-menu-button/index.js | 69 +++++++++++-------- 2 files changed, 51 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 81246c583d28d..d5011f8e57313 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -25,17 +25,20 @@ import { store as blockEditorStore } from '../../store'; const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { - const selectedBlocks = useSelect( + const { selectedBlocks, selectedClientIds } = useSelect( ( select ) => { const { getBlocksByClientId, getSelectedBlockClientIds } = select( blockEditorStore ); const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds(); - return map( - compact( getBlocksByClientId( ids ) ), - ( block ) => block.name - ); + return { + selectedBlocks: map( + compact( getBlocksByClientId( ids ) ), + ( block ) => block.name + ), + selectedClientIds: ids, + }; }, [ clientIds ] ); @@ -46,7 +49,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { const { isGroupable, isUngroupable } = convertToGroupButtonProps; const showConvertToGroupButton = isGroupable || isUngroupable; return ( - + { ( fills ) => { if ( fills?.length > 0 || showConvertToGroupButton ) { return ( diff --git a/packages/edit-site/src/components/edit-template-part-menu-button/index.js b/packages/edit-site/src/components/edit-template-part-menu-button/index.js index b79a08b8a76d2..ad37ff8359698 100644 --- a/packages/edit-site/src/components/edit-template-part-menu-button/index.js +++ b/packages/edit-site/src/components/edit-template-part-menu-button/index.js @@ -17,20 +17,39 @@ import { __, sprintf } from '@wordpress/i18n'; import { store as editSiteStore } from '../../store'; export default function EditTemplatePartMenuButton() { - const selectedTemplatePart = useSelect( ( select ) => { - const block = select( blockEditorStore ).getSelectedBlock(); - - if ( block && isTemplatePart( block ) ) { - const { theme, slug } = block.attributes; + return ( + + { ( { selectedClientIds, onClose } ) => ( + + ) } + + ); +} - return select( coreStore ).getEntityRecord( - 'postType', - 'wp_template_part', - // Ideally this should be an official public API. - `${ theme }//${ slug }` +function EditTemplatePartMenuItem( { selectedClientIds, onClose } ) { + const selectedTemplatePart = useSelect( + ( select ) => { + const [ block ] = select( blockEditorStore ).getBlocksByClientId( + selectedClientIds ); - } - }, [] ); + + if ( block && isTemplatePart( block ) ) { + const { theme, slug } = block.attributes; + + return select( coreStore ).getEntityRecord( + 'postType', + 'wp_template_part', + // Ideally this should be an official public API. + `${ theme }//${ slug }` + ); + } + }, + [ selectedClientIds ] + ); + const { pushTemplatePart } = useDispatch( editSiteStore ); if ( ! selectedTemplatePart ) { @@ -38,20 +57,16 @@ export default function EditTemplatePartMenuButton() { } return ( - - { ( { onClose } ) => ( - { - pushTemplatePart( selectedTemplatePart.id ); - onClose(); - } } - > - { - /* translators: %s: template part title */ - sprintf( __( 'Edit %s' ), selectedTemplatePart.slug ) - } - - ) } - + { + pushTemplatePart( selectedTemplatePart.id ); + onClose(); + } } + > + { + /* translators: %s: template part title */ + sprintf( __( 'Edit %s' ), selectedTemplatePart.slug ) + } + ); } From c1793ae5f7a79de57ea023254f3aff51ffd71263 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 6 Oct 2021 13:49:43 +1100 Subject: [PATCH 04/14] Always select block when item in List View is selected --- .../components/list-view/block-contents.js | 55 +++++++------------ .../src/components/list-view/block.js | 44 +-------------- 2 files changed, 24 insertions(+), 75 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index d3bfd824cfef2..831e94c779671 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -52,6 +52,10 @@ const ListViewBlockContents = forwardRef( [ clientId ] ); + const SelectButton = __experimentalFeatures + ? ListViewBlockSlot + : ListViewBlockSelectButton; + const isBlockMoveTarget = blockMovingClientId && selectedBlockInBlockEditor === clientId; @@ -61,40 +65,23 @@ const ListViewBlockContents = forwardRef( return ( - { ( { draggable, onDragStart, onDragEnd } ) => - __experimentalFeatures ? ( - - ) : ( - - ) - } + { ( { draggable, onDragStart, onDragEnd } ) => ( + + ) } ); } diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 9774eb725a432..917e3a0c6562e 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -9,13 +9,10 @@ import classnames from 'classnames'; import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, - MenuGroup, - MenuItem, } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; import { moreVertical } from '@wordpress/icons'; import { useState, useRef, useEffect } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -49,17 +46,8 @@ export default function ListViewBlock( { const cellRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); const { clientId } = block; - const blockParents = useSelect( - ( select ) => { - return select( blockEditorStore ).getBlockParents( clientId ); - }, - [ clientId ] - ); - const { - selectBlock: selectEditorBlock, - toggleBlockHighlight, - } = useDispatch( blockEditorStore ); + const { toggleBlockHighlight } = useDispatch( blockEditorStore ); const hasSiblings = siblingBlockCount > 0; const hasRenderedMovers = showBlockMovers && hasSiblings; @@ -204,33 +192,7 @@ export default function ListViewBlock( { } } disableOpenOnArrowDown __experimentalSelectBlock={ onClick } - > - { ( { onClose } ) => ( - - { - if ( blockParents.length ) { - // If the block to select is inside a dropdown, we need to open the dropdown. - // Otherwise focus won't transfer to the block. - for ( const parent of blockParents ) { - await selectEditorBlock( - parent - ); - } - } else { - // If clientId is already selected, it won't be focused (see block-wrapper.js) - // This removes the selection first to ensure the focus will always switch. - await selectEditorBlock( null ); - } - await selectEditorBlock( clientId ); - onClose(); - } } - > - { __( 'Go to block' ) } - - - ) } - + /> ) } ) } From 920de1d391081f6682606ece8baf267f15bbbac2 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 6 Oct 2021 14:07:42 +1100 Subject: [PATCH 05/14] Show outline on :focus but not :hover --- packages/block-editor/src/components/list-view/style.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 6a07d902b9dad..5b9bbda01fde3 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -91,18 +91,15 @@ .block-editor-list-view-block-contents, .block-editor-list-view-block__menu { - &:hover, &:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + z-index: 1; - // Hide hover styles while a user is dragging blocks/files etc. + // Hide focus styles while a user is dragging blocks/files etc. .is-dragging-components-draggable & { box-shadow: none; } } - &:focus { - z-index: 1; - } } &.is-visible .block-editor-list-view-block-contents { From 43ea19777fa88a3869fb76066597a0939b33fa63 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 6 Oct 2021 14:12:13 +1100 Subject: [PATCH 06/14] Show ellipsis menu in post editor list view --- .../src/components/secondary-sidebar/list-view-sidebar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index 617a22f9b7632..3f4f6107b3613 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -65,6 +65,7 @@ export default function ListViewSidebar() { From 78887188f0fb95eda36eff67f2d4e00a0d90ddb7 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 7 Oct 2021 13:43:35 +1100 Subject: [PATCH 07/14] Use getBlock --- .../src/components/edit-template-part-menu-button/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/edit-template-part-menu-button/index.js b/packages/edit-site/src/components/edit-template-part-menu-button/index.js index ad37ff8359698..97f7be08be534 100644 --- a/packages/edit-site/src/components/edit-template-part-menu-button/index.js +++ b/packages/edit-site/src/components/edit-template-part-menu-button/index.js @@ -32,8 +32,8 @@ export default function EditTemplatePartMenuButton() { function EditTemplatePartMenuItem( { selectedClientIds, onClose } ) { const selectedTemplatePart = useSelect( ( select ) => { - const [ block ] = select( blockEditorStore ).getBlocksByClientId( - selectedClientIds + const block = select( blockEditorStore ).getBlock( + selectedClientIds[ 0 ] ); if ( block && isTemplatePart( block ) ) { From 7775ba534a7ccf546a679e73782bc0f0a2c9c1e0 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 7 Oct 2021 14:57:56 +1100 Subject: [PATCH 08/14] Add options.keyboard to dom.focusables.find() --- packages/components/src/tree-grid/index.js | 4 +- packages/dom/src/focusable.js | 78 ++++++++++------------ 2 files changed, 38 insertions(+), 44 deletions(-) diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js index 3f99e90e9cb89..9292811b7aa3f 100644 --- a/packages/components/src/tree-grid/index.js +++ b/packages/components/src/tree-grid/index.js @@ -24,7 +24,9 @@ import RovingTabIndexContainer from './roving-tab-index'; * @return {?Array} The array of focusables in the row. */ function getRowFocusables( rowElement ) { - const focusablesInRow = focus.focusable.find( rowElement ); + const focusablesInRow = focus.focusable.find( rowElement, { + keyboard: true, + } ); if ( ! focusablesInRow || ! focusablesInRow.length ) { return; diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js index dd5fbf17c2795..c7a705b7d2217 100644 --- a/packages/dom/src/focusable.js +++ b/packages/dom/src/focusable.js @@ -17,19 +17,31 @@ * - https://w3c.github.io/html/editing.html#data-model */ -const SELECTOR = [ - '[tabindex]', - 'a[href]', - 'button:not([disabled])', - 'input:not([type="hidden"]):not([disabled])', - 'select:not([disabled])', - 'textarea:not([disabled])', - 'iframe', - 'object', - 'embed', - 'area[href]', - '[contenteditable]:not([contenteditable=false])', -].join( ',' ); +/** + * Returns a CSS selector used to query for focusable elements. + * + * @param {boolean} keyboard If set, only query elements that can be focused + * using the keyboard. Non-interactive elements with a + * negative `tabindex` are focusable but cannot be + * focused using the keyboard. + * + * @return {string} CSS selector. + */ +function buildSelector( keyboard ) { + return [ + keyboard ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]', + 'a[href]', + 'button:not([disabled])', + 'input:not([type="hidden"]):not([disabled])', + 'select:not([disabled])', + 'textarea:not([disabled])', + 'iframe:not([tabindex^="-"])', + 'object', + 'embed', + 'area[href]', + '[contenteditable]:not([contenteditable=false])', + ].join( ',' ); +} /** * Returns true if the specified element is visible (i.e. neither display: none @@ -47,32 +59,6 @@ function isVisible( element ) { ); } -/** - * Returns true if the specified element should be skipped from focusable elements. - * For now it rather specific for `iframes` and if tabindex attribute is set to -1. - * - * @param {Element} element DOM element to test. - * - * @return {boolean} Whether element should be skipped from focusable elements. - */ -function skipFocus( element ) { - if ( - element.nodeName.toLowerCase() === 'iframe' && - element.getAttribute( 'tabindex' ) === '-1' - ) { - return true; - } - - if ( - element.classList.contains( 'components-dropdown' ) && - element.getAttribute( 'tabindex' ) === '-1' - ) { - return true; - } - - return false; -} - /** * Returns true if the specified area element is a valid focusable element, or * false otherwise. Area is only focusable if within a map where a named map @@ -99,18 +85,24 @@ function isValidFocusableArea( element ) { /** * Returns all focusable elements within a given context. * - * @param {Element} context Element in which to search. + * @param {Element} context Element in which to search. + * @param {Object} [options] + * @param {boolean} [options.keyboard] If set, only return elements that can be + * focused using the keyboard. + * Non-interactive elements with a negative + * `tabindex` are focusable but cannot be + * focused using the keyboard. * * @return {Element[]} Focusable elements. */ -export function find( context ) { +export function find( context, { keyboard = false } = {} ) { /* eslint-disable jsdoc/no-undefined-types */ /** @type {NodeListOf} */ /* eslint-enable jsdoc/no-undefined-types */ - const elements = context.querySelectorAll( SELECTOR ); + const elements = context.querySelectorAll( buildSelector( keyboard ) ); return Array.from( elements ).filter( ( element ) => { - if ( ! isVisible( element ) || skipFocus( element ) ) { + if ( ! isVisible( element ) ) { return false; } From 5b402f441c0e5bb8c0c882c468d60f4777455b99 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 7 Oct 2021 16:15:10 +1100 Subject: [PATCH 09/14] Only pass selectedClientId to menu item --- .../components/edit-template-part-menu-button/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/edit-template-part-menu-button/index.js b/packages/edit-site/src/components/edit-template-part-menu-button/index.js index 97f7be08be534..8c08a8c1764be 100644 --- a/packages/edit-site/src/components/edit-template-part-menu-button/index.js +++ b/packages/edit-site/src/components/edit-template-part-menu-button/index.js @@ -21,7 +21,7 @@ export default function EditTemplatePartMenuButton() { { ( { selectedClientIds, onClose } ) => ( ) } @@ -29,11 +29,11 @@ export default function EditTemplatePartMenuButton() { ); } -function EditTemplatePartMenuItem( { selectedClientIds, onClose } ) { +function EditTemplatePartMenuItem( { selectedClientId, onClose } ) { const selectedTemplatePart = useSelect( ( select ) => { const block = select( blockEditorStore ).getBlock( - selectedClientIds[ 0 ] + selectedClientId ); if ( block && isTemplatePart( block ) ) { @@ -47,7 +47,7 @@ function EditTemplatePartMenuItem( { selectedClientIds, onClose } ) { ); } }, - [ selectedClientIds ] + [ selectedClientId ] ); const { pushTemplatePart } = useDispatch( editSiteStore ); From ddc9dd901695732841e19c87b660e6507f323798 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 7 Oct 2021 16:31:20 +1100 Subject: [PATCH 10/14] Rename options.keyboard to options.sequential --- packages/components/src/tree-grid/index.js | 2 +- packages/dom/src/focusable.js | 30 ++++++++++++---------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js index 9292811b7aa3f..29637a9626125 100644 --- a/packages/components/src/tree-grid/index.js +++ b/packages/components/src/tree-grid/index.js @@ -25,7 +25,7 @@ import RovingTabIndexContainer from './roving-tab-index'; */ function getRowFocusables( rowElement ) { const focusablesInRow = focus.focusable.find( rowElement, { - keyboard: true, + sequential: true, } ); if ( ! focusablesInRow || ! focusablesInRow.length ) { diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js index c7a705b7d2217..75e4f72f0c1f7 100644 --- a/packages/dom/src/focusable.js +++ b/packages/dom/src/focusable.js @@ -20,16 +20,17 @@ /** * Returns a CSS selector used to query for focusable elements. * - * @param {boolean} keyboard If set, only query elements that can be focused - * using the keyboard. Non-interactive elements with a - * negative `tabindex` are focusable but cannot be - * focused using the keyboard. + * @param {boolean} sequential If set, only query elements that are sequentially + * focusable. Non-interactive elements with a + * negative `tabindex` are focusable but not + * sequentially focusable. + * https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute * * @return {string} CSS selector. */ -function buildSelector( keyboard ) { +function buildSelector( sequential ) { return [ - keyboard ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]', + sequential ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]', 'a[href]', 'button:not([disabled])', 'input:not([type="hidden"]):not([disabled])', @@ -85,21 +86,22 @@ function isValidFocusableArea( element ) { /** * Returns all focusable elements within a given context. * - * @param {Element} context Element in which to search. + * @param {Element} context Element in which to search. * @param {Object} [options] - * @param {boolean} [options.keyboard] If set, only return elements that can be - * focused using the keyboard. - * Non-interactive elements with a negative - * `tabindex` are focusable but cannot be - * focused using the keyboard. + * @param {boolean} [options.sequential] If set, only return elements that are + * sequentially focusable. + * Non-interactive elements with a + * negative `tabindex` are focusable but + * not sequentially focusable. + * https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute * * @return {Element[]} Focusable elements. */ -export function find( context, { keyboard = false } = {} ) { +export function find( context, { sequential = false } = {} ) { /* eslint-disable jsdoc/no-undefined-types */ /** @type {NodeListOf} */ /* eslint-enable jsdoc/no-undefined-types */ - const elements = context.querySelectorAll( buildSelector( keyboard ) ); + const elements = context.querySelectorAll( buildSelector( sequential ) ); return Array.from( elements ).filter( ( element ) => { if ( ! isVisible( element ) ) { From 16653840cc96c9d33ee67205e5fc37c4d4cb1436 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 8 Oct 2021 16:28:15 +1100 Subject: [PATCH 11/14] Remove unused ListViewBlockSlot and ListViewEditor --- packages/block-editor/src/components/index.js | 2 - .../components/list-view/block-contents.js | 10 +- .../src/components/list-view/block-slot.js | 120 ------------------ .../src/components/list-view/editor.js | 29 ----- .../src/components/list-view/style.scss | 1 - 5 files changed, 1 insertion(+), 161 deletions(-) delete mode 100644 packages/block-editor/src/components/list-view/block-slot.js delete mode 100644 packages/block-editor/src/components/list-view/editor.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 34f5a7aaff262..528108cd558eb 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -70,8 +70,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro export { default as __experimentalLinkControlSearchItem } from './link-control/search-item'; export { default as LineHeightControl } from './line-height-control'; export { default as __experimentalListView } from './list-view'; -export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot'; -export { default as __experimentalListViewEditor } from './list-view/editor'; export { default as MediaReplaceFlow } from './media-replace-flow'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index 831e94c779671..61e221b77f106 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -12,8 +12,6 @@ import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ -import { useListViewContext } from './context'; -import ListViewBlockSlot from './block-slot'; import ListViewBlockSelectButton from './block-select-button'; import BlockDraggable from '../block-draggable'; import { store as blockEditorStore } from '../../store'; @@ -32,8 +30,6 @@ const ListViewBlockContents = forwardRef( }, ref ) => { - const { __experimentalFeatures } = useListViewContext(); - const { clientId } = block; const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect( @@ -52,10 +48,6 @@ const ListViewBlockContents = forwardRef( [ clientId ] ); - const SelectButton = __experimentalFeatures - ? ListViewBlockSlot - : ListViewBlockSelectButton; - const isBlockMoveTarget = blockMovingClientId && selectedBlockInBlockEditor === clientId; @@ -66,7 +58,7 @@ const ListViewBlockContents = forwardRef( return ( { ( { draggable, onDragStart, onDragEnd } ) => ( - `ListViewBlock-${ clientId }`; - -function ListViewBlockSlot( props, ref ) { - const { clientId } = props.block; - const { name } = useSelect( - ( select ) => select( blockEditorStore ).getBlockName( clientId ), - [ clientId ] - ); - const instanceId = useInstanceId( ListViewBlockSlot ); - - return ( - - { ( fills ) => { - if ( ! fills.length ) { - return ( - - ); - } - - const { - className, - isSelected, - position, - siblingBlockCount, - level, - tabIndex, - onFocus, - onToggleExpanded, - } = props; - - const blockType = getBlockType( name ); - const descriptionId = `list-view-block-slot__${ instanceId }`; - const blockPositionDescription = getBlockPositionDescription( - position, - siblingBlockCount, - level - ); - - const forwardedFillProps = { - // Ensure that the component in the slot can receive - // keyboard navigation. - tabIndex, - onFocus, - ref, - // Give the element rendered in the slot a description - // that describes its position. - 'aria-describedby': descriptionId, - }; - - return ( - <> -
- - - { Children.map( fills, ( fill ) => - cloneElement( fill, { - ...fill.props, - ...forwardedFillProps, - } ) - ) } - { isSelected && ( - - { __( '(selected block)' ) } - - ) } -
- { blockPositionDescription } -
-
- - ); - } } - - ); -} - -export default forwardRef( ListViewBlockSlot ); - -export const ListViewBlockFill = ( props ) => { - const { clientId } = useContext( BlockListBlockContext ); - return ; -}; diff --git a/packages/block-editor/src/components/list-view/editor.js b/packages/block-editor/src/components/list-view/editor.js deleted file mode 100644 index 1d3df28a61083..0000000000000 --- a/packages/block-editor/src/components/list-view/editor.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { RichText } from '../'; -import { ListViewBlockFill } from './block-slot'; - -export default function ListViewEditor( { value, onChange } ) { - return ( - - - - ); -} diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 5b9bbda01fde3..032c45d446f14 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -244,7 +244,6 @@ } } -.block-editor-list-view-block-slot__description, .block-editor-list-view-block-select-button__description, .block-editor-list-view-appender__description { display: none; From 510af3e9e5a952e28d465711c37b1240c963ffe4 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 8 Oct 2021 16:30:35 +1100 Subject: [PATCH 12/14] Prevent stealing focus from editor canvas --- packages/block-editor/src/components/list-view/block.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 917e3a0c6562e..1264918931664 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -78,14 +78,6 @@ export default function ListViewBlock( { } }, [] ); - // If ListView has experimental features (such as drag and drop) enabled, - // leave the focus handling as it was before, to avoid accidental regressions. - useEffect( () => { - if ( withExperimentalFeatures && isSelected ) { - cellRef.current.focus(); - } - }, [ withExperimentalFeatures, isSelected ] ); - const highlightBlock = withExperimentalPersistentListViewFeatures ? toggleBlockHighlight : () => {}; From 6ac9a43e31b346f8e2e98191488708dc77db63c4 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 8 Oct 2021 18:31:13 +1100 Subject: [PATCH 13/14] Adjust focus styling --- .../src/components/list-view/style.scss | 66 ++++++++++++++----- 1 file changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 032c45d446f14..8f8555f44ca35 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -15,10 +15,14 @@ // Use position relative for row animation. position: relative; - &.is-selected .block-editor-list-view-block-contents { + &.is-selected { background: var(--wp-admin-theme-color); + } + &.is-selected .block-editor-list-view-block-contents, + &.is-selected .components-button.has-icon { color: $white; - + } + &.is-selected .block-editor-list-view-block-contents { // Hide selection styles while a user is dragging blocks/files etc. .is-dragging-components-draggable & { background: none; @@ -26,30 +30,31 @@ } } &.is-selected .block-editor-list-view-block-contents:focus { - box-shadow: - inset 0 0 0 1px $white, - 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - - // Hide focus styles while a user is dragging blocks/files etc. - .is-dragging-components-draggable & { - box-shadow: none; + &::after { + box-shadow: + inset 0 0 0 1px $white, + 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } } + &.is-selected .block-editor-list-view-block__menu:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white; + } + &.is-branch-selected:not(.is-selected) { + // Lighten a CSS variable without introducing a new SASS variable + background: + linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)), + linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color)); + } &.is-branch-selected.is-selected .block-editor-list-view-block-contents { border-radius: 2px 2px 0 0; } - &[aria-expanded="false"] { &.is-branch-selected.is-selected .block-editor-list-view-block-contents { border-radius: 2px; } } &.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents { - // Lighten a CSS variable without introducing a new SASS variable - background: - linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)), - linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color)); border-radius: 0; } &.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents { @@ -89,9 +94,17 @@ } } - .block-editor-list-view-block-contents, - .block-editor-list-view-block__menu { - &:focus { + .block-editor-list-view-block-contents:focus { + box-shadow: none; + + &::after { + content: ""; + position: absolute; + top: 0; + right: -(24px + 5px); // Icon size + padding. + bottom: 0; + left: 0; + border-radius: inherit; box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); z-index: 1; @@ -101,6 +114,15 @@ } } } + .block-editor-list-view-block__menu:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + z-index: 1; + + // Hide focus styles while a user is dragging blocks/files etc. + .is-dragging-components-draggable & { + box-shadow: none; + } + } &.is-visible .block-editor-list-view-block-contents { opacity: 1; @@ -125,7 +147,7 @@ line-height: 0; width: $button-size; opacity: 0; - vertical-align: top; + vertical-align: middle; @include reduce-motion("transition"); // Show on hover, visible, and show above to keep the hit area size. @@ -145,6 +167,14 @@ } } + .block-editor-list-view-block__menu-cell { + padding-right: 5px; + + .components-button.has-icon { + height: 24px; + } + } + .block-editor-list-view-block__mover-cell-alignment-wrapper { display: flex; height: 100%; From 43f47a72d99b203800b7395397fb232020b2508a Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 11 Oct 2021 11:19:05 +1100 Subject: [PATCH 14/14] Always show ellipsis button when block is selected --- packages/block-editor/src/components/list-view/block.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 1264918931664..f9b7bc8bbc973 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -53,7 +53,7 @@ export default function ListViewBlock( { const hasRenderedMovers = showBlockMovers && hasSiblings; const moverCellClassName = classnames( 'block-editor-list-view-block__mover-cell', - { 'is-visible': isHovered } + { 'is-visible': isHovered || isSelected } ); const { __experimentalFeatures: withExperimentalFeatures, @@ -62,7 +62,7 @@ export default function ListViewBlock( { } = useListViewContext(); const listViewBlockSettingsClassName = classnames( 'block-editor-list-view-block__menu-cell', - { 'is-visible': isHovered } + { 'is-visible': isHovered || isSelected } ); // If ListView has experimental features related to the Persistent List View,