@wordpress/edit-site 5.34.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -28,53 +29,49 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/block-editor": "^12.25.0",
-		"@wordpress/block-library": "^8.34.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/commands": "^0.28.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/core-commands": "^0.26.0",
-		"@wordpress/core-data": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/dataviews": "^1.1.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/editor": "^13.34.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/media-utils": "^4.48.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/patterns": "^1.18.0",
-		"@wordpress/plugins": "^6.25.0",
-		"@wordpress/preferences": "^3.34.0",
-		"@wordpress/primitives": "^3.55.0",
-		"@wordpress/priority-queue": "^2.57.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/reusable-blocks": "^4.34.0",
-		"@wordpress/router": "^0.26.0",
-		"@wordpress/style-engine": "^1.40.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/viewport": "^5.34.0",
-		"@wordpress/widgets": "^3.34.0",
-		"@wordpress/wordcount": "^3.57.0",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/blob": "^4.0.0",
+		"@wordpress/block-editor": "^13.0.0",
+		"@wordpress/block-library": "^9.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/commands": "^1.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/core-commands": "^1.0.0",
+		"@wordpress/core-data": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/dataviews": "^2.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/editor": "^14.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/escape-html": "^3.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/notices": "^5.0.0",
+		"@wordpress/patterns": "^2.0.0",
+		"@wordpress/plugins": "^7.0.0",
+		"@wordpress/preferences": "^4.0.0",
+		"@wordpress/primitives": "^4.0.0",
+		"@wordpress/priority-queue": "^3.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/reusable-blocks": "^5.0.0",
+		"@wordpress/router": "^1.0.0",
+		"@wordpress/style-engine": "^2.0.0",
+		"@wordpress/url": "^4.0.0",
+		"@wordpress/viewport": "^6.0.0",
+		"@wordpress/widgets": "^4.0.0",
+		"@wordpress/wordcount": "^4.0.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
-		"client-zip": "^2.4.4",
+		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
-		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
 	},
@@ -85,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/components/add-new-pattern/index.js

@@ -4,7 +4,7 @@
 import { DropdownMenu } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
+import { symbol, symbolFilled, upload } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
@@ -13,12 +13,11 @@ import {
 } from '@wordpress/patterns';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
-import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import {
 	PATTERN_TYPES,
@@ -26,14 +25,14 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -41,19 +40,24 @@ export default function AddNewPattern() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
-
-	function handleCreatePattern( { pattern, categoryId } ) {
+	const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } =
+		useSelect( ( select ) => {
+			const { getCurrentTheme, getPostType } = select( coreStore );
+			return {
+				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+				addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
+					?.add_new_item,
+				addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
+					?.labels?.add_new_item,
+			};
+		}, [] );
+
+	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
 
 		history.push( {
 			postId: pattern.id,
 			postType: PATTERN_TYPES.user,
-			categoryType: PATTERN_TYPES.theme,
-			categoryId,
 			canvas: 'edit',
 		} );
 	}
@@ -74,19 +78,19 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [];
-
-	controls.push( {
-		icon: symbol,
-		onClick: () => setShowPatternModal( true ),
-		title: __( 'Create pattern' ),
-	} );
+	const controls = [
+		{
+			icon: symbol,
+			onClick: () => setShowPatternModal( true ),
+			title: addNewPatternLabel,
+		},
+	];
 
 	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),
-			title: __( 'Create template part' ),
+			title: addNewTemplatePartLabel,
 		} );
 	}
 
