@wordpress/edit-site 3.0.8 → 3.0.12

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

@@ -6,20 +6,23 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as viewportStore } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
  */
 import './plugins';
 import './hooks';
-import './store';
+import { store as editSiteStore } from './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 +47,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 +70,31 @@ 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,
+	} );
+
+	// Default the navigation panel to be opened when we're in a bigger screen.
+	// We update the store synchronously before rendering so that we won't
+	// trigger an unnecessary re-render with useEffect.
+	dispatch( editSiteStore ).setIsNavigationPanelOpened(
+		select( viewportStore ).isViewportMatch( 'medium' )
+	);
+
+	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

@@ -5,7 +5,7 @@ import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
 import { controls, dispatch } from '@wordpress/data';
 import { apiFetch } from '@wordpress/data-controls';
 import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -106,17 +106,56 @@ 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 ) {
+	try {
+		yield controls.dispatch(
+			coreStore,
+			'deleteEntityRecord',
+			'postType',
+			template.type,
+			template.id,
+			{ force: true }
+		);
+
+		const lastError = yield controls.select(
+			coreStore,
+			'getLastEntityDeleteError',
+			'postType',
+			template.type,
+			template.id
+		);
+
+		if ( lastError ) {
+			throw lastError;
+		}
+
+		yield controls.dispatch(
+			noticesStore,
+			'createSuccessNotice',
+			sprintf(
+				/* translators: The template/part's name. */
+				__( '"%s" removed.' ),
+				template.title.rendered
+			),
+			{ type: 'snackbar' }
+		);
+	} catch ( error ) {
+		const errorMessage =
+			error.message && error.code !== 'unknown_error'
+				? error.message
+				: __( 'An error occurred while deleting the template.' );
+
+		yield controls.dispatch(
+			noticesStore,
+			'createErrorNotice',
+			errorMessage,
+			{ type: 'snackbar' }
+		);
+	}
 }
 
 /**
@@ -336,9 +375,12 @@ export function setIsListViewOpened( isOpen ) {
 /**
  * Reverts a template to its original theme-provided file.
  *
- * @param {Object} template The template to revert.
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
  */
-export function* revertTemplate( template ) {
+export function* revertTemplate( template, { allowUndo = true } = {} ) {
 	if ( ! isTemplateRevertable( template ) ) {
 		yield controls.dispatch(
 			noticesStore,
@@ -426,32 +468,40 @@ export function* revertTemplate( template ) {
 			}
 		);
 
-		const undoRevert = async () => {
-			await dispatch( coreStore ).editEntityRecord(
-				'postType',
-				template.type,
-				edited.id,
+		if ( allowUndo ) {
+			const undoRevert = async () => {
+				await dispatch( coreStore ).editEntityRecord(
+					'postType',
+					template.type,
+					edited.id,
+					{
+						content: serializeBlocks,
+						blocks: edited.blocks,
+						source: 'custom',
+					}
+				);
+			};
+			yield controls.dispatch(
+				noticesStore,
+				'createSuccessNotice',
+				__( 'Template reverted.' ),
 				{
-					content: serializeBlocks,
-					blocks: edited.blocks,
-					source: 'custom',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: undoRevert,
+						},
+					],
 				}
 			);
-		};
-		yield controls.dispatch(
-			noticesStore,
-			'createSuccessNotice',
-			__( 'Template reverted.' ),
-			{
-				type: 'snackbar',
-				actions: [
-					{
-						label: __( 'Undo' ),
-						onClick: undoRevert,
-					},
-				],
-			}
-		);
+		} else {
+			yield controls.dispatch(
+				noticesStore,
+				'createSuccessNotice',
+				__( 'Template reverted.' )
+			);
+		}
 	} catch ( error ) {
 		const errorMessage =
 			error.message && error.code !== 'unknown_error'

package/src/store/defaults.js

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

package/src/store/selectors.js

@@ -11,6 +11,7 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 import { isTemplatePart } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -64,6 +65,22 @@ export const getCanUserCreateMedia = createRegistrySelector( ( select ) => () =>
 	select( coreDataStore ).canUser( 'create', 'media' )
 );
 
+/**
+ * Returns any available Reusable blocks.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} The available reusable blocks.
+ */
+export const getReusableBlocks = createRegistrySelector( ( select ) => () => {
+	const isWeb = Platform.OS === 'web';
+	return isWeb
+		? select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+		  } )
+		: [];
+} );
+
 /**
  * Returns the settings, taking into account active features and permissions.
  *
@@ -80,6 +97,7 @@ export const getSettings = createSelector(
 			focusMode: isFeatureActive( state, 'focusMode' ),
 			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
+			__experimentalReusableBlocks: getReusableBlocks( state ),
 		};
 
 		const canUserCreateMedia = getCanUserCreateMedia( state );
@@ -101,6 +119,7 @@ export const getSettings = createSelector(
 		state.settings,
 		isFeatureActive( state, 'focusMode' ),
 		isFeatureActive( state, 'fixedToolbar' ),
+		getReusableBlocks( state ),
 	]
 );
 
@@ -309,10 +328,9 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 			templateId
 		);
 
-		const templateParts = select( coreDataStore ).getEntityRecords(
-			'postType',
-			'wp_template_part'
-		);
+		const templateParts = select(
+			coreDataStore
+		).getEntityRecords( 'postType', 'wp_template_part', { per_page: -1 } );
 		const templatePartsById = keyBy(
 			templateParts,
 			( templatePart ) => templatePart.id

package/src/store/test/actions.js

@@ -5,7 +5,6 @@ import {
 	toggleFeature,
 	setTemplate,
 	addTemplate,
-	removeTemplate,
 	setTemplatePart,
 	setPage,
 	showHomepage,
@@ -76,35 +75,6 @@ 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: '/' };
-
-			const it = removeTemplate( templateId );
-			expect( it.next().value ).toEqual( {
-				type: 'API_FETCH',
-				request: {
-					path: `/wp/v2/templates/${ templateId }`,
-					method: 'DELETE',
-				},
-			} );
-			expect( it.next().value ).toEqual( {
-				type: '@@data/SELECT',
-				storeKey: 'core/edit-site',
-				selectorName: 'getPage',
-				args: [],
-			} );
-			expect( it.next( page ).value ).toEqual( {
-				type: '@@data/DISPATCH',
-				storeKey: 'core/edit-site',
-				actionName: 'setPage',
-				args: [ page ],
-			} );
-			expect( it.next().done ).toBe( true );
-		} );
-	} );
-
 	describe( 'setTemplatePart', () => {
 		it( 'should return the SET_TEMPLATE_PART action', () => {
 			const templatePartId = 1;

package/src/store/test/selectors.js

@@ -17,6 +17,7 @@ import {
 	getPreviousEditedPostId,
 	getPage,
 	getNavigationPanelActiveMenu,
+	getReusableBlocks,
 	isNavigationOpened,
 	isInserterOpened,
 	isListViewOpened,
@@ -24,9 +25,13 @@ import {
 
 describe( 'selectors', () => {
 	const canUser = jest.fn( () => true );
+	const getEntityRecords = jest.fn( () => [] );
 	getCanUserCreateMedia.registry = {
 		select: jest.fn( () => ( { canUser } ) ),
 	};
+	getReusableBlocks.registry = {
+		select: jest.fn( () => ( { getEntityRecords } ) ),
+	};
 
 	describe( 'isFeatureActive', () => {
 		it( 'is tolerant to an undefined features preference', () => {
@@ -83,6 +88,22 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getReusableBlocks', () => {
+		it( "selects `getEntityRecords( 'postType', 'wp_block' )` from the core store", () => {
+			expect( getReusableBlocks() ).toEqual( [] );
+			expect( getReusableBlocks.registry.select ).toHaveBeenCalledWith(
+				coreDataStore
+			);
+			expect( getEntityRecords ).toHaveBeenCalledWith(
+				'postType',
+				'wp_block',
+				{
+					per_page: -1,
+				}
+			);
+		} );
+	} );
+
 	describe( 'getSettings', () => {
 		it( "returns the settings when the user can't create media", () => {
 			canUser.mockReturnValueOnce( false );
@@ -94,6 +115,7 @@ describe( 'selectors', () => {
 				focusMode: false,
 				hasFixedToolbar: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
+				__experimentalReusableBlocks: [],
 			} );
 		} );
 
@@ -108,12 +130,14 @@ describe( 'selectors', () => {
 				},
 			};
 			const setInserterOpened = () => {};
+
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
 				outlineMode: true,
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
 				__experimentalSetIsInserterOpened: setInserterOpened,
+				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),
 			} );
 		} );

package/src/style.scss

@@ -5,14 +5,18 @@
 @import "./components/header/style.scss";
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/header/navigation-link/style.scss";
+@import "./components/navigation-sidebar/navigation-toggle/style.scss";
+@import "./components/navigation-sidebar/navigation-panel/style.scss";
+@import "./components/list/style.scss";
+@import "./components/add-new-template/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";
-@import "./components/template-part-converter/style.scss";
+@import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
+@import "./components/welcome-guide/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
@@ -37,15 +41,14 @@ body.site-editor-php {
 	@include break-small {
 		bottom: 0;
 		left: 0;
-		min-height: calc(100vh - #{$admin-bar-height-big});
+		min-height: 100vh;
 		position: absolute;
 		right: 0;
 		top: 0;
 	}
 
-	// The WP header height changes at this breakpoint.
-	@include break-medium {
-		min-height: calc(100vh - #{$admin-bar-height});
+	.interface-interface-skeleton {
+		top: 0;
 	}
 
 	// Todo: Remove this rule when edit site gets support

package/src/utils/is-template-removable.js

@@ -0,0 +1,13 @@
+/**
+ * Check if a template is removable.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRemovable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+
+	return template.source === 'custom' && ! template.has_theme_file;
+}