@wordpress/edit-site 5.13.0 → 5.15.0

package/src/components/page-patterns/use-patterns.js

@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CORE_PATTERN_SOURCES,
+	PATTERNS,
+	SYNC_TYPES,
+	TEMPLATE_PARTS,
+	USER_PATTERNS,
+	filterOutDuplicatesByName,
+} from './utils';
+import { unlock } from '../../lock-unlock';
+import { searchItems } from './search-items';
+import { store as editSiteStore } from '../../store';
+
+const EMPTY_PATTERN_LIST = [];
+
+const createTemplatePartId = ( theme, slug ) =>
+	theme && slug ? theme + '//' + slug : null;
+
+const templatePartToPattern = ( templatePart ) => ( {
+	blocks: parse( templatePart.content.raw ),
+	categories: [ templatePart.area ],
+	description: templatePart.description || '',
+	isCustom: templatePart.source === 'custom',
+	keywords: templatePart.keywords || [],
+	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
+	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+	title: decodeEntities( templatePart.title.rendered ),
+	type: templatePart.type,
+	templatePart,
+} );
+
+const templatePartHasCategory = ( item, category ) =>
+	item.templatePart.area === category;
+
+const selectTemplatePartsAsPatterns = (
+	select,
+	{ categoryId, search = '' } = {}
+) => {
+	const { getEntityRecords, getIsResolving } = select( coreStore );
+	const query = { per_page: -1 };
+	const rawTemplateParts =
+		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
+		EMPTY_PATTERN_LIST;
+	const templateParts = rawTemplateParts.map( ( templatePart ) =>
+		templatePartToPattern( templatePart )
+	);
+
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		'wp_template_part',
+		query,
+	] );
+
+	const patterns = searchItems( templateParts, search, {
+		categoryId,
+		hasCategory: templatePartHasCategory,
+	} );
+
+	return { patterns, isResolving };
+};
+
+const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
+	const { getSettings } = unlock( select( editSiteStore ) );
+	const settings = getSettings();
+	const blockPatterns =
+		settings.__experimentalAdditionalBlockPatterns ??
+		settings.__experimentalBlockPatterns;
+
+	const restBlockPatterns = select( coreStore ).getBlockPatterns();
+
+	let patterns = [
+		...( blockPatterns || [] ),
+		...( restBlockPatterns || [] ),
+	]
+		.filter(
+			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
+		)
+		.filter( filterOutDuplicatesByName )
+		.filter( ( pattern ) => pattern.inserter !== false )
+		.map( ( pattern ) => ( {
+			...pattern,
+			keywords: pattern.keywords || [],
+			type: 'pattern',
+			blocks: parse( pattern.content ),
+		} ) );
+
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
+		} );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
+
+	return { patterns, isResolving: false };
+};
+
+const reusableBlockToPattern = ( reusableBlock ) => ( {
+	blocks: parse( reusableBlock.content.raw ),
+	categories: reusableBlock.wp_pattern,
+	id: reusableBlock.id,
+	name: reusableBlock.slug,
+	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
+	title: reusableBlock.title.raw,
+	type: reusableBlock.type,
+	reusableBlock,
+} );
+
+const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
+	const { getEntityRecords, getIsResolving } = select( coreStore );
+
+	const query = { per_page: -1 };
+	const records = getEntityRecords( 'postType', USER_PATTERNS, query );
+
+	let patterns = records
+		? records.map( ( record ) => reusableBlockToPattern( record ) )
+		: EMPTY_PATTERN_LIST;
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		USER_PATTERNS,
+		query,
+	] );
+
+	if ( syncStatus ) {
+		patterns = patterns.filter(
+			( pattern ) => pattern.syncStatus === syncStatus
+		);
+	}
+
+	patterns = searchItems( patterns, search, {
+		// We exit user pattern retrieval early if we aren't in the
+		// catch-all category for user created patterns, so it has
+		// to be in the category.
+		hasCategory: () => true,
+	} );
+
+	return { patterns, isResolving };
+};
+
+export const usePatterns = (
+	categoryType,
+	categoryId,
+	{ search = '', syncStatus }
+) => {
+	return useSelect(
+		( select ) => {
+			if ( categoryType === TEMPLATE_PARTS ) {
+				return selectTemplatePartsAsPatterns( select, {
+					categoryId,
+					search,
+				} );
+			} else if ( categoryType === PATTERNS ) {
+				return selectThemePatterns( select, { categoryId, search } );
+			} else if ( categoryType === USER_PATTERNS ) {
+				return selectUserPatterns( select, { search, syncStatus } );
+			}
+			return { patterns: EMPTY_PATTERN_LIST, isResolving: false };
+		},
+		[ categoryId, categoryType, search, syncStatus ]
+	);
+};
+
+export default usePatterns;

