@wordpress/edit-post 7.35.0 → 8.0.0

package/build-style/style.css

@@ -104,19 +104,6 @@
   }
 }
 
-/**
- *  Show icon label overrides.
- */
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
-  width: 60px;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
-  display: block;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
-  content: none;
-}
-
 .edit-post-fullscreen-mode-close.components-button {
   display: none;
 }
@@ -129,10 +116,9 @@
     background: #1e1e1e;
     color: #fff;
     border-radius: 0;
-    height: 61px;
+    height: 60px;
     width: 60px;
     position: relative;
-    margin-bottom: -1px;
   }
   .edit-post-fullscreen-mode-close.components-button:active {
     color: #fff;
@@ -182,25 +168,35 @@
   margin-top: -1px;
 }
 
+/**
+ *  Show icon label overrides.
+ */
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
+  width: 60px;
+}
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
+  display: block;
+}
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
+  content: none;
+}
+
+.editor-visual-editor {
+  flex: 1 0 auto;
+  height: auto;
+}
+
 .edit-post-layout__metaboxes {
   flex-shrink: 0;
   clear: both;
 }
 
-.edit-post-layout .components-editor-notices__snackbar {
+.components-editor-notices__snackbar {
   position: fixed;
   right: 0;
-  bottom: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.is-distraction-free .components-editor-notices__snackbar {
-  bottom: 16px;
-}
-
-.has-block-breadcrumbs .components-editor-notices__snackbar {
-  bottom: 40px;
+  bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .edit-post-layout .components-editor-notices__snackbar {
@@ -330,103 +326,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   clear: both;
 }
 
-.edit-post-text-editor {
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  flex-grow: 1;
-}
-.edit-post-text-editor .editor-post-title:not(.is-raw-text),
-.edit-post-text-editor .editor-post-title.is-raw-text textarea {
-  max-width: none;
-  line-height: 1.4;
-  font-family: Menlo, Consolas, monaco, monospace;
-  font-size: 2.5em;
-  font-weight: normal;
-  border: 1px solid #949494;
-  border-radius: 0;
-  padding: 16px;
-}
-@media (min-width: 600px) {
-  .edit-post-text-editor .editor-post-title:not(.is-raw-text),
-.edit-post-text-editor .editor-post-title.is-raw-text textarea {
-    padding: 24px;
-  }
-}
-.edit-post-text-editor .editor-post-title:not(.is-raw-text):focus,
-.edit-post-text-editor .editor-post-title.is-raw-text textarea:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
-.edit-post-text-editor__body {
-  width: 100%;
-  padding: 0 12px 12px 12px;
-  max-width: 1080px;
-  margin-left: auto;
-  margin-right: auto;
-}
-@media (min-width: 960px) {
-  .edit-post-text-editor__body {
-    padding: 0 24px 24px 24px;
-  }
-}
-
-.edit-post-text-editor__toolbar {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  background: rgba(255, 255, 255, 0.8);
-  padding: 4px 12px;
-}
-@media (min-width: 600px) {
-  .edit-post-text-editor__toolbar {
-    padding: 12px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-post-text-editor__toolbar {
-    padding: 12px 24px;
-  }
-}
-.edit-post-text-editor__toolbar h2 {
-  line-height: 36px;
-  margin: 0 auto 0 0;
-  font-size: 13px;
-  color: #1e1e1e;
-}
-
-.edit-post-visual-editor {
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  background-color: #ddd;
-  flex: 1 0 auto;
-}
-.edit-post-visual-editor:not(.has-inline-canvas) {
-  overflow: hidden;
-}
-.edit-post-visual-editor .components-button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 13px;
-  padding: 6px 12px;
-}
-.edit-post-visual-editor .components-button.has-icon {
-  padding: 6px;
-}
-
-.edit-post-visual-editor__content-area {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-grow: 1;
-}
-
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;
@@ -518,7 +417,7 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 }
 
 .editor-header,
-.edit-post-text-editor,
+.editor-text-editor,
 .editor-sidebar,
 .editor-post-publish-panel {
   box-sizing: border-box;
@@ -526,9 +425,9 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .editor-header *,
 .editor-header *::before,
 .editor-header *::after,
-.edit-post-text-editor *,
-.edit-post-text-editor *::before,
-.edit-post-text-editor *::after,
+.editor-text-editor *,
+.editor-text-editor *::before,
+.editor-text-editor *::after,
 .editor-sidebar *,
 .editor-sidebar *::before,
 .editor-sidebar *::after,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.35.0",
+	"version": "8.0.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,42 +20,42 @@
 		"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",
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/api-fetch": "^6.55.0",
-		"@wordpress/block-editor": "^12.26.0",
-		"@wordpress/block-library": "^8.35.0",
-		"@wordpress/blocks": "^12.35.0",
-		"@wordpress/commands": "^0.29.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/core-commands": "^0.27.0",
-		"@wordpress/core-data": "^6.35.0",
-		"@wordpress/data": "^9.28.0",
-		"@wordpress/deprecated": "^3.58.0",
-		"@wordpress/dom": "^3.58.0",
-		"@wordpress/editor": "^13.35.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/hooks": "^3.58.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/keyboard-shortcuts": "^4.35.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/media-utils": "^4.49.0",
-		"@wordpress/notices": "^4.26.0",
-		"@wordpress/plugins": "^6.26.0",
-		"@wordpress/preferences": "^3.35.0",
-		"@wordpress/private-apis": "^0.40.0",
-		"@wordpress/url": "^3.59.0",
-		"@wordpress/viewport": "^5.35.0",
-		"@wordpress/warning": "^2.58.0",
-		"@wordpress/widgets": "^3.35.0",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.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/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/editor": "^14.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/hooks": "^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/plugins": "^7.0.0",
+		"@wordpress/preferences": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/url": "^4.0.0",
+		"@wordpress/viewport": "^6.0.0",
+		"@wordpress/warning": "^3.0.0",
+		"@wordpress/widgets": "^4.0.0",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -66,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/commands/use-commands.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { fullscreen } from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useCommands() {
+	const { isFullscreen } = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+
+		return {
+			isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
+		};
+	}, [] );
+	const { toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	useCommand( {
+		name: 'core/toggle-fullscreen-mode',
+		label: isFullscreen
+			? __( 'Exit fullscreen' )
+			: __( 'Enter fullscreen' ),
+		icon: fullscreen,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fullscreenMode' );
+			close();
+			createInfoNotice(
+				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core/edit-post', 'fullscreenMode' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+}

package/src/components/{header/fullscreen-mode-close/index.js → back-button/fullscreen-mode-close.js}

@@ -22,7 +22,7 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { store as editPostStore } from '../../store';
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(

package/src/components/back-button/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from './fullscreen-mode-close';
+import { unlock } from '../../lock-unlock';
+
+const { BackButton: BackButtonFill } = unlock( editorPrivateApis );
+
+const slideX = {
+	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function BackButton( { initialPost } ) {
+	return (
+		<BackButtonFill>
+			<motion.div
+				variants={ slideX }
+				transition={ { type: 'tween', delay: 0.8 } }
+			>
+				<FullscreenModeClose showTooltip initialPost={ initialPost } />
+			</motion.div>
+		</BackButtonFill>
+	);
+}
+
+export default BackButton;

package/src/components/{header/fullscreen-mode-close → back-button}/style.scss

@@ -14,10 +14,9 @@
 		background: $gray-900;
 		color: $white;
 		border-radius: 0;
-		height: $header-height + $border-width;
+		height: $header-height;
 		width: $header-height;
 		position: relative;
-		margin-bottom: - $border-width;
 
 		&:active {
 			color: $white;
@@ -65,3 +64,18 @@
 		margin-top: -($border-width);
 	}
 }
+
+/**
+ *  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/{header/fullscreen-mode-close/test/index.js → back-button/test/fullscreen-mode-close.js}

@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import FullscreenModeClose from '../';
+import FullscreenModeClose from '../fullscreen-mode-close';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.