@wordpress/editor 14.33.3-next.36001005c.0 → 14.34.0

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

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ExternalLink, Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './welcome-guide-image';
+
+export default function WelcomeGuideStyles() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
+
+		return {
+			isActive: !! select( preferencesStore ).get(
+				'core/edit-site',
+				'welcomeGuideStyles'
+			),
+			isStylesOpen: sidebar === 'edit-site/global-styles',
+		};
+	}, [] );
+
+	if ( ! isActive || ! isStylesOpen ) {
+		return null;
+	}
+
+	const welcomeLabel = __( 'Welcome to Styles' );
+
+	return (
+		<Guide
+			className="editor-welcome-guide guide-styles"
+			contentLabel={ welcomeLabel }
+			finishButtonText={ __( 'Get started' ) }
+			onFinish={ () => toggle( 'core/edit-site', '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="editor-welcome-guide__heading">
+								{ welcomeLabel }
+							</h1>
+							<p className="editor-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="editor-welcome-guide__heading">
+								{ __( 'Set the design' ) }
+							</h1>
+							<p className="editor-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="editor-welcome-guide__heading">
+								{ __( 'Personalize blocks' ) }
+							</h1>
+							<p className="editor-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="editor-welcome-guide__heading">
+								{ __( 'Learn more' ) }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'New to block themes and styling your site?'
+								) }{ ' ' }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/styles-overview/'
+									) }
+								>
+									{ __(
+										'Here’s a detailed guide to learn how to make the most of it.'
+									) }
+								</ExternalLink>
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/components/header/index.js

@@ -12,7 +12,6 @@ import { PinnedItems } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import CollabSidebar from '../collab-sidebar';
 import BackButton, { useHasBackButton } from './back-button';
 import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
@@ -24,7 +23,6 @@ import PostSavedState from '../post-saved-state';
 import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import ZoomOutToggle from '../zoom-out-toggle';
