Hello World
+Just another WordPress site
+ + +Hello World
+Just a random paragraph added to the template
+" +`; diff --git a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js index 140f567e4d74fe..858ef67ac807ea 100644 --- a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js +++ b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js @@ -13,7 +13,6 @@ import { describe( 'Post Editor Template mode', () => { beforeAll( async () => { - await activateTheme( 'tt1-blocks' ); await trashAllPosts( 'wp_template' ); await trashAllPosts( 'wp_template_part' ); } ); @@ -22,11 +21,9 @@ describe( 'Post Editor Template mode', () => { await activateTheme( 'twentytwentyone' ); } ); - beforeEach( async () => { - await createNewPost(); - } ); - it( 'Allow to switch to template mode, edit the template and check the result', async () => { + await activateTheme( 'tt1-blocks' ); + await createNewPost(); // Create a random post. await page.type( '.editor-post-title__input', 'Just an FSE Post' ); await page.keyboard.press( 'Enter' ); @@ -45,9 +42,9 @@ describe( 'Post Editor Template mode', () => { // Switch to template mode. await openDocumentSettingsSidebar(); - const switchLink = await page.waitForSelector( - '.edit-post-post-template button' - ); + const editTemplateXPath = + "//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'Edit')]"; + const switchLink = await page.waitForXPath( editTemplateXPath ); await switchLink.click(); // Check that we switched properly to edit mode. @@ -82,4 +79,68 @@ describe( 'Post Editor Template mode', () => { '//p[contains(text(), "Just a random paragraph added to the template")]' ); } ); + + it( 'Allow creating custom block templates in classic themes', async () => { + await activateTheme( 'twentytwentyone' ); + await createNewPost(); + // Create a random post. + await page.type( '.editor-post-title__input', 'Another FSE Post' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'Hello World' ); + + // Unselect the blocks. + await page.evaluate( () => { + wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); + } ); + + // Save the post + // Saving shouldn't be necessary but unfortunately, + // there's a template resolution bug forcing us to do so. + await saveDraft(); + await page.reload(); + + // Create a new custom template. + await openDocumentSettingsSidebar(); + const newTemplateXPath = + "//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'New')]"; + const newButton = await page.waitForXPath( newTemplateXPath ); + await newButton.click(); + + // Fill the template title and submit. + const templateNameInputSelector = + '.edit-post-post-template__modal .components-text-control__input'; + await page.click( templateNameInputSelector ); + await page.keyboard.type( 'Blank Template' ); + await page.keyboard.press( 'Enter' ); + + // Check that we switched properly to edit mode. + await page.waitForXPath( + '//*[contains(@class, "components-snackbar")]/*[text()="Custom template created. You\'re in template mode now."]' + ); + + // Edit the template + await insertBlock( 'Paragraph' ); + await page.keyboard.type( + 'Just a random paragraph added to the template' + ); + + // Save changes + const doneButton = await page.waitForXPath( + `//button[contains(text(), 'Apply')]` + ); + await doneButton.click(); + const saveButton = await page.waitForXPath( + `//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]` + ); + await saveButton.click(); + + // Preview changes + const previewPage = await openPreviewPage(); + await previewPage.waitForSelector( '.wp-site-blocks' ); + const content = await previewPage.evaluate( + () => document.querySelector( '.wp-site-blocks' ).innerHTML + ); + + expect( content ).toMatchSnapshot(); + } ); } ); diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 2d5f7af3c145d9..7a4b71fc309dc0 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -52,7 +52,8 @@ "classnames": "^2.2.5", "lodash": "^4.17.19", "memize": "^1.1.0", - "rememo": "^3.0.0" + "rememo": "^3.0.0", + "uuid": "8.3.0" }, "publishConfig": { "access": "public" diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js index deb2b905ee9e34..877c48ccf50da0 100644 --- a/packages/edit-post/src/components/header/template-title/index.js +++ b/packages/edit-post/src/components/header/template-title/index.js @@ -3,8 +3,6 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { store as editorStore } from '@wordpress/editor'; -import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -13,15 +11,12 @@ import { store as editPostStore } from '../../../store'; function TemplateTitle() { const { template, isEditing } = useSelect( ( select ) => { - const { getEditedPostAttribute } = select( editorStore ); - const { __experimentalGetTemplateForLink } = select( coreStore ); - const { isEditingTemplate } = select( editPostStore ); - const link = getEditedPostAttribute( 'link' ); + const { isEditingTemplate, getEditedPostTemplate } = select( + editPostStore + ); const _isEditing = isEditingTemplate(); return { - template: _isEditing - ? __experimentalGetTemplateForLink( link ) - : null, + template: _isEditing ? getEditedPostTemplate() : null, isEditing: _isEditing, }; }, [] ); diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js index 806f49fa04edb3..05eef4febd9b8f 100644 --- a/packages/edit-post/src/components/sidebar/post-template/index.js +++ b/packages/edit-post/src/components/sidebar/post-template/index.js @@ -1,51 +1,61 @@ +/** + * External dependencies + */ +import { kebabCase } from 'lodash'; + /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { PanelRow, Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + PanelRow, + Button, + Modal, + TextControl, + Flex, + FlexItem, +} from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { createInterpolateElement } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { store as editorStore } from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; -import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies */ import { store as editPostStore } from '../../../store'; +import { createBlock, serialize } from '@wordpress/blocks'; function PostTemplate() { - const { template, isEditing, isFSETheme } = useSelect( ( select ) => { - const { - getEditedPostAttribute, - getCurrentPostType, - getCurrentPost, - } = select( editorStore ); - const { __experimentalGetTemplateForLink, getPostType } = select( - coreStore - ); - const { isEditingTemplate } = select( editPostStore ); - const link = getEditedPostAttribute( 'link' ); - const isFSEEnabled = select( editorStore ).getEditorSettings() - .isFSETheme; - const isViewable = - getPostType( getCurrentPostType() )?.viewable ?? false; - return { - template: - isFSEEnabled && - isViewable && - link && - getCurrentPost().status !== 'auto-draft' - ? __experimentalGetTemplateForLink( link ) - : null, - isEditing: isEditingTemplate(), - isFSETheme: isFSEEnabled, - }; - }, [] ); - const { setIsEditingTemplate } = useDispatch( editPostStore ); - const { createSuccessNotice } = useDispatch( noticesStore ); + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const [ title, setTitle ] = useState( '' ); + const { template, isEditing, supportsTemplateMode } = useSelect( + ( select ) => { + const { getCurrentPostType } = select( editorStore ); + const { getPostType } = select( coreStore ); + const { isEditingTemplate, getEditedPostTemplate } = select( + editPostStore + ); + const _supportsTemplateMode = select( + editorStore + ).getEditorSettings().supportsTemplateMode; + const isViewable = + getPostType( getCurrentPostType() )?.viewable ?? false; + + return { + template: + supportsTemplateMode && + isViewable && + getEditedPostTemplate(), + isEditing: isEditingTemplate(), + supportsTemplateMode: _supportsTemplateMode, + }; + }, + [] + ); + const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore ); - if ( ! isFSETheme || ! template ) { + if ( ! supportsTemplateMode ) { return null; } @@ -53,40 +63,95 @@ function PostTemplate() {