Feature/site header block

blocks/all.php

@@ -43,5 +43,8 @@ function ( array $categories ) {
 
 // Load optional blocks.
 require_once plugin_dir_path( __FILE__ ) . 'legacy/header/class-header-block.php';
+require_once plugin_dir_path( __FILE__ ) . 'site-header/class-site-header-block.php';
+require_once plugin_dir_path( __FILE__ ) . 'desktop-menu/class-desktop-menu-block.php';
+require_once plugin_dir_path( __FILE__ ) . 'mobile-menu/class-mobile-menu-block.php';
 require_once plugin_dir_path( __FILE__ ) . 'post-listing/class-post-listing-block.php';
 require_once plugin_dir_path( __FILE__ ) . 'search-and-filter/class-search-and-filter-block.php';

blocks/desktop-menu/assets/_desktop-menu.scss

@@ -0,0 +1,23 @@
+@use '/scss/globals';
+
+@mixin render {
+	.desktop-menu__wrapper {
+		& > ul {
+			display: flex;
+			flex-wrap: wrap;
+			gap: globals.$space-vertical globals.$space-horizontal;
+			margin: 0;
+			padding: 0;
+			list-style-type: none;
+
+			& > li {
+				margin: 0;
+				padding: 0;
+
+				& > a {
+					display: block;
+				}
+			}
+		}
+	}
+}

blocks/desktop-menu/class-desktop-menu-block.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Desktop Menu block class.
+ *
+ * @package Creode Blocks
+ */
+
+namespace Creode_Blocks;
+
+/**
+ * Desktop Menu block class.
+ *
+ * @wordpress-block-version 1.10.1
+ */
+class Desktop_Menu_Block extends Block {
+
+	use Trait_Restrict_To_Site_Editor;
+	use Trait_Menu_Integration;
+
+	/**
+	 * The blocks icon from https://developer.wordpress.org/resource/dashicons/ or an inline SVG.
+	 *
+	 * @var string
+	 */
+	protected $icon = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14.5c-3.6 0-6.5-2.9-6.5-6.5S8.4 5.5 12 5.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5zM9 16l4.5-3L15 8.4l-4.5 3L9 16z"></path></svg>';
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function name(): string {
+		return 'desktop-menu';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function label(): string {
+		return 'Desktop Menu';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function fields(): array {
+		return array(
+			array(
+				'key'     => 'field_desktop_menu_block_menu_location',
+				'name'    => 'menu_location',
+				'label'   => 'Menu',
+				'type'    => 'select',
+				'choices' => $this->get_menu_choices(),
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function template(): string {
+		return __DIR__ . '/templates/block.php';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function use_default_wrapper_template(): bool {
+		return false;
+	}
+}

blocks/desktop-menu/templates/block.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Desktop Menu block template file.
+ *
+ * @package Creode Blocks
+ */
+
+namespace Creode_Blocks;
+
+/**
+ * The block instance.
+ *
+ * @var Desktop_Menu_Block
+ */
+$block = Helpers::get_block_by_name( 'desktop-menu' );
+
+$menu_location = $block->get_field( 'menu_location' );
+?>
+
+<div class="desktop-menu__wrapper">
+	<?php if ( empty( $menu_location ) ) : ?>
+		Please select a menu.
+	<?php else : ?>
+		<?php $block->render_menu_by_location( $menu_location ); ?>
+	<?php endif; ?>
+</div>

blocks/mobile-menu/assets/_mobile-menu.scss

@@ -0,0 +1,75 @@
+@use '/scss/globals';
+
+@mixin render {
+	.mobile-menu__wrapper {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		padding: globals.$space-vertical globals.$space-horizontal;
+	}
+
+	.mobile-menu__toggle-wrapper {
+		display: flex;
+		justify-content: flex-end;
+		padding-bottom: globals.$space-vertical;
+	}
+
+	.mobile-menu__toggle {
+		display: block;
+		position: relative;
+		width: 40px;
+		height: 40px;
+		overflow: hidden;
+		background-color: grey;
+		border: none;
+		font-size: 0;
+		text-indent: 100px;
+		white-space: nowrap;
+		cursor: pointer;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: 20px;
+			height: 20px;
+			background-color: black;
+			mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%207.1210938%200.7265625%20L%203.7265625%204.1210938%20L%2015.605469%2016%20L%203.7265625%2027.878906%20L%207.1210938%2031.273438%20L%2019%2019.394531%20L%2030.878906%2031.273438%20L%2034.273438%2027.878906%20L%2022.394531%2016%20L%2034.273438%204.1210938%20L%2030.878906%200.7265625%20L%2019%2012.605469%20L%207.1210938%200.7265625%20z%20%22%20%2F%3E%3C%2Fsvg%3E');
+			mask-size: 100%;
+			mask-position: center;
+			mask-repeat: no-repeat;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.mobile-menu__inner {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		margin-bottom: calc(globals.$space-bottom * -1);
+
+		& > *  {
+			margin-bottom: globals.$space-bottom;
+		}
+
+		ul {
+			display: flex;
+			flex-direction: column;
+			margin: 0;
+			padding: 0;
+			gap: globals.$space-vertical globals.$space-horizontal;
+			list-style-type: none;
+
+			& > li {
+				margin: 0;
+				padding: 0;
+
+				& > a {
+					display: block;
+				}
+			}
+		}
+	}
+}

blocks/mobile-menu/assets/mobile-menu.js

@@ -0,0 +1,74 @@
+/**
+ * @class Mobile_Menu
+ * @classdesc
+ *   Manages the behavior of a mobile menu component.
+ *   Provides the ability to close the menu via the internal toggle element.
+ *   Triggers a 'mobile_menu_toggle' event, which can be handled externally to show or hide the menu.
+ */
+class Mobile_Menu {
+
+	/**
+	 * Stores references to relevant DOM elements for the mobile menu.
+	 * @type {Object}
+	 * @property {jQuery} wrapper - The top-level menu wrapper element.
+	 * @property {jQuery} toggle  - The toggle element used to trigger menu open/close.
+	 */
+	elements = {};
+
+	/**
+	 * Creates an instance of Mobile_Menu.
+	 * @param {jQuery} wrapper - The jQuery object representing the menu's wrapper element.
+	 */
+	constructor(wrapper) {
+		this.loadElements(wrapper);   // Cache relevant DOM elements.
+		this.initializeToggle();      // Attach event listeners to the toggle.
+	}
+
+	/**
+	 * Caches references to important DOM elements within the menu wrapper.
+	 *
+	 * @param {jQuery} wrapper - The menu's outer wrapper element.
+	 */
+	loadElements(wrapper) {
+		this.elements.wrapper = wrapper;
+		this.elements.toggle = wrapper.find('.mobile-menu__toggle');
+	}
+
+	/**
+	 * Sets up the event listener for the toggle element.
+	 * When clicked, it calls the toggle() method to trigger the menu event.
+	 */
+	initializeToggle() {
+		this.elements.toggle.on(
+			'click',
+			() => {
+				this.toggle();
+			}
+		);
+	}
+
+	/**
+	 * Triggers a global event to toggle the mobile menu's state.
+	 * Separate scripts should listen for the 'mobile_menu_toggle' event and handle show/hide logic.
+	 */
+	toggle() {
+		jQuery(window).trigger('mobile_menu_toggle');
+	}
+}
+
+jQuery(document).ready(
+	() => {
+		// Store all Mobile_Menu instances globally for potential later access.
+		window.mobileMenu = [];
+
+		// Find all menu wrappers on the page.
+		let wrappers = jQuery('.mobile-menu__wrapper');
+
+		// Instantiate a Mobile_Menu controller for each wrapper found.
+		wrappers.each(
+			(index) => {
+				window.mobileMenu.push(new Mobile_Menu(wrappers.eq(index)));
+			}
+		);
+	}
+);

blocks/mobile-menu/class-mobile-menu-block.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * Mobile Menu block class.
+ *
+ * @package Creode Blocks
+ */
+
+namespace Creode_Blocks;
+
+/**
+ * Mobile Menu block class.
+ *
+ * @wordpress-block-version 1.10.1
+ */
+class Mobile_Menu_Block extends Block {
+
+	use Trait_Restrict_To_Site_Editor;
+	use Trait_Menu_Integration;
+
+	/**
+	 * The blocks icon from https://developer.wordpress.org/resource/dashicons/ or an inline SVG.
+	 *
+	 * @var string
+	 */
+	protected $icon = 'menu';
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function name(): string {
+		return 'mobile-menu';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function label(): string {
+		return 'Mobile Menu';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function child_blocks(): array {
+		return array(
+			new Child_Block(
+				'menu',
+				'Menu',
+				array(
+					array(
+						'key'     => 'field_mobile_menu_block_menu_location',
+						'name'    => 'menu_location',
+						'label'   => 'Menu',
+						'type'    => 'select',
+						'choices' => $this->get_menu_choices(),
+					),
+				),
+				__DIR__ . '/templates/menu.php',
+				array(),
+				'menu'
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function template(): string {
+		return __DIR__ . '/templates/block.php';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function use_default_wrapper_template(): bool {
+		return false;
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function setup(): bool {
+		$this->register_script();
+		return parent::setup();
+	}
+
+	/**
+	 * Registers the mobile-menu JavaScript file.
+	 */
+	protected function register_script() {
+		add_action(
+			'wp_enqueue_scripts',
+			function () {
+				wp_register_script(
+					'mobile_menu',
+					plugin_dir_url( __FILE__ ) . 'assets/mobile-menu.js',
+					array(
+						'jquery',
+					),
+					1,
+					true
+				);
+			}
+		);
+	}
+}