@wordpress/editor 14.10.0 → 14.12.0

package/src/store/actions.js

@@ -812,9 +812,12 @@ export function setIsListViewOpened( isOpen ) {
  * Action that toggles Distraction free mode.
  * Distraction free mode expects there are no sidebars, as due to the
  * z-index values set, you can't close sidebars.
+ *
+ * @param {Object}  [options={}]                Optional configuration object
+ * @param {boolean} [options.createNotice=true] Whether to create a notice
  */
 export const toggleDistractionFree =
-	() =>
+	( { createNotice = true } = {} ) =>
 	( { dispatch, registry } ) => {
 		const isDistractionFree = registry
 			.select( preferencesStore )
@@ -837,42 +840,116 @@ export const toggleDistractionFree =
 			registry
 				.dispatch( preferencesStore )
 				.set( 'core', 'distractionFree', ! isDistractionFree );
-			registry
-				.dispatch( noticesStore )
-				.createInfoNotice(
-					isDistractionFree
-						? __( 'Distraction free off.' )
-						: __( 'Distraction free on.' ),
-					{
-						id: 'core/editor/distraction-free-mode/notice',
-						type: 'snackbar',
-						actions: [
-							{
-								label: __( 'Undo' ),
-								onClick: () => {
-									registry.batch( () => {
-										registry
-											.dispatch( preferencesStore )
-											.set(
-												'core',
-												'fixedToolbar',
-												isDistractionFree ? true : false
-											);
-										registry
-											.dispatch( preferencesStore )
-											.toggle(
-												'core',
-												'distractionFree'
-											);
-									} );
+
+			if ( createNotice ) {
+				registry
+					.dispatch( noticesStore )
+					.createInfoNotice(
+						isDistractionFree
+							? __( 'Distraction free mode deactivated.' )
+							: __( 'Distraction free mode activated.' ),
+						{
+							id: 'core/editor/distraction-free-mode/notice',
+							type: 'snackbar',
+							actions: [
+								{
+									label: __( 'Undo' ),
+									onClick: () => {
+										registry.batch( () => {
+											registry
+												.dispatch( preferencesStore )
+												.set(
+													'core',
+													'fixedToolbar',
+													isDistractionFree
+												);
+											registry
+												.dispatch( preferencesStore )
+												.toggle(
+													'core',
+													'distractionFree'
+												);
+										} );
+									},
 								},
-							},
-						],
-					}
-				);
+							],
+						}
+					);
+			}
 		} );
 	};
 
+/**
+ * Action that toggles the Spotlight Mode view option.
+ */
+export const toggleSpotlightMode =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' );
+
+		const isFocusMode = registry
+			.select( preferencesStore )
+			.get( 'core', 'focusMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFocusMode
+					? __( 'Spotlight mode activated.' )
+					: __( 'Spotlight mode deactivated.' ),
+				{
+					id: 'core/editor/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
+	};
+
+/**
+ * Action that toggles the Top Toolbar view option.
+ */
+export const toggleTopToolbar =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' );
+
+		const isTopToolbar = registry
+			.select( preferencesStore )
+			.get( 'core', 'fixedToolbar' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar activated.' )
+					: __( 'Top toolbar deactivated.' ),
+				{
+					id: 'core/editor/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
+	};
+
 /**
  * Triggers an action used to switch editor mode.
  *
@@ -883,9 +960,11 @@ export const switchEditorMode =
 	( { dispatch, registry } ) => {
 		registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );
 
-		// Unselect blocks when we switch to a non visual mode.
 		if ( mode !== 'visual' ) {
+			// Unselect blocks when we switch to a non visual mode.
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+			// Exit zoom out state when switching to a non visual mode.
+			unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
 		}
 
 		if ( mode === 'visual' ) {

package/src/store/constants.ts

@@ -8,8 +8,6 @@ export const EDIT_MERGE_PROPERTIES = new Set( [ 'meta' ] );
 
 /**
  * Constant for the store module (or reducer) key.
- *
- * @type {string}
  */
 export const STORE_NAME = 'core/editor';
 

package/src/store/index.js

@@ -18,8 +18,6 @@ import { unlock } from '../lock-unlock';
  * Post editor data store configuration.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
- *
- * @type {Object}
  */
 export const storeConfig = {
 	reducer,
@@ -31,8 +29,6 @@ export const storeConfig = {
  * Store definition for the editor namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,

package/src/store/private-actions.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -410,8 +410,8 @@ export const removeTemplates =
 							decodeEntities( title )
 					  )
 					: sprintf(
-							/* translators: The template/part's name. */
-							__( '"%s" deleted.' ),
+							/* translators: %s: The template/part's name. */
+							_x( '"%s" deleted.', 'template part' ),
 							decodeEntities( title )
 					  );
 			} else {

package/src/store/selectors.js

@@ -28,6 +28,7 @@ import {
 } from './constants';
 import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
+import { unlock } from '../lock-unlock';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -441,8 +442,8 @@ export function isCurrentPostPending( state ) {
 /**
  * Return true if the current post has already been published.
  *
- * @param {Object}  state       Global application state.
- * @param {Object?} currentPost Explicit current post for bypassing registry selector.
+ * @param {Object} state         Global application state.
+ * @param {Object} [currentPost] Explicit current post for bypassing registry selector.
  *
  * @return {boolean} Whether the post has been published.
  */
@@ -1299,8 +1300,8 @@ export function getRenderingMode( state ) {
  */
 export const getDeviceType = createRegistrySelector(
 	( select ) => ( state ) => {
-		const editorMode = select( blockEditorStore ).__unstableGetEditorMode();
-		if ( editorMode === 'zoom-out' ) {
+		const isZoomOut = unlock( select( blockEditorStore ) ).isZoomOut();
+		if ( isZoomOut ) {
 			return 'Desktop';
 		}
 		return state.deviceType;

package/src/style.scss

@@ -2,6 +2,7 @@
 
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
+@import "./components/collab-sidebar/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/block-settings-menu/style.scss";

package/src/utils/pageTypeBadge.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
+/**
+ * Custom hook to get the page type badge for the current post on edit site view.
+ */
+export default function usePageTypeBadge() {
+	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { canUser, getEditedEntityRecord } = select( coreStore );
+		const postId = getCurrentPostId();
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+
+		return {
+			isFrontPage: siteSettings?.page_on_front === postId,
+			isPostsPage: siteSettings?.page_for_posts === postId,
+		};
+	} );
+
+	if ( isFrontPage ) {
+		return __( 'Homepage' );
+	} else if ( isPostsPage ) {
+		return __( 'Posts Page' );
+	}
+
+	return false;
+}

package/src/utils/terms.js

@@ -14,14 +14,16 @@ export function buildTermsTree( flatTerms ) {
 	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
 		return {
 			children: [],
-			parent: null,
+			parent: undefined,
 			...term,
 		};
 	} );
 
 	// All terms should have a `parent` because we're about to index them by it.
 	if (
-		flatTermsWithParentAndChildren.some( ( { parent } ) => parent === null )
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === undefined
+		)
 	) {
 		return flatTermsWithParentAndChildren;
 	}

package/src/utils/test/terms.js

@@ -4,14 +4,14 @@
 import { buildTermsTree } from '../terms';
 
 describe( 'buildTermsTree()', () => {
-	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
+	it( 'Should return same array as input with undefined parent and empty children added if parent is never specified.', () => {
 		const input = Object.freeze( [
 			{ id: 2232, dummy: true },
 			{ id: 2245, dummy: true },
 		] );
 		const output = Object.freeze( [
-			{ id: 2232, parent: null, children: [], dummy: true },
-			{ id: 2245, parent: null, children: [], dummy: true },
+			{ id: 2232, parent: undefined, children: [], dummy: true },
+			{ id: 2245, parent: undefined, children: [], dummy: true },
 		] );
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );