@wordpress/edit-site 5.25.0 → 5.26.0

package/src/components/global-styles/screen-revisions/test/get-revision-changes.js

@@ -1,191 +0,0 @@
-/**
- * Internal dependencies
- */
-import getRevisionChanges from '../get-revision-changes';
-
-describe( 'getRevisionChanges', () => {
-	const revision = {
-		id: 10,
-		styles: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--potato)',
-				fontStyle: 'normal',
-				fontWeight: '600',
-				lineHeight: '1.85',
-				fontFamily: 'var(--wp--preset--font-family--asparagus)',
-			},
-			spacing: {
-				padding: {
-					top: '36px',
-					right: '89px',
-					bottom: '133px',
-					left: 'var(--wp--preset--spacing--20)',
-				},
-				blockGap: '114px',
-			},
-			elements: {
-				heading: {
-					typography: {
-						letterSpacing: '37px',
-					},
-				},
-				caption: {
-					color: {
-						text: 'var(--wp--preset--color--pineapple)',
-					},
-				},
-			},
-			color: {
-				text: 'var(--wp--preset--color--tomato)',
-			},
-			blocks: {
-				'core/paragraph': {
-					color: {
-						text: '#000000',
-					},
-				},
-			},
-		},
-		settings: {
-			color: {
-				palette: {
-					theme: [
-						{
-							slug: 'one',
-							color: 'pink',
-						},
-					],
-				},
-			},
-		},
-	};
-	const previousRevision = {
-		id: 9,
-		styles: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--fungus)',
-				fontStyle: 'normal',
-				fontWeight: '600',
-				lineHeight: '1.85',
-				fontFamily: 'var(--wp--preset--font-family--grapes)',
-			},
-			spacing: {
-				padding: {
-					top: '36px',
-					right: '89px',
-					bottom: '133px',
-					left: 'var(--wp--preset--spacing--20)',
-				},
-				blockGap: '114px',
-			},
-			elements: {
-				heading: {
-					typography: {
-						letterSpacing: '37px',
-					},
-				},
-				caption: {
-					typography: {
-						fontSize: '1.11rem',
-						fontStyle: 'normal',
-						fontWeight: '600',
-					},
-				},
-				link: {
-					typography: {
-						lineHeight: 2,
-						textDecoration: 'line-through',
-					},
-					color: {
-						text: 'var(--wp--preset--color--egg)',
-					},
-				},
-			},
-			color: {
-				text: 'var(--wp--preset--color--tomato)',
-				background: 'var(--wp--preset--color--pumpkin)',
-			},
-			blocks: {
-				'core/paragraph': {
-					color: {
-						text: '#fff',
-					},
-				},
-			},
-		},
-		settings: {
-			color: {
-				palette: {
-					theme: [
-						{
-							slug: 'one',
-							color: 'blue',
-						},
-					],
-				},
-			},
-		},
-	};
-	const blockNames = {
-		'core/paragraph': 'Paragraph',
-	};
-	it( 'returns a list of changes and caches them', () => {
-		const resultA = getRevisionChanges(
-			revision,
-			previousRevision,
-			blockNames
-		);
-		expect( resultA ).toEqual( [
-			'Colors',
-			'Typography',
-			'Paragraph block',
-			'Caption element',
-			'Link element',
-			'Color settings',
-		] );
-
-		const resultB = getRevisionChanges(
-			revision,
-			previousRevision,
-			blockNames
-		);
-
-		expect( resultA ).toBe( resultB );
-	} );
-
-	it( 'skips unknown and unchanged keys', () => {
-		const result = getRevisionChanges(
-			{
-				styles: {
-					frogs: {
-						legs: 'green',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'foo',
-						},
-					},
-				},
-			},
-			{
-				styles: {
-					frogs: {
-						legs: 'yellow',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'bar',
-						},
-					},
-				},
-			}
-		);
-		expect( result ).toEqual( [] );
-	} );
-} );

