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

DataViews: Add duplicate pattern action in patterns page #57592

Merged
merged 1 commit into from
Jan 8, 2024
Merged

DataViews: Add duplicate pattern action in patterns page #57592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 8 additions & 2 deletions packages/dataviews/src/item-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const {
DropdownMenuGroupV2: DropdownMenuGroup,
DropdownMenuItemV2: DropdownMenuItem,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
kebabCase,
} = unlock( componentsPrivateApis );

function ButtonTrigger( { action, onClick } ) {
Expand Down Expand Up @@ -58,12 +59,17 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
<ActionTrigger { ...actionTriggerProps } />
{ isModalOpen && (
<Modal
title={ ! hideModalHeader && action.label }
title={
( ! hideModalHeader && action.modalHeader ) ||
action.label
}
__experimentalHideHeader={ !! hideModalHeader }
onRequestClose={ () => {
setIsModalOpen( false );
} }
overlayClassName="dataviews-action-modal"
overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
action.id
) }` }
>
<RenderModal
item={ item }
Expand Down
48 changes: 47 additions & 1 deletion packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { paramCase as kebabCase } from 'change-case';
/**
* WordPress dependencies
*/
import { getQueryArgs } from '@wordpress/url';
import { downloadBlob } from '@wordpress/blob';
import { __, sprintf } from '@wordpress/i18n';
import {
Expand All @@ -21,12 +22,23 @@ import { useState } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { decodeEntities } from '@wordpress/html-entities';
import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { privateApis as patternsPrivateApis } from '@wordpress/patterns';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
import {
PATTERN_TYPES,
TEMPLATE_PART_POST_TYPE,
PATTERN_DEFAULT_CATEGORY,
} from '../../utils/constants';

const { useHistory } = unlock( routerPrivateApis );
const { CreatePatternModalContents, useDuplicatePatternProps } =
unlock( patternsPrivateApis );

export const exportJSONaction = {
id: 'export-pattern',
Expand Down Expand Up @@ -235,3 +247,37 @@ export const resetAction = {
);
},
};

export const duplicatePatternAction = {
id: 'duplicate-pattern',
label: __( 'Duplicate' ),
isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
modalHeader: __( 'Duplicate pattern' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

I found these strings ambiguous, so I proposed _x in #57686

RenderModal: ( { item, closeModal } ) => {
const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
window.location.href
);
const isThemePattern = item.type === PATTERN_TYPES.theme;
const history = useHistory();
function onPatternSuccess( { pattern } ) {
history.push( {
categoryType: PATTERN_TYPES.theme,
categoryId,
postType: PATTERN_TYPES.user,
postId: pattern.id,
} );
closeModal();
}
const duplicatedProps = useDuplicatePatternProps( {
pattern: isThemePattern ? item : item.patternPost,
onSuccess: onPatternSuccess,
} );
return (
<CreatePatternModalContents
onClose={ closeModal }
confirmLabel={ __( 'Duplicate' ) }
{ ...duplicatedProps }
/>
);
},
};
9 changes: 8 additions & 1 deletion packages/edit-site/src/components/page-patterns/dataviews-patterns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import {
renameAction,
resetAction,
deleteAction,
duplicatePatternAction,
} from './dataviews-pattern-actions';
import usePatternSettings from './use-pattern-settings';
import { unlock } from '../../lock-unlock';
Expand Down Expand Up @@ -314,7 +315,13 @@ export default function DataviewsPatterns() {
}, [ patterns, view, fields ] );

const actions = useMemo(
() => [ renameAction, exportJSONaction, resetAction, deleteAction ],
() => [
renameAction,
duplicatePatternAction,
exportJSONaction,
resetAction,
deleteAction,
],
[]
);
const onChangeView = useCallback(
Expand Down
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,3 +255,31 @@
z-index: 2;
}
}

// TODO: this is duplicated from `patterns-menu-items__convert-modal` styles,
// except for the `z-index`. Need to check if this is still needed.
Comment on lines +259 to +260
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe the CSS for the modal was required to both constrain the width of the modal and prevent a subtle layout shift when interacting with the category selection control. The rest I think was to bring the styling of the category selector up to the latest approach.

Quickly disabling those styles and interacting with the modal resulted in this:

Screenshot 2024-01-07 at 1 36 17 pm

.dataviews-action-modal__duplicate-pattern {
Copy link
Member

Choose a reason for hiding this comment

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

@ntsekouras @aaronrobertshaw can we do this differently, without using an internal dataviews class? I worry that by doing this kind of thing, the dataviews internal classes become public API.

related thread

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Same answer as here:

Personally I don't think it's bad to have a generated class name based on the unique action's id. I'm also not too concerned about indicating a public API as we can have breaking changes in Data Views.

Having said that, the alternative would be to have modalProps in actions API and that would also indicate public API. I think we'll know more when we are preparing for extending the APIs and update as needed then.

// Fix the modal width to prevent added categories from stretching the modal.
[role="dialog"] > [role="document"] {
width: 350px;
}

.patterns-menu-items__convert-modal-categories {
position: relative;
}

.components-form-token-field__suggestions-list:not(:empty) {
position: absolute;
border: $border-width solid var(--wp-admin-theme-color);
border-bottom-left-radius: $radius-block-ui;
border-bottom-right-radius: $radius-block-ui;
box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
box-sizing: border-box;
z-index: 1;
background-color: $white;
width: calc(100% + 2px); // Account for the border width of the token field.
left: -1px;
min-width: initial;
max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
}
}
142 changes: 73 additions & 69 deletions packages/patterns/src/components/create-pattern-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,25 @@ import CategorySelector, { CATEGORY_SLUG } from './category-selector';
import { unlock } from '../lock-unlock';

export default function CreatePatternModal( {
className = 'patterns-menu-items__convert-modal',
modalTitle = __( 'Create pattern' ),
...restProps
} ) {
return (
<Modal
title={ modalTitle }
onRequestClose={ restProps.onClose }
overlayClassName={ className }
>
<CreatePatternModalContents { ...restProps } />
</Modal>
);
}

export function CreatePatternModalContents( {
confirmLabel = __( 'Create' ),
defaultCategories = [],
className = 'patterns-menu-items__convert-modal',
content,
modalTitle = __( 'Create pattern' ),
onClose,
onError,
onSuccess,
Expand Down Expand Up @@ -148,78 +162,68 @@ export default function CreatePatternModal( {
return error.data.term_id;
}
}

return (
<Modal
title={ modalTitle }
onRequestClose={ () => {
onClose();
setTitle( '' );
<form
onSubmit={ ( event ) => {
event.preventDefault();
onCreate( title, syncType );
} }
overlayClassName={ className }
>
<form
onSubmit={ ( event ) => {
event.preventDefault();
onCreate( title, syncType );
} }
>
<VStack spacing="5">
<TextControl
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ __( 'My pattern' ) }
className="patterns-create-modal__name-input"
__nextHasNoMarginBottom
<VStack spacing="5">
<TextControl
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ __( 'My pattern' ) }
className="patterns-create-modal__name-input"
__nextHasNoMarginBottom
__next40pxDefaultSize
/>
<CategorySelector
categoryTerms={ categoryTerms }
onChange={ setCategoryTerms }
categoryMap={ categoryMap }
/>
<ToggleControl
label={ _x(
'Synced',
'Option that makes an individual pattern synchronized'
) }
help={ __(
'Sync this pattern across multiple locations.'
) }
checked={ syncType === PATTERN_SYNC_TYPES.full }
onChange={ () => {
setSyncType(
syncType === PATTERN_SYNC_TYPES.full
? PATTERN_SYNC_TYPES.unsynced
: PATTERN_SYNC_TYPES.full
);
} }
/>
<HStack justify="right">
<Button
__next40pxDefaultSize
/>
<CategorySelector
categoryTerms={ categoryTerms }
onChange={ setCategoryTerms }
categoryMap={ categoryMap }
/>
<ToggleControl
label={ _x(
'Synced',
'Option that makes an individual pattern synchronized'
) }
help={ __(
'Sync this pattern across multiple locations.'
) }
checked={ syncType === PATTERN_SYNC_TYPES.full }
onChange={ () => {
setSyncType(
syncType === PATTERN_SYNC_TYPES.full
? PATTERN_SYNC_TYPES.unsynced
: PATTERN_SYNC_TYPES.full
);
variant="tertiary"
onClick={ () => {
onClose();
setTitle( '' );
} }
/>
<HStack justify="right">
<Button
__next40pxDefaultSize
variant="tertiary"
onClick={ () => {
onClose();
setTitle( '' );
} }
>
{ __( 'Cancel' ) }
</Button>
>
{ __( 'Cancel' ) }
</Button>

<Button
__next40pxDefaultSize
variant="primary"
type="submit"
aria-disabled={ ! title || isSaving }
isBusy={ isSaving }
>
{ confirmLabel }
</Button>
</HStack>
</VStack>
</form>
</Modal>
<Button
__next40pxDefaultSize
variant="primary"
type="submit"
aria-disabled={ ! title || isSaving }
isBusy={ isSaving }
>
{ confirmLabel }
</Button>
</HStack>
</VStack>
</form>
);
}
Loading
Loading