@wordpress/edit-site 5.35.0 → 6.0.1

package/src/components/block-editor/resizable-editor.js

@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useCallback } from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ResizeHandle from './resize-handle';
-
-// Removes the inline styles in the drag handles.
-const HANDLE_STYLES_OVERRIDE = {
-	position: undefined,
-	userSelect: undefined,
-	cursor: undefined,
-	width: undefined,
-	height: undefined,
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-
-function ResizableEditor( { enableResizing, height, children } ) {
-	const [ width, setWidth ] = useState( '100%' );
-	const resizableRef = useRef();
-	const resizeWidthBy = useCallback( ( deltaPixels ) => {
-		if ( resizableRef.current ) {
-			setWidth( resizableRef.current.offsetWidth + deltaPixels );
-		}
-	}, [] );
-	return (
-		<ResizableBox
-			ref={ ( api ) => {
-				resizableRef.current = api?.resizable;
-			} }
-			size={ {
-				width: enableResizing ? width : '100%',
-				height: enableResizing && height ? height : '100%',
-			} }
-			onResizeStop={ ( event, direction, element ) => {
-				setWidth( element.style.width );
-			} }
-			minWidth={ 300 }
-			maxWidth="100%"
-			maxHeight="100%"
-			enable={ {
-				left: enableResizing,
-				right: enableResizing,
-			} }
-			showHandle={ enableResizing }
-			// The editor is centered horizontally, resizing it only
-			// moves half the distance. Hence double the ratio to correctly
-			// align the cursor to the resizer handle.
-			resizeRatio={ 2 }
-			handleComponent={ {
-				left: (
-					<ResizeHandle
-						direction="left"
-						resizeWidthBy={ resizeWidthBy }
-					/>
-				),
-				right: (
-					<ResizeHandle
-						direction="right"
-						resizeWidthBy={ resizeWidthBy }
-					/>
-				),
-			} }
-			handleClasses={ undefined }
-			handleStyles={ {
-				left: HANDLE_STYLES_OVERRIDE,
-				right: HANDLE_STYLES_OVERRIDE,
-			} }
-		>
-			{ children }
-		</ResizableBox>
-	);
-}
-
-export default ResizableEditor;

package/src/components/block-editor/resize-handle.js

@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
-import {
-	VisuallyHidden,
-	Tooltip,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-
-const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
-
-export default function ResizeHandle( {
-	variation = 'default',
-	direction,
-	resizeWidthBy,
-} ) {
-	function handleKeyDown( event ) {
-		const { keyCode } = event;
-
-		if (
-			( direction === 'left' && keyCode === LEFT ) ||
-			( direction === 'right' && keyCode === RIGHT )
-		) {
-			resizeWidthBy( DELTA_DISTANCE );
-		} else if (
-			( direction === 'left' && keyCode === RIGHT ) ||
-			( direction === 'right' && keyCode === LEFT )
-		) {
-			resizeWidthBy( -DELTA_DISTANCE );
-		}
-	}
-
-	const resizeHandleVariants = {
-		active: {
-			opacity: 1,
-			scaleY: 1.3,
-		},
-	};
-
-	const resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;
-
-	return (
-		<>
-			<Tooltip text={ __( 'Drag to resize' ) }>
-				<motion.button
-					className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
-					aria-label={ __( 'Drag to resize' ) }
-					aria-describedby={ resizableHandleHelpId }
-					onKeyDown={ handleKeyDown }
-					variants={ resizeHandleVariants }
-					whileFocus="active"
-					whileHover="active"
-					whileTap="active"
-					key="handle"
-					role="separator"
-					aria-orientation="vertical"
-				/>
-			</Tooltip>
-			<VisuallyHidden id={ resizableHandleHelpId }>
-				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
-			</VisuallyHidden>
-		</>
-	);
-}

package/src/components/block-editor/site-editor-canvas.js

@@ -1,107 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ResizableEditor from './resizable-editor';
-import EditorCanvas from './editor-canvas';
-import EditorCanvasContainer from '../editor-canvas-container';
-import useSiteEditorSettings from './use-site-editor-settings';
-import { store as editSiteStore } from '../../store';
-import {
-	FOCUSABLE_ENTITIES,
-	NAVIGATION_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-} from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function SiteEditorCanvas( { onClick } ) {
-	const location = useLocation();
-	const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const { __unstableGetEditorMode } = select( blockEditorStore );
-			const _templateType = getEditedPostType();
-
-			return {
-				templateType: _templateType,
-				isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isViewMode: getCanvasMode() === 'view',
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			};
-		}, [] );
-	const isFocusMode = location.params.focusMode || isFocusableEntity;
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	const settings = useSiteEditorSettings();
-
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const enableResizing =
-		isFocusMode &&
-		! isViewMode &&
-		// Disable resizing in mobile viewport.
-		! isMobileViewport &&
-		// Dsiable resizing in zoomed-out mode.
-		! isZoomOutMode &&
-		// Disable resizing when editing a template in focus mode.
-		templateType !== TEMPLATE_POST_TYPE;
-
-	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-	const forceFullHeight = isNavigationFocusMode;
-
-	return (
-		<EditorCanvasContainer.Slot>
-			{ ( [ editorCanvasView ] ) =>
-				editorCanvasView ? (
-					<div className="edit-site-visual-editor is-focus-mode">
-						{ editorCanvasView }
-					</div>
-				) : (
-					<div
-						className={ clsx( 'edit-site-visual-editor', {
-							'is-focus-mode': isFocusMode || !! editorCanvasView,
-							'is-view-mode': isViewMode,
-						} ) }
-					>
-						<ResizableEditor
-							enableResizing={ enableResizing }
-							height={
-								sizes.height && ! forceFullHeight
-									? sizes.height
-									: '100%'
-							}
-						>
-							<EditorCanvas
-								enableResizing={ enableResizing }
-								settings={ settings }
-								onClick={ onClick }
-							>
-								{
-									// Avoid resize listeners when not needed,
-									// these will trigger unnecessary re-renders
-									// when animating the iframe width.
-									enableResizing && resizeObserver
-								}
-							</EditorCanvas>
-						</ResizableEditor>
-					</div>
-				)
-			}
-		</EditorCanvasContainer.Slot>
-	);
-}

