Skip to content

Commit

Permalink
[Site Editor]: Add create pattern button in patterns page (#60302)
Browse files Browse the repository at this point in the history 
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: alexstine <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: joedolson <[email protected]>
Co-authored-by: pablohoneyhoney <[email protected]>
Co-authored-by: SaxonF <[email protected]>
  • Loading branch information
@ntsekouras @youknowriad
@jameskoster @annezazu @richtabor @t-hamano @Mamaduka @afercia @joedolson
14 people authored May 21, 2024
1 parent e1aaee2 commit 49f3fe2
Show file tree
Hide file tree
Showing 12 changed files with 135 additions and 110 deletions.
51 changes: 29 additions & 22 deletions packages/edit-site/src/components/add-new-pattern/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { DropdownMenu } from '@wordpress/components';
import { useState, useRef } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
import { symbol, symbolFilled, upload } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import {
Expand All @@ -18,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import CreateTemplatePartModal from '../create-template-part-modal';
import SidebarButton from '../sidebar-button';
import { unlock } from '../../lock-unlock';
import {
PATTERN_TYPES,
Expand All @@ -41,10 +40,17 @@ export default function AddNewPattern() {
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );
const patternUploadInputRef = useRef();
const isBlockBasedTheme = useSelect(
( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
[]
);
const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } =
useSelect( ( select ) => {
const { getCurrentTheme, getPostType } = select( coreStore );
return {
isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
?.add_new_item,
addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
?.labels?.add_new_item,
};
}, [] );

function handleCreatePattern( { pattern } ) {
setShowPatternModal( false );
Expand Down Expand Up @@ -72,19 +78,19 @@ export default function AddNewPattern() {
setShowTemplatePartModal( false );
}

const controls = [];

controls.push( {
icon: symbol,
onClick: () => setShowPatternModal( true ),
title: __( 'Create pattern' ),
} );
const controls = [
{
icon: symbol,
onClick: () => setShowPatternModal( true ),
title: addNewPatternLabel,
},
];

if ( isBlockBasedTheme ) {
controls.push( {
icon: symbolFilled,
onClick: () => setShowTemplatePartModal( true ),
title: __( 'Create template part' ),
title: addNewTemplatePartLabel,
} );
}

Expand All @@ -99,14 +105,15 @@ export default function AddNewPattern() {
const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
return (
<>
<DropdownMenu
controls={ controls }
toggleProps={ {
as: SidebarButton,
} }
icon={ plus }
label={ __( 'Create pattern' ) }
/>
{ addNewPatternLabel && (
<DropdownMenu
controls={ controls }
icon={ null }
toggleProps={ { variant: 'primary', showTooltip: false } }
text={ addNewPatternLabel }
label={ addNewPatternLabel }
/>
) }
{ showPatternModal && (
<CreatePatternModal
onClose={ () => setShowPatternModal( false ) }
Expand Down
12 changes: 9 additions & 3 deletions packages/edit-site/src/components/create-template-part-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,18 @@ import {
} from '../../utils/template-part-create';

export default function CreateTemplatePartModal( {
modalTitle = __( 'Create template part' ),
modalTitle,
...restProps
} ) {
const defaultModalTitle = useSelect(
( select ) =>
select( coreStore ).getPostType( TEMPLATE_PART_POST_TYPE )?.labels
?.add_new_item,
[]
);
return (
<Modal
title={ modalTitle }
title={ modalTitle || defaultModalTitle }
onRequestClose={ restProps.closeModal }
overlayClassName="edit-site-create-template-part-modal"
>
Expand All @@ -56,7 +62,7 @@ export default function CreateTemplatePartModal( {
export function CreateTemplatePartModalContents( {
defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
blocks = [],
confirmLabel = __( 'Create' ),
confirmLabel = __( 'Add' ),
closeModal,
onCreate,
onError,
Expand Down
31 changes: 16 additions & 15 deletions packages/edit-site/src/components/page-pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,13 +273,13 @@ export default function PagePages() {
[ totalItems, totalPages ]
);

const { frontPageId, postsPageId } = useSelect( ( select ) => {
const { getEntityRecord } = select( coreStore );
const { frontPageId, postsPageId, addNewLabel } = useSelect( ( select ) => {
const { getEntityRecord, getPostType } = select( coreStore );
const siteSettings = getEntityRecord( 'root', 'site' );

return {
frontPageId: siteSettings?.page_on_front,
postsPageId: siteSettings?.page_for_posts,
addNewLabel: getPostType( 'page' )?.labels?.add_new_item,
};
} );

Expand Down Expand Up @@ -488,22 +488,23 @@ export default function PagePages() {
closeModal();
};

// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
return (
<Page
title={ __( 'Pages' ) }
actions={
<>
<Button variant="primary" onClick={ openModal }>
{ __( 'Add new page' ) }
</Button>
{ showAddPageModal && (
<AddNewPageModal
onSave={ handleNewPage }
onClose={ closeModal }
/>
) }
</>
addNewLabel && (
<>
<Button variant="primary" onClick={ openModal }>
{ addNewLabel }
</Button>
{ showAddPageModal && (
<AddNewPageModal
onSave={ handleNewPage }
onClose={ closeModal }
/>
) }
</>
)
}
>
<DataViews
Expand Down
62 changes: 33 additions & 29 deletions packages/edit-site/src/components/page-patterns/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { moreVertical } from '@wordpress/icons';
/**
* Internal dependencies
*/
import AddNewPattern from '../add-new-pattern';
import RenameCategoryMenuItem from './rename-category-menu-item';
import DeleteCategoryMenuItem from './delete-category-menu-item';
import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
Expand Down Expand Up @@ -57,39 +58,42 @@ export default function PatternsHeader( {
}

return (
<VStack className="edit-site-patterns__section-header">
<VStack className="edit-site-patterns__section-header" gap={ 3 }>
<HStack justify="space-between">
<Heading as="h2" level={ 4 } id={ titleId }>
{ title }
</Heading>
{ !! patternCategory?.id && (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
toggleProps={ {
className: 'edit-site-patterns__button',
describedBy: sprintf(
/* translators: %s: pattern category name */
__( 'Action menu for %s pattern category' ),
title
),
size: 'compact',
} }
>
{ ( { onClose } ) => (
<MenuGroup>
<RenameCategoryMenuItem
category={ patternCategory }
onClose={ onClose }
/>
<DeleteCategoryMenuItem
category={ patternCategory }
onClose={ onClose }
/>
</MenuGroup>
) }
</DropdownMenu>
) }
<HStack expanded={ false }>
<AddNewPattern />
{ !! patternCategory?.id && (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
toggleProps={ {
className: 'edit-site-patterns__button',
describedBy: sprintf(
/* translators: %s: pattern category name */
__( 'Action menu for %s pattern category' ),
title
),
size: 'compact',
} }
>
{ ( { onClose } ) => (
<MenuGroup>
<RenameCategoryMenuItem
category={ patternCategory }
onClose={ onClose }
/>
<DeleteCategoryMenuItem
category={ patternCategory }
onClose={ onClose }
/>
</MenuGroup>
) }
</DropdownMenu>
) }
</HStack>
</HStack>
{ description ? (
<Text variant="muted" as="p" id={ descriptionId }>
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import AddNewPattern from '../add-new-pattern';
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import CategoryItem from './category-item';
import {
Expand Down Expand Up @@ -126,7 +125,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
'Manage what patterns are available when editing the site.'
) }
backPath={ backPath }
actions={ <AddNewPattern /> }
content={
<>
{ isLoading && __( 'Loading items…' ) }
Expand Down
21 changes: 16 additions & 5 deletions packages/patterns/src/components/create-pattern-modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,37 @@ import {
} from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants';
import {
PATTERN_DEFAULT_CATEGORY,
PATTERN_SYNC_TYPES,
PATTERN_TYPES,
} from '../constants';
import { store as patternsStore } from '../store';
import CategorySelector from './category-selector';
import { useAddPatternCategory } from '../private-hooks';
import { unlock } from '../lock-unlock';

export default function CreatePatternModal( {
className = 'patterns-menu-items__convert-modal',
modalTitle = __( 'Create pattern' ),
modalTitle,
...restProps
} ) {
const defaultModalTitle = useSelect(
( select ) =>
select( coreStore ).getPostType( PATTERN_TYPES.user )?.labels
?.add_new_item,
[]
);
return (
<Modal
title={ modalTitle }
title={ modalTitle || defaultModalTitle }
onRequestClose={ restProps.onClose }
overlayClassName={ className }
>
Expand All @@ -40,7 +51,7 @@ export default function CreatePatternModal( {
}

export function CreatePatternModalContents( {
confirmLabel = __( 'Create' ),
confirmLabel = __( 'Add' ),
defaultCategories = [],
content,
onClose,
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ test.describe( 'Block editor keyboard shortcuts', () => {
.getByRole( 'menuitem', { name: 'Create pattern' } )
.click();
await page
.getByRole( 'dialog', { name: 'Create pattern' } )
.getByRole( 'dialog', { name: 'add new pattern' } )
.getByRole( 'textbox', { name: 'Name' } )
.fill( 'hi' );

Expand Down
4 changes: 2 additions & 2 deletions test/e2e/specs/editor/various/inserting-blocks.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
.click();
await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
const createPatternDialog = page.getByRole( 'dialog', {
name: 'Create pattern',
name: 'add new pattern',
} );
await createPatternDialog
.getByRole( 'textbox', { name: 'Name' } )
Expand All @@ -274,7 +274,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
.getByRole( 'checkbox', { name: 'Synced' } )
.setChecked( true );
await createPatternDialog
.getByRole( 'button', { name: 'Create' } )
.getByRole( 'button', { name: 'Add' } )
.click();
const patternBlock = page.getByRole( 'document', {
name: 'Block: Pattern',
Expand Down
12 changes: 6 additions & 6 deletions test/e2e/specs/editor/various/pattern-overrides.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,17 @@ test.describe( 'Pattern Overrides', () => {
await admin.visitSiteEditor( { postType: 'wp_block' } );

await page
.getByRole( 'region', { name: 'Navigation' } )
.getByRole( 'button', { name: 'Create pattern' } )
.getByRole( 'region', { name: 'Patterns content' } )
.getByRole( 'button', { name: 'add new pattern' } )
.click();

await page
.getByRole( 'menu', { name: 'Create pattern' } )
.getByRole( 'menuitem', { name: 'Create pattern' } )
.getByRole( 'menu', { name: 'add new pattern' } )
.getByRole( 'menuitem', { name: 'add new pattern' } )
.click();

const createPatternDialog = page.getByRole( 'dialog', {
name: 'Create pattern',
name: 'add new pattern',
} );
await createPatternDialog
.getByRole( 'textbox', { name: 'Name' } )
Expand All @@ -57,7 +57,7 @@ test.describe( 'Pattern Overrides', () => {
.getByRole( 'checkbox', { name: 'Synced' } )
.setChecked( true );
await createPatternDialog
.getByRole( 'button', { name: 'Create' } )
.getByRole( 'button', { name: 'Add' } )
.click();

await editor.canvas
Expand Down
Loading

1 comment on commit 49f3fe2

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 49f3fe2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9178642581
📝 Reported issues:

Please sign in to comment.