@wordpress/edit-site 3.0.6 → 3.0.10

package/src/components/template-part-converter/convert-to-template-part.js

@@ -6,61 +6,36 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	MenuItem,
-	Icon,
-	BaseControl,
-	TextControl,
-	Flex,
-	FlexItem,
-	FlexBlock,
-	Button,
-	Modal,
-	__experimentalRadioGroup as RadioGroup,
-	__experimentalRadio as Radio,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
 import { createBlock, serialize } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as editorStore } from '@wordpress/editor';
-import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
-	const instanceId = useInstanceId( ConvertToTemplatePart );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ title, setTitle ] = useState( '' );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
-
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
 
-	const onConvert = async ( templatePartTitle ) => {
-		const defaultTitle = __( 'Untitled Template Part' );
+	const onConvert = async ( { title, area } ) => {
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
 			{
-				slug: kebabCase( templatePartTitle || defaultTitle ),
-				title: templatePartTitle || defaultTitle,
+				slug: kebabCase( title ),
+				title,
 				content: serialize( blocks ),
 				area,
 			}
@@ -78,122 +53,27 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	};
 
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
+		<>
+			<BlockSettingsMenuControls>
+				{ ( { onClose } ) => (
 					<MenuItem
 						onClick={ () => {
 							setIsModalOpen( true );
+							onClose();
 						} }
 					>
 						{ __( 'Make template part' ) }
 					</MenuItem>
-					{ isModalOpen && (
-						<Modal
-							title={ __( 'Create a template part' ) }
-							closeLabel={ __( 'Close' ) }
-							onRequestClose={ () => {
-								setIsModalOpen( false );
-								setTitle( '' );
-							} }
-							overlayClassName="edit-site-template-part-converter__modal"
-						>
-							<form
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									onConvert( title );
-									setIsModalOpen( false );
-									setTitle( '' );
-									onClose();
-								} }
-							>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-								/>
-								<BaseControl
-									label={ __( 'Area' ) }
-									id={ `edit-site-template-part-converter__area-selection-${ instanceId }` }
-									className="edit-site-template-part-converter__area-base-control"
-								>
-									<RadioGroup
-										label={ __( 'Area' ) }
-										className="edit-site-template-part-converter__area-radio-group"
-										id={ `edit-site-template-part-converter__area-selection-${ instanceId }` }
-										onChange={ setArea }
-										checked={ area }
-									>
-										{ templatePartAreas.map(
-											( {
-												icon,
-												label,
-												area: value,
-												description,
-											} ) => (
-												<Radio
-													key={ label }
-													value={ value }
-													className="edit-site-template-part-converter__area-radio"
-												>
-													<Flex
-														align="start"
-														justify="start"
-													>
-														<FlexItem>
-															<Icon
-																icon={ icon }
-															/>
-														</FlexItem>
-														<FlexBlock className="edit-site-template-part-converter__option-label">
-															{ label }
-															<div>
-																{ description }
-															</div>
-														</FlexBlock>
-
-														<FlexItem className="edit-site-template-part-converter__checkbox">
-															{ area ===
-																value && (
-																<Icon
-																	icon={
-																		check
-																	}
-																/>
-															) }
-														</FlexItem>
-													</Flex>
-												</Radio>
-											)
-										) }
-									</RadioGroup>
-								</BaseControl>
-								<Flex
-									className="edit-site-template-part-converter__convert-modal-actions"
-									justify="flex-end"
-								>
-									<FlexItem>
-										<Button
-											variant="secondary"
-											onClick={ () => {
-												setIsModalOpen( false );
-												setTitle( '' );
-											} }
-										>
-											{ __( 'Cancel' ) }
-										</Button>
-									</FlexItem>
-									<FlexItem>
-										<Button variant="primary" type="submit">
-											{ __( 'Create' ) }
-										</Button>
-									</FlexItem>
-								</Flex>
-							</form>
-						</Modal>
-					) }
-				</>
+				) }
+			</BlockSettingsMenuControls>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => {
+						setIsModalOpen( false );
+					} }
+					onCreate={ onConvert }
+				/>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }

package/src/components/welcome-guide/editor.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './image';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideEditor() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide"
+			contentLabel={ __( 'Welcome to the site editor' ) }
+			finishButtonText={ __( 'Get Started' ) }
+			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/edit-your-site.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/edit-your-site.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Edit your site' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Design everything on your site — from the header right down to the footer — using blocks.'
+								) }
+							</p>
+							<p className="edit-site-welcome-guide__text">
+								{ createInterpolateElement(
+									__(
+										'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'
+									),
+									{
+										StylesIconImage: (
+											<img
+												alt={ __( 'styles' ) }
+												src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A"
+											/>
+										),
+									}
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/components/welcome-guide/image.js

@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-site-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}

package/src/components/welcome-guide/index.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideEditor from './editor';
+import WelcomeGuideStyles from './styles';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuide() {
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+		const isStylesSidebar = sidebar === 'edit-site/global-styles';
+		const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive( feature ),
+			isStylesOpen: isStylesSidebar,
+		};
+	}, [] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
+}

package/src/components/welcome-guide/style.scss

