From 8357fceaf5acf26777770741975a1f5ad67619b3 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 24 Sep 2024 19:26:48 +0900 Subject: [PATCH 01/25] Site Editor: Make resizable frame compatible with RTL languages (#65545) * Site Editor: Make resizable frame compatible with RTL languages * Update packages/edit-site/src/components/resizable-frame/index.js Co-authored-by: Mitchell Austin * Fix dragging behaviour --------- Co-authored-by: t-hamano Co-authored-by: stokesman --- .../src/components/resizable-frame/index.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index b589a3861c75d3..b5aae01918e691 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -14,7 +14,7 @@ import { } from '@wordpress/components'; import { useInstanceId, useReducedMotion } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -171,7 +171,10 @@ function ResizableFrame( { event.preventDefault(); const step = 20 * ( event.shiftKey ? 5 : 1 ); - const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 ); + const delta = + step * + ( event.key === 'ArrowLeft' ? 1 : -1 ) * + ( isRTL() ? -1 : 1 ); const newWidth = Math.min( Math.max( FRAME_MIN_WIDTH, @@ -200,15 +203,17 @@ function ResizableFrame( { const resizeHandleVariants = { hidden: { opacity: 0, - left: 0, + ...( isRTL() ? { right: 0 } : { left: 0 } ), }, visible: { opacity: 1, - left: -14, // Account for the handle's width. + // Account for the handle's width. + ...( isRTL() ? { right: -14 } : { left: -14 } ), }, active: { opacity: 1, - left: -14, // Account for the handle's width. + // Account for the handle's width. + ...( isRTL() ? { right: -14 } : { left: -14 } ), scaleY: 1.3, }, }; @@ -246,10 +251,11 @@ function ResizableFrame( { size={ frameSize } enable={ { top: false, - right: false, bottom: false, // Resizing will be disabled until the editor content is loaded. - left: isReady, + ...( isRTL() + ? { right: isReady, left: false } + : { left: isReady, right: false } ), topRight: false, bottomRight: false, bottomLeft: false, @@ -269,7 +275,7 @@ function ResizableFrame( { onMouseOver={ () => setShouldShowHandle( true ) } onMouseOut={ () => setShouldShowHandle( false ) } handleComponent={ { - left: canvasMode === 'view' && ( + [ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && ( <> { /* Disable reason: role="separator" does in fact support aria-valuenow */ } From 82dff1321f83329e1ba00b945a67d97edc291870 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 24 Sep 2024 19:27:28 +0900 Subject: [PATCH 02/25] Don't show tooltip in zoom out toggle button when showIconLabels is true (#65573) Co-authored-by: t-hamano Co-authored-by: afercia Co-authored-by: draganescu --- packages/editor/src/components/zoom-out-toggle/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 214b1c51fd6255..dd4669d04bec18 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { square as zoomOutIcon } from '@wordpress/icons'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -14,8 +15,12 @@ import { square as zoomOutIcon } from '@wordpress/icons'; import { unlock } from '../../lock-unlock'; const ZoomOutToggle = () => { - const { isZoomOut } = useSelect( ( select ) => ( { + const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( { isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(), + showIconLabels: select( preferencesStore ).get( + 'core', + 'showIconLabels' + ), } ) ); const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock( @@ -38,6 +43,7 @@ const ZoomOutToggle = () => { label={ __( 'Toggle Zoom Out' ) } isPressed={ isZoomOut } size="compact" + showTooltip={ ! showIconLabels } /> ); }; From 228ab3aa8ce5ae1578ddd6980ecceab63ce2ae3f Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 24 Sep 2024 19:28:36 +0900 Subject: [PATCH 03/25] Resizable Editor: Make the editor resizable with arrow keys (#65546) Co-authored-by: t-hamano Co-authored-by: kevin940726 --- .../editor/src/components/resizable-editor/resize-handle.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/editor/src/components/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js index dbba31f6f998ba..ccd903d0f3a172 100644 --- a/packages/editor/src/components/resizable-editor/resize-handle.js +++ b/packages/editor/src/components/resizable-editor/resize-handle.js @@ -15,6 +15,11 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) { function handleKeyDown( event ) { const { keyCode } = event; + if ( keyCode !== LEFT && keyCode !== RIGHT ) { + return; + } + event.preventDefault(); + if ( ( direction === 'left' && keyCode === LEFT ) || ( direction === 'right' && keyCode === RIGHT ) From 8a658c85107e5811c55506bbe85b9480992bfd27 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 24 Sep 2024 12:24:18 +0100 Subject: [PATCH 04/25] Components: Simplify MenuGroup component styles (#65561) Co-authored-by: youknowriad Co-authored-by: ciampo Co-authored-by: andrewserong --- packages/components/CHANGELOG.md | 4 ++++ .../src/dropdown-menu/stories/index.story.tsx | 3 +++ .../src/dropdown/stories/index.story.tsx | 1 + packages/components/src/dropdown/style.scss | 23 ++++++++----------- packages/components/src/menu-group/style.scss | 5 +++- 5 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 34522f79572652..71aa08d6934034 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,6 +7,10 @@ - `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)). - `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)). +### Enhancements + +- `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)). + ## 28.8.0 (2024-09-19) ### Bug Fixes diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index b6bc11ddec9abf..dd4907bd0b96b1 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -96,6 +96,9 @@ export const WithChildren: StoryObj< typeof DropdownMenu > = { icon: more, children: ( { onClose } ) => ( <> + + Standalone Item + Move Up diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index c6fe5014ffdc2a..0f07664787cc33 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = { ...Default.args, renderContent: () => ( <> + Standalone Item Item 1 Item 2 diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss index 8a5b0e0a0a6a28..d7ae7963f7ed8c 100644 --- a/packages/components/src/dropdown/style.scss +++ b/packages/components/src/dropdown/style.scss @@ -5,6 +5,16 @@ .components-dropdown__content { .components-popover__content { padding: $grid-unit-10; + + &:has(.components-menu-group) { + padding: 0; + + .components-dropdown-menu__menu > .components-menu-item__button, + > .components-menu-item__button { + margin: $grid-unit-10; + width: auto; + } + } } [role="menuitem"] { @@ -13,22 +23,9 @@ .components-menu-group { padding: $grid-unit-10; - margin-top: 0; - margin-bottom: 0; - margin-left: -$grid-unit-10; - margin-right: -$grid-unit-10; - - &:first-child { - margin-top: -$grid-unit-10; - } - - &:last-child { - margin-bottom: -$grid-unit-10; - } } .components-menu-group + .components-menu-group { - margin-top: 0; border-top: $border-width solid $gray-400; padding: $grid-unit-10; } diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index d9412c504940b3..744e3f74c5b955 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -1,5 +1,4 @@ .components-menu-group + .components-menu-group { - margin-top: $grid-unit-10; padding-top: $grid-unit-10; border-top: $border-width solid $gray-900; @@ -10,6 +9,10 @@ } } +.components-menu-group:has(> div:empty) { + display: none; +} + .components-menu-group__label { padding: 0 $grid-unit-10; margin-top: $grid-unit-05; From cf78cf014d766b32cbb7326f948cc7381c411289 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 24 Sep 2024 12:26:47 +0100 Subject: [PATCH 05/25] Inserter: Update how we compute the actual insertion point for blocks (#65490) Co-authored-by: youknowriad Co-authored-by: andrewserong Co-authored-by: jorgefilipecosta Co-authored-by: jasmussen --- .../components/inserter/block-types-tab.js | 2 +- .../inserter/hooks/use-block-types-state.js | 48 +++++++++---- .../inserter/hooks/use-insertion-point.js | 35 +++++++--- .../inserter/hooks/use-patterns-state.js | 2 +- .../inserter/media-tab/media-preview.js | 8 ++- .../inserter/test/block-types-tab.native.js | 67 ------------------ .../src/store/private-selectors.js | 38 ++++++++++ packages/block-editor/src/store/selectors.js | 70 +++++-------------- packages/block-editor/src/store/utils.js | 3 +- 9 files changed, 122 insertions(+), 151 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter/test/block-types-tab.native.js diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 50a8b46b46427c..844d5dd341437e 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -186,7 +186,7 @@ export function BlockTypesTab( continue; } - if ( rootClientId && item.rootClientId === rootClientId ) { + if ( rootClientId && item.isAllowedInCurrentRoot ) { itemsForCurrentRoot.push( item ); } else { itemsRemaining.push( item ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 8db23267eee8f4..6f11060c75c494 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -2,19 +2,23 @@ * WordPress dependencies */ import { + getBlockType, createBlock, createBlocksFromInnerBlocksTemplate, store as blocksStore, parse, } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useCallback, useMemo } from '@wordpress/element'; +import { store as noticesStore } from '@wordpress/notices'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; -import { withRootClientIdOptionKey } from '../../../store/utils'; +import { isFiltered } from '../../../store/utils'; +import { unlock } from '../../../lock-unlock'; /** * Retrieves the block types inserter state. @@ -26,7 +30,7 @@ import { withRootClientIdOptionKey } from '../../../store/utils'; */ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { const options = useMemo( - () => ( { [ withRootClientIdOptionKey ]: ! isQuick } ), + () => ( { [ isFiltered ]: !! isQuick } ), [ isQuick ] ); const [ items ] = useSelect( @@ -38,6 +42,10 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { ], [ rootClientId, options ] ); + const { getClosestAllowedInsertionPoint } = unlock( + useSelect( blockEditorStore ) + ); + const { createErrorNotice } = useDispatch( noticesStore ); const [ categories, collections ] = useSelect( ( select ) => { const { getCategories, getCollections } = select( blocksStore ); @@ -46,16 +54,29 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { const onSelectItem = useCallback( ( - { - name, - initialAttributes, - innerBlocks, - syncStatus, - content, - rootClientId: _rootClientId, - }, + { name, initialAttributes, innerBlocks, syncStatus, content }, shouldFocusBlock ) => { + const destinationClientId = getClosestAllowedInsertionPoint( + name, + rootClientId + ); + if ( destinationClientId === null ) { + const title = getBlockType( name )?.title ?? name; + createErrorNotice( + sprintf( + /* translators: %s: block pattern title. */ + __( 'Block "%s" can\'t be inserted.' ), + title + ), + { + type: 'snackbar', + id: 'inserter-notice', + } + ); + return; + } + const insertedBlock = syncStatus === 'unsynced' ? parse( content, { @@ -66,15 +87,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { initialAttributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) ); - onInsert( insertedBlock, undefined, shouldFocusBlock, - _rootClientId + destinationClientId ); }, - [ onInsert ] + [ onInsert, getClosestAllowedInsertionPoint, rootClientId ] ); return [ items, categories, collections, onSelectItem ]; diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 24074ec5004565..0cd71bf77b9830 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -71,7 +71,11 @@ function useInsertionPoint( { selectBlockOnInsert = true, } ) { const registry = useRegistry(); - const { getSelectedBlock } = useSelect( blockEditorStore ); + const { + getSelectedBlock, + getClosestAllowedInsertionPoint, + isBlockInsertionPointVisible, + } = unlock( useSelect( blockEditorStore ) ); const { destinationRootClientId, destinationIndex } = useSelect( ( select ) => { const { @@ -193,21 +197,30 @@ function useInsertionPoint( { const onToggleInsertionPoint = useCallback( ( item ) => { - if ( item?.hasOwnProperty( 'rootClientId' ) ) { - showInsertionPoint( - item.rootClientId, - getIndex( { - destinationRootClientId, - destinationIndex, - rootClientId: item.rootClientId, - registry, - } ) - ); + if ( item && ! isBlockInsertionPointVisible() ) { + const allowedDestinationRootClientId = + getClosestAllowedInsertionPoint( + item.name, + destinationRootClientId + ); + if ( allowedDestinationRootClientId !== null ) { + showInsertionPoint( + allowedDestinationRootClientId, + getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: allowedDestinationRootClientId, + registry, + } ) + ); + } } else { hideInsertionPoint(); } }, [ + getClosestAllowedInsertionPoint, + isBlockInsertionPointVisible, showInsertionPoint, hideInsertionPoint, destinationRootClientId, diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index 6483dc58ae8b97..f8b083d4eedf19 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -87,7 +87,7 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => { ), { type: 'snackbar', - id: 'block-pattern-inserted-notice', + id: 'inserter-notice', } ); }, diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js index 64088f45fa1c39..a890e5fe8dc132 100644 --- a/packages/block-editor/src/components/inserter/media-tab/media-preview.js +++ b/packages/block-editor/src/components/inserter/media-tab/media-preview.js @@ -184,13 +184,16 @@ export function MediaPreview( { media, onClick, category } ) { } ); createSuccessNotice( __( 'Image uploaded and inserted.' ), - { type: 'snackbar' } + { type: 'snackbar', id: 'inserter-notice' } ); setIsInserting( false ); }, allowedTypes: ALLOWED_MEDIA_TYPES, onError( message ) { - createErrorNotice( message, { type: 'snackbar' } ); + createErrorNotice( message, { + type: 'snackbar', + id: 'inserter-notice', + } ); setIsInserting( false ); }, } ); @@ -281,6 +284,7 @@ export function MediaPreview( { media, onClick, category } ) { onClick( cloneBlock( block ) ); createSuccessNotice( __( 'Image inserted.' ), { type: 'snackbar', + id: 'inserter-notice', } ); setShowExternalUploadModal( false ); } } diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js deleted file mode 100644 index 925570130359a6..00000000000000 --- a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js +++ /dev/null @@ -1,67 +0,0 @@ -/** - * External dependencies - */ -import { render } from 'test/helpers'; - -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import items from './fixtures'; -import BlockTypesTab from '../block-types-tab'; - -jest.mock( '../hooks/use-clipboard-block' ); -jest.mock( '@wordpress/data/src/components/use-select' ); - -const selectMock = { - getCategories: jest.fn().mockReturnValue( [] ), - getCollections: jest.fn().mockReturnValue( [] ), - getInserterItems: jest.fn().mockReturnValue( [] ), - canInsertBlockType: jest.fn(), - getBlockType: jest.fn(), - getClipboard: jest.fn(), - getSettings: jest.fn( () => ( { impressions: {} } ) ), -}; - -describe( 'BlockTypesTab component', () => { - beforeEach( () => { - useSelect.mockImplementation( ( callback ) => - callback( () => selectMock ) - ); - } ); - - it( 'renders without crashing', () => { - const component = render( - - ); - expect( component ).toBeTruthy(); - } ); - - it( 'shows block items', () => { - selectMock.getInserterItems.mockReturnValue( items ); - - const blockItems = items.filter( - ( { id, category } ) => - category !== 'reusable' && id !== 'core-embed/a-paragraph-embed' - ); - const component = render( - - ); - - blockItems.forEach( ( item ) => { - expect( component.getByText( item.title ) ).toBeTruthy(); - } ); - } ); -} ); diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 9e99176819ae89..02a37b94ec27ff 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -16,6 +16,7 @@ import { getTemplateLock, getClientIdsWithDescendants, isNavigationMode, + getBlockRootClientId, } from './selectors'; import { checkAllowListRecursive, @@ -637,3 +638,40 @@ export function getZoomLevel( state ) { export function isZoomOut( state ) { return getZoomLevel( state ) < 100; } + +/** + * Finds the closest block where the block is allowed to be inserted. + * + * @param {Object} state Editor state. + * @param {string} name Block name. + * @param {string} clientId Default insertion point. + * + * @return {string} clientID of the closest container when the block name can be inserted. + */ +export function getClosestAllowedInsertionPoint( state, name, clientId = '' ) { + // If we're trying to insert at the root level and it's not allowed + // Try the section root instead. + if ( ! clientId ) { + if ( canInsertBlockType( state, name, clientId ) ) { + return clientId; + } + + const sectionRootClientId = getSectionRootClientId( state ); + if ( + sectionRootClientId && + canInsertBlockType( state, name, sectionRootClientId ) + ) { + return sectionRootClientId; + } + return null; + } + + // Traverse the block tree up until we find a place where we can insert. + let current = clientId; + while ( current !== null && ! canInsertBlockType( state, name, current ) ) { + const parentClientId = getBlockRootClientId( state, current ); + current = parentClientId; + } + + return current; +} diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 20d6627398886c..3163bb5257a9ad 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -21,7 +21,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data'; * Internal dependencies */ import { - withRootClientIdOptionKey, + isFiltered, checkAllowListRecursive, checkAllowList, getAllPatternsDependants, @@ -80,7 +80,9 @@ const EMPTY_ARRAY = []; */ const EMPTY_SET = new Set(); -const EMPTY_OBJECT = {}; +const DEFAULT_INSERTER_OPTIONS = { + [ isFiltered ]: true, +}; /** * Returns a block's name given its client ID, or null if no block exists with @@ -2008,7 +2010,7 @@ const buildBlockTypeItem = */ export const getInserterItems = createRegistrySelector( ( select ) => createSelector( - ( state, rootClientId = null, options = EMPTY_OBJECT ) => { + ( state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS ) => { const buildReusableBlockInserterItem = ( reusableBlock ) => { const icon = ! reusableBlock.wp_pattern_sync_status ? { @@ -2056,56 +2058,7 @@ export const getInserterItems = createRegistrySelector( ( select ) => ) .map( buildBlockTypeInserterItem ); - if ( options[ withRootClientIdOptionKey ] ) { - blockTypeInserterItems = blockTypeInserterItems.reduce( - ( accumulator, item ) => { - item.rootClientId = rootClientId ?? ''; - - while ( - ! canInsertBlockTypeUnmemoized( - state, - item.name, - item.rootClientId - ) - ) { - if ( ! item.rootClientId ) { - let sectionRootClientId; - try { - sectionRootClientId = - getSectionRootClientId( state ); - } catch ( e ) {} - if ( - sectionRootClientId && - canInsertBlockTypeUnmemoized( - state, - item.name, - sectionRootClientId - ) - ) { - item.rootClientId = sectionRootClientId; - } else { - delete item.rootClientId; - } - break; - } else { - const parentClientId = getBlockRootClientId( - state, - item.rootClientId - ); - item.rootClientId = parentClientId; - } - } - - // We could also add non insertable items and gray them out. - if ( item.hasOwnProperty( 'rootClientId' ) ) { - accumulator.push( item ); - } - - return accumulator; - }, - [] - ); - } else { + if ( options[ isFiltered ] !== false ) { blockTypeInserterItems = blockTypeInserterItems.filter( ( blockType ) => canIncludeBlockTypeInInserter( @@ -2114,6 +2067,17 @@ export const getInserterItems = createRegistrySelector( ( select ) => rootClientId ) ); + } else { + blockTypeInserterItems = blockTypeInserterItems.map( + ( blockType ) => ( { + ...blockType, + isAllowedInCurrentRoot: canIncludeBlockTypeInInserter( + state, + blockType, + rootClientId + ), + } ) + ); } const items = blockTypeInserterItems.reduce( diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js index 79e15255e6cc15..9b83a8f74cf9aa 100644 --- a/packages/block-editor/src/store/utils.js +++ b/packages/block-editor/src/store/utils.js @@ -12,8 +12,7 @@ import { unlock } from '../lock-unlock'; import { STORE_NAME } from './constants'; import { getSectionRootClientId } from './private-selectors'; -export const withRootClientIdOptionKey = Symbol( 'withRootClientId' ); - +export const isFiltered = Symbol( 'isFiltered' ); const parsedPatternCache = new WeakMap(); const grammarMapCache = new WeakMap(); From df5eaed851c7effe459aa2a5f6cdf41cd3648104 Mon Sep 17 00:00:00 2001 From: Vipul Gupta <55375170+vipul0425@users.noreply.github.com> Date: Tue, 24 Sep 2024 17:15:19 +0530 Subject: [PATCH 06/25] Fix: Button Replace remaining 40px default size violations [Block Editor 3] (#65225) * Fix: Global Styles component to use 40px default size. * Fix: Block variation picket to use 40px default size. * Fix: Block variation transform to use 40px default size. * Fix: color gradient dropdown and block appender button to use 40px default size. * fix: shadowpanel clear button * fix: Button Block appender issues. * fix: Coverts shadow panel Buttons to normal html buttons. * Update packages/block-library/src/group/editor.scss Co-authored-by: Lena Morita * Update packages/block-library/src/group/editor.scss Co-authored-by: Lena Morita * feat: Add tootlip tu shadow button. --------- Co-authored-by: vipul0425 Co-authored-by: DaniGuardiola Co-authored-by: t-hamano Co-authored-by: jasmussen Co-authored-by: jameskoster Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo --- .../block-variation-picker/index.js | 3 +- .../block-variation-transforms/index.js | 4 +- .../button-block-appender/content.scss | 5 -- .../components/button-block-appender/index.js | 3 +- .../components/colors-gradients/dropdown.js | 6 +- .../components/global-styles/color-panel.js | 6 +- .../components/global-styles/filters-panel.js | 3 +- .../global-styles/shadow-panel-components.js | 61 +++++++++---------- .../src/components/global-styles/style.scss | 5 ++ packages/block-library/src/group/editor.scss | 4 +- 10 files changed, 42 insertions(+), 58 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js index ecdf8b23bec3fe..f3687a305e84fd 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.js +++ b/packages/block-editor/src/components/block-variation-picker/index.js @@ -64,8 +64,7 @@ function BlockVariationPicker( { { allowSkip && (
- } - /> + + + { isActive && } + + } + /> + ); } @@ -143,11 +142,7 @@ function renderShadowToggle() { }; return ( -