Skip to content

Expose Patterns Modal to core/interface store like the Preferences modal #54199

New issue
New issue
Open
Open
Expose Patterns Modal to core/interface store like the Preferences modal#54199
Labels
[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Type] EnhancementA suggestion for improvement.
@jhned

Description

@jhned
jhned
opened on Sep 5, 2023

What problem does this address?

The only way to open the Patterns modal is to click on the Block Inserter, go to the Patterns tab, and then click "Explore All Patterns." This makes it more difficult for users to discover patterns. The Patterns modal visibility is controlled via useState in the BlockPatternsTabs component.

gutenberg/packages/block-editor/src/components/inserter/block-patterns-tab.js

Lines 255 to 263 in bcaac56

<Button
className="block-editor-inserter__patterns-explore-button"
onClick={ () =>
setShowPatternsExplorer( true )
}
variant="secondary"
>
{ __( 'Explore all patterns' ) }
</Button>

What is your proposed solution?

If the Patterns modal were accessible via the core/interface data store like the Preferences modal, then the Patterns modal could be opened via other methods.

gutenberg/packages/edit-site/src/components/preferences-modal/index.js

Lines 21 to 29 in bcaac56

export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
export default function EditSitePreferencesModal() {
const isModalActive = useSelect( ( select ) =>
select( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )
);
const { closeModal, openModal } = useDispatch( interfaceStore );
const toggleModal = () =>
isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );

We could then use wp.data.dispatch('core/interface').openModal(PATTERNS_MODAL_NAME) to open the modal.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions