@wordpress/edit-post 8.49.1 → 8.50.1-next.v.202607070741.0

package/src/components/back-button/style.scss

@@ -7,8 +7,11 @@
 .edit-post-fullscreen-mode-close__view-mode-toggle {
 	top: 0;
 	left: 0;
-	height: $header-height;
-	width: $header-height;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: $button-size-compact;
+	width: $button-size-compact;
 	z-index: 100;
 
 	.components-button {
@@ -31,30 +34,11 @@
 		}
 	}
 
-	.edit-post-fullscreen-mode-close__view-mode-toggle-icon {
-		svg,
-		img {
-			background: $gray-900;
-			display: block;
-		}
+	&:hover .edit-post-fullscreen-mode-close__back-icon {
+		color: var(--wp-admin-theme-color);
 	}
 }
 
-.edit-post-fullscreen-mode-close-site-icon__icon {
-	fill: currentColor;
-	width: 100%;
-	height: 100%;
-	padding: $grid-unit-15;
-}
-
-.edit-post-fullscreen-mode-close-site-icon__image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	background: #333;
-	aspect-ratio: 1 / 1;
-}
-
 .edit-post-fullscreen-mode-close.components-button:focus {
 	position: relative;
 
@@ -73,38 +57,14 @@
 
 .edit-post-fullscreen-mode-close__back-icon {
 	position: absolute;
-	top: 0;
-	left: 0;
-	width: $header-height;
-	height: $header-height;
+	width: $button-size-compact;
+	height: $button-size-compact;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: hsla(0, 0%, 80%);
 	pointer-events: none;
 
 	svg {
 		fill: currentColor;
 	}
-
-	&.has-site-icon {
-		background-color: hsla(0, 0%, 100%, 0.6);
-		-webkit-backdrop-filter: saturate(180%) blur(15px);
-		backdrop-filter: saturate(180%) blur(15px);
-	}
-}
-
-/**
- *  Show icon label overrides.
- */
-.show-icon-labels .editor-header {
-	.edit-post-fullscreen-mode-close.has-icon {
-		width: $header-height;
-		svg {
-			display: block;
-		}
-		&::after {
-			content: none;
-		}
-	}
 }

package/src/components/layout/index.js

@@ -400,7 +400,6 @@ function Layout( {
 		showMetaBoxes,
 		isWelcomeGuideVisible,
 		templateId,
-		isDevicePreview,
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
@@ -419,8 +418,9 @@ function Layout( {
 			const { getBlockSelectionStart, isZoomOut } = unlock(
 				select( blockEditorStore )
 			);
-			const { getEditorMode, getDefaultRenderingMode, getDeviceType } =
-				unlock( select( editorStore ) );
+			const { getEditorMode, getDefaultRenderingMode } = unlock(
+				select( editorStore )
+			);
 			const isNotDesignPostType =
 				! DESIGN_POST_TYPES.includes( currentPostType );
 			const isDirectlyEditingPattern =
@@ -451,7 +451,6 @@ function Layout( {
 					! isEditingTemplate
 						? _templateId
 						: null,
-				isDevicePreview: getDeviceType() !== 'Desktop',
 			};
 		},
 		[
@@ -601,7 +600,7 @@ function Layout( {
 								! isDistractionFree &&
 								showMetaBoxes && (
 									<MetaBoxesMain
-										isLegacy={ isDevicePreview }
+										isLegacy={ ! shouldIframe }
 									/>
 								)
 							}

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

@@ -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>
@@ -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>
@@ -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>
@@ -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>

package/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -17,41 +17,6 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   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;
-}
-
 <fieldset
   class="preferences-modal__section"
 >
@@ -77,9 +42,10 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
           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"
@@ -97,10 +63,11 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
               />
             </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;"
             >
               Custom fields
             </label>
@@ -129,41 +96,6 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   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;
-}
-
 <fieldset
   class="preferences-modal__section"
 >
@@ -189,9 +121,10 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
           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"
@@ -209,10 +142,11 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
               />
             </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;"
             >
               Custom fields
             </label>
@@ -230,9 +164,10 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
           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"
@@ -251,10 +186,11 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
               />
             </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-4"
+              style="--wp-components-flex-item-display: block;"
             >
               Meta Box 1
             </label>
@@ -272,9 +208,10 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
           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"
@@ -293,10 +230,11 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
               />
             </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-5"
+              style="--wp-components-flex-item-display: block;"
             >
               Meta Box 2
             </label>
@@ -325,41 +263,6 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   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;
-}
-
 <fieldset
   class="preferences-modal__section"
 >
@@ -385,9 +288,10 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
           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"
@@ -406,10 +310,11 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
               />
             </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;"
             >
               Meta Box 1
             </label>
@@ -427,9 +332,10 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
           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"
@@ -448,10 +354,11 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
               />
             </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;"
             >
               Meta Box 2
             </label>

package/src/index.js

@@ -79,7 +79,9 @@ export function initializeEditor(
 		enableChoosePatternModal: true,
 		isPublishSidebarEnabled: true,
 		showCollaborationCursor: false,
-		showCollaborationNotifications: true,
+		showCollaborationJoinNotifications: true,
+		showCollaborationLeaveNotifications: true,
+		showCollaborationPostSaveNotifications: true,
 	} );
 
 	if ( window.__clientSideMediaProcessing ) {