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

Site editor sidebar: consolidate rename component and use TemplateActions component for patterns single view #54271

Closed
wants to merge 13 commits into from
Closed

Site editor sidebar: consolidate rename component and use TemplateActions component for patterns single view #54271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
97f977b
Initial commit: just seeing what needs to be done to add a rename/del…
ramonjd Sep 8, 2023
e53365e
Use constant for template view
ramonjd Sep 25, 2023
beaf371
- Created `postTypeLabel` var to store notice label post type
ramonjd Sep 25, 2023
adc8dd5
Template Actions > Pattern Actions
ramonjd Oct 13, 2023
4000fac
Testing harmonizing duplicate item - probably junk here.
ramonjd Nov 30, 2023
9ffa0ba
Testing harmonizing duplicate item - probably junk here.
ramonjd Nov 30, 2023
446dc32
Consolidate duplicate menu items.
ramonjd Dec 4, 2023
b0cc573
No duplicates for templates
ramonjd Dec 4, 2023
15089b7
Open up duplicate action to theme patterns
ramonjd Dec 4, 2023
ddb65b7
Set isDuplicable var
ramonjd Dec 4, 2023
4e87c5d
wp_template post types, for now, are not duplicable
ramonjd Dec 5, 2023
2653c89
Don't render the menu if not revertable/removable/duplicable.
ramonjd Dec 11, 2023
90ea73d
Don't show patterns for non-block-based or hybrid themes
ramonjd Dec 12, 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
7 changes: 3 additions & 4 deletions packages/edit-site/src/components/list/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
import TemplateActions from '../template-actions';
import PatternActions from '../pattern-actions';
import Link from '../routes/link';
import AddedBy from './added-by';

Expand Down Expand Up @@ -126,9 +126,8 @@ export default function Table( { templateType } ) {
) : null }
</td>
<td className="edit-site-list-table-column" role="cell">
<TemplateActions
postType={ template.type }
postId={ template.id }
<PatternActions
item={ template }
className="edit-site-list-table__actions"
/>
</td>
Expand Down
138 changes: 7 additions & 131 deletions packages/edit-site/src/components/page-patterns/grid-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
import { paramCase as kebabCase } from 'change-case';

/**
* WordPress dependencies
Expand All @@ -13,60 +12,41 @@ import {
} from '@wordpress/block-editor';
import {
Button,
__experimentalConfirmDialog as ConfirmDialog,
DropdownMenu,
MenuGroup,
MenuItem,
__experimentalHeading as Heading,
__experimentalHStack as HStack,
Tooltip,
Flex,
} from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { useState, useId, memo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { useId, memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Icon,
header,
footer,
symbolFilled as uncategorized,
symbol,
moreVertical,
lockSmall,
} from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
import { downloadBlob } from '@wordpress/blob';

/**
* Internal dependencies
*/
import RenameMenuItem from './rename-menu-item';
import DuplicateMenuItem from './duplicate-menu-item';
import {
PATTERN_TYPES,
TEMPLATE_PART_POST_TYPE,
PATTERN_SYNC_TYPES,
} from '../../utils/constants';
import { store as editSiteStore } from '../../store';
import { useLink } from '../routes/link';
import { unlock } from '../../lock-unlock';
import PatternActions from '../pattern-actions';

const { useGlobalStyle } = unlock( blockEditorPrivateApis );

const templatePartIcons = { header, footer, uncategorized };

function GridItem( { categoryId, item, ...props } ) {
const descriptionId = useId();
const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
const [ backgroundColor ] = useGlobalStyle( 'color.background' );

const { removeTemplate } = useDispatch( editSiteStore );
const { __experimentalDeleteReusableBlock } =
useDispatch( reusableBlocksStore );
const { createErrorNotice, createSuccessNotice } =
useDispatch( noticesStore );

const isUserPattern = item.type === PATTERN_TYPES.user;
const isNonUserPattern = item.type === PATTERN_TYPES.theme;
const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
Expand All @@ -86,49 +66,9 @@ function GridItem( { categoryId, item, ...props } ) {
'is-inactive': isNonUserPattern,
} );

const deletePattern = async () => {
try {
await __experimentalDeleteReusableBlock( item.id );
createSuccessNotice(
sprintf(
// translators: %s: The pattern's title e.g. 'Call to action'.
__( '"%s" deleted.' ),
item.title
),
{ type: 'snackbar', id: 'edit-site-patterns-success' }
);
} catch ( error ) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __( 'An error occurred while deleting the pattern.' );
createErrorNotice( errorMessage, {
type: 'snackbar',
id: 'edit-site-patterns-error',
} );
}
};
const deleteItem = () =>
isTemplatePart ? removeTemplate( item ) : deletePattern();
Copy link
Member Author

