@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

package/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -1,228 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import useGlobalStylesRevisions from '../use-global-styles-revisions';
-
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-
-jest.mock( '@wordpress/element', () => {
-	return {
-		__esModule: true,
-		...jest.requireActual( '@wordpress/element' ),
-		useContext: jest.fn().mockImplementation( () => ( {
-			user: {
-				styles: 'ice-cream',
-				settings: 'cake',
-			},
-		} ) ),
-	};
-} );
-
-describe( 'useGlobalStylesRevisions', () => {
-	const selectValue = {
-		authors: [
-			{
-				id: 4,
-				name: 'sam',
-			},
-		],
-		currentUser: {
-			name: 'fred',
-			avatar_urls: {},
-		},
-		isDirty: false,
-		revisions: [
-			{
-				id: 1,
-				author: 4,
-				settings: {},
-				styles: {},
-			},
-		],
-		isLoadingGlobalStylesRevisions: false,
-		revisionsCount: 1,
-	};
-
-	it( 'returns loaded revisions with no unsaved changes', () => {
-		useSelect.mockImplementation( () => selectValue );
-
-		const { result } = renderHook( () => useGlobalStylesRevisions() );
-		const { revisions, isLoading, hasUnsavedChanges } = result.current;
-
-		expect( isLoading ).toBe( false );
-		expect( hasUnsavedChanges ).toBe( false );
-		expect( revisions ).toEqual( [
-			{
-				author: {
-					id: 4,
-					name: 'sam',
-				},
-				id: 1,
-				isLatest: true,
-				settings: {},
-				styles: {},
-			},
-			{
-				id: 'parent',
-				settings: {},
-				styles: {},
-			},
-		] );
-	} );
-
-	it( 'returns loaded revisions with saved changes', () => {
-		useSelect.mockImplementation( () => ( {
-			...selectValue,
-			isDirty: true,
-		} ) );
-
-		const { result } = renderHook( () => useGlobalStylesRevisions() );
-		const { revisions, isLoading, hasUnsavedChanges } = result.current;
-
-		expect( isLoading ).toBe( false );
-		expect( hasUnsavedChanges ).toBe( true );
-		expect( revisions ).toEqual( [
-			{
-				author: {
-					avatar_urls: {},
-					name: 'fred',
-				},
-				id: 'unsaved',
-				modified: revisions[ 0 ].modified,
-				settings: 'cake',
-				styles: 'ice-cream',
-			},
-			{
-				author: {
-					id: 4,
-					name: 'sam',
-				},
-				id: 1,
-				isLatest: true,
-				settings: {},
-				styles: {},
-			},
-			{
-				id: 'parent',
-				settings: {},
-				styles: {},
-			},
-		] );
-	} );
-
-	it( 'returns empty revisions', () => {
-		useSelect.mockImplementation( () => ( {
-			...selectValue,
-			revisions: [],
-		} ) );
-
-		const { result } = renderHook( () => useGlobalStylesRevisions() );
-		const { revisions, isLoading, hasUnsavedChanges } = result.current;
-
-		expect( isLoading ).toBe( false );
-		expect( hasUnsavedChanges ).toBe( false );
-		expect( revisions ).toEqual( [] );
-	} );
-
-	it( 'returns loading status when resolving global revisions', () => {
-		useSelect.mockImplementation( () => ( {
-			...selectValue,
-			isLoadingGlobalStylesRevisions: true,
-		} ) );
-
-		const { result } = renderHook( () => useGlobalStylesRevisions() );
-		const { isLoading } = result.current;
-
-		expect( isLoading ).toBe( true );
-	} );
-
-	it( 'returns empty revisions when authors are not yet available', () => {
-		useSelect.mockImplementation( () => ( {
-			...selectValue,
-			authors: [],
-		} ) );
-
-		const { result } = renderHook( () => useGlobalStylesRevisions() );
-		const { revisions, isLoading, hasUnsavedChanges } = result.current;
-
-		expect( isLoading ).toBe( true );
-		expect( hasUnsavedChanges ).toBe( false );
-		expect( revisions ).toEqual( [] );
-	} );
-
-	it( 'should prepend unsaved changes item and append reset item to paginated results', () => {
-		useSelect.mockImplementation( () => ( {
-			...selectValue,
-			revisionsCount: 2,
-			isDirty: true,
-		} ) );
-
-		// Prepend unsaved changes item to paginated results.
-		const { result: resultPrepend } = renderHook( () =>
-			useGlobalStylesRevisions( {
-				query: {
-					per_page: 1,
-					page: 1,
-				},
-			} )
-		);
-		expect( resultPrepend.current.revisions ).toEqual( [
-			{
-				author: {
-					avatar_urls: {},
-					name: 'fred',
-				},
-				id: 'unsaved',
-				modified: resultPrepend.current.revisions[ 0 ].modified,
-				settings: 'cake',
-				styles: 'ice-cream',
-			},
-			{
-				author: {
-					id: 4,
-					name: 'sam',
-				},
-				id: 1,
-				isLatest: true,
-				settings: {},
-				styles: {},
-			},
-		] );
-
-		// Append reset item to paginated results.
-		const { result: resultAppend } = renderHook( () =>
-			useGlobalStylesRevisions( {
-				query: {
-					per_page: 1,
-					page: 2,
-				},
-			} )
-		);
-		expect( resultAppend.current.revisions ).toEqual( [
-			{
-				author: {
-					id: 4,
-					name: 'sam',
-				},
-				id: 1,
-				settings: {},
-				styles: {},
-			},
-			{
-				id: 'parent',
-				settings: {},
-				styles: {},
-			},
-		] );
-	} );
-} );

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -1,159 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useContext, useMemo } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const SITE_EDITOR_AUTHORS_QUERY = {
-	per_page: -1,
-	_fields: 'id,name,avatar_urls',
-	context: 'view',
-	capabilities: [ 'edit_theme_options' ],
-};
-const DEFAULT_QUERY = { per_page: 100, page: 1 };
-const EMPTY_ARRAY = [];
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-export default function useGlobalStylesRevisions( { query } = {} ) {
-	const { user: userConfig } = useContext( GlobalStylesContext );
-	const _query = { ...DEFAULT_QUERY, ...query };
-	const {
-		authors,
-		currentUser,
-		isDirty,
-		revisions,
-		isLoadingGlobalStylesRevisions,
-		revisionsCount,
-	} = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				getCurrentUser,
-				getUsers,
-				getRevisions,
-				__experimentalGetCurrentGlobalStylesId,
-				getEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const _currentUser = getCurrentUser();
-			const _isDirty = dirtyEntityRecords.length > 0;
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-			const _revisionsCount =
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-			const globalStylesRevisions =
-				getRevisions(
-					'root',
-					'globalStyles',
-					globalStylesId,
-					_query
-				) || EMPTY_ARRAY;
-			const _authors =
-				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
-			const _isResolving = isResolving( 'getRevisions', [
-				'root',
-				'globalStyles',
-				globalStylesId,
-				_query,
-			] );
-			return {
-				authors: _authors,
-				currentUser: _currentUser,
-				isDirty: _isDirty,
-				revisions: globalStylesRevisions,
-				isLoadingGlobalStylesRevisions: _isResolving,
-				revisionsCount: _revisionsCount,
-			};
-		},
-		[ query ]
-	);
-	return useMemo( () => {
-		if ( ! authors.length || isLoadingGlobalStylesRevisions ) {
-			return {
-				revisions: EMPTY_ARRAY,
-				hasUnsavedChanges: isDirty,
-				isLoading: true,
-				revisionsCount,
-			};
-		}
-
-		// Adds author details to each revision.
-		const _modifiedRevisions = revisions.map( ( revision ) => {
-			return {
-				...revision,
-				author: authors.find(
-					( author ) => author.id === revision.author
-				),
-			};
-		} );
-
-		const fetchedRevisionsCount = revisions.length;
-
-		if ( fetchedRevisionsCount ) {
-			// Flags the most current saved revision.
-			if (
-				_modifiedRevisions[ 0 ].id !== 'unsaved' &&
-				_query.page === 1
-			) {
-				_modifiedRevisions[ 0 ].isLatest = true;
-			}
-
-			// Adds an item for unsaved changes.
-			if (
-				isDirty &&
-				userConfig &&
-				Object.keys( userConfig ).length > 0 &&
-				currentUser &&
-				_query.page === 1
-			) {
-				const unsavedRevision = {
-					id: 'unsaved',
-					styles: userConfig?.styles,
-					settings: userConfig?.settings,
-					_links: userConfig?._links,
-					author: {
-						name: currentUser?.name,
-						avatar_urls: currentUser?.avatar_urls,
-					},
-					modified: new Date(),
-				};
-
-				_modifiedRevisions.unshift( unsavedRevision );
-			}
-
-			if (
-				_query.page === Math.ceil( revisionsCount / _query.per_page )
-			) {
-				// Adds an item for the default theme styles.
-				_modifiedRevisions.push( {
-					id: 'parent',
-					styles: {},
-					settings: {},
-				} );
-			}
-		}
-
-		return {
-			revisions: _modifiedRevisions,
-			hasUnsavedChanges: isDirty,
-			isLoading: false,
-			revisionsCount,
-		};
-	}, [
-		isDirty,
-		revisions,
-		currentUser,
-		authors,
-		userConfig,
-		isLoadingGlobalStylesRevisions,
-	] );
-}

