move page template modal into its own package

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/index.js

@@ -3,13 +3,14 @@
  */
 import { registerPlugin } from '@wordpress/plugins';
 import { dispatch } from '@wordpress/data';
+import { initializeTracksWithIdentity } from '@automattic/page-template-modal';
 
 /**
  * Internal dependencies
  */
-import { PageTemplatesPlugin } from './page-template-modal';
-import { initializeWithIdentity } from './page-template-modal/utils/tracking';
+import { PageTemplatesPlugin } from './page-template-plugin';
 import './store';
+import './index.scss';
 
 // Load config passed from backend.
 const {
@@ -25,7 +26,7 @@ const {
 } = window.starterPageTemplatesConfig;
 
 if ( tracksUserData ) {
-	initializeWithIdentity( tracksUserData );
+	initializeTracksWithIdentity( tracksUserData );
 }
 
 const templatesPluginSharedProps = {

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/index.scss

@@ -0,0 +1,33 @@
+@import '~@automattic/page-template-modal/src/styles/page-template-modal';
+
+.sidebar-modal-opener {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	.template-selector-item__label {
+		max-width: 300px;
+	}
+}
+
+.sidebar-modal-opener__warning-modal {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.sidebar-modal-opener__warning-text {
+	max-width: 300px;
+	font-size: 1rem;
+	line-height: 1.5rem;
+}
+
+.sidebar-modal-opener__warning-options {
+	float: right;
+	margin-top: 20px;
+
+	.components-button {
+		margin-left: 12px;
+	}
+}

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-plugin.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { stubTrue } from 'lodash';
+import '@wordpress/nux';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { PageTemplateModal } from '@automattic/page-template-modal';
+
+const INSERTING_HOOK_NAME = 'isInsertingPageTemplate';
+const INSERTING_HOOK_NAMESPACE = 'automattic/full-site-editing/inserting-template';
+
+export const PageTemplatesPlugin = compose(
+	withSelect( ( select ) => {
+		const getMeta = () => select( 'core/editor' ).getEditedPostAttribute( 'meta' );
+		const { _starter_page_template } = getMeta();
+		const { isOpen } = select( 'automattic/starter-page-layouts' );
+		const currentBlocks = select( 'core/editor' ).getBlocks();
+		return {
+			isOpen: isOpen(),
+			getMeta,
+			_starter_page_template,
+			currentBlocks,
+			currentPostTitle: select( 'core/editor' ).getCurrentPost().title,
+			postContentBlock: currentBlocks.find( ( block ) => block.name === 'a8c/post-content' ),
+			isWelcomeGuideActive: select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ), // Gutenberg 7.2.0 or higher
+			areTipsEnabled: select( 'core/nux' ) ? select( 'core/nux' ).areTipsEnabled() : false, // Gutenberg 7.1.0 or lower
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => {
+		const editorDispatcher = dispatch( 'core/editor' );
+		const { setOpenState } = dispatch( 'automattic/starter-page-layouts' );
+		return {
+			setOpenState,
+			saveTemplateChoice: ( name ) => {
+				// Save selected template slug in meta.
+				const currentMeta = ownProps.getMeta();
+				editorDispatcher.editPost( {
+					meta: {
+						...currentMeta,
+						_starter_page_template: name,
+					},
+				} );
+			},
+			insertTemplate: ( title, blocks ) => {
+				// Add filter to let the tracking library know we are inserting a template.
+				addFilter( INSERTING_HOOK_NAME, INSERTING_HOOK_NAMESPACE, stubTrue );
+
+				// Set post title.
+				if ( title ) {
+					editorDispatcher.editPost( { title } );
+				}
+
+				// Replace blocks.
+				const postContentBlock = ownProps.postContentBlock;
+				dispatch( 'core/block-editor' ).replaceInnerBlocks(
+					postContentBlock ? postContentBlock.clientId : '',
+					blocks,
+					false
+				);
+
+				// Remove filter.
+				removeFilter( INSERTING_HOOK_NAME, INSERTING_HOOK_NAMESPACE );
+			},
+			hideWelcomeGuide: () => {
+				if ( ownProps.isWelcomeGuideActive ) {
+					// Gutenberg 7.2.0 or higher.
+					dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
+				} else if ( ownProps.areTipsEnabled ) {
+					// Gutenberg 7.1.0 or lower.
+					dispatch( 'core/nux' ).disableTips();
+				}
+			},
+		};
+	} )
+)( PageTemplateModal );

apps/editing-toolkit/package.json

@@ -98,6 +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/plans-grid": "^1.0.0-alpha.0",
 		"@automattic/react-i18n": "^1.0.0-alpha.0",
 		"@automattic/typography": "^1.0.0",

packages/page-template-modal/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+	rules: {
+		'react/react-in-jsx-scope': 0,
+	},
+	globals: {
+		__i18n_text_domain__: true,
+	},
+};

packages/page-template-modal/README.md

@@ -0,0 +1,8 @@
+# Page Template Modal
+
+A modal for choosing a starting template 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`.

packages/page-template-modal/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@automattic/page-template-modal",
+	"version": "1.0.0-alpha.0",
+	"description": "Automattic Page Template Modal",
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic Inc.",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.js",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Automattic/wp-calypso.git",
+		"directory": "packages/page-template-modal"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"dependencies": {
+		"@wordpress/api-fetch": "^3.3.0",
+		"@wordpress/block-editor": "^5.2.1",
+		"@wordpress/blocks": "^6.25.1",
+		"@wordpress/components": "^12.0.1",
+		"@wordpress/compose": "^3.23.1",
+		"@wordpress/data": "^4.26.1",
+		"@wordpress/editor": "^9.25",
+		"@wordpress/element": "^2.19.01",
+		"@wordpress/i18n": "^3.17.0",
+		"@wordpress/nux": "^3.24.1",
+		"@wordpress/url": "^2.21.0",
+		"classnames": "^2.2.6",
+		"lodash": "^4.17.19"
+	},
+	"devDependencies": {
+		"@automattic/calypso-build": "^7.0.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8"
+	},
+	"scripts": {
+		"clean": "npx rimraf dist",
+		"build": "transpile && copy-assets",
+		"prepack": "yarn run clean && yarn run build"
+	}
+}

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-iframe-preview.js → packages/page-template-modal/src/components/block-iframe-preview.js

@@ -219,7 +219,7 @@ const BlockFramePreview = ( {
 		<div ref={ frameContainerRef }>
 			<iframe
 				ref={ iframeRef }
-				title={ __( 'Preview', 'full-site-editing' ) }
+				title={ __( 'Preview', __i18n_text_domain__ ) }
 				className={ classnames( 'editor-styles-wrapper', className ) }
 				style={ style }
 				tabIndex={ -1 }