@wordpress/edit-post 7.12.0 → 7.12.2

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

@@ -100,7 +100,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
       class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
       type="button"
     >
-      Enable & Reload
+      Show & Reload Page
     </button>
   </div>
 </div>
@@ -303,7 +303,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
       class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
       type="button"
     >
-      Disable & Reload
+      Hide & Reload Page
     </button>
   </div>
 </div>

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -607,15 +607,21 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border-radius: 2px;
 }
 
+.emotion-13 svg,
+.emotion-13 path {
+  fill: currentColor;
+}
+
 .emotion-13:hover {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
-.emotion-13:focus {
-  background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 3px solid transparent;
+.emotion-13:focus-visible {
+  box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var(
+  				--wp-components-color-accent,
+  				var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
+  			);
+  outline: 2px solid transparent;
 }
 
 .emotion-15 {

package/src/components/sidebar/post-status/index.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
-import { PostSwitchToDraftButton } from '@wordpress/editor';
+import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -51,6 +51,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
+						<PostSyncStatus />
 						{ fills }
 						<HStack
 							style={ {

package/src/components/visual-editor/index.js

@@ -23,12 +23,10 @@ import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableEditorStyles as EditorStyles,
 	useSetting,
-	__experimentalLayoutStyle as LayoutStyle,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableIframe as Iframe,
 	__experimentalRecursionProvider as RecursionProvider,
-	__experimentaluseLayoutClasses as useLayoutClasses,
-	__experimentaluseLayoutStyles as useLayoutStyles,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
@@ -41,6 +39,11 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { LayoutStyle, useLayoutClasses, useLayoutStyles } = unlock(
+	blockEditorPrivateApis
+);
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
@@ -372,11 +375,12 @@ export default function VisualEditor( { styles } ) {
 							! isTemplateMode && (
 								<>
 									<LayoutStyle
-										selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
+										selector=".edit-post-visual-editor__post-title-wrapper"
 										layout={ fallbackLayout }
-										layoutDefinitions={
-											globalLayoutSettings?.definitions
-										}
+									/>
+									<LayoutStyle
+										selector=".block-editor-block-list__layout.is-root-container"
+										layout={ blockListLayout }
 									/>
 									{ align && (
 										<LayoutStyle css={ alignCSS } />
@@ -385,9 +389,6 @@ export default function VisualEditor( { styles } ) {
 										<LayoutStyle
 											layout={ postContentLayout }
 											css={ postContentLayoutStyles }
-											layoutDefinitions={
-												globalLayoutSettings?.definitions
-											}
 										/>
 									) }
 								</>
@@ -417,7 +418,7 @@ export default function VisualEditor( { styles } ) {
 										? 'wp-site-blocks'
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
-								__experimentalLayout={ blockListLayout }
+								layout={ blockListLayout }
 							/>
 						</RecursionProvider>
 					</MaybeIframe>

package/src/editor.js

@@ -9,6 +9,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -23,13 +24,16 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
-import { unlock } from './private-apis';
+import { unlock } from './lock-unlock';
+import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	useCommands();
+	useCommonCommands();
 	const {
 		hasFixedToolbar,
 		focusMode,
@@ -164,10 +168,29 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				presetStyles.push( style );
 			}
 		} );
+
 		const defaultEditorStyles = [
 			...settings.defaultEditorStyles,
 			...presetStyles,
 		];
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if (
+			! settings.disableLayoutStyles &&
+			! ( hasThemeStyles && themeStyles.length )
+		) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
+		}
+
 		return hasThemeStyles && themeStyles.length
 			? settings.styles
 			: defaultEditorStyles;

package/src/hooks/commands/use-common-commands.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	code,
+	cog,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+} from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+export default function useCommonCommands() {
+	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
+		useDispatch( editPostStore );
+	const { editorMode, activeSidebar } = useSelect(
+		( select ) => ( {
+			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+				editPostStore.name
+			),
+			editorMode: select( editPostStore ).getEditorMode(),
+		} ),
+		[]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+
+	useCommand( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/document' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/document' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/block' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/block' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'distractionFree' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'focusMode' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+}

package/src/index.js

@@ -79,7 +79,7 @@ export function initializeEditor(
 	}
 
 	/*
-	 * Prevent adding template part and post content block in the post editor.
+	 * Prevent adding template part in the post editor.
 	 * Only add the filter when the post editor is initialized, not imported.
 	 * Also only add the filter(s) after registerCoreBlocks()
 	 * so that common filters in the block library are not overwritten.
@@ -90,8 +90,7 @@ export function initializeEditor(
 		( canInsert, blockType ) => {
 			if (
 				! select( editPostStore ).isEditingTemplate() &&
-				( blockType.name === 'core/template-part' ||
-					blockType.name === 'core/post-content' )
+				blockType.name === 'core/template-part'
 			) {
 				return false;
 			}
@@ -99,6 +98,34 @@ export function initializeEditor(
 		}
 	);
 
+	/*
+	 * Prevent adding post content block (except in query block) in the post editor.
+	 * Only add the filter when the post editor is initialized, not imported.
+	 * Also only add the filter(s) after registerCoreBlocks()
+	 * so that common filters in the block library are not overwritten.
+	 */
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removePostContentFromInserter',
+		(
+			canInsert,
+			blockType,
+			rootClientId,
+			{ getBlockParentsByBlockName }
+		) => {
+			if (
+				! select( editPostStore ).isEditingTemplate() &&
+				blockType.name === 'core/post-content'
+			) {
+				return (
+					getBlockParentsByBlockName( rootClientId, 'core/query' )
+						.length > 0
+				);
+			}
+			return canInsert;
+		}
+	);
+
 	// Show a console log warning if the browser is not in Standards rendering mode.
 	const documentMode =
 		document.compatMode === 'CSS1Compat' ? 'Standards' : 'Quirks';

package/src/plugins/index.js

@@ -28,7 +28,7 @@ registerPlugin( 'edit-post', {
 									post_type: 'wp_block',
 								} ) }
 							>
-								{ __( 'Manage Reusable blocks' ) }
+								{ __( 'Manage Patterns' ) }
 							</MenuItem>
 							<KeyboardShortcutsHelpMenuItem
 								onSelect={ onClose }

package/src/test/editor.native.js

@@ -1,18 +1,25 @@
 /**
  * External dependencies
  */
-import { act, render } from 'test/helpers';
+import {
+	act,
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { registerCoreBlocks } from '@wordpress/block-library';
-import RNReactNativeGutenbergBridge from '@wordpress/react-native-bridge';
+import RNReactNativeGutenbergBridge, {
+	subscribeParentToggleHTMLMode,
+} from '@wordpress/react-native-bridge';
 // Force register 'core/editor' store.
 import { store } from '@wordpress/editor'; // eslint-disable-line no-unused-vars
 
-jest.mock( '../components/layout', () => () => 'Layout' );
-
 /**
  * Internal dependencies
  */
@@ -34,11 +41,9 @@ afterAll( () => {
 	jest.useRealTimers();
 } );
 
-describe( 'Editor', () => {
-	beforeAll( () => {
-		registerCoreBlocks();
-	} );
+setupCoreBlocks();
 
+describe( 'Editor', () => {
 	it( 'detects unsupported block and sends hasUnsupportedBlocks true to native', () => {
 		RNReactNativeGutenbergBridge.editorDidMount = jest.fn();
 
@@ -56,6 +61,26 @@ describe( 'Editor', () => {
 			RNReactNativeGutenbergBridge.editorDidMount
 		).toHaveBeenCalledWith( [ 'core/notablock' ] );
 	} );
+
+	it( 'toggles the editor from Visual to HTML mode', async () => {
+		// Arrange
+		let toggleMode;
+		subscribeParentToggleHTMLMode.mockImplementation( ( callback ) => {
+			toggleMode = callback;
+		} );
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		toggleMode();
+
+		// Assert
+		const htmlEditor = await screen.findByLabelText( 'html-view-content' );
+		expect( htmlEditor ).toBeVisible();
+	} );
 } );
 
 // Utilities.

package/build/private-apis.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/private-apis.js"],"names":["lock","unlock"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,sBAFD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/edit-post'\n\t);\n"]}

package/build-module/private-apis.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/private-apis.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,yBAAjE;AAEA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZF,gDAAgD,CAC/C,8GAD+C,EAE/C,sBAF+C,CAD1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/edit-post'\n\t);\n"]}