package/src/components/global-styles/screen-root.js

@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	__experimentalVStack as VStack,
-	FlexItem,
-	CardBody,
-	Card,
-	CardDivider,
-	CardMedia,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButtonAsItem } from './navigation-button';
-import RootMenu from './root-menu';
-import PreviewStyles from './preview-styles';
-
-function ScreenRoot() {
-	const hasVariations = useSelect( ( select ) => {
-		const { __experimentalGetCurrentThemeGlobalStylesVariations } =
-			select( coreStore );
-		return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
-	}, [] );
-
-	return (
-		<Card
-			size="small"
-			isBorderless
-			className="edit-site-global-styles-screen-root"
-			isRounded={ false }
-		>
-			<CardBody>
-				<VStack spacing={ 4 }>
-					<Card className="edit-site-global-styles-screen-root__active-style-tile">
-						<CardMedia className="edit-site-global-styles-screen-root__active-style-tile-preview">
-							<PreviewStyles />
-						</CardMedia>
-					</Card>
-					{ hasVariations && (
-						<ItemGroup>
-							<NavigationButtonAsItem path="/variations">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Browse styles' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					) }
-					<RootMenu />
-				</VStack>
-			</CardBody>
-
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					/*
-					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this instance and the Additional CSS option below. Other options for matching the
-					 * the nav button inset should be looked at before reusing further.
-					 */
-					paddingX="13px"
-					marginBottom={ 2 }
-				>
-					{ __(
-						'Customize the appearance of specific blocks for the whole site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem path="/blocks">
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
-		</Card>
-	);
-}
-
-export default ScreenRoot;

package/src/components/global-styles/screen-shadows.js

@@ -1,13 +0,0 @@
-/**
- * Internal dependencies
- */
-import ShadowsPanel from './shadows-panel';
-import ShadowsEditPanel from './shadows-edit-panel';
-
-export function ScreenShadows() {
-	return <ShadowsPanel />;
-}
-
-export function ScreenShadowsEdit() {
-	return <ShadowsEditPanel />;
-}

package/src/components/global-styles/screen-style-variations.js

@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { Card, CardBody } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
-import { unlock } from '../../lock-unlock';
-
-const { useZoomOut } = unlock( blockEditorPrivateApis );
-
-function ScreenStyleVariations() {
-	// Style Variations should only be previewed in with
-	// - a "zoomed out" editor (but not when in preview mode)
-	// - "Desktop" device preview
-	const isPreviewMode = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().isPreviewMode;
-	}, [] );
-	useZoomOut( ! isPreviewMode );
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Browse styles' ) }
-				description={ __(
-					'Choose a variation to change the look of the site.'
-				) }
-			/>
-
-			<Card
-				size="small"
-				isBorderless
-				className="edit-site-global-styles-screen-style-variations"
-			>
-				<CardBody>
-					<SidebarNavigationScreenGlobalStylesContent />
-				</CardBody>
-			</Card>
-		</>
-	);
-}
-
-export default ScreenStyleVariations;

package/src/components/global-styles/screen-typography-element.js

@@ -1,121 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TypographyPanel from './typography-panel';
-import ScreenHeader from './header';
-import TypographyPreview from './typography-preview';
-
-const elements = {
-	text: {
-		description: __( 'Manage the fonts used on the site.' ),
-		title: __( 'Text' ),
-	},
-	link: {
-		description: __( 'Manage the fonts and typography used on the links.' ),
-		title: __( 'Links' ),
-	},
-	heading: {
-		description: __( 'Manage the fonts and typography used on headings.' ),
-		title: __( 'Headings' ),
-	},
-	caption: {
-		description: __( 'Manage the fonts and typography used on captions.' ),
-		title: __( 'Captions' ),
-	},
-	button: {
-		description: __( 'Manage the fonts and typography used on buttons.' ),
-		title: __( 'Buttons' ),
-	},
-};
-
-function ScreenTypographyElement( { element } ) {
-	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
-
-	return (
-		<>
-			<ScreenHeader
-				title={ elements[ element ].title }
-				description={ elements[ element ].description }
-			/>
-			<Spacer marginX={ 4 }>
-				<TypographyPreview
-					element={ element }
-					headingLevel={ headingLevel }
-				/>
-			</Spacer>
-			{ element === 'heading' && (
-				<Spacer marginX={ 4 } marginBottom="1em">
-					<ToggleGroupControl
-						label={ __( 'Select heading level' ) }
-						hideLabelFromVision
-						value={ headingLevel }
-						onChange={ setHeadingLevel }
-						isBlock
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					>
-						<ToggleGroupControlOption
-							value="heading"
-							showTooltip
-							aria-label={ __( 'All headings' ) }
-							label={ _x( 'All', 'heading levels' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h1"
-							showTooltip
-							aria-label={ __( 'Heading 1' ) }
-							label={ __( 'H1' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h2"
-							showTooltip
-							aria-label={ __( 'Heading 2' ) }
-							label={ __( 'H2' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h3"
-							showTooltip
-							aria-label={ __( 'Heading 3' ) }
-							label={ __( 'H3' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h4"
-							showTooltip
-							aria-label={ __( 'Heading 4' ) }
-							label={ __( 'H4' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h5"
-							showTooltip
-							aria-label={ __( 'Heading 5' ) }
-							label={ __( 'H5' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h6"
-							showTooltip
-							aria-label={ __( 'Heading 6' ) }
-							label={ __( 'H6' ) }
-						/>
-					</ToggleGroupControl>
-				</Spacer>
-			) }
-			<TypographyPanel
-				element={ element }
-				headingLevel={ headingLevel }
-			/>
-		</>
-	);
-}
-
-export default ScreenTypographyElement;