Remove the post permalink UI from the post title (#21099)

packages/base-styles/_variables.scss

@@ -75,7 +75,7 @@ $block-toolbar-height: $grid-unit-60;
 $mobile-block-toolbar-height: 44px;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
-$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
+$block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
 $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)

packages/block-editor/src/components/block-list/root-container.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -85,7 +90,7 @@ function RootContainer( { children, className, hasPopover = true }, ref ) {
 				{ hasPopover ? <BlockPopover /> : null }
 				<div
 					ref={ ref }
-					className={ className }
+					className={ classnames( className, 'is-root-container' ) }
 					onFocus={ onFocus }
 					onDragStart={ onDragStart }
 				>

packages/block-editor/src/components/block-list/style.scss

@@ -21,33 +21,6 @@
 	margin: 0;
 }
 
-/**
- * General Post Content Layout
- */
-
-// Add side padding for the main block container, currently post_content.
-// The purpose of this padding is to ensure that on small viewports, there is
-// room for the block border that sits 14px ($block-padding) offset from the
-// block footprint, as well as the side-UI.
-.block-editor-block-list__layout {
-	padding-left: $block-padding;
-	padding-right: $block-padding;
-	position: relative;
-
-	// Beyond the mobile breakpoint, compensate for side UI.
-	@include break-small() {
-		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-	}
-
-	// Don't propogate that padding to nested blocks.
-	.block-editor-block-list__layout {
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
-
 /**
  * Notices & Block Selected/Hover Styles.
  */
@@ -145,6 +118,7 @@
  */
 
 .block-editor-block-list__layout {
+	position: relative;
 
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
@@ -316,18 +290,6 @@
 		clear: both;
 	}
 
-	// Full-wide.
-	&[data-align="full"],
-	&.alignfull {
-		margin-left: -$block-padding;
-		margin-right: -$block-padding;
-
-		@include break-small() {
-			margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
-			margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
-		}
-	}
-
 	// Clear floats.
 	&[data-clear="true"] {
 		float: none;
@@ -669,3 +631,32 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+
+// Add side padding for the canvas, currently edit-post-visual-editor.
+// The purpose of this padding is to ensure that on small viewports, there is
+// room for the block border that sits 14px ($block-padding) offset from the
+// block footprint.
+.block-editor-block-list__layout.is-root-container {
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	@include break-small() {
+		padding-left: $block-side-ui-width;
+		padding-right: $block-side-ui-width;
+	}
+}
+
+.block-editor-block-list__layout.is-root-container {
+	// Full-wide. (to account for the padddings added above)
+	> .block-editor-block-list__block[data-align="full"],
+	> .block-editor-block-list__block.alignfull {
+		margin-left: -$block-padding;
+		margin-right: -$block-padding;
+
+		@include break-small() {
+			margin-left: -$block-side-ui-width;
+			margin-right: -$block-side-ui-width;
+		}
+	}
+}

packages/edit-post/src/components/text-editor/style.scss

@@ -5,7 +5,7 @@
 	flex-grow: 1;
 
 	// Always show outlines in code editor
-	.editor-post-title__block {
+	.editor-post-title {
 		textarea {
 			border: $border-width solid $light-gray-500;
 			margin-bottom: $block-spacing;
@@ -16,20 +16,8 @@
 				border: $border-width solid $black;
 			}
 		}
-	}
-
-	.editor-post-permalink {
-		margin-top: -6px;
 
-		// Hide the thick left border in the code editor.
-		box-shadow: none;
-		border: none;
-		outline: $border-width solid $dark-gray-primary;
-	}
-
-	@include break-small() {
-		.editor-post-title,
-		.editor-post-title__block {
+		@include break-small() {
 			padding: 0;
 		}
 	}

packages/edit-post/src/components/visual-editor/index.js

@@ -39,7 +39,9 @@ function VisualEditor() {
 					<WritingFlow>
 						<ObserveTyping>
 							<CopyHandler>
-								<PostTitle />
+								<div className="edit-post-visual-editor__post-title-wrapper">
+									<PostTitle />
+								</div>
 								<BlockList />
 							</CopyHandler>
 						</ObserveTyping>

packages/edit-post/src/components/visual-editor/style.scss

@@ -42,40 +42,27 @@
 	margin-right: auto;
 }
 
+// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks
+// .block-editor-block-list__layout and block-editor-block-list__block
+// We need to have two DOM elements.
+.edit-post-visual-editor__post-title-wrapper {
+	// This padding is needed to match the block root container padding
+	padding-left: $block-padding;
+	padding-right: $block-padding;
 
-// The base width of the title should match that of blocks even if it isn't a block.
-// @todo: This duplicates CSS from line 49 in block-list/style.scss, and should be
-// removed when the Title field becomes an actual block.
-.editor-post-title {
-	// Beyond the mobile breakpoint, compensate for side UI.
 	@include break-small() {
-		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
+		padding-left: $block-side-ui-width;
+		padding-right: $block-side-ui-width;
 	}
-}
-
-.edit-post-visual-editor .editor-post-title__block {
-	// Center.
-	margin-left: auto;
-	margin-right: auto;
 
-	// Apply default block margin below the post title.
-	// This ensures the first block on the page is in a good position.
-	// This rule can be retired once the title becomes an actual block.
-	margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
+	.editor-post-title {
+		// Center.
+		margin-left: auto;
+		margin-right: auto;
 
-	// Stack borders.
-	> div {
-		margin-left: 0;
-		margin-right: 0;
-	}
-
-	// Stretch to mimic outline padding on desktop.
-	// Note that we can't target the textarea as it can't be stretched.
-	@include break-small() {
-		> div {
-			margin-left: -$block-padding - $block-side-ui-clearance;
-			margin-right: -$block-padding - $block-side-ui-clearance;
-		}
+		// Apply default block margin below the post title.
+		// This ensures the first block on the page is in a good position.
+		// This rule can be retired once the title becomes an actual block.
+		margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
 	}
 }

packages/edit-site/src/components/block-editor/style.scss

@@ -1,4 +1,14 @@
 .edit-site-block-editor__block-list {
 	padding-bottom: $grid-unit-30;
 	padding-top: $grid-unit-30 + 5;
+
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	// Full-wide. (to account for the padddings added above)
+	.block-editor-block-list__block[data-align="full"],
+	.block-editor-block-list__block.alignfull {
+		margin-left: -$block-padding;
+		margin-right: -$block-padding;
+	}
 }

packages/edit-widgets/src/components/widget-area/style.scss

@@ -2,11 +2,6 @@
 	max-width: $widget-area-width;
 	margin: 0 auto 30px;
 
-	// Reduce padding inside widget areas
-	.block-editor-block-list__layout {
-		padding-left: $block-side-ui-width + $block-padding;
-		padding-right: $block-side-ui-width + $block-padding;
-	}
 	// By default the default block appender inserter has a negative position,
 	// but given that on the widget screen we have 0 padding we need to remove the negative position.
 	.block-editor-default-block-appender .block-editor-inserter,