Choose a reason for hiding this comment

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

TODO:

Still working out whether we still need removeTemplate for clearing customizations to theme templates/patterns.

Currently, this PR uses revertTemplate. Does it have the same effect?

Copy link
Contributor

Choose a reason for hiding this comment

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

As far as I tested it, there was no problem, but I'm a little unsure. Does @aaronrobertshaw know more about this?

Copy link
Contributor

Choose a reason for hiding this comment

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

My memory is a bit foggy on this one, so take this with a grain of salt.

As I understand it, there is a difference between removeTemplate and revertTemplate in that if the template doesn't have a theme file it won't be classed as revertable and an error notice is displayed with no further action taken.

If it's testing ok as Aki mentions then I'm probably missing something.

const exportAsJSON = () => {
const json = {
__file: item.type,
title: item.title || item.name,
content: item.patternBlock.content.raw,
syncStatus: item.patternBlock.wp_pattern_sync_status,
};

return downloadBlob(
`${ kebabCase( item.title || item.name ) }.json`,
JSON.stringify( json, null, 2 ),
'application/json'
);
};

// Only custom patterns or custom template parts can be renamed or deleted.
const isCustomPattern =
isUserPattern || ( isTemplatePart && item.isCustom );
const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
const ariaDescriptions = [];

if ( isCustomPattern ) {
Expand All @@ -154,15 +94,6 @@ function GridItem( { categoryId, item, ...props } ) {
item.syncStatus === PATTERN_SYNC_TYPES.full ? symbol : undefined;
}

const confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );
const confirmPrompt = hasThemeFile
? __( 'Are you sure you want to clear these customizations?' )
: sprintf(
// translators: %s: The pattern or template part's title e.g. 'Call to action'.
__( 'Are you sure you want to delete "%s"?' ),
item.title || item.name
);

const additionalStyles = ! backgroundColor
? [ { css: 'body { background: #fff; }' } ]
: undefined;
Expand Down Expand Up @@ -265,66 +196,11 @@ function GridItem( { categoryId, item, ...props } ) {
) }
</Flex>
</HStack>
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
className="edit-site-patterns__dropdown"
popoverProps={ { placement: 'bottom-end' } }
toggleProps={ {
className: 'edit-site-patterns__button',
describedBy: sprintf(
/* translators: %s: pattern name */
__( 'Action menu for %s pattern' ),
item.title
),
} }
>
{ ( { onClose } ) => (
<MenuGroup>
{ isCustomPattern && ! hasThemeFile && (
<RenameMenuItem
item={ item }
onClose={ onClose }
/>
) }
<DuplicateMenuItem
categoryId={ categoryId }
item={ item }
onClose={ onClose }
label={ __( 'Duplicate' ) }
/>
{ item.type === PATTERN_TYPES.user && (
<MenuItem onClick={ () => exportAsJSON() }>
{ __( 'Export as JSON' ) }
</MenuItem>
) }

{ isCustomPattern && (
<MenuItem
isDestructive={ ! hasThemeFile }
onClick={ () =>
setIsDeleteDialogOpen( true )
}
>
{ hasThemeFile
? __( 'Clear customizations' )
: __( 'Delete' ) }
</MenuItem>
) }
</MenuGroup>
) }
</DropdownMenu>
<PatternActions
item={ item }
toggleProps={ { className: 'edit-site-patterns__button' } }
/>
</HStack>

{ isDeleteDialogOpen && (
<ConfirmDialog
confirmButtonText={ confirmButtonText }
onConfirm={ deleteItem }
onCancel={ () => setIsDeleteDialogOpen( false ) }
>
{ confirmPrompt }
</ConfirmDialog>
) }
</li>
);
}
Expand Down
132 changes: 0 additions & 132 deletions packages/edit-site/src/components/page-patterns/rename-menu-item.js
View file
Open in desktop

This file was deleted.

9 changes: 2 additions & 7 deletions packages/edit-site/src/components/page-template-parts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Page from '../page';
import Table from '../table';
import Link from '../routes/link';
import AddedBy from '../list/added-by';
import TemplateActions from '../template-actions';
import PatternActions from '../pattern-actions';
import AddNewTemplatePart from './add-new-template-part';
import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
import { unlock } from '../../lock-unlock';
Expand Down Expand Up @@ -77,12 +77,7 @@ export default function PageTemplateParts() {
},
{
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
cell: ( templatePart ) => (
<TemplateActions
postType={ templatePart.type }
postId={ templatePart.id }
/>
),
cell: ( templatePart ) => <PatternActions item={ templatePart } />,
},
];

Expand Down
Loading
Loading