Refactor nav block paddings/margins to inherit global styles. (#31878)

* Refactor nav block paddings/margins to inherit global styles.

* Fix color inheritance. Fix last-child margin.

* Use :where to minimize specificity.

* Move chevron inside link.

* Provide default paddings for submenus.

* Fix page list bug.

packages/block-library/src/navigation-link/edit.js

@@ -605,12 +605,12 @@ export default function NavigationLinkEdit( {
 							/>
 						</Popover>
 					) }
+					{ hasDescendants && showSubmenuIcon && (
+						<span className="wp-block-navigation-link__submenu-icon">
+							<ItemSubmenuIcon />
+						</span>
+					) }
 				</a>
-				{ hasDescendants && showSubmenuIcon && (
-					<span className="wp-block-navigation-link__submenu-icon">
-						<ItemSubmenuIcon />
-					</span>
-				) }
 				<ul { ...innerBlocksProps } />
 			</li>
 		</Fragment>

packages/block-library/src/navigation-link/index.php

@@ -199,14 +199,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$html .= '</span>';
 
-	$html .= '</a>';
-	// End anchor tag content.
-
 	if ( $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
+	$html .= '</a>';
+	// End anchor tag content.
+
 	if ( $has_submenu ) {
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {

packages/block-library/src/navigation/editor.scss

@@ -13,6 +13,11 @@
 	}
 }
 
+// This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
+.wp-block-navigation-link__label {
+	display: inline-block;
+}
+
 
 /**
  * Submenus.