@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/create-template-part-modal/index.js

@@ -1,199 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Icon,
-	BaseControl,
-	TextControl,
-	Flex,
-	FlexItem,
-	FlexBlock,
-	Button,
-	Modal,
-	__experimentalRadioGroup as RadioGroup,
-	__experimentalRadio as Radio,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-import { check } from '@wordpress/icons';
-import { serialize } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
-} from '../../utils/constants';
-import {
-	useExistingTemplateParts,
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
-
-export default function CreateTemplatePartModal( {
-	modalTitle = __( 'Create template part' ),
-	...restProps
-} ) {
-	return (
-		<Modal
-			title={ modalTitle }
-			onRequestClose={ restProps.closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
-		>
-			<CreateTemplatePartModalContents { ...restProps } />
-		</Modal>
-	);
-}
-
-export function CreateTemplatePartModalContents( {
-	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
-	blocks = [],
-	confirmLabel = __( 'Create' ),
-	closeModal,
-	onCreate,
-	onError,
-	defaultTitle = '',
-} ) {
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const existingTemplateParts = useExistingTemplateParts();
-
-	const [ title, setTitle ] = useState( defaultTitle );
-	const [ area, setArea ] = useState( defaultArea );
-	const [ isSubmitting, setIsSubmitting ] = useState( false );
-	const instanceId = useInstanceId( CreateTemplatePartModal );
-
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-	async function createTemplatePart() {
-		if ( ! title || isSubmitting ) {
-			return;
-		}
-
-		try {
-			setIsSubmitting( true );
-			const uniqueTitle = getUniqueTemplatePartTitle(
-				title,
-				existingTemplateParts
-			);
-			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
-
-			const templatePart = await saveEntityRecord(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				{
-					slug: cleanSlug,
-					title: uniqueTitle,
-					content: serialize( blocks ),
-					area,
-				},
-				{ throwOnError: true }
-			);
-			await onCreate( templatePart );
-
-			// TODO: Add a success notice?
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while creating the template part.'
-					  );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-
-			onError?.();
-		} finally {
-			setIsSubmitting( false );
-		}
-	}
-	return (
-		<form
-			onSubmit={ async ( event ) => {
-				event.preventDefault();
-				await createTemplatePart();
-			} }
-		>
-			<VStack spacing="4">
-				<TextControl
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-					required
-				/>
-				<BaseControl
-					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
-				>
-					<RadioGroup
-						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
-						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						onChange={ setArea }
-						checked={ area }
-					>
-						{ templatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
-								<Radio
-									key={ label }
-									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
-								>
-									<Flex align="start" justify="start">
-										<FlexItem>
-											<Icon icon={ icon } />
-										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
-										</FlexBlock>
-
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
-											{ area === value && (
-												<Icon icon={ check } />
-											) }
-										</FlexItem>
-									</Flex>
-								</Radio>
-							)
-						) }
-					</RadioGroup>
-				</BaseControl>
-				<HStack justify="right">
-					<Button
-						__next40pxDefaultSize
-						variant="tertiary"
-						onClick={ () => {
-							closeModal();
-						} }
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						__next40pxDefaultSize
-						variant="primary"
-						type="submit"
-						aria-disabled={ ! title || isSubmitting }
-						isBusy={ isSubmitting }
-					>
-						{ confirmLabel }
-					</Button>
-				</HStack>
-			</VStack>
-		</form>
-	);
-}

package/src/components/create-template-part-modal/style.scss

@@ -1,69 +0,0 @@
-.edit-site-create-template-part-modal {
-	z-index: z-index(".edit-site-create-template-part-modal");
-
-	.components-modal__frame {
-		@include break-small {
-			max-width: 500px;
-		}
-	}
-}
-
-.edit-site-create-template-part-modal__area-radio-group {
-	width: 100%;
-	border: $border-width solid $gray-700;
-	border-radius: 2px;
-
-	.components-button.edit-site-create-template-part-modal__area-radio {
-		display: block;
-		width: 100%;
-		height: 100%;
-		text-align: left;
-		padding: $grid-unit-15;
-
-		&,
-		&.is-secondary:hover,
-		&.is-primary:hover {
-			margin: 0;
-			background-color: inherit;
-			border-bottom: $border-width solid $gray-700;
-			border-radius: 0;
-
-			&:not(:focus) {
-				box-shadow: none;
-			}
-
-			&:focus {
-				border-bottom: $border-width solid $white;
-			}
-
-			&:last-of-type {
-				border-bottom: none;
-			}
-		}
-
-		&:not(:hover),
-		&[aria-checked="true"] {
-			color: $gray-900;
-			cursor: auto;
-
-			.edit-site-create-template-part-modal__option-label div {
-				color: $gray-600;
-			}
-		}
-
-		.edit-site-create-template-part-modal__option-label {
-			padding-top: $grid-unit-05;
-			white-space: normal;
-
-			div {
-				padding-top: $grid-unit-05;
-				font-size: $helptext-font-size;
-			}
-		}
-
-		.edit-site-create-template-part-modal__checkbox {
-			margin-left: auto;
-			min-width: $grid-unit-30;
-		}
-	}
-}

