@wordpress/edit-post 5.0.3 → 5.0.4

package/build-style/style.css

@@ -163,12 +163,18 @@
 .interface-complementary-area p {
   margin-top: 0;
 }
-.interface-complementary-area h2,
-.interface-complementary-area h3 {
+.interface-complementary-area h2 {
   font-size: 13px;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+.interface-complementary-area h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
 .interface-complementary-area hr {
   border-top: none;
   border-bottom: 1px solid #f0f0f0;
@@ -1317,38 +1323,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   .edit-post-preferences-modal .components-modal__content::before {
     content: none;
   }
-}
-.edit-post-preferences-modal .components-navigation {
-  padding: 0;
-  max-height: 100%;
-  overflow-y: auto;
-  color: #000;
-}
-.edit-post-preferences-modal .components-navigation > * {
-  padding: 24px 32px;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu {
-  margin: 0;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button {
-  padding: 3px 16px;
-  height: 48px;
-  margin: 0 -16px;
-  width: calc(32px + 100%);
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:focus {
-  font-weight: 500;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__menu-title-heading {
-  border-bottom: 1px solid #ddd;
-  padding-left: 0;
-  padding-right: 0;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button {
-  padding-left: 0;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .edit-post-preferences-modal__custom-fields-confirmation-button {
-  width: auto;
+  .edit-post-preferences-modal .components-navigator-provider {
+    height: 100%;
+  }
 }
 .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs {
   position: absolute;
@@ -1381,6 +1358,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-preferences-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;
+  margin-top: 0;
 }
 .edit-post-preferences-modal__option .components-base-control .components-base-control__field {
   align-items: center;
@@ -1678,8 +1656,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 h2.edit-post-template-summary__title {
-  margin: 0;
   line-height: 24px;
+  margin: 0 0 4px;
+  font-weight: 500;
 }
 
 .edit-post-text-editor {
@@ -1767,10 +1746,13 @@ h2.edit-post-template-summary__title {
   padding: 6px;
 }
 
+.edit-post-visual-editor__post-title-wrapper {
+  margin-top: 4rem;
+  margin-bottom: var(--wp--style--block-gap);
+}
 .edit-post-visual-editor__post-title-wrapper .editor-post-title {
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: var(--wp--style--block-gap, 0);
 }
 
 .edit-post-visual-editor__exit-template-mode {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "5.0.3",
+	"version": "5.0.4",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,29 +28,29 @@
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
 		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.3",
-		"@wordpress/block-editor": "^7.0.3",
-		"@wordpress/block-library": "^6.0.1",
-		"@wordpress/blocks": "^11.1.1",
-		"@wordpress/components": "^18.0.0",
-		"@wordpress/compose": "^5.0.3",
-		"@wordpress/core-data": "^4.0.3",
-		"@wordpress/data": "^6.1.1",
-		"@wordpress/data-controls": "^2.2.4",
-		"@wordpress/editor": "^12.0.0",
-		"@wordpress/element": "^4.0.2",
+		"@wordpress/api-fetch": "^5.2.4",
+		"@wordpress/block-editor": "^7.0.4",
+		"@wordpress/block-library": "^6.0.2",
+		"@wordpress/blocks": "^11.1.2",
+		"@wordpress/components": "^19.0.0",
+		"@wordpress/compose": "^5.0.4",
+		"@wordpress/core-data": "^4.0.4",
+		"@wordpress/data": "^6.1.2",
+		"@wordpress/data-controls": "^2.2.5",
+		"@wordpress/editor": "^12.0.1",
+		"@wordpress/element": "^4.0.3",
 		"@wordpress/hooks": "^3.2.1",
 		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.0",
-		"@wordpress/interface": "^4.1.1",
-		"@wordpress/keyboard-shortcuts": "^3.0.3",
+		"@wordpress/icons": "^6.0.1",
+		"@wordpress/interface": "^4.1.2",
+		"@wordpress/keyboard-shortcuts": "^3.0.4",
 		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/media-utils": "^3.0.2",
-		"@wordpress/notices": "^3.2.4",
-		"@wordpress/plugins": "^4.0.3",
-		"@wordpress/primitives": "^3.0.2",
+		"@wordpress/media-utils": "^3.0.3",
+		"@wordpress/notices": "^3.2.5",
+		"@wordpress/plugins": "^4.0.4",
+		"@wordpress/primitives": "^3.0.3",
 		"@wordpress/url": "^3.2.3",
-		"@wordpress/viewport": "^4.0.3",
+		"@wordpress/viewport": "^4.0.4",
 		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
+	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
 }

package/src/components/header/fullscreen-mode-close/index.js

@@ -7,12 +7,17 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Button, Icon } from '@wordpress/components';
+import {
+	Button,
+	Icon,
+	__unstableMotion as motion,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { wordpress } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -44,15 +49,26 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		[]
 	);
 
+	const disableMotion = useReducedMotion();
+
 	if ( ! isActive || ! postType ) {
 		return null;
 	}
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
+	const effect = {
+		expand: {
+			scale: 1.7,
+			borderRadius: 0,
+			transition: { type: 'tween', duration: '0.2' },
+		},
+	};
+
 	if ( siteIconUrl ) {
 		buttonIcon = (
-			<img
+			<motion.img
+				variants={ ! disableMotion && effect }
 				alt={ __( 'Site Icon' ) }
 				className="edit-post-fullscreen-mode-close_site-icon"
 				src={ siteIconUrl }
@@ -70,19 +86,25 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 	}
 
 	return (
-		<Button
-			className="edit-post-fullscreen-mode-close has-icon"
-			href={
-				href ??
-				addQueryArgs( 'edit.php', {
-					post_type: postType.slug,
-				} )
-			}
-			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
-			showTooltip={ showTooltip }
-		>
-			{ buttonIcon }
-		</Button>
+		<motion.div whileHover="expand">
+			<Button
+				className="edit-post-fullscreen-mode-close has-icon"
+				href={
+					href ??
+					addQueryArgs( 'edit.php', {
+						post_type: postType.slug,
+					} )
+				}
+				label={ get(
+					postType,
+					[ 'labels', 'view_items' ],
+					__( 'Back' )
+				) }
+				showTooltip={ showTooltip }
+			>
+				{ buttonIcon }
+			</Button>
+		</motion.div>
 	);
 }
 

package/src/components/layout/index.native.js

@@ -91,7 +91,13 @@ class Layout extends Component {
 	}
 
 	renderHTML() {
-		return <HTMLTextInput parentHeight={ this.state.rootViewHeight } />;
+		const { globalStyles } = this.props;
+		return (
+			<HTMLTextInput
+				parentHeight={ this.state.rootViewHeight }
+				style={ globalStyles }
+			/>
+		);
 	}
 
 	renderVisual() {

package/src/components/preferences-modal/index.js

@@ -13,12 +13,14 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalText as Text,
 	__experimentalTruncate as Truncate,
 	FlexItem,
 	Modal,
 	TabPanel,
 	Button,
 	Card,
+	CardHeader,
 	CardBody,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
@@ -325,10 +327,10 @@ export default function PreferencesModal() {
 		);
 	} else {
 		modalContent = (
-			<Card isBorderless>
-				<CardBody>
-					<NavigatorProvider initialPath="/">
-						<NavigatorScreen path="/">
+			<NavigatorProvider initialPath="/">
+				<NavigatorScreen path="/">
+					<Card isBorderless size="small">
+						<CardBody>
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
@@ -358,12 +360,21 @@ export default function PreferencesModal() {
 									);
 								} ) }
 							</ItemGroup>
-						</NavigatorScreen>
-						{ sections.map( ( section ) => {
-							return (
-								<NavigatorScreen
-									key={ `${ section.name }-menu` }
-									path={ section.name }
+						</CardBody>
+					</Card>
+				</NavigatorScreen>
+				{ sections.map( ( section ) => {
+					return (
+						<NavigatorScreen
+							key={ `${ section.name }-menu` }
+							path={ section.name }
+						>
+							<Card isBorderless size="large">
+								<CardHeader
+									isBorderless={ false }
+									justify="left"
+									size="small"
+									gap="6"
 								>
 									<NavigationButton
 										path="/"
@@ -374,17 +385,15 @@ export default function PreferencesModal() {
 										aria-label={ __(
 											'Navigate to the previous view'
 										) }
-									>
-										{ __( 'Back' ) }
-									</NavigationButton>
-									<h2>{ section.tabLabel }</h2>
-									{ section.content }
-								</NavigatorScreen>
-							);
-						} ) }
-					</NavigatorProvider>
-				</CardBody>
-			</Card>
+									/>
+									<Text size="16">{ section.tabLabel }</Text>
+								</CardHeader>
+								<CardBody>{ section.content }</CardBody>
+							</Card>
+						</NavigatorScreen>
+					);
+				} ) }
+			</NavigatorProvider>
 		);
 	}
 	return (

package/src/components/preferences-modal/style.scss

@@ -14,7 +14,7 @@ $vertical-tabs-width: 160px;
 		height: 70%;
 	}
 
-	// Clears spacing to flush fit the navigation component to the modal edges.
+	// Clears spacing to flush fit the navigator component to the modal edges.
 	@media (max-width: #{ ($break-medium - 1) }) {
 		.components-modal__content {
 			padding: 0;
@@ -23,45 +23,10 @@ $vertical-tabs-width: 160px;
 				content: none;
 			}
 		}
-	}
-
-	.components-navigation {
-		padding: 0;
-		max-height: 100%;
-		overflow-y: auto;
-		color: $black;
-
-		> * {
-			// Matches spacing cleared from the modal content element.
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		.components-navigation__menu {
-			margin: 0;
-
-			.components-navigation__item {
-				& > button {
-					padding: 3px $grid-unit-20;
-					height: $grid-unit-60;
-					// Aligns button text instead of button box.
-					margin: 0 #{-$grid-unit-20};
-					width: calc(#{$grid-unit-40} + 100%);
-					&:focus {
-						font-weight: 500;
-					}
-				}
-			}
-			.components-navigation__menu-title-heading {
-				border-bottom: 1px solid $gray-300;
-				padding-left: 0;
-				padding-right: 0;
-			}
-			.components-navigation__back-button {
-				padding-left: 0;
-			}
-			.edit-post-preferences-modal__custom-fields-confirmation-button {
-				width: auto;
-			}
+		// Keep the navigator component from overflowing the modal content area
+		// to ensure that sticky position elements stick where intended.
+		.components-navigator-provider {
+			height: 100%;
 		}
 	}
 
@@ -102,6 +67,7 @@ $vertical-tabs-width: 160px;
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;
+		margin-top: 0;
 	}
 
 	&__option {

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

@@ -40,16 +40,17 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
   onRequestClose={[Function]}
   title="Preferences"
 >
-  <Card
-    isBorderless={true}
+  <NavigatorProvider
+    initialPath="/"
   >
-    <CardBody>
-      <NavigatorProvider
-        initialPath="/"
+    <NavigatorScreen
+      path="/"
+    >
+      <Card
+        isBorderless={true}
+        size="small"
       >
-        <NavigatorScreen
-          path="/"
-        >
+        <CardBody>
           <ItemGroup>
             <NavigationButton
               as={
@@ -169,10 +170,22 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
               </HStack>
             </NavigationButton>
           </ItemGroup>
-        </NavigatorScreen>
-        <NavigatorScreen
-          key="general-menu"
-          path="general"
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
+      key="general-menu"
+      path="general"
+    >
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
           <NavigationButton
             aria-label="Navigate to the previous view"
@@ -188,12 +201,14 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             }
             isBack={true}
             path="/"
+          />
+          <Text
+            size="16"
           >
-            Back
-          </NavigationButton>
-          <h2>
             General
-          </h2>
+          </Text>
+        </CardHeader>
+        <CardBody>
           <Section
             description="Customize options related to the block editor interface and editing flow."
             title="Appearance"
@@ -224,10 +239,22 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
               label="Display block breadcrumbs"
             />
           </Section>
-        </NavigatorScreen>
-        <NavigatorScreen
-          key="blocks-menu"
-          path="blocks"
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
+      key="blocks-menu"
+      path="blocks"
+    >
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
           <NavigationButton
             aria-label="Navigate to the previous view"
@@ -243,12 +270,14 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             }
             isBack={true}
             path="/"
+          />
+          <Text
+            size="16"
           >
-            Back
-          </NavigationButton>
-          <h2>
             Blocks
-          </h2>
+          </Text>
+        </CardHeader>
+        <CardBody>
           <Section
             description="Customize how you interact with blocks in the block library and editing canvas."
             title="Block interactions"
@@ -270,10 +299,22 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           >
             <WithSelect(BlockManager) />
           </Section>
-        </NavigatorScreen>
-        <NavigatorScreen
-          key="panels-menu"
-          path="panels"
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
+      key="panels-menu"
+      path="panels"
+    >
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
           <NavigationButton
             aria-label="Navigate to the previous view"
@@ -289,12 +330,14 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             }
             isBack={true}
             path="/"
+          />
+          <Text
+            size="16"
           >
-            Back
-          </NavigationButton>
-          <h2>
             Panels
-          </h2>
+          </Text>
+        </CardHeader>
+        <CardBody>
           <Section
             description="Choose what displays in the panel."
             title="Document settings"
@@ -339,9 +382,9 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             description="Add extra areas to the editor."
             title="Additional"
           />
-        </NavigatorScreen>
-      </NavigatorProvider>
-    </CardBody>
-  </Card>
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+  </NavigatorProvider>
 </Modal>
 `;

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -65,6 +65,7 @@ export default function ListViewSidebar() {
 				<ListView
 					onSelect={ selectEditorBlock }
 					showNestedBlocks
+					__experimentalFeatures
 					__experimentalPersistentListViewFeatures
 				/>
 			</div>

package/src/components/sidebar/template-summary/index.js

@@ -22,7 +22,7 @@ function TemplateSummary() {
 
 	return (
 		<PanelBody>
-			<Flex align="flex-start">
+			<Flex align="flex-start" gap="3">
 				<FlexItem>
 					<Icon icon={ layout } />
 				</FlexItem>

package/src/components/sidebar/template-summary/style.scss

@@ -1,4 +1,5 @@
 h2.edit-post-template-summary__title {
-	margin: 0;
 	line-height: $icon-size;
+	margin: 0 0 $grid-unit-05;
+	font-weight: 500;
 }

package/src/components/visual-editor/style.scss

@@ -42,12 +42,11 @@
 		// Center.
 		margin-left: auto;
 		margin-right: auto;
-
-		// Margins between the title and the first block, or appender, do not collapse.
-		// However in that support block gap, the first items in post content do not have a top margin.
-		// By leveraging the gap variable, with a fallback of zero, we handle both cases.
-		margin-bottom: var(--wp--style--block-gap, 0);
 	}
+
+	// Add extra margin at the top, to push down the Title area in the post editor.
+	margin-top: 4rem;
+	margin-bottom: var(--wp--style--block-gap);
 }
 
 .edit-post-visual-editor__exit-template-mode {

package/src/hooks/validate-multiple-use/index.js

@@ -108,7 +108,7 @@ const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
 					),
 				] }
 			>
-				<strong>{ blockType.title }: </strong>
+				<strong>{ blockType?.title }: </strong>
 				{ __( 'This block can only be used once.' ) }
 			</Warning>,
 		];

package/src/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { store as blocksStore } from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
@@ -97,6 +98,7 @@ export function initializeEditor(
 		welcomeGuideTemplate: true,
 	} );
 
+	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
 	if ( process.env.GUTENBERG_PHASE === 2 ) {
 		__experimentalRegisterExperimentalCoreBlocks( {