New Block: Local Navigation container (#404)

mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss

@@ -341,4 +341,9 @@
 		left: 0;
 		right: 0;
 	}
+
+	/* Hide the global header when other menus are open. */
+	html.has-modal-open:not(.has-global-modal-open) .global-header {
+		display: none;
+	}
 }

mu-plugins/blocks/local-navigation-bar/index.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * Block Name: Local Navigation Bar
+ * Description: A special block to handle the local navigation on pages in a section.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\MU_Plugins\LocalNavigationBar_Block;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+add_filter( 'render_block_data', __NAMESPACE__ . '\update_block_attributes' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+
+	// Add the Brush Stroke block style.
+	register_block_style(
+		'wporg/local-navigation-bar',
+		array(
+			'name'         => 'brush-stroke',
+			'label'        => __( 'Brush Stroke', 'wporg' ),
+		)
+	);
+}
+
+/**
+ * Render the block content.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Inject the default block values. In the editor, these are read from block.json.
+ * See https://github.com/WordPress/gutenberg/issues/50229.
+ *
+ * @param array $block The parsed block data.
+ *
+ * @return array
+ */
+function update_block_attributes( $block ) {
+	if ( ! empty( $block['blockName'] ) && 'wporg/local-navigation-bar' === $block['blockName'] ) {
+		// Always override alignment.
+		$block['attrs']['align'] = 'full';
+
+		// Set layout values if they don't exist.
+		$default_layout = array(
+			'type' => 'flex',
+			'flexWrap' => 'wrap',
+			'justifyContent' => 'space-between',
+		);
+		if ( ! empty( $block['attrs']['layout'] ) ) {
+			$block['attrs']['layout'] = array_merge( $default_layout, $block['attrs']['layout'] );
+		} else {
+			$block['attrs']['layout'] = $default_layout;
+		}
+
+		// Set position if it doesn't exist (functionally this will always be
+		// sticky, unless different positions are added).
+		if ( empty( $block['attrs']['style']['position'] ) ) {
+			$block['attrs']['style']['position'] = array(
+				'type' => 'sticky',
+			);
+		}
+	}
+
+	return $block;
+}

mu-plugins/blocks/local-navigation-bar/postcss/editor-style.pcss

@@ -0,0 +1,3 @@
+.wp-block-wporg-local-navigation-bar .block-editor-inner-blocks {
+	width: 100%;
+}

mu-plugins/blocks/local-navigation-bar/postcss/style.pcss

@@ -0,0 +1,68 @@
+:where(.wp-block-wporg-local-navigation-bar) {
+	background-color: var(--wp--preset--color--blueberry-1);
+	color: var(--wp--preset--color--white);
+
+	padding-right: var(--wp--preset--spacing--edge-space);
+	padding-left: var(--wp--preset--spacing--edge-space);
+	padding-top: 16px;
+	padding-bottom: 16px;
+
+	top: var(--wp-global-header-offset, 0);
+}
+
+.wp-block-wporg-local-navigation-bar {
+	& > *:nth-child(3) {
+		flex-basis: 100%;
+	}
+
+	/* Reset the sticky position on small screens. */
+	@media (max-width: 889px) {
+		position: static !important;
+	}
+
+	&.is-style-brush-stroke {
+		position: sticky;
+		padding-bottom: 0 !important; /* Override element style */
+
+		&::before {
+			content: "";
+			min-height: var(--wp--custom--brush-stroke--spacing--height, 16px);
+			position: absolute;
+			top: 100%;
+			left: 0;
+			right: 0;
+			width: auto;
+			mask-image: url(../images/brush-stroke-mask.svg);
+			mask-repeat: no-repeat;
+			mask-size: cover;
+			mask-position: bottom right;
+			background-color: inherit;
+		}
+	}
+
+	/* Make sure breadcrumbs inherit the set text color */
+	& .wp-block-wporg-site-breadcrumbs {
+		& a {
+			color: inherit;
+		}
+	}
+
+	& .wp-block-navigation .wp-block-navigation__submenu-container {
+		top: calc(100% + 10px) !important;
+		left: auto !important;
+		right: 0 !important;
+
+		& .wp-block-navigation-item {
+			display: block;
+		}
+
+		& .wp-block-navigation__submenu-icon {
+			display: none;
+		}
+
+		& .wp-block-navigation__submenu-container {
+			border: none;
+			margin-left: 8px;
+		}
+	}
+}

mu-plugins/blocks/local-navigation-bar/src/block.json

@@ -0,0 +1,87 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/local-navigation-bar",
+	"title": "Local Navigation Bar",
+	"icon": "ellipsis",
+	"category": "layout",
+	"description": "A special block to handle the local navigation on pages in a section.",
+	"textdomain": "wporg",
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "full"
+		},
+		"backgroundColor": {
+			"type": "string",
+			"default": "blueberry-1"
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"justifyContent": "space-between"
+			}
+		},
+		"style": {
+			"type": "object",
+			"default": {
+				"spacing": {
+					"padding": {
+						"right": "var:preset|spacing|60",
+						"left": "var:preset|spacing|60",
+						"top": "16px",
+						"bottom": "16px"
+					}
+				},
+				"position": {
+					"type": "sticky"
+				}
+			}
+		},
+		"textColor": {
+			"type": "string",
+			"default": "white"
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"text": true,
+			"background": true,
+			"link": true
+		},
+		"position": {
+			"sticky": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": true,
+				"padding": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"__experimentalLayout": true
+	},
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor-style.css",
+	"style": "file:./style.css"
+}

mu-plugins/blocks/local-navigation-bar/src/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+function Edit() {
+	return (
+		<div { ...useBlockProps() }>
+			<InnerBlocks
+				template={ [
+					[ 'wporg/site-breadcrumbs' ],
+					[
+						'core/navigation',
+						{
+							openSubmenusOnClick: true,
+							overlayMenu: 'never',
+							overlayBackgroundColor: 'blueberry-1',
+							overlayTextColor: 'white',
+							layout: { type: 'flex', justifyContent: 'right' },
+						},
+					],
+				] }
+			/>
+		</div>
+	);
+}
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => {
+		return <InnerBlocks.Content />;
+	},
+} );

mu-plugins/loader.php

@@ -1,5 +1,7 @@
 <?php
+
 namespace WordPressdotorg\MU_Plugins;
+
 use WordPressdotorg\Autoload;
 
 /**
@@ -28,6 +30,7 @@
 require_once __DIR__ . '/blocks/global-header-footer/blocks.php';
 require_once __DIR__ . '/blocks/horizontal-slider/horizontal-slider.php';
 require_once __DIR__ . '/blocks/language-suggest/language-suggest.php';
+require_once __DIR__ . '/blocks/local-navigation-bar/index.php';
 require_once __DIR__ . '/blocks/latest-news/latest-news.php';
 require_once __DIR__ . '/blocks/link-wrapper/index.php';
 require_once __DIR__ . '/blocks/notice/index.php';