@wordpress/edit-site 6.3.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.3.0",
+	"version": "6.4.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.3.0",
-		"@wordpress/api-fetch": "^7.3.0",
-		"@wordpress/blob": "^4.3.0",
-		"@wordpress/block-editor": "^13.3.0",
-		"@wordpress/block-library": "^9.3.0",
-		"@wordpress/blocks": "^13.3.0",
-		"@wordpress/commands": "^1.3.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/core-commands": "^1.3.0",
-		"@wordpress/core-data": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/dataviews": "^3.0.0",
-		"@wordpress/date": "^5.3.0",
-		"@wordpress/deprecated": "^4.3.0",
-		"@wordpress/dom": "^4.3.0",
-		"@wordpress/editor": "^14.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/escape-html": "^3.3.0",
-		"@wordpress/hooks": "^4.3.0",
-		"@wordpress/html-entities": "^4.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.3.0",
-		"@wordpress/keycodes": "^4.3.0",
-		"@wordpress/notices": "^5.3.0",
-		"@wordpress/patterns": "^2.3.0",
-		"@wordpress/plugins": "^7.3.0",
-		"@wordpress/preferences": "^4.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/priority-queue": "^3.3.0",
-		"@wordpress/private-apis": "^1.3.0",
-		"@wordpress/reusable-blocks": "^5.3.0",
-		"@wordpress/router": "^1.3.0",
-		"@wordpress/style-engine": "^2.3.0",
-		"@wordpress/url": "^4.3.0",
-		"@wordpress/viewport": "^6.3.0",
-		"@wordpress/widgets": "^4.3.0",
-		"@wordpress/wordcount": "^4.3.0",
+		"@wordpress/a11y": "^4.4.0",
+		"@wordpress/api-fetch": "^7.4.0",
+		"@wordpress/blob": "^4.4.0",
+		"@wordpress/block-editor": "^13.4.0",
+		"@wordpress/block-library": "^9.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/commands": "^1.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/core-commands": "^1.4.0",
+		"@wordpress/core-data": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/dataviews": "^4.0.0",
+		"@wordpress/date": "^5.4.0",
+		"@wordpress/deprecated": "^4.4.0",
+		"@wordpress/dom": "^4.4.0",
+		"@wordpress/editor": "^14.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/escape-html": "^3.4.0",
+		"@wordpress/hooks": "^4.4.0",
+		"@wordpress/html-entities": "^4.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/icons": "^10.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.4.0",
+		"@wordpress/keycodes": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/patterns": "^2.4.0",
+		"@wordpress/plugins": "^7.4.0",
+		"@wordpress/preferences": "^4.4.0",
+		"@wordpress/primitives": "^4.4.0",
+		"@wordpress/priority-queue": "^3.4.0",
+		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/reusable-blocks": "^5.4.0",
+		"@wordpress/router": "^1.4.0",
+		"@wordpress/style-engine": "^2.4.0",
+		"@wordpress/url": "^4.4.0",
+		"@wordpress/viewport": "^6.4.0",
+		"@wordpress/widgets": "^4.4.0",
+		"@wordpress/wordcount": "^4.4.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

package/src/components/add-new-pattern/index.js

@@ -56,8 +56,14 @@ export default function AddNewPattern() {
 			addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
 				?.labels?.add_new_item,
 			// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
-			canCreatePattern: canUser( 'create', 'blocks' ),
-			canCreateTemplatePart: canUser( 'create', 'template-parts' ),
+			canCreatePattern: canUser( 'create', {
+				kind: 'postType',
+				name: PATTERN_TYPES.user,
+			} ),
+			canCreateTemplatePart: canUser( 'create', {
+				kind: 'postType',
+				name: TEMPLATE_PART_POST_TYPE,
+			} ),
 		};
 	}, [] );
 

package/src/components/add-new-template/index.js

@@ -19,6 +19,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useState, memo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	archive,
 	blockMeta,
@@ -161,6 +162,8 @@ function NewTemplateModal( { onClose } ) {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
@@ -266,7 +269,7 @@ function NewTemplateModal( { onClose } ) {
 		>
 			{ modalContent === modalContentMap.templatesList && (
 				<Grid
-					columns={ 3 }
+					columns={ isMobile ? 2 : 3 }
 					gap={ 4 }
 					align="flex-start"
 					justify="center"

package/src/components/add-new-template/style.scss

@@ -97,13 +97,12 @@
 }
 
 .edit-site-add-new-template__modal {
-	max-width: $grid-unit-80 * 13;
-	width: calc(100% - #{$grid-unit-80});
-	margin-top: $grid-unit-80;
-	max-height: calc(100% - #{$grid-unit-80 * 2});
 
 	@include break-large() {
+		max-width: $grid-unit-80 * 13;
+		margin-top: $grid-unit-80;
 		width: calc(100% - #{$grid-unit-80 * 2});
+		max-height: calc(100% - #{$grid-unit-80 * 2});
 	}
 
 	.edit-site-add-new-template__template-button,
@@ -175,8 +174,7 @@
 
 	.edit-site-add-new-template__custom-template-button,
 	.edit-site-add-new-template__template-list__prompt {
-		grid-column-start: 1;
-		grid-column-end: 4;
+		grid-column: 1 / -1;
 	}
 }
 

package/src/components/block-editor/use-site-editor-settings.js

@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
@@ -19,78 +18,6 @@ import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-function useArchiveLabel( templateSlug ) {
-	const taxonomyMatches = templateSlug?.match(
-		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
-	);
-	let taxonomy;
-	let term;
-	let isAuthor = false;
-	let authorSlug;
-	if ( taxonomyMatches ) {
-		// If is for a all taxonomies of a type
-		if ( taxonomyMatches[ 1 ] ) {
-			taxonomy = taxonomyMatches[ 2 ]
-				? taxonomyMatches[ 2 ]
-				: taxonomyMatches[ 1 ];
-		}
-		// If is for a all taxonomies of a type
-		else if ( taxonomyMatches[ 3 ] ) {
-			taxonomy = taxonomyMatches[ 6 ]
-				? taxonomyMatches[ 6 ]
-				: taxonomyMatches[ 4 ];
-			term = taxonomyMatches[ 7 ];
-		}
-		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
-
-		//getTaxonomy( 'category' );
-		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
-	} else {
-		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
-		if ( authorMatches ) {
-			isAuthor = true;
-			if ( authorMatches[ 2 ] ) {
-				authorSlug = authorMatches[ 2 ];
-			}
-		}
-	}
-	return useSelect(
-		( select ) => {
-			const { getEntityRecords, getTaxonomy, getAuthors } =
-				select( coreStore );
-			let archiveTypeLabel;
-			let archiveNameLabel;
-			if ( taxonomy ) {
-				archiveTypeLabel =
-					getTaxonomy( taxonomy )?.labels?.singular_name;
-			}
-			if ( term ) {
-				const records = getEntityRecords( 'taxonomy', taxonomy, {
-					slug: term,
-					per_page: 1,
-				} );
-				if ( records && records[ 0 ] ) {
-					archiveNameLabel = records[ 0 ].name;
-				}
-			}
-			if ( isAuthor ) {
-				archiveTypeLabel = 'Author';
-				if ( authorSlug ) {
-					const authorRecords = getAuthors( { slug: authorSlug } );
-					if ( authorRecords && authorRecords[ 0 ] ) {
-						archiveNameLabel = authorRecords[ 0 ].name;
-					}
-				}
-			}
-			return {
-				archiveTypeLabel,
-				archiveNameLabel,
-			};
-		},
-		[ authorSlug, isAuthor, taxonomy, term ]
-	);
-}
-
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
 	const previousLocation = usePrevious( location );
@@ -114,39 +41,21 @@ function useNavigateToPreviousEntityRecord() {
 
 export function useSpecificEditorSettings() {
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const {
-		templateSlug,
-		canvasMode,
-		settings,
-		shouldUseTemplateAsDefaultRenderingMode,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getEditedPostContext,
-			getCanvasMode,
-			getSettings,
-		} = unlock( select( editSiteStore ) );
-		const { getEditedEntityRecord } = select( coreStore );
-		const usedPostType = getEditedPostType();
-		const usedPostId = getEditedPostId();
-		const _record = getEditedEntityRecord(
-			'postType',
-			usedPostType,
-			usedPostId
-		);
-		const _context = getEditedPostContext();
-		return {
-			templateSlug: _record.slug,
-			canvasMode: getCanvasMode(),
-			settings: getSettings(),
-			// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
-			// @see https://github.com/WordPress/gutenberg/pull/62304/
-			shouldUseTemplateAsDefaultRenderingMode:
-				_context?.postId && _context?.postType !== 'post',
-		};
-	}, [] );
-	const archiveLabels = useArchiveLabel( templateSlug );
+	const { canvasMode, settings, shouldUseTemplateAsDefaultRenderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext, getCanvasMode, getSettings } = unlock(
+				select( editSiteStore )
+			);
+			const _context = getEditedPostContext();
+			return {
+				canvasMode: getCanvasMode(),
+				settings: getSettings(),
+				// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
+				// @see https://github.com/WordPress/gutenberg/pull/62304/
+				shouldUseTemplateAsDefaultRenderingMode:
+					_context?.postId && _context?.postType !== 'post',
+			};
+		}, [] );
 	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
@@ -162,9 +71,6 @@ export function useSpecificEditorSettings() {
 			defaultRenderingMode,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
-			// I wonder if they should be set in the post editor too
-			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
-			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 			__unstableIsPreviewMode: canvasMode === 'view',
 		};
 	}, [
@@ -173,8 +79,6 @@ export function useSpecificEditorSettings() {
 		defaultRenderingMode,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
-		archiveLabels.archiveTypeLabel,
-		archiveLabels.archiveNameLabel,
 	] );
 
 	return defaultEditorSettings;

package/src/components/global-styles/block-preview-panel.js

@@ -32,8 +32,15 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		return getBlockFromExample( name, example );
 	}, [ name, blockExample, variation ] );
 
-	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = 150;
+	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	// Same as height of InserterPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 235;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	if ( ! blockExample ) {
 		return null;
@@ -49,16 +56,22 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 					minHeight={ previewHeight }
-					additionalStyles={ [
-						{
-							css: `
+					additionalStyles={
+						//We want this CSS to be in sync with the one in InserterPreviewPanel.
+						[
+							{
+								css: `
 								body{
-									min-height:${ previewHeight }px;
-									display:flex;align-items:center;justify-content:center;
+									padding: 24px;
+									min-height:${ Math.round( minHeight ) }px;
+									display:flex;
+									align-items:center;
 								}
+								.is-root-container { width: 100%; }
 							`,
-						},
-					] }
+							},
+						]
+					}
 				/>
 			</div>
 		</Spacer>

package/src/components/global-styles/font-families.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
+	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
 	Button,
@@ -25,8 +26,14 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen, setNotice } =
+		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
@@ -39,6 +46,11 @@ function FontFamilies() {
 		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
+	const hasInstalledFonts =
+		hasFonts ||
+		baseFontFamilies?.theme?.length > 0 ||
+		baseCustomFonts?.length > 0;
+
 	return (
 		<>
 			{ !! modalTabOpen && (
@@ -48,48 +60,71 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 2 }>
-				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-				{ hasFonts ? (
-					<>
+			<VStack spacing={ 4 }>
+				{ themeFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>
+							{
+								/* translators: Heading for a list of fonts provided by the theme. */
+								_x( 'Theme', 'font source' )
+							}
+						</Subtitle>
 						<ItemGroup isBordered isSeparated>
-							{ customFonts.map( ( font ) => (
+							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
-							{ themeFonts.map( ( font ) => (
+						</ItemGroup>
+					</VStack>
+				) }
+				{ customFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>
+							{
+								/* translators: Heading for a list of fonts installed by the user. */
+								_x( 'Custom', 'font source' )
+							}
+						</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
 						</ItemGroup>
-						<Button
-							className="edit-site-global-styles-font-families__manage-fonts"
-							variant="secondary"
-							__next40pxDefaultSize
-							onClick={ () =>
-								setModalTabOpen( 'installed-fonts' )
-							}
-						>
-							{ __( 'Manage fonts' ) }
-						</Button>
-					</>
-				) : (
-					<>
-						{ __( 'No fonts installed.' ) }
-						<Button
-							className="edit-site-global-styles-font-families__add-fonts"
-							variant="secondary"
-							__next40pxDefaultSize
-							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
-						>
-							{ __( 'Add fonts' ) }
-						</Button>
-					</>
+					</VStack>
+				) }
+				{ ! hasFonts && (
+					<VStack>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+						<Text as="p">
+							{ hasInstalledFonts
+								? __( 'No fonts activated.' )
+								: __( 'No fonts installed.' ) }
+						</Text>
+					</VStack>
 				) }
+				<Button
+					className="edit-site-global-styles-font-families__manage-fonts"
+					variant="secondary"
+					__next40pxDefaultSize
+					onClick={ () => {
+						// Reset notice when opening the modal.
+						setNotice( null );
+						setModalTabOpen(
+							hasInstalledFonts
+								? 'installed-fonts'
+								: 'upload-fonts'
+						);
+					} }
+				>
+					{ hasInstalledFonts
+						? __( 'Manage fonts' )
+						: __( 'Add fonts' ) }
+				</Button>
 			</VStack>
 		</>
 	);

package/src/components/global-styles/font-library-modal/index.js

@@ -46,8 +46,10 @@ function FontLibraryModal( {
 } ) {
 	const { collections, setNotice } = useContext( FontLibraryContext );
 	const canUserCreate = useSelect( ( select ) => {
-		const { canUser } = select( coreStore );
-		return canUser( 'create', 'font-families' );
+		return select( coreStore ).canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_font_family',
+		} );
 	}, [] );
 
 	const tabs = [ DEFAULT_TAB ];