Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix pattern creation button in list view dropdown menu #53562

Merged
merged 4 commits into from
Aug 15, 2023
Merged

Fix pattern creation button in list view dropdown menu #53562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ca55a1
Fix create pattern menu item
kevin940726 Aug 11, 2023
b359cfe
Fix click-menu-item not waiting for the element to appear
kevin940726 Aug 14, 2023
1bb5555
Update to the patterns package
kevin940726 Aug 15, 2023
b884933
Add custom export for native
glendaviesnz Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/e2e-test-utils/src/click-menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* @param {string} label The label to search the menu item for.
*/
export async function clickMenuItem( label ) {
const menuItems = await page.$x(
const menuItem = await page.waitForXPath(
`//*[@role="menu"]//*[text()="${ label }"]`
);
await menuItems[ 0 ].click();
await menuItem.click();
}
31 changes: 16 additions & 15 deletions packages/patterns/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { BlockSettingsMenuControls } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -11,20 +10,22 @@ import PatternConvertButton from './pattern-convert-button';
import PatternsManageButton from './patterns-manage-button';

export default function PatternsMenuItems( { rootClientId } ) {
const clientIds = useSelect(
( select ) => select( blockEditorStore ).getSelectedBlockClientIds(),
[]
);

return (
<>
<PatternConvertButton
clientIds={ clientIds }
rootClientId={ rootClientId }
/>
{ clientIds.length === 1 && (
<PatternsManageButton clientId={ clientIds[ 0 ] } />
<BlockSettingsMenuControls>
{ ( { onClose, selectedClientIds } ) => (
<>
<PatternConvertButton
clientIds={ selectedClientIds }
rootClientId={ rootClientId }
onClose={ onClose }
/>
{ selectedClientIds.length === 1 && (
<PatternsManageButton
clientId={ selectedClientIds[ 0 ] }
/>
) }
</>
) }
</>
</BlockSettingsMenuControls>
);
}
61 changes: 28 additions & 33 deletions packages/patterns/src/components/pattern-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
* WordPress dependencies
*/
import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
import {
BlockSettingsMenuControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { MenuItem } from '@wordpress/components';
import { symbol } from '@wordpress/icons';
Expand All @@ -24,9 +21,14 @@ import CreatePatternModal from './create-pattern-modal';
* @param {Object} props Component props.
* @param {string[]} props.clientIds Client ids of selected blocks.
* @param {string} props.rootClientId ID of the currently selected top-level block.
* @param {()=>void} props.onClose Callback to close the menu.
* @return {import('@wordpress/element').WPComponent} The menu control or null.
*/
export default function PatternConvertButton( { clientIds, rootClientId } ) {
export default function PatternConvertButton( {
clientIds,
rootClientId,
onClose,
} ) {
const { createSuccessNotice } = useDispatch( noticesStore );
const [ isModalOpen, setIsModalOpen ] = useState( false );
const canConvert = useSelect(
Expand Down Expand Up @@ -103,34 +105,27 @@ export default function PatternConvertButton( { clientIds, rootClientId } ) {
setIsModalOpen( false );
};
return (
<BlockSettingsMenuControls>
{ ( { onClose } ) => (
<>
<MenuItem
icon={ symbol }
onClick={ () => setIsModalOpen( true ) }
>
{ __( 'Create pattern' ) }
</MenuItem>
{ isModalOpen && (
<CreatePatternModal
clientIds={ clientIds }
onSuccess={ ( pattern ) => {
handleSuccess( pattern );
onClose();
} }
onError={ () => {
setIsModalOpen( false );
onClose();
} }
onClose={ () => {
setIsModalOpen( false );
onClose();
} }
/>
) }
</>
<>
<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
{ __( 'Create pattern' ) }
</MenuItem>
{ isModalOpen && (
<CreatePatternModal
clientIds={ clientIds }
onSuccess={ ( pattern ) => {
handleSuccess( pattern );
onClose();
} }
onError={ () => {
setIsModalOpen( false );
onClose();
} }
onClose={ () => {
setIsModalOpen( false );
onClose();
} }
/>
) }
</BlockSettingsMenuControls>
</>
);
}
9 changes: 3 additions & 6 deletions packages/patterns/src/components/patterns-manage-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { isReusableBlock } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
BlockSettingsMenuControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { addQueryArgs } from '@wordpress/url';
import { store as coreStore } from '@wordpress/core-data';

Expand Down Expand Up @@ -62,7 +59,7 @@ function PatternsManageButton( { clientId } ) {
}

return (
<BlockSettingsMenuControls>
<>
<MenuItem href={ managePatternsUrl }>
{ __( 'Manage patterns' ) }
</MenuItem>
Expand All @@ -73,7 +70,7 @@ function PatternsManageButton( { clientId } ) {
: __( 'Detach pattern' ) }
</MenuItem>
) }
</BlockSettingsMenuControls>
</>
);
}

Expand Down
11 changes: 11 additions & 0 deletions packages/patterns/src/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* Internal dependencies
*/
import './store';
import { lock } from './lock-unlock';

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dcalhoun, @geriux, @fluiddot we have added a patterns package which will over time deprecate the reusable-blocks package. For native this is just exporting a null return component for PatternsMenuItems in the same way that the [ReusableBlocksMenuItems](https://github.com/WordPress/gutenberg/blob/trunk/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.native.js) does. When you have a moment can you just double-check that everything is still as it should be from the mobile app end, ie. no Create pattern/reusable block menu appears.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From testing briefly, I did not encounter any unexpected changes. The UX appears to have remained the same in the mobile editor. Thank you for providing the opportunity to double-check! 🙇🏻

export const privateApis = {};
lock( privateApis, {
CreatePatternModal: () => null,
PatternsMenuItems: () => null,
} );
31 changes: 16 additions & 15 deletions packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { BlockSettingsMenuControls } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -11,20 +10,22 @@ import ReusableBlockConvertButton from './reusable-block-convert-button';
import ReusableBlocksManageButton from './reusable-blocks-manage-button';

export default function ReusableBlocksMenuItems( { rootClientId } ) {
const clientIds = useSelect(
( select ) => select( blockEditorStore ).getSelectedBlockClientIds(),
[]
);

return (
<>
<ReusableBlockConvertButton
clientIds={ clientIds }
rootClientId={ rootClientId }
/>
{ clientIds.length === 1 && (
<ReusableBlocksManageButton clientId={ clientIds[ 0 ] } />
<BlockSettingsMenuControls>
{ ( { onClose, selectedClientIds } ) => (
<>
<ReusableBlockConvertButton
clientIds={ selectedClientIds }
rootClientId={ rootClientId }
onClose={ onClose }
/>
{ selectedClientIds.length === 1 && (
<ReusableBlocksManageButton
clientId={ selectedClientIds[ 0 ] }
/>
) }
</>
) }
</>
</BlockSettingsMenuControls>
);
}
136 changes: 64 additions & 72 deletions ...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
import {
BlockSettingsMenuControls,
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -35,11 +34,13 @@ import { unlock } from '../../lock-unlock';
* @param {Object} props Component props.
* @param {string[]} props.clientIds Client ids of selected blocks.
* @param {string} props.rootClientId ID of the currently selected top-level block.
* @param {()=>void} props.onClose Callback to close the menu.
* @return {import('@wordpress/element').WPComponent} The menu control or null.
*/
export default function ReusableBlockConvertButton( {
clientIds,
rootClientId,
onClose,
} ) {
const { useReusableBlocksRenameHint, ReusableBlocksRenameHint } = unlock(
blockEditorPrivateApis
Expand Down Expand Up @@ -148,80 +149,71 @@ export default function ReusableBlockConvertButton( {
}

return (
<BlockSettingsMenuControls>
{ ( { onClose } ) => (
<>
<MenuItem
icon={ symbol }
onClick={ () => setIsModalOpen( true ) }
<>
<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
{ showRenameHint
? __( 'Create pattern/reusable block' )
: __( 'Create pattern' ) }
</MenuItem>
{ isModalOpen && (
<Modal
title={ __( 'Create pattern' ) }
onRequestClose={ () => {
setIsModalOpen( false );
setTitle( '' );
} }
overlayClassName="reusable-blocks-menu-items__convert-modal"
>
<form
onSubmit={ ( event ) => {
event.preventDefault();
onConvert( title );
setIsModalOpen( false );
setTitle( '' );
onClose();
} }
>
{ showRenameHint
? __( 'Create pattern/reusable block' )
: __( 'Create pattern' ) }
</MenuItem>
{ isModalOpen && (
<Modal
title={ __( 'Create pattern' ) }
onRequestClose={ () => {
setIsModalOpen( false );
setTitle( '' );
} }
overlayClassName="reusable-blocks-menu-items__convert-modal"
>
<form
onSubmit={ ( event ) => {
event.preventDefault();
onConvert( title );
setIsModalOpen( false );
setTitle( '' );
onClose();
} }
>
<VStack spacing="5">
<ReusableBlocksRenameHint />
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ __( 'My pattern' ) }
/>
<VStack spacing="5">
<ReusableBlocksRenameHint />
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ __( 'My pattern' ) }
/>

<ToggleControl
label={ __( 'Synced' ) }
help={ __(
'Editing the pattern will update it anywhere it is used.'
) }
checked={ ! syncType }
onChange={ () => {
setSyncType(
! syncType
? 'unsynced'
: undefined
);
} }
/>
<HStack justify="right">
<Button
variant="tertiary"
onClick={ () => {
setIsModalOpen( false );
setTitle( '' );
} }
>
{ __( 'Cancel' ) }
</Button>
<ToggleControl
label={ __( 'Synced' ) }
help={ __(
'Editing the pattern will update it anywhere it is used.'
) }
checked={ ! syncType }
onChange={ () => {
setSyncType(
! syncType ? 'unsynced' : undefined
);
} }
/>
<HStack justify="right">
<Button
variant="tertiary"
onClick={ () => {
setIsModalOpen( false );
setTitle( '' );
} }
>
{ __( 'Cancel' ) }
</Button>

<Button variant="primary" type="submit">
{ __( 'Create' ) }
</Button>
</HStack>
</VStack>
</form>
</Modal>
) }
</>
<Button variant="primary" type="submit">
{ __( 'Create' ) }
</Button>
</HStack>
</VStack>
</form>
</Modal>
) }
</BlockSettingsMenuControls>
</>
);
}
Loading
Loading