package/src/components/code-editor/index.js

@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import Textarea from 'react-autosize-textarea';
-
-/**
- * WordPress dependencies
- */
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function CodeEditor() {
-	const instanceId = useInstanceId( CodeEditor );
-	const { shortcut, content, blocks, type, id } = useSelect( ( select ) => {
-		const { getEditedEntityRecord } = select( coreStore );
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const _type = getEditedPostType();
-		const _id = getEditedPostId();
-		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
-
-		return {
-			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
-			content: editedRecord?.content,
-			blocks: editedRecord?.blocks,
-			type: _type,
-			id: _id,
-		};
-	}, [] );
-	const { editEntityRecord } = useDispatch( coreStore );
-	// Replicates the logic found in getEditedPostContent().
-	const realContent = useMemo( () => {
-		if ( content instanceof Function ) {
-			return content( { blocks } );
-		} else if ( blocks ) {
-			// If we have parsed blocks already, they should be our source of truth.
-			// Parsing applies block deprecations and legacy block conversions that
-			// unparsed content will not have.
-			return __unstableSerializeAndClean( blocks );
-		}
-		return content;
-	}, [ content, blocks ] );
-
-	const { switchEditorMode } = useDispatch( editorStore );
-	return (
-		<div className="edit-site-code-editor">
-			<div className="edit-site-code-editor__toolbar">
-				<h2>{ __( 'Editing code' ) }</h2>
-				<Button
-					variant="tertiary"
-					onClick={ () => switchEditorMode( 'visual' ) }
-					shortcut={ shortcut }
-				>
-					{ __( 'Exit code editor' ) }
-				</Button>
-			</div>
-			<div className="edit-site-code-editor__body">
-				<VisuallyHidden
-					as="label"
-					htmlFor={ `code-editor-text-area-${ instanceId }` }
-				>
-					{ __( 'Type text or HTML' ) }
-				</VisuallyHidden>
-				<Textarea
-					autoComplete="off"
-					dir="auto"
-					value={ realContent }
-					onChange={ ( event ) => {
-						editEntityRecord( 'postType', type, id, {
-							content: event.target.value,
-							blocks: undefined,
-							selection: undefined,
-						} );
-					} }
-					className="edit-site-code-editor-text-area"
-					id={ `code-editor-text-area-${ instanceId }` }
-					placeholder={ __( 'Start writing with text or HTML' ) }
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/code-editor/style.scss

@@ -1,95 +0,0 @@
-.edit-site-code-editor {
-	position: relative;
-	width: 100%;
-	min-height: 100%;
-	background-color: $white;
-
-	&__body {
-		width: 100%;
-		padding: $grid-unit-15;
-		max-width: $break-xlarge;
-		margin-left: auto;
-		margin-right: auto;
-
-		@include break-large() {
-			padding: $grid-unit-30;
-		}
-	}
-
-	// Exit code editor toolbar.
-	&__toolbar {
-		position: sticky;
-		z-index: z-index(".edit-site-code-editor__toolbar");
-		top: 0;
-		left: 0;
-		right: 0;
-		display: flex;
-		background: rgba($white, 0.8);
-		padding: $grid-unit-05 $grid-unit-15;
-
-		@include break-small() {
-			padding: $grid-unit-15;
-		}
-
-		@include break-large() {
-			padding: $grid-unit-15 $grid-unit-30;
-		}
-
-		h2 {
-			line-height: $button-size;
-			margin: 0 auto 0 0;
-			font-size: $default-font-size;
-			color: $gray-900;
-		}
-	}
-}
-
-textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
-	border: $border-width solid $gray-600;
-	border-radius: 0;
-	display: block;
-	margin: 0;
-	width: 100%;
-	box-shadow: none;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	line-height: 2.4;
-	min-height: 200px;
-	transition: border 0.1s ease-out, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
-
-	// Same padding as title.
-	padding: $grid-unit-20;
-	@include break-small() {
-		padding: $grid-unit-30;
-	}
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size !important;
-	@include break-small {
-		font-size: $text-editor-font-size !important;
-	}
-
-	&:focus {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Elevate the z-index on focus so the focus style is uncropped.
-		position: relative;
-	}
-
-	&::-webkit-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-
-	&::-moz-placeholder {
-		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
-	}
-
-	&:-ms-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-}

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;
-		}
-	}
-}