@@ -0,0 +1,37 @@
+.edit-site-welcome-guide {
+	width: 312px;
+
+	&__image {
+		background: #00a0d2;
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__heading {
+		font-family: $default-font;
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $grid-unit-20 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+
+		img {
+			vertical-align: bottom;
+		}
+	}
+
+	&__inserter-icon {
+		margin: 0 4px;
+		vertical-align: text-top;
+	}
+}

package/src/components/welcome-guide/styles.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { ExternalLink, Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './image';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideStyles() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide"
+			contentLabel={ __( 'Welcome to styles' ) }
+			finishButtonText={ __( 'Get Started' ) }
+			onFinish={ () => toggleFeature( 'welcomeGuideStyles' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Welcome to Styles' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Tweak your site, or give it a whole new look! Get creative — how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/set-the-design.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/set-the-design.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Set the design' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle! '
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/personalize-blocks.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/personalize-blocks.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Personalize blocks' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'You can adjust your blocks to ensure a cohesive experience across your site — add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Learn more' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'New to block themes and styling your site? '
+								) }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/support/article/wordpress-editor/'
+									) }
+								>
+									{ __(
+										'Here’s a detailed guide to learn how to make the most of it.'
+									) }
+								</ExternalLink>
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/index.js

@@ -12,6 +12,7 @@ import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ import './plugins';
 import './hooks';
 import './store';
 import Editor from './components/editor';
+import List from './components/list';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -44,7 +46,7 @@ export function reinitializeEditor( target, settings ) {
  * @param {string} id       ID of the root element to render the screen in.
  * @param {Object} settings Editor settings.
  */
-export function initialize( id, settings ) {
+export function initializeEditor( id, settings ) {
 	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
@@ -67,6 +69,24 @@ export function initialize( id, settings ) {
 	);
 }
 
+/**
+ * Initializes the site editor templates list screen.
+ *
+ * @param {string} id           ID of the root element to render the screen in.
+ * @param {string} templateType The type of the list. "wp_template" or "wp_template_part".
+ * @param {Object} settings     Editor settings.
+ */
+export function initializeList( id, templateType, settings ) {
+	const target = document.getElementById( id );
+
+	dispatch( editorStore ).updateEditorSettings( {
+		defaultTemplateTypes: settings.defaultTemplateTypes,
+		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
+	} );
+
+	render( <List templateType={ templateType } />, target );
+}
+
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
 export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';

package/src/plugins/index.js

@@ -16,6 +16,7 @@ import { download } from '@wordpress/icons';
  * Internal dependencies
  */
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
 registerPlugin( 'edit-site', {
 	render() {
@@ -27,7 +28,7 @@ registerPlugin( 'edit-site', {
 						icon={ download }
 						onClick={ () =>
 							apiFetch( {
-								path: '/__experimental/edit-site/v1/export',
+								path: '/wp-block-editor/v1/export',
 								parse: false,
 							} )
 								.then( ( res ) => res.blob() )
@@ -45,6 +46,7 @@ registerPlugin( 'edit-site', {
 					>
 						{ __( 'Export' ) }
 					</MenuItem>
+					<WelcomeGuideMenuItem />
 				</ToolsMoreMenuGroup>
 			</>
 		);

package/src/plugins/welcome-guide-menu-item.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { MenuItem } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../store';
+
+export default function WelcomeGuideMenuItem() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+	const isStylesOpen = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+
+		return sidebar === 'edit-site/global-styles';
+	}, [] );
+
+	return (
+		<MenuItem
+			onClick={ () =>
+				toggleFeature(
+					isStylesOpen ? 'welcomeGuideStyles' : 'welcomeGuide'
+				)
+			}
+		>
+			{ __( 'Welcome Guide' ) }
+		</MenuItem>
+	);
+}

package/src/store/actions.js

@@ -106,17 +106,19 @@ export function* addTemplate( template ) {
 }
 
 /**
- * Removes a template, and updates the current page and template.
+ * Removes a template.
  *
- * @param {number} templateId The template ID.
+ * @param {Object} template The template object.
  */
-export function* removeTemplate( templateId ) {
-	yield apiFetch( {
-		path: `/wp/v2/templates/${ templateId }`,
-		method: 'DELETE',
-	} );
-	const page = yield controls.select( editSiteStoreName, 'getPage' );
-	yield controls.dispatch( editSiteStoreName, 'setPage', page );
+export function* removeTemplate( template ) {
+	yield controls.dispatch(
+		coreStore,
+		'deleteEntityRecord',
+		'postType',
+		template.type,
+		template.id,
+		{ force: true }
+	);
 }
 
 /**

package/src/store/defaults.js

@@ -1,3 +1,6 @@
 export const PREFERENCES_DEFAULTS = {
-	features: {},
+	features: {
+		welcomeGuide: true,
+		welcomeGuideStyles: true,
+	},
 };

package/src/store/test/actions.js

@@ -77,29 +77,23 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'removeTemplate', () => {
-		it( 'should issue a REST request to delete the template, then read the current page and then set the page with an updated template list', () => {
-			const templateId = 1;
-			const page = { path: '/' };
+		it( 'should issue a deleteEntityRecord request', () => {
+			const template = {
+				id: 'tt1-blocks//general',
+				type: 'wp_template_part',
+			};
 
-			const it = removeTemplate( templateId );
-			expect( it.next().value ).toEqual( {
-				type: 'API_FETCH',
-				request: {
-					path: `/wp/v2/templates/${ templateId }`,
-					method: 'DELETE',
-				},
-			} );
+			const it = removeTemplate( template );
 			expect( it.next().value ).toEqual( {
-				type: '@@data/SELECT',
-				storeKey: 'core/edit-site',
-				selectorName: 'getPage',
-				args: [],
-			} );
-			expect( it.next( page ).value ).toEqual( {
+				actionName: 'deleteEntityRecord',
+				args: [
+					'postType',
+					'wp_template_part',
+					'tt1-blocks//general',
+					{ force: true },
+				],
+				storeKey: 'core',
 				type: '@@data/DISPATCH',
-				storeKey: 'core/edit-site',
-				actionName: 'setPage',
-				args: [ page ],
 			} );
 			expect( it.next().done ).toBe( true );
 		} );