package/src/components/header-edit-mode/undo-redo/redo.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function RedoButton( props, ref ) {
-	const shortcut = isAppleOS()
-		? displayShortcut.primaryShift( 'z' )
-		: displayShortcut.primary( 'y' );
-
-	const hasRedo = useSelect(
-		( select ) => select( coreStore ).hasRedo(),
-		[]
-	);
-	const { redo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? redoIcon : undoIcon }
-			label={ __( 'Redo' ) }
-			shortcut={ shortcut }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasRedo }
-			onClick={ hasRedo ? redo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( RedoButton );

package/src/components/header-edit-mode/undo-redo/undo.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function UndoButton( props, ref ) {
-	const hasUndo = useSelect(
-		( select ) => select( coreStore ).hasUndo(),
-		[]
-	);
-	const { undo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? undoIcon : redoIcon }
-			label={ __( 'Undo' ) }
-			shortcut={ displayShortcut.primary( 'z' ) }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasUndo }
-			onClick={ hasUndo ? undo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( UndoButton );

package/src/components/page-pages/side-editor.js

@@ -1,14 +0,0 @@
-/**
- * Internal dependencies
- */
-import Editor from '../editor';
-import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
-
-export default function SideEditor( { postType, postId } ) {
-	useInitEditedEntity( {
-		postId,
-		postType,
-	} );
-
-	return <Editor />;
-}

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

@@ -1,360 +0,0 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	__experimentalView as View,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useCallback } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { parse } from '@wordpress/blocks';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { DataViews } from '@wordpress/dataviews';
-
-/**
- * Internal dependencies
- */
-import Page from '../page';
-import Link from '../routes/link';
-import { useAddedBy, AvatarImage } from '../list/added-by';
-import {
-	TEMPLATE_POST_TYPE,
-	ENUMERATION_TYPE,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-} from '../../utils/constants';
-import {
-	useResetTemplateAction,
-	deleteTemplateAction,
-	renameTemplateAction,
-} from './template-actions';
-import usePatternSettings from '../page-patterns/use-pattern-settings';
-import { unlock } from '../../lock-unlock';
-
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
-
-const EMPTY_ARRAY = [];
-
-const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
-	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-	},
-};
-
-const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
-	search: '',
-	page: 1,
-	perPage: 20,
-	// All fields are visible by default, so it's
-	// better to keep track of the hidden ones.
-	hiddenFields: [ 'preview' ],
-	layout: {},
-	filters: [],
-};
-
-function normalizeSearchInput( input = '' ) {
-	return removeAccents( input.trim().toLowerCase() );
-}
-
-// TODO: these are going to be reused in the template part list.
-// That's the reason for leaving the template parts code for now.
-function TemplateTitle( { item } ) {
-	const { isCustomized } = useAddedBy( item.type, item.id );
-	return (
-		<VStack spacing={ 1 }>
-			<View as="span" className="edit-site-list-title__customized-info">
-				<Link
-					params={ {
-						postId: item.id,
-						postType: item.type,
-						canvas: 'edit',
-					} }
-				>
-					{ decodeEntities( item.title?.rendered || item.slug ) ||
-						__( '(no title)' ) }
-				</Link>
-			</View>
-			{ isCustomized && (
-				<span className="edit-site-list-added-by__customized-info">
-					{ item.type === TEMPLATE_POST_TYPE
-						? _x( 'Customized', 'template' )
-						: _x( 'Customized', 'template part' ) }
-				</span>
-			) }
-		</VStack>
-	);
-}
-
-function AuthorField( { item } ) {
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ text }</span>
-		</HStack>
-	);
-}
-
-function TemplatePreview( { content, viewType } ) {
-	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const blocks = useMemo( () => {
-		return parse( content );
-	}, [ content ] );
-	if ( ! blocks?.length ) {
-		return null;
-	}
-	// Wrap everything in a block editor provider to ensure 'styles' that are needed
-	// for the previews are synced between the site editor store and the block editor store.
-	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
-	// render patterns inside the previews.
-	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
-	// the block editor settings are needed in context where we don't have the block editor.
-	// Explore how we can solve this in a better way.
-	return (
-		<ExperimentalBlockEditorProvider settings={ settings }>
-			<div
-				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
-			>
-				<BlockPreview blocks={ blocks } />
-			</div>
-		</ExperimentalBlockEditorProvider>
-	);
-}
-
-export default function DataviewsTemplates() {
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { records: allTemplates, isResolving: isLoadingData } =
-		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-			per_page: -1,
-		} );
-
-	const authors = useMemo( () => {
-		if ( ! allTemplates ) {
-			return EMPTY_ARRAY;
-		}
-		const authorsSet = new Set();
-		allTemplates.forEach( ( template ) => {
-			authorsSet.add( template.author_text );
-		} );
-		return Array.from( authorsSet ).map( ( author ) => ( {
-			value: author,
-			label: author,
-		} ) );
-	}, [ allTemplates ] );
-
-	const fields = useMemo(
-		() => [
-			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => {
-					return (
-						<TemplatePreview
-							content={ item.content.raw }
-							viewType={ view.type }
-						/>
-					);
-				},
-				minWidth: 120,
-				maxWidth: 120,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => <TemplateTitle item={ item } />,
-				maxWidth: 400,
-				enableHiding: false,
-			},
-			{
-				header: __( 'Description' ),
-				id: 'description',
-				getValue: ( { item } ) => item.description,
-				render: ( { item } ) => {
-					return item.description ? (
-						decodeEntities( item.description )
-					) : (
-						<>
-							<Text variant="muted" aria-hidden="true">
-								&#8212;
-							</Text>
-							<VisuallyHidden>
-								{ __( 'No description.' ) }
-							</VisuallyHidden>
-						</>
-					);
-				},
-				maxWidth: 200,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField item={ item } />;
-				},
-				enableHiding: false,
-				type: ENUMERATION_TYPE,
-				elements: authors,
-			},
-		],
-		[ authors, view ]
-	);
-
-	const { shownTemplates, paginationInfo } = useMemo( () => {
-		if ( ! allTemplates ) {
-			return {
-				shownTemplates: EMPTY_ARRAY,
-				paginationInfo: { totalItems: 0, totalPages: 0 },
-			};
-		}
-		let filteredTemplates = [ ...allTemplates ];
-		// Handle global search.
-		if ( view.search ) {
-			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredTemplates = filteredTemplates.filter( ( item ) => {
-				const title = item.title?.rendered || item.slug;
-				return (
-					normalizeSearchInput( title ).includes(
-						normalizedSearch
-					) ||
-					normalizeSearchInput( item.description ).includes(
-						normalizedSearch
-					)
-				);
-			} );
-		}
-
-		// Handle filters.
-		if ( view.filters.length > 0 ) {
-			view.filters.forEach( ( filter ) => {
-				if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_IN &&
-					!! filter.value
-				) {
-					filteredTemplates = filteredTemplates.filter( ( item ) => {
-						return item.author_text === filter.value;
-					} );
-				} else if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_NOT_IN &&
-					!! filter.value
-				) {
-					filteredTemplates = filteredTemplates.filter( ( item ) => {
-						return item.author_text !== filter.value;
-					} );
-				}
-			} );
-		}
-
-		// Handle sorting.
-		if ( view.sort ) {
-			const stringSortingFields = [ 'title', 'author' ];
-			const fieldId = view.sort.field;
-			if ( stringSortingFields.includes( fieldId ) ) {
-				const fieldToSort = fields.find( ( field ) => {
-					return field.id === fieldId;
-				} );
-				filteredTemplates.sort( ( a, b ) => {
-					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-					return view.sort.direction === 'asc'
-						? valueA.localeCompare( valueB )
-						: valueB.localeCompare( valueA );
-				} );
-			}
-		}
-
-		// Handle pagination.
-		const start = ( view.page - 1 ) * view.perPage;
-		const totalItems = filteredTemplates?.length || 0;
-		filteredTemplates = filteredTemplates?.slice(
-			start,
-			start + view.perPage
-		);
-		return {
-			shownTemplates: filteredTemplates,
-			paginationInfo: {
-				totalItems,
-				totalPages: Math.ceil( totalItems / view.perPage ),
-			},
-		};
-	}, [ allTemplates, view, fields ] );
-
-	const resetTemplateAction = useResetTemplateAction();
-	const actions = useMemo(
-		() => [
-			resetTemplateAction,
-			deleteTemplateAction,
-			renameTemplateAction,
-		],
-		[ resetTemplateAction ]
-	);
-	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
-					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
-					},
-				};
-			}
-
-			setView( updatedView );
-		},
-		[ view, setView ]
-	);
-	return (
-		<Page title={ __( 'Templates' ) }>
-			<DataViews
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				actions={ actions }
-				data={ shownTemplates }
-				getItemId={ ( item ) => item.id }
-				isLoading={ isLoadingData }
-				view={ view }
-				onChangeView={ onChangeView }
-				supportedLayouts={ [ LAYOUT_TABLE, LAYOUT_GRID ] }
-				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
-			/>
-		</Page>
-	);
-}

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function InserterSidebar() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const insertionPoint = useSelect(
-		( select ) => select( editSiteStore ).__experimentalGetInsertionPoint(),
-		[]
-	);
-
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobile ? VisuallyHidden : 'div';
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
-	} );
-
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
-	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-site-editor__inserter-panel"
-		>
-			<TagName className="edit-site-editor__inserter-panel-header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="edit-site-editor__inserter-panel-content">
-				<Library
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobile }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					ref={ libraryRef }
-				/>
-			</div>
-		</div>
-	);
-}