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

New Page Layout Picker: rename "templates" to "page patterns" #50971

Merged
merged 1 commit into from
Mar 24, 2021
Merged

New Page Layout Picker: rename "templates" to "page patterns" #50971

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
2 changes: 1 addition & 1 deletion apps/editing-toolkit/editing-toolkit-plugin/dotcom-fse/tests/fse-back-button.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe( 'Full Site Editing Back Button', () => {
await activateTheme( 'maywood' );
// Creates a new page and uses the blank page layout.
await createNewPost( { postType: 'page', title: 'New e2e Page!' } );
await page.click( '.page-template-modal__buttons .components-button.is-primary.is-large' );
await page.click( '.page-pattern-modal__buttons .components-button.is-primary.is-large' );
} );

it( 'Should have an overriden button', async () => {
Expand Down
4 changes: 2 additions & 2 deletions apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@import '~@automattic/page-template-modal/src/styles/page-template-modal';
@import '~@automattic/page-pattern-modal/src/styles/page-pattern-modal';

.sidebar-modal-opener {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.template-selector-item__label {
.pattern-selector-item__label {
max-width: 300px;
}
}
Expand Down
12 changes: 6 additions & 6 deletions apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
*/
import { registerPlugin } from '@wordpress/plugins';
import { dispatch } from '@wordpress/data';
import { initializeTracksWithIdentity, LayoutDefinition } from '@automattic/page-template-modal';
import { initializeTracksWithIdentity, PatternDefinition } from '@automattic/page-pattern-modal';
import React from '@wordpress/element';

/**
* Internal dependencies
*/
import { PageTemplatesPlugin } from './page-template-plugin';
import { PagePatternsPlugin } from './page-patterns-plugin';
import './store';
import './index.scss';

declare global {
interface Window {
starterPageTemplatesConfig?: {
templates?: LayoutDefinition[];
templates?: PatternDefinition[];
locale?: string;
theme?: string;
screenAction?: string;
Expand All @@ -26,7 +26,7 @@ declare global {
}

// Load config passed from backend.
const { templates = [], tracksUserData, screenAction, theme, locale } =
const { templates: patterns = [], tracksUserData, screenAction, theme, locale } =
window.starterPageTemplatesConfig ?? {};

if ( tracksUserData ) {
Expand All @@ -39,9 +39,9 @@ if ( screenAction === 'add' ) {
}

// Always register ability to open from document sidebar.
registerPlugin( 'page-templates', {
registerPlugin( 'page-patterns', {
render: () => {
return <PageTemplatesPlugin templates={ templates } theme={ theme } locale={ locale } />;
return <PagePatternsPlugin patterns={ patterns } theme={ theme } locale={ locale } />;
},

// `registerPlugin()` types assume `icon` is mandatory however it isn't
Expand Down
24 changes: 12 additions & 12 deletions ...r-page-templates/page-template-plugin.tsx → ...r-page-templates/page-patterns-plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
import '@wordpress/nux';
import { useSelect, useDispatch } from '@wordpress/data';
import { addFilter, removeFilter } from '@wordpress/hooks';
import { LayoutDefinition, PageTemplateModal } from '@automattic/page-template-modal';
import { PagePatternModal, PatternDefinition } from '@automattic/page-pattern-modal';
import React, { useCallback } from '@wordpress/element';

const INSERTING_HOOK_NAME = 'isInsertingPageTemplate';
const INSERTING_HOOK_NAMESPACE = 'automattic/full-site-editing/inserting-template';
const INSERTING_HOOK_NAME = 'isInsertingPagePattern';
Copy link
Contributor

Choose a reason for hiding this comment

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

👋🏼 Wanted to let you know that this rename broke the from_template_selector property in our tracking events. PR, for more context: #53640

I humbly recommend a more thorough code search in the future to catch any consumers of the existing hook 🙂

Copy link
Member Author

Choose a reason for hiding this comment

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

Sorry about that! I did search for usage but clearly I wasn't thorough enough (I don't know how I missed it given the usage in wpcom-block-editor is in the same repo 🤦‍♂️). Losing 3 months worth of that prop is frustrating.

const INSERTING_HOOK_NAMESPACE = 'automattic/full-site-editing/inserting-pattern';

interface PageTemplatesPluginProps {
templates: LayoutDefinition[];
interface PagePatternsPluginProps {
patterns: PatternDefinition[];
locale?: string;
theme?: string;
}

export function PageTemplatesPlugin( props: PageTemplatesPluginProps ): JSX.Element {
export function PagePatternsPlugin( props: PagePatternsPluginProps ): JSX.Element {
const { setOpenState } = useDispatch( 'automattic/starter-page-layouts' );
const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
const { editPost } = useDispatch( 'core/editor' );
Expand All @@ -43,9 +43,9 @@ export function PageTemplatesPlugin( props: PageTemplatesPluginProps ): JSX.Elem
};
} );

const saveTemplateChoice = useCallback(
const savePatternChoice = useCallback(
( name: string ) => {
// Save selected template slug in meta.
// Save selected pattern slug in meta.
const currentMeta = getMeta();
editPost( {
meta: {
Expand All @@ -57,7 +57,7 @@ export function PageTemplatesPlugin( props: PageTemplatesPluginProps ): JSX.Elem
[ editPost, getMeta ]
);

const insertTemplate = useCallback(
const insertPattern = useCallback(
( title, blocks ) => {
// Add filter to let the tracking library know we are inserting a template.
addFilter( INSERTING_HOOK_NAME, INSERTING_HOOK_NAMESPACE, () => true );
Expand Down Expand Up @@ -89,11 +89,11 @@ export function PageTemplatesPlugin( props: PageTemplatesPluginProps ): JSX.Elem
}, [ areTipsEnabled, disableTips, isWelcomeGuideActive, toggleFeature ] );

return (
<PageTemplateModal
<PagePatternModal
{ ...selectProps }
setOpenState={ setOpenState }
saveTemplateChoice={ saveTemplateChoice }
insertTemplate={ insertTemplate }
savePatternChoice={ savePatternChoice }
insertPattern={ insertPattern }
hideWelcomeGuide={ hideWelcomeGuide }
{ ...props }
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/editing-toolkit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"@automattic/i18n-utils": "^1.0.0",
"@automattic/launch": "^1.0.0",
"@automattic/onboarding": "^1.0.0",
"@automattic/page-template-modal": "^1.0.0-alpha.0",
"@automattic/page-pattern-modal": "^1.0.0-alpha.0",
"@automattic/plans-grid": "^1.0.0-alpha.0",
"@automattic/react-i18n": "^1.0.0-alpha.0",
"@automattic/typography": "^1.0.0",
Expand Down
4 changes: 2 additions & 2 deletions desktop/e2e/tests/lib/components/gutenberg-editor-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,9 @@ class GutenbergEditorComponent extends AsyncBaseContainer {
}

async dismissPageTemplateSelector() {
if ( await driverHelper.isElementPresent( this.driver, By.css( '.page-template-modal' ) ) ) {
if ( await driverHelper.isElementPresent( this.driver, By.css( '.page-pattern-modal' ) ) ) {
const useBlankButton = await this.driver.findElement(
By.css( '.page-template-modal__buttons .components-button.is-primary' )
By.css( '.page-pattern-modal__buttons .components-button.is-primary' )
);
await this.driver.executeScript( 'arguments[0].click()', useBlankButton );
}
Expand Down
0 packages/page-template-modal/.eslintrc.js → packages/page-pattern-modal/.eslintrc.js
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions packages/page-template-modal/README.md → packages/page-pattern-modal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Page Template Modal
# Page Pattern Modal

A modal for choosing a starting template for a new page, extracted from the editing toolkit
A modal for choosing a starting pattern for a new page, extracted from the editing toolkit

## Development Workflow

This package is developed as part of the Calypso monorepo. Run `yarn`
in the root of the repository to get the required `devDependencies`.
in the root of the repository to get the required `devDependencies`.
0 packages/page-template-modal/jest.config.js → packages/page-pattern-modal/jest.config.js
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions packages/page-template-modal/package.json → packages/page-pattern-modal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@automattic/page-template-modal",
"name": "@automattic/page-pattern-modal",
"version": "1.0.0-alpha.0",
"description": "Automattic Page Template Modal",
"description": "Automattic Page Pattern Modal",
"homepage": "https://github.com/Automattic/wp-calypso",
"license": "GPL-2.0-or-later",
"author": "Automattic Inc.",
Expand All @@ -15,7 +15,7 @@
"repository": {
"type": "git",
"url": "git+https://github.com/Automattic/wp-calypso.git",
"directory": "packages/page-template-modal"
"directory": "packages/page-pattern-modal"
},
"publishConfig": {
"access": "public"
Expand Down
Loading