-import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_PART_POST_TYPE,
@@ -52,9 +50,7 @@ const backButtonVariations = {
 function Header( {
 	customSaveButton,
 	forceIsDirty,
-	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
-	title,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -67,6 +63,7 @@ function Header( {
 		hasFixedToolbar,
 		hasBlockSelection,
 		hasSectionRootClientId,
+		isStylesCanvasActive,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -74,6 +71,9 @@ function Header( {
 			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
 		const { getBlockSelectionStart, getSectionRootClientId } = unlock(
 			select( blockEditorStore )
 		);
@@ -86,6 +86,9 @@ function Header( {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			hasBlockSelection: !! getBlockSelectionStart(),
 			hasSectionRootClientId: !! getSectionRootClientId(),
+			isStylesCanvasActive:
+				!! getStylesPath()?.startsWith( '/revisions' ) ||
+				getShowStylebook(),
 		};
 	}, [] );
 
@@ -98,7 +101,7 @@ function Header( {
 			NAVIGATION_POST_TYPE,
 			TEMPLATE_PART_POST_TYPE,
 			PATTERN_POST_TYPE,
-		].includes( postType ) || forceDisableBlockTools;
+		].includes( postType ) || isStylesCanvasActive;
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
@@ -131,7 +134,7 @@ function Header( {
 				transition={ { type: 'tween' } }
 			>
 				<DocumentTools
-					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+					disableBlockTools={ isStylesCanvasActive || isTextEditor }
 				/>
 				{ hasFixedToolbar && isLargeViewport && (
 					<CollapsibleBlockToolbar
@@ -146,7 +149,7 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
-					<DocumentBar title={ title } />
+					<DocumentBar />
 				</motion.div>
 			) }
 			<motion.div
@@ -178,7 +181,7 @@ function Header( {
 				/>
 
 				{ isWideViewport && canBeZoomedOut && (
-					<ZoomOutToggle disabled={ forceDisableBlockTools } />
+					<ZoomOutToggle disabled={ isStylesCanvasActive } />
 				) }
 
 				{ ( isWideViewport || ! showIconLabels ) && (
@@ -193,11 +196,6 @@ function Header( {
 						}
 					/>
 				) }
-
-				<PostTypeSupportCheck supportKeys="editor.notes">
-					<CollabSidebar />
-				</PostTypeSupportCheck>
-
 				{ customSaveButton }
 				<MoreMenu />
 			</motion.div>

package/src/components/post-featured-image/index.js

@@ -25,15 +25,19 @@ import {
 	MediaUpload,
 	MediaUploadCheck,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import PostFeaturedImageCheck from './check';
 import { store as editorStore } from '../../store';
 
+const { MediaUploadModal } = unlock( blockEditorPrivateApis );
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
@@ -48,6 +52,45 @@ const instructions = (
 	</p>
 );
 
+/**
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
+ * otherwise falls back to MediaUpload.
+ *
+ * @param {Object}   root0        Component props.
+ * @param {Function} root0.render Render prop function that receives { open } object.
+ * @return {JSX.Element} The component.
+ */
+function ConditionalMediaUpload( { render, ...props } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const mediaUpload = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().mediaUpload;
+	}, [] );
+
+	if ( window.__experimentalDataViewsMediaModal ) {
+		return (
+			<>
+				{ render && render( { open: () => setIsModalOpen( true ) } ) }
+				<MediaUploadModal
+					{ ...props }
+					isOpen={ isModalOpen }
+					onClose={ () => {
+						setIsModalOpen( false );
+						props.onClose?.();
+					} }
+					onSelect={ ( media ) => {
+						setIsModalOpen( false );
+						props.onSelect?.( media );
+					} }
+					onUpload={ mediaUpload }
+				/>
+			</>
+		);
+	}
+
+	return <MediaUpload { ...props } render={ render } />;
+}
+
 function getMediaDetails( media, postId ) {
 	if ( ! media ) {
 		return {};
@@ -181,7 +224,7 @@ function PostFeaturedImage( {
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
-					<MediaUpload
+					<ConditionalMediaUpload
 						title={
 							postType?.labels?.featured_image ||
 							DEFAULT_FEATURE_IMAGE_LABEL

package/src/components/post-template/hooks.js

@@ -52,57 +52,16 @@ export function useAllowSwitchingTemplates() {
 }
 
 function useTemplates( postType ) {
-	// To do: create a new selector to checks if templates exist at all instead
-	// of and unbound request. In the modal, the user templates should be
-	// paginated and we should not make an unbound request.
-	const { defaultTemplateTypes, registeredTemplates, userTemplates } =
-		useSelect(
-			( select ) => {
-				return {
-					defaultTemplateTypes:
-						select( coreStore ).getCurrentTheme()
-							?.default_template_types,
-					registeredTemplates: select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_registered_template',
-						{
-							per_page: -1,
-							post_type: postType,
-						}
-					),
-					userTemplates: select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_template',
-						{ per_page: -1, combinedTemplates: false }
-					),
-				};
-			},
-			[ postType ]
-		);
-
-	return useMemo( () => {
-		if (
-			! defaultTemplateTypes ||
-			! registeredTemplates ||
-			! userTemplates
-		) {
-			return [];
-		}
-		return [
-			...registeredTemplates,
-			...userTemplates.filter(
-				( template ) =>
-					// Only give "custom" templates as an option, which
-					// means the is_wp_suggestion meta field is not set and
-					// the slug is not found in the default template types.
-					// https://github.com/WordPress/wordpress-develop/blob/97382397b2bd7c85aef6d4cd1c10bafd397957fc/src/wp-includes/block-template-utils.php#L858-L867
-					! template.meta.is_wp_suggestion &&
-					! defaultTemplateTypes.find(
-						( type ) => type.slug === template.slug
-					)
-			),
-		];
-	}, [ registeredTemplates, userTemplates, defaultTemplateTypes ] );
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+				post_type: postType,
+				// We look at the combined templates for now (old endpoint)
+				// because posts only accept slugs for templates, not IDs.
+			} ),
+		[ postType ]
+	);
 }
 
 export function useAvailableTemplates( postType ) {

package/src/components/provider/index.js

@@ -219,10 +219,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
 			// If it is a template, try to inherit the post type from the name.
-			if (
-				post.type === 'wp_template' ||
-				post.type === 'wp_registered_template'
-			) {
+			if ( post.type === 'wp_template' ) {
 				if ( post.slug === 'page' ) {
 					postContext.postType = 'page';
 				} else if ( post.slug === 'single' ) {

package/src/components/style-book/categories.ts

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+// @wordpress/blocks imports are not typed.
+// @ts-expect-error
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	BlockExample,
+	StyleBookCategory,
+	CategoryExamples,
+} from './types';
+import {
+	STYLE_BOOK_CATEGORIES,
+	STYLE_BOOK_THEME_SUBCATEGORIES,
+} from './constants';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]}    examples           An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getExamplesByCategory(
+	categoryDefinition: StyleBookCategory,
+	examples: BlockExample[]
+): CategoryExamples | undefined {
+	if ( ! categoryDefinition?.slug || ! examples?.length ) {
+		return;
+	}
+	const categories: CategoryExamples[] =
+		categoryDefinition?.subcategories ?? [];
+	if ( categories.length ) {
+		return categories.reduce(
+			( acc, subcategoryDefinition ) => {
+				const subcategoryExamples = getExamplesByCategory(
+					subcategoryDefinition,
+					examples
+				);
+				if ( subcategoryExamples ) {
+					if ( ! acc.subcategories ) {
+						acc.subcategories = [];
+					}
+					acc.subcategories = [
+						...acc.subcategories,
+						subcategoryExamples,
+					];
+				}
+				return acc;
+			},
+			{
+				title: categoryDefinition.title,
+				slug: categoryDefinition.slug,
+			}
+		);
+	}
+
+	const blocksToInclude = categoryDefinition?.blocks || [];
+	const blocksToExclude = categoryDefinition?.exclude || [];
+	const categoryExamples = examples.filter( ( example ) => {
+		return (
+			! blocksToExclude.includes( example.name ) &&
+			( example.category === categoryDefinition.slug ||
+				blocksToInclude.includes( example.name ) )
+		);
+	} );
+
+	if ( ! categoryExamples.length ) {
+		return;
+	}
+
+	return {
+		title: categoryDefinition.title,
+		slug: categoryDefinition.slug,
+		examples: categoryExamples,
+	};
+}
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ *
+ * @return {StyleBookCategory[]} An array of top-level category definitions.
+ */
+export function getTopLevelStyleBookCategories(): StyleBookCategory[] {
+	const reservedCategories = [
+		...STYLE_BOOK_THEME_SUBCATEGORIES,
+		...STYLE_BOOK_CATEGORIES,
+	].map( ( { slug } ) => slug );
+	const extraCategories: StyleBookCategory[] = getCategories();
+	const extraCategoriesFiltered = extraCategories.filter(
+		( { slug } ) => ! reservedCategories.includes( slug )
+	);
+	return [ ...STYLE_BOOK_CATEGORIES, ...extraCategoriesFiltered ];
+}

package/src/components/style-book/color-examples.tsx

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass,
+	// @wordpress/block-editor imports are not typed.
+	// @ts-expect-error
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import type { Color, Gradient, ColorExampleProps } from './types';
+
+const ColorExamples = ( {
+	colors,
+	type,
+	templateColumns = '1fr 1fr',
+	itemHeight = '52px',
+}: ColorExampleProps ): JSX.Element | null => {
+	if ( ! colors ) {
+		return null;
+	}
+
+	return (
+		<Grid templateColumns={ templateColumns } rowGap={ 8 } columnGap={ 16 }>
+			{ colors.map( ( color: Color | Gradient ) => {
+				const className =
+					type === 'gradients'
+						? __experimentalGetGradientClass( color.slug )
+						: getColorClassName( 'background-color', color.slug );
+				const classes = clsx(
+					'editor-style-book__color-example',
+					className
+				);
+
+				return (
+					<div
+						key={ color.slug }
+						className={ classes }
+						style={ { height: itemHeight } }
+					/>
+				);
+			} ) }
+		</Grid>
+	);
+};
+
+export default ColorExamples;