@wordpress/edit-post 8.50.0 → 8.51.0

package/src/components/back-button/fullscreen-mode-close.js

@@ -1,122 +1,28 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	Button,
-	Icon as WCIcon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import {
-	wordpress,
-	arrowUpLeft,
-	arrowUpRight,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-const siteIconVariants = {
-	edit: {
-		clipPath: 'inset(0% round 0px)',
-	},
-	hover: {
-		clipPath: 'inset( 22% round 2px )',
-	},
-	tap: {
-		clipPath: 'inset(0% round 0px)',
-	},
-};
-
-const toggleHomeIconVariants = {
-	edit: {
-		opacity: 0,
-		scale: 0.2,
-	},
-	hover: {
-		opacity: 1,
-		scale: 1,
-		clipPath: 'inset( 22% round 2px )',
-	},
-};
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
-	const { isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
+	const postType = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
-			const { getEntityRecord, getPostType, isResolving } =
-				select( coreStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-			const _postType = initialPost?.type || getCurrentPostType();
-			return {
-				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				postType: getPostType( _postType ),
-				siteIconUrl: siteData.site_icon_url,
-			};
+			const { getPostType } = select( coreStore );
+			return getPostType( initialPost?.type || getCurrentPostType() );
 		},
 		[ initialPost?.type ]
 	);
 
-	const disableMotion = useReducedMotion();
-	const transition = {
-		duration: disableMotion ? 0 : 0.2,
-	};
-
 	if ( ! postType ) {
 		return null;
 	}
 
-	// Create SiteIcon equivalent structure exactly like edit-site
-	let siteIconContent;
-	if ( isRequestingSiteIcon && ! siteIconUrl ) {
-		siteIconContent = (
-			<div className="edit-post-fullscreen-mode-close-site-icon__image" />
-		);
-	} else if ( siteIconUrl ) {
-		siteIconContent = (
-			<img
-				className="edit-post-fullscreen-mode-close-site-icon__image"
-				alt={ __( 'Site Icon' ) }
-				src={ siteIconUrl }
-			/>
-		);
-	} else {
-		siteIconContent = (
-			<WCIcon
-				className="edit-post-fullscreen-mode-close-site-icon__icon"
-				icon={ wordpress }
-				size={ 48 }
-			/>
-		);
-	}
-
-	// Override default icon if custom icon is provided via props.
-	const buttonIcon = icon ? (
-		<WCIcon size="36px" icon={ icon } />
-	) : (
-		<div className="edit-post-fullscreen-mode-close-site-icon">
-			{ siteIconContent }
-		</div>
-	);
-
-	const classes = clsx( 'edit-post-fullscreen-mode-close', {
-		'has-icon': siteIconUrl,
-	} );
-
 	const buttonHref =
 		href ??
 		addQueryArgs( 'edit.php', {
@@ -125,53 +31,15 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 
 	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
 
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
-
 	return (
-		<motion.div
-			className="edit-post-fullscreen-mode-close__view-mode-toggle"
-			animate="edit"
-			initial="edit"
-			whileHover="hover"
-			whileTap="tap"
-			transition={ transition }
-		>
-			<Button
-				__next40pxDefaultSize
-				className={ classes }
-				href={ buttonHref }
-				label={ buttonLabel }
-				showTooltip={ showTooltip }
-				tooltipPosition="bottom"
-			>
-				{ ! hasAdminBarInEditor && (
-					<motion.div
-						variants={ ! disableMotion && siteIconVariants }
-					>
-						<div className="edit-post-fullscreen-mode-close__view-mode-toggle-icon">
-							{ buttonIcon }
-						</div>
-					</motion.div>
-				) }
-			</Button>
-			{ hasAdminBarInEditor ? (
-				<div className="edit-post-fullscreen-mode-close__back-icon">
-					<WCIcon icon={ isRTL() ? chevronRight : chevronLeft } />
-				</div>
-			) : (
-				<motion.div
-					className={ clsx(
-						'edit-post-fullscreen-mode-close__back-icon',
-						{
-							'has-site-icon': siteIconUrl,
-						}
-					) }
-					variants={ ! disableMotion && toggleHomeIconVariants }
-				>
-					<WCIcon icon={ isRTL() ? arrowUpRight : arrowUpLeft } />
-				</motion.div>
-			) }
-		</motion.div>
+		<Button
+			size="compact"
+			href={ buttonHref }
+			label={ buttonLabel }
+			showTooltip={ showTooltip }
+			tooltipPosition="bottom"
+			icon={ icon ?? ( isRTL() ? chevronRight : chevronLeft ) }
+		/>
 	);
 }
 

package/src/components/layout/index.js

@@ -65,7 +65,6 @@ import WelcomeGuide from '../welcome-guide';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useEditPostCommands from '../../commands/use-commands';
-import { useShouldIframe } from './use-should-iframe';
 import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
 import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization';
 
@@ -131,11 +130,7 @@ function useEditorStyles( settings ) {
 	] );
 }
 
-/**
- * @param {Object}  props
- * @param {boolean} props.isLegacy True for device previews where split view is disabled.
- */
-function MetaBoxesMain( { isLegacy } ) {
+function MetaBoxesMain() {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isMetaBoxLocationVisible } = select( editPostStore );
@@ -284,17 +279,13 @@ function MetaBoxesMain( { isLegacy } ) {
 		<div
 			// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
 			className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
-			hidden={ ! isLegacy && ! isOpen }
+			hidden={ ! isOpen }
 		>
 			<MetaBoxes location="normal" />
 			<MetaBoxes location="advanced" />
 		</div>
 	);
 
-	if ( isLegacy ) {
-		return contents;
-	}
-
 	const isAutoHeight = openHeight === undefined;
 	const usedOpenHeight = isShort ? 'auto' : openHeight;
 	const usedHeight = isOpen ? usedOpenHeight : min;
@@ -377,7 +368,6 @@ function Layout( {
 	initialEdits,
 } ) {
 	useEditPostCommands();
-	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		currentPost: { postId: currentPostId, postType: currentPostType },
@@ -588,7 +578,6 @@ function Layout( {
 							templateId={ templateId }
 							className={ className }
 							forceIsDirty={ hasActiveMetaboxes }
-							disableIframe={ ! shouldIframe }
 							// We should auto-focus the canvas (title) on load.
 							// eslint-disable-next-line jsx-a11y/no-autofocus
 							autoFocus={ ! isWelcomeGuideVisible }
@@ -598,11 +587,7 @@ function Layout( {
 							}
 							extraContent={
 								! isDistractionFree &&
-								showMetaBoxes && (
-									<MetaBoxesMain
-										isLegacy={ ! shouldIframe }
-									/>
-								)
+								showMetaBoxes && <MetaBoxesMain />
 							}
 						>
 							<PostLockedModal />

package/src/components/meta-boxes/meta-boxes-area/style.scss

@@ -39,7 +39,7 @@
 	#poststuff h2.hndle { /* WordPress selectors yolo */
 		box-sizing: border-box;
 		color: inherit;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		outline: none;
 		padding: 0 $grid-unit-30;
 		position: relative;

package/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap

@@ -2,7 +2,7 @@
 
 exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation message when toggled on 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -17,41 +17,6 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-6 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div>
   <div
     class="preference-base-option"
@@ -63,9 +28,10 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
         class="components-base-control__field emotion-2 emotion-3"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
+          class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
           data-wp-c16t="true"
           data-wp-component="HStack"
+          style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: flex-start;"
         >
           <span
             class="components-form-toggle is-checked"
@@ -83,10 +49,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             />
           </span>
           <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            class="style-item style-block components-flex-item components-flex-block components-toggle-control__label"
             data-wp-c16t="true"
             data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
+            style="--wp-components-flex-item-display: block;"
           />
         </div>
       </div>
@@ -108,7 +75,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 
 exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields are enabled 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -123,41 +90,6 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-6 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div>
   <div
     class="preference-base-option"
@@ -169,9 +101,10 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
         class="components-base-control__field emotion-2 emotion-3"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
+          class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
           data-wp-c16t="true"
           data-wp-component="HStack"
+          style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: flex-start;"
         >
           <span
             class="components-form-toggle is-checked"
@@ -190,10 +123,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             />
           </span>
           <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            class="style-item style-block components-flex-item components-flex-block components-toggle-control__label"
             data-wp-c16t="true"
             data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
+            style="--wp-components-flex-item-display: block;"
           />
         </div>
       </div>
@@ -204,7 +138,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 
 exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmation message when toggled off 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -219,41 +153,6 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-6 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div>
   <div
     class="preference-base-option"
@@ -265,9 +164,10 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
         class="components-base-control__field emotion-2 emotion-3"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
+          class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
           data-wp-c16t="true"
           data-wp-component="HStack"
+          style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: flex-start;"
         >
           <span
             class="components-form-toggle"
@@ -286,10 +186,11 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
             />
           </span>
           <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            class="style-item style-block components-flex-item components-flex-block components-toggle-control__label"
             data-wp-c16t="true"
             data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
+            style="--wp-components-flex-item-display: block;"
           />
         </div>
       </div>
@@ -311,7 +212,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 
 exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fields are disabled 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -326,41 +227,6 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-6 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div>
   <div
     class="preference-base-option"
@@ -372,9 +238,10 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
         class="components-base-control__field emotion-2 emotion-3"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
+          class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
           data-wp-c16t="true"
           data-wp-component="HStack"
+          style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: flex-start;"
         >
           <span
             class="components-form-toggle"
@@ -392,10 +259,11 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
             />
           </span>
           <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            class="style-item style-block components-flex-item components-flex-block components-toggle-control__label"
             data-wp-c16t="true"
             data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
+            style="--wp-components-flex-item-display: block;"
           />
         </div>
       </div>