@wordpress/edit-post 5.0.18-next.33ec3857e2.0 → 5.0.21

package/src/components/header/template-title/edit-template-title.js

@@ -29,6 +29,10 @@ export default function EditTemplateTitle() {
 	const { getEditorSettings } = useSelect( editorStore );
 	const { updateEditorSettings } = useDispatch( editorStore );
 
+	if ( template.has_theme_file ) {
+		return null;
+	}
+
 	let templateTitle = __( 'Default' );
 	if ( template?.title ) {
 		templateTitle = template.title;

package/src/components/header/template-title/index.js

@@ -3,7 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
 /**
@@ -48,6 +52,12 @@ function TemplateTitle() {
 		templateTitle = template.slug;
 	}
 
+	const hasOptions = !! (
+		template.custom ||
+		template.wp_id ||
+		template.description
+	);
+
 	return (
 		<div className="edit-post-template-top-area">
 			<Button
@@ -66,32 +76,39 @@ function TemplateTitle() {
 			>
 				{ title }
 			</Button>
-			<Dropdown
-				position="bottom center"
-				contentClassName="edit-post-template-top-area__popover"
-				renderToggle={ ( { onToggle } ) => (
-					<Button
-						className="edit-post-template-title"
-						isLink
-						icon={ chevronDown }
-						showTooltip
-						onClick={ onToggle }
-						label={ __( 'Template Options' ) }
-					>
-						{ templateTitle }
-					</Button>
-				) }
-				renderContent={ () => (
-					<>
-						{ template.has_theme_file ? (
-							<TemplateDescription />
-						) : (
+			{ hasOptions ? (
+				<Dropdown
+					position="bottom center"
+					contentClassName="edit-post-template-top-area__popover"
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="edit-post-template-title"
+							isLink
+							icon={ chevronDown }
+							showTooltip
+							onClick={ onToggle }
+							label={ __( 'Template Options' ) }
+						>
+							{ templateTitle }
+						</Button>
+					) }
+					renderContent={ () => (
+						<>
 							<EditTemplateTitle />
-						) }
-						<DeleteTemplate />
-					</>
-				) }
-			/>
+							<TemplateDescription />
+							<DeleteTemplate />
+						</>
+					) }
+				/>
+			) : (
+				<Text
+					className="edit-post-template-title"
+					size="body"
+					style={ { lineHeight: '24px' } }
+				>
+					{ templateTitle }
+				</Text>
+			) }
 		</div>
 	);
 }

package/src/components/header/template-title/style.scss

@@ -46,14 +46,21 @@
 	}
 }
 
-.edit-post-template-top-area__popover .components-popover__content {
-	min-width: 280px;
+.edit-post-template-top-area__popover {
+	.components-popover__content {
+		min-width: 280px;
+		padding: $grid-unit-10;
+	}
+
+	.edit-post-template-details__description {
+		color: $gray-700;
+	}
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	padding: $grid-unit-15;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+	padding: $grid-unit-20;
 	padding-bottom: 0;
 	border-top: $border-width solid $gray-300;
 
@@ -63,6 +70,7 @@
 
 		.components-menu-item__item {
 			margin-right: 0;
+			min-width: 0;
 		}
 	}
 }

package/src/components/header/template-title/template-description.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalText as Text } from '@wordpress/components';
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,14 +13,29 @@ import { __experimentalText as Text } from '@wordpress/components';
 import { store as editPostStore } from '../../../store';
 
 export default function TemplateDescription() {
-	const { description } = useSelect( ( select ) => {
+	const { description, title } = useSelect( ( select ) => {
 		const { getEditedPostTemplate } = select( editPostStore );
 		return {
+			title: getEditedPostTemplate().title,
 			description: getEditedPostTemplate().description,
 		};
 	}, [] );
 	if ( ! description ) {
 		return null;
 	}
-	return <Text size="body">{ description }</Text>;
+	return (
+		<>
+			<Heading level={ 4 } weight={ 600 }>
+				{ title }
+			</Heading>
+			<Text
+				className="edit-post-template-details__description"
+				size="body"
+				as="p"
+				style={ { marginTop: '12px' } }
+			>
+				{ description }
+			</Text>
+		</>
+	);
 }

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<ForwardRef(Modal)
+<Modal
   className="edit-post-keyboard-shortcut-help-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -80,7 +80,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     }
     title="Text formatting"
   />
-</ForwardRef(Modal)>
+</Modal>
 `;
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`;

package/src/components/layout/index.js

@@ -16,7 +16,7 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -239,7 +239,6 @@ function Layout( { styles } ) {
 						{ isMobileViewport && sidebarIsOpened && (
 							<ScrollLock />
 						) }
-						<BlockStyles.Slot scope="core/block-inspector" />
 					</>
 				}
 				footer={

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-<ForwardRef(Modal)
+<Modal
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -30,11 +30,11 @@ exports[`PreferencesModal should match snapshot when the modal is active large v
   >
     <Component />
   </TabPanel>
-</ForwardRef(Modal)>
+</Modal>
 `;
 
 exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-<ForwardRef(Modal)
+<Modal
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -386,5 +386,5 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
       </Card>
     </NavigatorScreen>
   </NavigatorProvider>
-</ForwardRef(Modal)>
+</Modal>
 `;

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

@@ -22,6 +22,7 @@ import {
 	__unstableUseTypingObserver as useTypingObserver,
 	__unstableBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
+	__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
 	__unstableEditorStyles as EditorStyles,
 	useSetting,
 	__experimentalLayoutStyle as LayoutStyle,
@@ -42,14 +43,7 @@ import { __ } from '@wordpress/i18n';
 import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( {
-	children,
-	contentRef,
-	shouldIframe,
-	styles,
-	assets,
-	style,
-} ) {
+function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	const ref = useMouseMoveTypingReset();
 
 	if ( ! shouldIframe ) {
@@ -71,7 +65,6 @@ function MaybeIframe( {
 	return (
 		<Iframe
 			head={ <EditorStyles styles={ styles } /> }
-			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
@@ -114,12 +107,9 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const { themeSupportsLayout, assets } = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			themeSupportsLayout: _settings.supportsLayout,
-			assets: _settings.__unstableResolvedAssets,
-		};
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().supportsLayout;
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
@@ -163,6 +153,7 @@ export default function VisualEditor( { styles } ) {
 	const contentRef = useMergeRefs( [
 		ref,
 		useClipboardHandler(),
+		useCanvasClickRedirect(),
 		useTypewriter(),
 		useTypingObserver(),
 		useBlockSelectionClearer(),
@@ -227,7 +218,6 @@ export default function VisualEditor( { styles } ) {
 						}
 						contentRef={ contentRef }
 						styles={ styles }
-						assets={ assets }
 						style={ { paddingBottom } }
 					>
 						{ themeSupportsLayout && ! isTemplateMode && (

package/src/editor.js

@@ -15,15 +15,17 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { StrictMode, useMemo } from '@wordpress/element';
-import { SlotFillProvider } from '@wordpress/components';
+import { KeyboardShortcuts, SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
+import preventEventDiscovery from './prevent-event-discovery';
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
+import EditPostSettings from './components/edit-post-settings';
 import { store as editPostStore } from './store';
 
 function Editor( {
@@ -125,9 +127,6 @@ function Editor( {
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			keepCaretInsideBlock,
-			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
-			// where we need to differentiate if a block is disabled by the user or some plugin.
-			defaultAllowedBlockTypes: settings.allowedBlockTypes,
 		};
 
 		// Omit hidden block types if exists and non-empty.
@@ -187,24 +186,29 @@ function Editor( {
 	return (
 		<StrictMode>
 			<ShortcutProvider>
-				<SlotFillProvider>
-					<EditorProvider
-						settings={ editorSettings }
-						post={ post }
-						initialEdits={ initialEdits }
-						useSubRegistry={ false }
-						__unstableTemplate={
-							isTemplateMode ? template : undefined
-						}
-						{ ...props }
-					>
-						<ErrorBoundary onError={ onError }>
-							<EditorInitialization postId={ postId } />
-							<Layout styles={ styles } />
-						</ErrorBoundary>
-						<PostLockedModal />
-					</EditorProvider>
-				</SlotFillProvider>
+				<EditPostSettings.Provider value={ settings }>
+					<SlotFillProvider>
+						<EditorProvider
+							settings={ editorSettings }
+							post={ post }
+							initialEdits={ initialEdits }
+							useSubRegistry={ false }
+							__unstableTemplate={
+								isTemplateMode ? template : undefined
+							}
+							{ ...props }
+						>
+							<ErrorBoundary onError={ onError }>
+								<EditorInitialization postId={ postId } />
+								<Layout styles={ styles } />
+								<KeyboardShortcuts
+									shortcuts={ preventEventDiscovery }
+								/>
+							</ErrorBoundary>
+							<PostLockedModal />
+						</EditorProvider>
+					</SlotFillProvider>
+				</EditPostSettings.Provider>
 			</ShortcutProvider>
 		</StrictMode>
 	);

package/src/prevent-event-discovery.js

@@ -0,0 +1,21 @@
+export default {
+	't a l e s o f g u t e n b e r g': ( event ) => {
+		const { ownerDocument } = event.target;
+		if (
+			! ownerDocument.activeElement.classList.contains(
+				'edit-post-visual-editor'
+			) &&
+			ownerDocument.activeElement !== ownerDocument.body
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		window.wp.data.dispatch( 'core/block-editor' ).insertBlock(
+			window.wp.blocks.createBlock( 'core/paragraph', {
+				content:
+					'🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️',
+			} )
+		);
+	},
+};