package/src/components/global-styles/global-styles-provider.js

@@ -1,162 +0,0 @@
-/**
- * External dependencies
- */
-import deepmerge from 'deepmerge';
-import { isPlainObject } from 'is-plain-object';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { GlobalStylesContext, cleanEmptyObject } = unlock(
-	blockEditorPrivateApis
-);
-
-export function mergeBaseAndUserConfigs( base, user ) {
-	return deepmerge( base, user, {
-		// We only pass as arrays the presets,
-		// in which case we want the new array of values
-		// to override the old array (no merging).
-		isMergeableObject: isPlainObject,
-	} );
-}
-
-function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles } = useSelect(
-		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const _globalStylesId =
-				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-			const record = _globalStylesId
-				? getEditedEntityRecord(
-						'root',
-						'globalStyles',
-						_globalStylesId
-				  )
-				: undefined;
-
-			let hasResolved = false;
-			if (
-				hasFinishedResolution(
-					'__experimentalGetCurrentGlobalStylesId'
-				)
-			) {
-				hasResolved = _globalStylesId
-					? hasFinishedResolution( 'getEditedEntityRecord', [
-							'root',
-							'globalStyles',
-							_globalStylesId,
-					  ] )
-					: true;
-			}
-
-			return {
-				globalStylesId: _globalStylesId,
-				isReady: hasResolved,
-				settings: record?.settings,
-				styles: record?.styles,
-			};
-		},
-		[]
-	);
-
-	const { getEditedEntityRecord } = useSelect( coreStore );
-	const { editEntityRecord } = useDispatch( coreStore );
-	const config = useMemo( () => {
-		return {
-			settings: settings ?? {},
-			styles: styles ?? {},
-		};
-	}, [ settings, styles ] );
-
-	const setConfig = useCallback(
-		( callback, options = {} ) => {
-			const record = getEditedEntityRecord(
-				'root',
-				'globalStyles',
-				globalStylesId
-			);
-			const currentConfig = {
-				styles: record?.styles ?? {},
-				settings: record?.settings ?? {},
-			};
-			const updatedConfig = callback( currentConfig );
-			editEntityRecord(
-				'root',
-				'globalStyles',
-				globalStylesId,
-				{
-					styles: cleanEmptyObject( updatedConfig.styles ) || {},
-					settings: cleanEmptyObject( updatedConfig.settings ) || {},
-				},
-				options
-			);
-		},
-		[ globalStylesId ]
-	);
-
-	return [ isReady, config, setConfig ];
-}
-
-function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeBaseGlobalStyles();
-	}, [] );
-
-	return [ !! baseConfig, baseConfig ];
-}
-
-function useGlobalStylesContext() {
-	const [ isUserConfigReady, userConfig, setUserConfig ] =
-		useGlobalStylesUserConfig();
-	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
-	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfig ) {
-			return {};
-		}
-		return mergeBaseAndUserConfigs( baseConfig, userConfig );
-	}, [ userConfig, baseConfig ] );
-	const context = useMemo( () => {
-		return {
-			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfig,
-			base: baseConfig,
-			merged: mergedConfig,
-			setUserConfig,
-		};
-	}, [
-		mergedConfig,
-		userConfig,
-		baseConfig,
-		setUserConfig,
-		isUserConfigReady,
-		isBaseConfigReady,
-	] );
-
-	return context;
-}
-
-export function GlobalStylesProvider( { children } ) {
-	const context = useGlobalStylesContext();
-	if ( ! context.isReady ) {
-		return null;
-	}
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			{ children }
-		</GlobalStylesContext.Provider>
-	);
-}

package/src/components/header-edit-mode/document-tools/index.js

@@ -1,68 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { chevronUpDown } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
-
-export default function DocumentTools( {
-	blockEditorMode,
-	hasFixedToolbar,
-	isDistractionFree,
-} ) {
-	const { isVisualMode } = useSelect( ( select ) => {
-		const { getEditorMode } = select( editorStore );
-
-		return {
-			isVisualMode: getEditorMode() === 'visual',
-		};
-	}, [] );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	return (
-		<EditorDocumentTools
-			disableBlockTools={ ! isVisualMode }
-			listViewLabel={ __( 'List View' ) }
-		>
-			{ isZoomedOutViewExperimentEnabled &&
-				isLargeViewport &&
-				! isDistractionFree &&
-				! hasFixedToolbar && (
-					<ToolbarItem
-						as={ Button }
-						className="edit-site-header-edit-mode__zoom-out-view-toggle"
-						icon={ chevronUpDown }
-						isPressed={ isZoomedOutView }
-						/* translators: button label text should, if possible, be under 16 characters. */
-						label={ __( 'Zoom-out View' ) }
-						onClick={ () => {
-							setDeviceType( 'Desktop' );
-							__unstableSetEditorMode(
-								isZoomedOutView ? 'edit' : 'zoom-out'
-							);
-						} }
-						size="compact"
-					/>
-				) }
-		</EditorDocumentTools>
-	);
-}

package/src/components/header-edit-mode/index.js

@@ -1,190 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	DocumentBar,
-	PostSavedState,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import SiteEditorMoreMenuItems from './more-menu';
-import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
-import { store as editSiteStore } from '../../store';
-import {
-	getEditorCanvasContainerTitle,
-	useHasEditorCanvasContainer,
-} from '../editor-canvas-container';
-import { unlock } from '../../lock-unlock';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-
-const {
-	CollapsableBlockToolbar,
-	MoreMenu,
-	PostViewLink,
-	PreviewDropdown,
-	PinnedItems,
-	PostPublishButtonOrToggle,
-} = unlock( editorPrivateApis );
-
-export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
-	const {
-		templateType,
-		isDistractionFree,
-		blockEditorMode,
-		showIconLabels,
-		editorCanvasView,
-		isFixedToolbar,
-		isPublishSidebarOpened,
-	} = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { get: getPreference } = select( preferencesStore );
-		const { getDeviceType } = select( editorStore );
-
-		return {
-			deviceType: getDeviceType(),
-			templateType: getEditedPostType(),
-			blockEditorMode: __unstableGetEditorMode(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			isDistractionFree: getPreference( 'core', 'distractionFree' ),
-			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-		};
-	}, [] );
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const showTopToolbar =
-		isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';
-	const disableMotion = useReducedMotion();
-
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
-
-	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
-
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
-	const toolbarVariants = {
-		isDistractionFree: { y: '-50px' },
-		isDistractionFreeHovering: { y: 0 },
-		view: { y: 0 },
-		edit: { y: 0 },
-	};
-
-	const toolbarTransition = {
-		type: 'tween',
-		duration: disableMotion ? 0 : 0.2,
-		ease: 'easeOut',
-	};
-
-	const _isPreviewingTheme = isPreviewingTheme();
-	return (
-		<div
-			className={ classnames( 'edit-site-header-edit-mode', {
-				'show-icon-labels': showIconLabels,
-				'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,
-			} ) }
-		>
-			{ hasDefaultEditorCanvasView && (
-				<motion.div
-					className="edit-site-header-edit-mode__start"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						isDistractionFree={ isDistractionFree }
-					/>
-					{ showTopToolbar && (
-						<CollapsableBlockToolbar
-							isCollapsed={ isBlockToolsCollapsed }
-							onToggle={ setIsBlockToolsCollapsed }
-						/>
-					) }
-				</motion.div>
-			) }
-
-			{ ! isDistractionFree && (
-				<div className="edit-site-header-edit-mode__center">
-					{ ! hasDefaultEditorCanvasView ? (
-						getEditorCanvasContainerTitle( editorCanvasView )
-					) : (
-						<DocumentBar />
-					) }
-				</div>
-			) }
-
-			<div className="edit-site-header-edit-mode__end">
-				<motion.div
-					className="edit-site-header-edit-mode__actions"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
-					) }
-					<PostViewLink />
-					{
-						// TODO: For now we conditionally render the Save/Publish buttons based on
-						// some specific site editor extra handling. Examples are when we're previewing
-						// a theme, handling of global styles changes or when we're in 'view' mode,
-						// which opens the save panel in a Modal.
-					 }
-					{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (
-						// This button isn't completely hidden by the publish sidebar.
-						// We can't hide the whole toolbar when the publish sidebar is open because
-						// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-						// We track that DOM node to return focus to the PostPublishButtonOrToggle
-						// when the publish sidebar has been closed.
-						<PostSavedState />
-					) }
-					{ ! _isPreviewingTheme && (
-						<PostPublishButtonOrToggle
-							setEntitiesSavedStatesCallback={
-								setEntitiesSavedStatesCallback
-							}
-						/>
-					) }
-					{ _isPreviewingTheme && <SaveButton size="compact" /> }
-					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
-					<MoreMenu />
-					<SiteEditorMoreMenuItems />
-				</motion.div>
-			</div>
-		</div>
-	);
-}