@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -1,178 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { ENTER, SPACE } from '@wordpress/keycodes';
-import { useState, useEffect, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	FOCUSABLE_ENTITIES,
-	NAVIGATION_POST_TYPE,
-} from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
-
-const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
-
-function EditorCanvas( {
-	enableResizing,
-	settings,
-	children,
-	onClick,
-	...props
-} ) {
-	const {
-		hasBlocks,
-		isFocusMode,
-		templateType,
-		canvasMode,
-		isZoomOutMode,
-		currentPostIsTrashed,
-	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
-		const { getEditedPostType, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const _templateType = getEditedPostType();
-
-		return {
-			templateType: _templateType,
-			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			canvasMode: getCanvasMode(),
-			hasBlocks: !! getBlockCount(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
-		};
-	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const [ isFocused, setIsFocused ] = useState( false );
-
-	useEffect( () => {
-		if ( canvasMode === 'edit' ) {
-			setIsFocused( false );
-		}
-	}, [ canvasMode ] );
-
-	// In view mode, make the canvas iframe be perceived and behave as a button
-	// to switch to edit mode, with a meaningful label and no title attribute.
-	const viewModeIframeProps = {
-		'aria-label': __( 'Edit' ),
-		'aria-disabled': currentPostIsTrashed,
-		title: null,
-		role: 'button',
-		tabIndex: 0,
-		onFocus: () => setIsFocused( true ),
-		onBlur: () => setIsFocused( false ),
-		onKeyDown: ( event ) => {
-			const { keyCode } = event;
-			if (
-				( keyCode === ENTER || keyCode === SPACE ) &&
-				! currentPostIsTrashed
-			) {
-				event.preventDefault();
-				setCanvasMode( 'edit' );
-			}
-		},
-		onClick: () => {
-			if ( !! onClick ) {
-				onClick();
-			} else {
-				setCanvasMode( 'edit' );
-			}
-		},
-		onClickCapture: ( event ) => {
-			if ( currentPostIsTrashed ) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-		},
-		readonly: true,
-	};
-	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-	// Hide the appender when:
-	// - In navigation focus mode (should only allow the root Nav block).
-	// - In view mode (i.e. not editing).
-	const showBlockAppender =
-		( isNavigationFocusMode && hasBlocks ) || canvasMode === 'view'
-			? false
-			: undefined;
-
-	const styles = useMemo(
-		() => [
-			...settings.styles,
-			{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-
-				css: `.is-root-container{display:flow-root;${
-					// Some themes will have `min-height: 100vh` for the root container,
-					// which isn't a requirement in auto resize mode.
-					enableResizing ? 'min-height:0!important;' : ''
-				}}body{position:relative; ${
-					canvasMode === 'view'
-						? `min-height: 100vh; ${
-								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }`
-						: ''
-				}}}`,
-			},
-		],
-		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
-	);
-
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
-	return (
-		<EditorCanvasRoot
-			className={ classnames( 'edit-site-editor-canvas__block-list', {
-				'is-navigation-block': isTemplateTypeNavigation,
-			} ) }
-			renderAppender={ showBlockAppender }
-			styles={ styles }
-			iframeProps={ {
-				scale,
-				frameSize,
-				className: classnames(
-					'edit-site-visual-editor__editor-canvas',
-					{
-						'is-focused': isFocused && canvasMode === 'view',
-					}
-				),
-				...props,
-				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
-			} }
-		>
-			{ children }
-		</EditorCanvasRoot>
-	);
-}
-
-export default EditorCanvas;

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 classnames from 'classnames';
-/**
- * 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={ classnames( '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;
-	}
-}