From 0c594035dd7700a8f3c4c35cd93b3c608943539d Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 16 Mar 2023 12:27:19 +0000 Subject: [PATCH 1/7] Add a prop to allow an appender to show in list view --- .../src/components/list-view/appender.js | 101 ++++++++++++++++++ .../src/components/list-view/branch.js | 31 +++++- .../src/components/list-view/index.js | 10 +- 3 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 packages/block-editor/src/components/list-view/appender.js diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js new file mode 100644 index 00000000000000..8dedecb991b750 --- /dev/null +++ b/packages/block-editor/src/components/list-view/appender.js @@ -0,0 +1,101 @@ +/** + * WordPress dependencies + */ +import { useInstanceId } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; +import { useSelect } from '@wordpress/data'; +import { forwardRef, useState, useEffect } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import useBlockDisplayTitle from '../block-title/use-block-display-title'; +import Inserter from '../inserter'; + +export const Appender = forwardRef( + ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { + const [ insertedBlock, setInsertedBlock ] = useState( null ); + + const instanceId = useInstanceId( Appender ); + const { hideInserter } = useSelect( + ( select ) => { + const { getTemplateLock, __unstableGetEditorMode } = + select( blockEditorStore ); + + return { + hideInserter: + !! getTemplateLock( clientId ) || + __unstableGetEditorMode() === 'zoom-out', + }; + }, + [ clientId ] + ); + + const blockTitle = useBlockDisplayTitle( { + clientId, + context: 'list-view', + } ); + + const insertedBlockTitle = useBlockDisplayTitle( { + clientId: insertedBlock?.clientId, + context: 'list-view', + } ); + + useEffect( () => { + if ( ! insertedBlockTitle?.length ) { + return; + } + + speak( + sprintf( + // translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc) + __( '%s block inserted' ), + insertedBlockTitle + ), + 'assertive' + ); + }, [ insertedBlockTitle ] ); + + if ( hideInserter ) { + return null; + } + + const descriptionId = `off-canvas-editor-appender__${ instanceId }`; + const description = sprintf( + /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ + __( 'Append to %1$s block at position %2$d, Level %3$d' ), + blockTitle, + blockCount + 1, + nestingLevel + ); + + return ( +
+ { + if ( maybeInsertedBlock?.clientId ) { + setInsertedBlock( maybeInsertedBlock ); + } + } } + /> +
+ { description } +
+
+ ); + } +); diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index 83fc99dca24504..4438b57c70d69e 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -1,12 +1,17 @@ /** * WordPress dependencies */ +import { + __experimentalTreeGridRow as TreeGridRow, + __experimentalTreeGridCell as TreeGridCell, +} from '@wordpress/components'; import { memo } from '@wordpress/element'; import { AsyncModeProvider, useSelect } from '@wordpress/data'; /** * Internal dependencies */ +import { Appender } from './appender'; import ListViewBlock from './block'; import { useListViewContext } from './context'; import { isClientIdSelected } from './utils'; @@ -93,6 +98,7 @@ function ListViewBranch( props ) { parentId, shouldShowInnerBlocks = true, isSyncedBranch = false, + showAppender: showAppenderProp = true, } = props; const parentBlockInformation = useBlockDisplayInformation( parentId ); @@ -120,8 +126,12 @@ function ListViewBranch( props ) { return null; } + // Only show the appender at the first level. + const showAppender = showAppenderProp && level === 1; const filteredBlocks = blocks.filter( Boolean ); const blockCount = filteredBlocks.length; + // The appender means an extra row in List View, so add 1 to the row count. + const rowCount = showAppender ? blockCount + 1 : blockCount; let nextPosition = listPosition; return ( @@ -175,7 +185,7 @@ function ListViewBranch( props ) { isDragged={ isDragged } level={ level } position={ position } - rowCount={ blockCount } + rowCount={ rowCount } siblingBlockCount={ blockCount } showBlockMovers={ showBlockMovers } path={ updatedPath } @@ -209,6 +219,25 @@ function ListViewBranch( props ) { ); } ) } + { showAppender && ( + + + { ( treeGridCellProps ) => ( + + ) } + + + ) } ); } diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 5425290809a18b..0d6875e349e322 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -55,10 +55,17 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. * @param {boolean} props.showBlockMovers Flag to enable block movers * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. + * @param {boolean} props.showAppender Flag to show or hide the block appender. * @param {Object} ref Forwarded ref */ function ListView( - { id, blocks, showBlockMovers = false, isExpanded = false }, + { + id, + blocks, + showBlockMovers = false, + isExpanded = false, + showAppender = false, + }, ref ) { const { clientIdsTree, draggedClientIds, selectedClientIds } = @@ -204,6 +211,7 @@ function ListView( selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } shouldShowInnerBlocks={ shouldShowInnerBlocks } + showAppender={ showAppender } /> From 0f35d94a1d13d91263f64ff7d961ab490e932a67 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 16 Mar 2023 13:17:33 +0000 Subject: [PATCH 2/7] Lock the showAppender prop --- packages/block-editor/src/components/list-view/index.js | 8 ++++++-- packages/block-editor/src/private-apis.js | 2 ++ .../src/components/secondary-sidebar/list-view-sidebar.js | 7 ++++--- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 0d6875e349e322..524c8ca4dc29be 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -58,7 +58,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.showAppender Flag to show or hide the block appender. * @param {Object} ref Forwarded ref */ -function ListView( +function ListViewComponent( { id, blocks, @@ -218,4 +218,8 @@ function ListView( ); } -export default forwardRef( ListView ); +export const PrivateListView = forwardRef( ListViewComponent ); + +export default forwardRef( ( props, ref ) => { + return ; +} ); diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index b34f35adc5c911..567849f66f019e 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -7,6 +7,7 @@ import { lock } from './lock-unlock'; import OffCanvasEditor from './components/off-canvas-editor'; import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu'; import { ComposedPrivateInserter as PrivateInserter } from './components/inserter'; +import { PrivateListView } from './components/list-view'; /** * Private @wordpress/block-editor APIs. @@ -18,4 +19,5 @@ lock( privateApis, { LeafMoreMenu, OffCanvasEditor, PrivateInserter, + PrivateListView, } ); 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 eaad82acafa273..90b099eab1386b 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 @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __experimentalListView as ListView } from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { Button } from '@wordpress/components'; import { useFocusOnMount, @@ -18,6 +18,7 @@ import { ESCAPE } from '@wordpress/keycodes'; * Internal dependencies */ import { store as editSiteStore } from '../../store'; +import { unlock } from '../../private-apis'; export default function ListViewSidebar() { const { setIsListViewOpened } = useDispatch( editSiteStore ); @@ -33,7 +34,7 @@ export default function ListViewSidebar() { const instanceId = useInstanceId( ListViewSidebar ); const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`; - + const { PrivateListView } = unlock( blockEditorPrivateApis ); return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- +
); From 8b51c2ad9c6a31a13c294deab3a898f7aadf5397 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 21 Mar 2023 13:06:58 +0000 Subject: [PATCH 3/7] Update packages/block-editor/src/components/list-view/appender.js Co-authored-by: Daniel Richards --- packages/block-editor/src/components/list-view/appender.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index 8dedecb991b750..ae9f912421a499 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -62,7 +62,7 @@ export const Appender = forwardRef( return null; } - const descriptionId = `off-canvas-editor-appender__${ instanceId }`; + const descriptionId = `list-view-editor-appender__${ instanceId }`; const description = sprintf( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ __( 'Append to %1$s block at position %2$d, Level %3$d' ), From b786676438e909f8d5d3cb9a9bb465fea791b6b6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 21 Mar 2023 13:07:07 +0000 Subject: [PATCH 4/7] Update packages/block-editor/src/components/list-view/appender.js Co-authored-by: Daniel Richards --- packages/block-editor/src/components/list-view/appender.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index ae9f912421a499..5619e1e4542dd7 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -72,7 +72,7 @@ export const Appender = forwardRef( ); return ( -
+
Date: Tue, 21 Mar 2023 13:07:13 +0000 Subject: [PATCH 5/7] Update packages/block-editor/src/components/list-view/appender.js Co-authored-by: Daniel Richards --- packages/block-editor/src/components/list-view/appender.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index 5619e1e4542dd7..65a035d2d234c0 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -90,7 +90,7 @@ export const Appender = forwardRef( } } />
{ description } From 824f4d157f6b02c5445f888aaf39972f4c2688d9 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 21 Mar 2023 13:35:54 +0000 Subject: [PATCH 6/7] copy CSS across --- .../src/components/list-view/appender.js | 6 +++--- .../src/components/list-view/style.scss | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index 65a035d2d234c0..a006b91e860c20 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -62,7 +62,7 @@ export const Appender = forwardRef( return null; } - const descriptionId = `list-view-editor-appender__${ instanceId }`; + const descriptionId = `list-view-appender__${ instanceId }`; const description = sprintf( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ __( 'Append to %1$s block at position %2$d, Level %3$d' ), @@ -72,7 +72,7 @@ export const Appender = forwardRef( ); return ( -
+
{ description } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 0bedb39061af4c..9a1b2f501d4dca 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -410,3 +410,22 @@ $block-navigation-max-indent: 8; height: 36px; } +.list-view-appender .block-editor-inserter__toggle { + background-color: #1e1e1e; + color: #fff; + margin: $grid-unit-10 0 0 24px; + border-radius: 2px; + height: 24px; + min-width: 24px; + padding: 0; + + &:hover, + &:focus { + background: var(--wp-admin-theme-color); + color: #fff; + } +} + +.list-view-appender__description { + display: none; +} From 012bea15e47c3baddf3f4b8062bb6eea87150dca Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Mar 2023 09:18:26 +0000 Subject: [PATCH 7/7] remove the appender from the list view --- .../src/components/secondary-sidebar/list-view-sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 90b099eab1386b..dc33ffb649c7de 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 @@ -60,7 +60,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - +
);