@@ -101,14 +105,19 @@ export default function AddNewPattern() {
 	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
 	return (
 		<>
-			<DropdownMenu
-				controls={ controls }
-				toggleProps={ {
-					as: SidebarButton,
-				} }
-				icon={ plus }
-				label={ __( 'Create pattern' ) }
-			/>
+			{ addNewPatternLabel && (
+				<DropdownMenu
+					controls={ controls }
+					icon={ null }
+					toggleProps={ {
+						variant: 'primary',
+						showTooltip: false,
+						__next40pxDefaultSize: true,
+					} }
+					text={ addNewPatternLabel }
+					label={ addNewPatternLabel }
+				/>
+			) }
 			{ showPatternModal && (
 				<CreatePatternModal
 					onClose={ () => setShowPatternModal( false ) }
@@ -136,16 +145,17 @@ export default function AddNewPattern() {
 						return;
 					}
 					try {
+						const {
+							params: { postType, categoryId },
+						} = history.getLocationWithParams();
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) {
+						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
 							const currentCategory = categoryMap
 								.values()
-								.find(
-									( term ) => term.name === params.categoryId
-								);
-							if ( !! currentCategory ) {
+								.find( ( term ) => term.name === categoryId );
+							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||
 									( await findOrCreateTerm(
@@ -165,11 +175,10 @@ export default function AddNewPattern() {
 						// category.
 						if (
 							! currentCategoryId &&
-							params.categoryId !== 'my-patterns'
+							categoryId !== 'my-patterns'
 						) {
 							history.push( {
-								path: `/patterns`,
-								categoryType: PATTERN_TYPES.theme,
+								postType: PATTERN_TYPES.user,
 								categoryId: PATTERN_DEFAULT_CATEGORY,
 							} );
 						}

package/src/components/add-new-template/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -128,6 +128,7 @@ function TemplateListItem( {
 					spacing={ 0 }
 				>
 					<Text
+						align="center"
 						weight={ 500 }
 						lineHeight={ 1.53846153846 } // 20px
 					>
@@ -250,7 +251,7 @@ function NewTemplateModal( { onClose } ) {
 	return (
 		<Modal
 			title={ modalTitle }
-			className={ classnames( 'edit-site-add-new-template__modal', {
+			className={ clsx( 'edit-site-add-new-template__modal', {
 				'edit-site-add-new-template__modal_template_list':
 					modalContent === modalContentMap.templatesList,
 				'edit-site-custom-template-modal':
@@ -354,6 +355,7 @@ function NewTemplate() {
 				variant="primary"
 				onClick={ () => setShowModal( true ) }
 				label={ postType.labels.add_new_item }
+				__next40pxDefaultSize
 			>
 				{ postType.labels.add_new_item }
 			</Button>

package/src/components/add-new-template/utils.js

@@ -100,7 +100,15 @@ const usePublicTaxonomies = () => {
 	}, [ taxonomies ] );
 };
 
-function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
+export function usePostTypeArchiveMenuItems() {
+	const publicPostTypes = usePublicPostTypes();
+	const postTypesWithArchives = useMemo(
+		() => publicPostTypes?.filter( ( postType ) => postType.has_archive ),
+		[ publicPostTypes ]
+	);
+	const existingTemplates = useExistingTemplates();
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
 	const postTypeLabels = useMemo(
 		() =>
 			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
@@ -111,25 +119,13 @@ function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
 			}, {} ),
 		[ publicPostTypes ]
 	);
-	return useCallback(
+	const needsUniqueIdentifier = useCallback(
 		( { labels, slug } ) => {
 			const singularName = labels.singular_name.toLowerCase();
 			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
 		},
 		[ postTypeLabels ]
 	);
-}
-
-export function usePostTypeArchiveMenuItems() {
-	const publicPostTypes = usePublicPostTypes();
-	const postTypesWithArchives = useMemo(
-		() => publicPostTypes?.filter( ( postType ) => postType.has_archive ),
-		[ publicPostTypes ]
-	);
-	const existingTemplates = useExistingTemplates();
-	const needsUniqueIdentifier = usePostTypeNeedsUniqueIdentifier(
-		postTypesWithArchives
-	);
 	return useMemo(
 		() =>
 			postTypesWithArchives
@@ -184,8 +180,30 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
-	const needsUniqueIdentifier =
-		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
+	const templateLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const templateName = (
+					labels.template_name || labels.singular_name
+				).toLowerCase();
+				accumulator[ templateName ] =
+					( accumulator[ templateName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
+	);
+	const needsUniqueIdentifier = useCallback(
+		( { labels, slug } ) => {
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			return templateLabels[ templateName ] > 1 && templateName !== slug;
+		},
+		[ templateLabels ]
+	);
+
 	// `page`is a special case in template hierarchy.
 	const templatePrefixes = useMemo(
 		() =>
@@ -216,18 +234,27 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			const hasGeneralTemplate =
 				existingTemplateSlugs?.includes( generalTemplateSlug );
 			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
-			let menuItemTitle = sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Single item: %s' ),
-				labels.singular_name
-			);
-			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
-					__( 'Single item: %1$s (%2$s)' ),
-					labels.singular_name,
-					slug
+			let menuItemTitle =
+				labels.template_name ||
+				sprintf(
+					// translators: %s: Name of the post type e.g: "Post".
+					__( 'Single item: %s' ),
+					labels.singular_name
 				);
+			if ( _needsUniqueIdentifier ) {
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: %1s: Name of the template e.g: "Single Item: Post"; %2s: Slug of the post type e.g: "book".
+							__( '%1$s (%2$s)' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
+							__( 'Single item: %1$s (%2$s)' ),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {
@@ -337,9 +364,11 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	// occurs, we need to add slug.
 	const taxonomyLabels = publicTaxonomies?.reduce(
 		( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			accumulator[ templateName ] =
+				( accumulator[ templateName ] || 0 ) + 1;
 			return accumulator;
 		},
 		{}
@@ -348,8 +377,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 		if ( [ 'category', 'post_tag' ].includes( slug ) ) {
 			return false;
 		}
-		const singularName = labels.singular_name.toLowerCase();
-		return taxonomyLabels[ singularName ] > 1 && singularName !== slug;
+		const templateName = (
+			labels.template_name || labels.singular_name
+		).toLowerCase();
+		return taxonomyLabels[ templateName ] > 1 && templateName !== slug;
 	};
 	const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes );
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
@@ -371,14 +402,21 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				labels,
 				slug
 			);
-			let menuItemTitle = labels.singular_name;
+			let menuItemTitle = labels.template_name || labels.singular_name;
 			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
-					__( '%1$s (%2$s)' ),
-					labels.singular_name,
-					slug
-				);
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: %1s: Name of the template e.g: "Products by Category"; %2s: Slug of the taxonomy e.g: "product_cat".
+							__( '%1$s (%2$s)' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
+							__( '%1$s (%2$s)' ),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {

package/src/components/app/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -13,10 +16,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Layout from '../layout';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );

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

@@ -1,141 +1,6 @@
-// The button element easily inherits styles that are meant for the editor style.
-// These rules enhance the specificity to reduce that inheritance.
-// This is duplicated in visual-editor.
-.edit-site-block-editor__editor-styles-wrapper  .components-button {
-	font-family: $default-font;
-	font-size: $default-font-size;
-	padding: 6px 12px;
-
-	&.is-tertiary,
-	&.has-icon {
-		padding: 6px;
-	}
-}
-
-// Navigation focus mode requires padding around the root Navigation block
-// for presentational purposes.
-.edit-site-editor-canvas__block-list.is-navigation-block {
-	padding: $grid-unit-30;
-}
-
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	background-color: $gray-300;
-	// Centralize the editor horizontally (flex-direction is column).
-	align-items: center;
-
-	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	.edit-site-visual-editor__editor-canvas {
-		&.is-focused {
-			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
-		}
-	}
-
-
-	&.is-focus-mode {
-		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-30;
-		}
-
-		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
-			max-height: 100%;
-		}
-
-		// To hide the horizontal scrollbar and show the drag handle on the
-		// left and right of the container.
-		.components-resizable-box__container {
-			overflow: visible;
-		}
-	}
-
-	.components-resizable-box__container {
-		margin: 0 auto;
-	}
-
-	&.is-view-mode {
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-	}
-}
-
-.resizable-editor__drag-handle {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	padding: 0;
-	margin: auto 0;
-	width: $grid-unit-15;
-	appearance: none;
-	cursor: ew-resize;
-	outline: none;
-	background: none;
-	border-radius: $radius-block-ui;
-	border: 0;
-
-	&.is-variation-default {
-		height: 100px;
-	}
-
-	&.is-variation-separator {
-		height: 100%;
-		width: $grid-unit-30;
-		right: 0;
-
-		&::after {
-			width: 2px;
-			border-radius: 0;
-			background: transparent;
-			left: 50%;
-			transform: translateX(-1px);
-			right: 0;
-			transition: all ease 0.2s;
-			transition-delay: 0.1s;
-			@include reduce-motion;
-		}
-	}
-
-	&::after {
-		position: absolute;
-		top: $grid-unit-20;
-		left: $grid-unit-05;
-		right: 0;
-		bottom: $grid-unit-20;
-		content: "";
-		width: $grid-unit-05;
-		background-color: rgba($gray-700, 0.4);
-		border-radius: $radius-block-ui;
-	}
-
-	&.is-left {
-		// Subtract half of the handle width to properly center.
-		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
-	}
-
-	&.is-right {
-		// Subtract half of the handle width to properly center.
-		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
-	}
-
-	&:hover,
-	&:focus,
-	&:active {
-		opacity: 1;
-		&::after {
-			background-color: var(--wp-admin-theme-color);
-		}
-	}
-
-	&.is-variation-separator:focus::after {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+.edit-site-visual-editor__editor-canvas {
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 	}
 }