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 template pattern action #57638

Merged
merged 1 commit into from
Jan 8, 2024
Merged

DataViews: Add duplicate template pattern action #57638

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
165 changes: 83 additions & 82 deletions packages/edit-site/src/components/create-template-part-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,25 @@ import {
} from '../../utils/template-part-create';

export default function CreateTemplatePartModal( {
modalTitle = __( 'Create template part' ),
...restProps
} ) {
return (
<Modal
title={ modalTitle }
onRequestClose={ restProps.closeModal }
overlayClassName="edit-site-create-template-part-modal"
>
<CreateTemplatePartModalContents { ...restProps } />
</Modal>
);
}

export function CreateTemplatePartModalContents( {
defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
blocks = [],
confirmLabel = __( 'Create' ),
closeModal,
modalTitle = __( 'Create template part' ),
onCreate,
onError,
defaultTitle = '',
Expand All @@ -62,7 +76,6 @@ export default function CreateTemplatePartModal( {
select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
[]
);

async function createTemplatePart() {
if ( ! title || isSubmitting ) {
return;
Expand Down Expand Up @@ -105,91 +118,79 @@ export default function CreateTemplatePartModal( {
setIsSubmitting( false );
}
}

return (
<Modal
title={ modalTitle }
onRequestClose={ closeModal }
overlayClassName="edit-site-create-template-part-modal"
<form
onSubmit={ async ( event ) => {
event.preventDefault();
await createTemplatePart();
} }
>
<form
onSubmit={ async ( event ) => {
event.preventDefault();
await createTemplatePart();
} }
>
<VStack spacing="4">
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
required
/>
<BaseControl
<VStack spacing="4">
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
required
/>
<BaseControl
label={ __( 'Area' ) }
id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
className="edit-site-create-template-part-modal__area-base-control"
>
<RadioGroup
label={ __( 'Area' ) }
className="edit-site-create-template-part-modal__area-radio-group"
id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
className="edit-site-create-template-part-modal__area-base-control"
onChange={ setArea }
checked={ area }
>
<RadioGroup
label={ __( 'Area' ) }
className="edit-site-create-template-part-modal__area-radio-group"
id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
onChange={ setArea }
checked={ area }
>
{ templatePartAreas.map(
( {
icon,
label,
area: value,
description,
} ) => (
<Radio
key={ label }
value={ value }
className="edit-site-create-template-part-modal__area-radio"
>
<Flex align="start" justify="start">
<FlexItem>
<Icon icon={ icon } />
</FlexItem>
<FlexBlock className="edit-site-create-template-part-modal__option-label">
{ label }
<div>{ description }</div>
</FlexBlock>
{ templatePartAreas.map(
( { icon, label, area: value, description } ) => (
<Radio
key={ label }
value={ value }
className="edit-site-create-template-part-modal__area-radio"
>
<Flex align="start" justify="start">
<FlexItem>
<Icon icon={ icon } />
</FlexItem>
<FlexBlock className="edit-site-create-template-part-modal__option-label">
{ label }
<div>{ description }</div>
</FlexBlock>

<FlexItem className="edit-site-create-template-part-modal__checkbox">
{ area === value && (
<Icon icon={ check } />
) }
</FlexItem>
</Flex>
</Radio>
)
) }
</RadioGroup>
</BaseControl>
<HStack justify="right">
<Button
variant="tertiary"
onClick={ () => {
closeModal();
} }
>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
type="submit"
aria-disabled={ ! title || isSubmitting }
isBusy={ isSubmitting }
>
{ confirmLabel }
</Button>
</HStack>
</VStack>
</form>
</Modal>
<FlexItem className="edit-site-create-template-part-modal__checkbox">
{ area === value && (
<Icon icon={ check } />
) }
</FlexItem>
</Flex>
</Radio>
)
) }
</RadioGroup>
</BaseControl>
<HStack justify="right">
<Button
variant="tertiary"
onClick={ () => {
closeModal();
} }
>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
type="submit"
aria-disabled={ ! title || isSubmitting }
isBusy={ isSubmitting }
>
{ confirmLabel }
</Button>
</HStack>
</VStack>
</form>
);
}
46 changes: 46 additions & 0 deletions 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 @@ -35,6 +35,7 @@ import {
TEMPLATE_PART_POST_TYPE,
PATTERN_DEFAULT_CATEGORY,
} from '../../utils/constants';
import { CreateTemplatePartModalContents } from '../create-template-part-modal';

const { useHistory } = unlock( routerPrivateApis );
const { CreatePatternModalContents, useDuplicatePatternProps } =
Expand Down Expand Up @@ -281,3 +282,48 @@ export const duplicatePatternAction = {
);
},
};

export const duplicateTemplatePartAction = {
id: 'duplicate-template-part',
label: __( 'Duplicate' ),
isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
modalHeader: __( 'Duplicate template part' ),
RenderModal: ( { item, closeModal } ) => {
const { createSuccessNotice } = useDispatch( noticesStore );
const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
window.location.href
);
const history = useHistory();
async function onTemplatePartSuccess( templatePart ) {
createSuccessNotice(
sprintf(
// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
__( '"%s" duplicated.' ),
item.title
),
{ type: 'snackbar', id: 'edit-site-patterns-success' }
);
history.push( {
postType: TEMPLATE_PART_POST_TYPE,
postId: templatePart?.id,
categoryType: TEMPLATE_PART_POST_TYPE,
categoryId,
} );
closeModal();
}
return (
<CreateTemplatePartModalContents
blocks={ item.blocks }
defaultArea={ item.templatePart.area }
defaultTitle={ sprintf(
/* translators: %s: Existing template part title */
__( '%s (Copy)' ),
item.title
) }
onCreate={ onTemplatePartSuccess }
onError={ closeModal }
confirmLabel={ __( 'Duplicate' ) }
/>
);
},
};
2 changes: 2 additions & 0 deletions 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 @@ -55,6 +55,7 @@ import {
resetAction,
deleteAction,
duplicatePatternAction,
duplicateTemplatePartAction,
} from './dataviews-pattern-actions';
import usePatternSettings from './use-pattern-settings';
import { unlock } from '../../lock-unlock';
Expand Down Expand Up @@ -318,6 +319,7 @@ export default function DataviewsPatterns() {
() => [
renameAction,
duplicatePatternAction,
duplicateTemplatePartAction,
exportJSONaction,
resetAction,
deleteAction,
Expand Down
12 changes: 9 additions & 3 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 @@ -225,7 +225,7 @@
}

/**
* DataViews patterns styles
* DataViews patterns styles.
* TODO: when this becomes stable, consolidate styles with the above.
*/
.edit-site-page-patterns-dataviews {
Expand Down Expand Up @@ -256,8 +256,6 @@
}
}

// TODO: this is duplicated from `patterns-menu-items__convert-modal` styles,
// except for the `z-index`. Need to check if this is still needed.
.dataviews-action-modal__duplicate-pattern {
// Fix the modal width to prevent added categories from stretching the modal.
[role="dialog"] > [role="document"] {
Expand All @@ -283,3 +281,11 @@
max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
}
}

.dataviews-action-modal__duplicate-template-part {
Copy link
Contributor

Choose a reason for hiding this comment

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

I didn't see where this class is added. I'm guessing it's generated. I wonder if we should rely on a generated class. I feel the "width" should be a prop of the modal and maybe a config in the action but that's for later.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, it is generated and for now I wanted to avoid extra modal props in action. We can revisit soon with new actions needed.

Copy link
Member

Choose a reason for hiding this comment

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

@ntsekouras @youknowriad 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.

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.

.components-modal__frame {
@include break-small {
max-width: 500px;
}
}
}
Loading