@wordpress/edit-site 5.35.0 → 6.0.0

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

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

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import SiteEditorMoreMenu from './more-menu';
-import { unlock } from '../../lock-unlock';
-import SaveButton from '../save-button';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import {
-	getEditorCanvasContainerTitle,
-	useHasEditorCanvasContainer,
-} from '../editor-canvas-container';
-import { store as editSiteStore } from '../../store';
-
-const { Header: EditorHeader } = unlock( editorPrivateApis );
-
-function Header( { setEntitiesSavedStatesCallback } ) {
-	const _isPreviewingTheme = isPreviewingTheme();
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
-	const { editorCanvasView } = useSelect( ( select ) => {
-		return {
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-		};
-	}, [] );
-
-	return (
-		<EditorHeader
-			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
-			customSaveButton={
-				_isPreviewingTheme && <SaveButton size="compact" />
-			}
-			forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-			title={
-				! hasDefaultEditorCanvasView
-					? getEditorCanvasContainerTitle( editorCanvasView )
-					: undefined
-			}
-		>
-			<SiteEditorMoreMenu />
-		</EditorHeader>
-	);
-}
-
-export default Header;

package/src/components/header-edit-mode/style.scss

@@ -1,3 +0,0 @@
-.editor-header {
-	padding-left: $header-height;
-}