package/src/components/{page-library → page-patterns}/utils.js

@@ -1,9 +1,9 @@
-export const DEFAULT_CATEGORY = 'header';
-export const DEFAULT_TYPE = 'wp_template_part';
+export const DEFAULT_CATEGORY = 'my-patterns';
+export const DEFAULT_TYPE = 'wp_block';
 export const PATTERNS = 'pattern';
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const USER_PATTERNS = 'wp_block';
-export const USER_PATTERN_CATEGORY = 'custom-patterns';
+export const USER_PATTERN_CATEGORY = 'my-patterns';
 
 export const CORE_PATTERN_SOURCES = [
 	'core',

package/src/components/page-template-parts/add-new-template-part.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewTemplatePart() {
+	const { canCreate, postType } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+		};
+	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	if ( ! canCreate || ! postType ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => setIsModalOpen( false ) }
+					blocks={ [] }
+					onCreate={ ( templatePart ) => {
+						setIsModalOpen( false );
+						history.push( {
+							postId: templatePart.id,
+							postType: 'wp_template_part',
+							canvas: 'edit',
+						} );
+					} }
+					onError={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/page-template-parts/index.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplatePart from './add-new-template-part';
+
+export default function PageTemplateParts() {
+	const { records: templateParts } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{
+			per_page: -1,
+		}
+	);
+
+	const columns = [
+		{
+			header: __( 'Template Part' ),
+			cell: ( templatePart ) => (
+				<VStack>
+					<Heading as="h3" level={ 5 }>
+						<Link
+							params={ {
+								postId: templatePart.id,
+								postType: templatePart.type,
+								canvas: 'view',
+							} }
+							state={ { backPath: '/wp_template_part/all' } }
+						>
+							{ decodeEntities(
+								templatePart.title?.rendered ||
+									templatePart.slug
+							) }
+						</Link>
+					</Heading>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( templatePart ) => (
+				<AddedBy
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( templatePart ) => (
+				<TemplateActions
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Template Parts' ) }
+			actions={ <AddNewTemplatePart /> }
+		>
+			{ templateParts && (
+				<Table data={ templateParts } columns={ columns } />
+			) }
+		</Page>
+	);
+}

package/src/components/page-templates/index.js

@@ -46,7 +46,7 @@ export default function PageTemplates() {
 			header: __( 'Template' ),
 			cell: ( template ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: template.id,

package/src/components/preferences-modal/enable-feature.js

@@ -6,14 +6,17 @@ import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/
 import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function EnableFeature( props ) {
-	const { featureName, ...remainingProps } = props;
+	const { featureName, onToggle = () => {}, ...remainingProps } = props;
 	const isChecked = useSelect(
 		( select ) =>
 			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
 		[ featureName ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => toggle( 'core/edit-site', featureName );
+	const onChange = () => {
+		onToggle();
+		toggle( 'core/edit-site', featureName );
+	};
 	return (
 		<BaseOption
 			onChange={ onChange }

package/src/components/preferences-modal/index.js

@@ -5,19 +5,42 @@ import {
 	PreferencesModal,
 	PreferencesModalTabs,
 	PreferencesModalSection,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
+import { store as editSiteStore } from '../../store';
+
+export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
+
+export default function EditSitePreferencesModal() {
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )
+	);
+	const { closeModal, openModal } = useDispatch( interfaceStore );
+	const toggleModal = () =>
+		isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );
+	const registry = useRegistry();
+	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editSiteStore );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
 
-export default function EditSitePreferencesModal( {
-	isModalActive,
-	toggleModal,
-} ) {
 	const sections = useMemo( () => [
 		{
 			name: 'general',
@@ -29,6 +52,14 @@ export default function EditSitePreferencesModal( {
 						'Customize options related to the block editor interface and editing flow.'
 					) }
 				>
+					<EnableFeature
+						featureName="distractionFree"
+						onToggle={ toggleDistractionFree }
+						help={ __(
+							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+						) }
+						label={ __( 'Distraction free' ) }
+					/>
 					<EnableFeature
 						featureName="focusMode"
 						help={ __(

package/src/components/resizable-frame/index.js

@@ -9,9 +9,12 @@ import classnames from 'classnames';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import {
 	ResizableBox,
+	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,7 +36,7 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 // The minimum width of the frame (in px) while resizing.
-const FRAME_MIN_WIDTH = 340;
+const FRAME_MIN_WIDTH = 320;
 // The reference width of the frame (in px) used to calculate the aspect ratio.
 const FRAME_REFERENCE_WIDTH = 1300;
 // 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
@@ -42,6 +45,8 @@ const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;
 // viewport's edge. If the frame is resized to be closer to the viewport's edge
 // than this distance, then "canvas mode" will be enabled.
 const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+// Default size for the `frameSize` state.
+const INITIAL_FRAME_SIZE = { width: '100%', height: '100%' };
 
 function calculateNewHeight( width, initialAspectRatio ) {
 	const lerp = ( a, b, amount ) => {
@@ -73,27 +78,32 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
 	innerContentStyle,
 } ) {
-	const [ frameSize, setFrameSize ] = useState( {
-		width: '100%',
-		height: '100%',
-	} );
+	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	const [ startingWidth, setStartingWidth ] = useState();
 	const [ isResizing, setIsResizing ] = useState( false );
-	const [ isHovering, setIsHovering ] = useState( false );
-	const [ isOversized, setIsOversized ] = useState( false );
+	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
+	const canvasMode = useSelect(
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
+		[]
+	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const initialAspectRatioRef = useRef( null );
 	// The width of the resizable frame on initial render.
 	const initialComputedWidthRef = useRef( null );
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
+	const resizableHandleHelpId = useInstanceId(
+		ResizableFrame,
+		'edit-site-resizable-frame-handle-help'
+	);
 
 	// Remember frame dimensions on initial render.
 	useEffect( () => {
@@ -154,13 +164,40 @@ function ResizableFrame( {
 		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
 			// Reset the initial aspect ratio if the frame is resized slightly
 			// above the sidebar but not far enough to trigger full screen.
-			setFrameSize( { width: '100%', height: '100%' } );
+			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
 			setCanvasMode( 'edit' );
 		}
 	};
 
+	// Handle resize by arrow keys
+	const handleResizableHandleKeyDown = ( event ) => {
+		if ( ! [ 'ArrowLeft', 'ArrowRight' ].includes( event.key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const step = 20 * ( event.shiftKey ? 5 : 1 );
+		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const newWidth = Math.min(
+			Math.max(
+				FRAME_MIN_WIDTH,
+				frameRef.current.resizable.offsetWidth + delta
+			),
+			initialComputedWidthRef.current
+		);
+
+		setFrameSize( {
+			width: newWidth,
+			height: calculateNewHeight(
+				newWidth,
+				initialAspectRatioRef.current
+			),
+		} );
+	};
+
 	const frameAnimationVariants = {
 		default: {
 			flexGrow: 0,
@@ -173,16 +210,26 @@ function ResizableFrame( {
 	};
 
 	const resizeHandleVariants = {
-		default: {
+		hidden: {
+			opacity: 0,
+			left: 0,
+		},
+		visible: {
 			opacity: 1,
 			left: -16,
 		},
-		resizing: {
+		active: {
 			opacity: 1,
 			left: -16,
 			scaleY: 1.3,
 		},
 	};
+	const currentResizeHandleVariant = ( () => {
+		if ( isResizing ) {
+			return 'active';
+		}
+		return shouldShowHandle ? 'visible' : 'hidden';
+	} )();
 
 	return (
 		<ResizableBox
@@ -217,35 +264,56 @@ function ResizableFrame( {
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
 			maxHeight={ '100%' }
-			onMouseOver={ () => setIsHovering( true ) }
-			onMouseOut={ () => setIsHovering( false ) }
+			onFocus={ () => setShouldShowHandle( true ) }
+			onBlur={ () => setShouldShowHandle( false ) }
+			onMouseOver={ () => setShouldShowHandle( true ) }
+			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				left:
-					isHovering || isResizing ? (
-						<motion.div
-							key="handle"
-							className="edit-site-resizable-frame__handle"
-							variants={ resizeHandleVariants }
-							animate={ isResizing ? 'resizing' : 'default' }
-							title="Drag to resize"
-							initial={ {
-								opacity: 0,
-								left: 0,
-							} }
-							exit={ {
-								opacity: 0,
-								left: 0,
-							} }
-							whileHover={ { scaleY: 1.3 } }
-						/>
-					) : null,
+				left: canvasMode === 'view' && (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<motion.button
+								key="handle"
+								role="separator"
+								aria-orientation="vertical"
+								className={ classnames(
+									'edit-site-resizable-frame__handle',
+									{ 'is-resizing': isResizing }
+								) }
+								variants={ resizeHandleVariants }
+								animate={ currentResizeHandleVariant }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ resizableHandleHelpId }
+								aria-valuenow={
+									frameRef.current?.resizable?.offsetWidth ||
+									undefined
+								}
+								aria-valuemin={ FRAME_MIN_WIDTH }
+								aria-valuemax={
+									initialComputedWidthRef.current
+								}
+								onKeyDown={ handleResizableHandleKeyDown }
+								initial="hidden"
+								exit="hidden"
+								whileFocus="active"
+								whileHover="active"
+							/>
+						</Tooltip>
+						<div hidden id={ resizableHandleHelpId }>
+							{ __(
+								'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'
+							) }
+						</div>
+					</>
+				),
 			} }
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
-				[ oversizedClassName ]: isOversized,
 			} ) }
 		>
 			<motion.div

package/src/components/resizable-frame/style.scss

@@ -30,11 +30,13 @@
 .edit-site-resizable-frame__handle {
 	align-items: center;
 	background-color: rgba($gray-700, 0.4);
+	border: 0;
 	border-radius: $grid-unit-05;
 	cursor: col-resize;
 	display: flex;
 	height: $grid-unit-80;
 	justify-content: flex-end;
+	padding: 0;
 	position: absolute;
 	top: calc(50% - #{$grid-unit-40});
 	width: $grid-unit-05;
@@ -56,16 +58,14 @@
 		width: $grid-unit-40;
 	}
 
-	&:hover,
-	.is-resizing & {
-		background-color: var(--wp-admin-theme-color);
+	&:focus-visible {
+		// Works with Windows high contrast mode while also hiding weird outline in Safari.
+		outline: 2px solid transparent;
 	}
 
-	.edit-site-resizable-frame__handle-label {
-		background: var(--wp-admin-theme-color);
-		border-radius: 2px;
-		color: #fff;
-		margin-right: $grid-unit-10;
-		padding: 4px 8px;
+	&:hover,
+	&:focus,
+	&.is-resizing {
+		background-color: var(--wp-admin-theme-color);
 	}
 }