Feature/tabs block

blocks/all.php

@@ -48,3 +48,4 @@ function ( array $categories ) {
 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';
+require_once plugin_dir_path( __FILE__ ) . 'tabs/class-tabs-block.php';

blocks/tabs/assets/_tabs.scss

@@ -0,0 +1,47 @@
+@use '/scss/globals';
+@use '/scss/extenders/container';
+
+@mixin render {
+	.tabs__outer-wrapper {
+		@extend %container__outer-wrapper;
+	}
+
+	.tabs__wrapper {
+		@extend %container__wrapper;
+	}
+
+	.tabs__wrapper--reduce-bottom-space {
+		@extend %container__wrapper--reduce-bottom-space;
+	}
+
+	.tabs__inner {
+		@extend %container__inner;
+	}
+
+	.tabs__tabs {
+		display: flex;
+	}
+
+	.tabs__tab-outer-wrapper,
+	.wp-block-acf-tabs-tab {
+		background-color: lightgray;
+	}
+
+	.tabs__tab {
+		padding: globals.$space-top globals.$space-right 0 globals.$space-left;
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.tabs__tab--active {
+		background-color: gray;
+	}
+
+	.tabs__pattern {
+		&[hidden],
+		&[aria-hidden="true"] {
+			display: none;
+		}
+	}
+}

blocks/tabs/assets/admin.js

@@ -0,0 +1,69 @@
+class Tabs extends AdminBlock {
+
+	setup() {
+		this.setActiveTab(parseInt(this.getAttribute('active_tab')));
+		this.setEventListeners();
+	}
+
+	setEventListeners() {
+		this.blockDiv.on(
+			'click',
+			'.tabs__tab',
+			(event) => {
+				const index = this.blockDiv.find('.tabs__tab').index(event.currentTarget);
+
+				this.capturePatterns();
+				this.setActiveTab(index);
+			}
+		);
+
+		this.addListener(
+			(path, originalValue, newValue) => {
+				// Check if path matches pattern: innerBlocks[n].attributes.data.field_tabs_block_pattern
+				const regex = /^innerBlocks\[\d+\]\.attributes\.data\.field_tabs_block_pattern$/;
+				if (!regex.test(path)) {
+					return;
+				}
+
+				this.capturePatterns();
+			}
+		);
+	}
+
+	setActiveTab(index) {
+		this.blockDiv.find('.tabs__tab').removeClass('tabs__tab--active');
+		this.blockDiv.find('.tabs__tab').eq(index).addClass('tabs__tab--active');
+		this.setAttribute('active_tab', index);
+	}
+
+	capturePatterns() {
+		this.loadBlock();
+
+		let patterns = [];
+
+		for (const i in this.block.innerBlocks) {
+			patterns[i] = '';
+			if (typeof this.block.innerBlocks[i].attributes == 'undefined') {
+				continue;
+			}
+			if (typeof this.block.innerBlocks[i].attributes.data == 'undefined') {
+				continue;
+			}
+			if (typeof this.block.innerBlocks[i].attributes.data.field_tabs_block_pattern !== 'undefined') {
+				patterns[i] = this.block.innerBlocks[i].attributes.data.field_tabs_block_pattern;
+			}
+			if (typeof this.block.innerBlocks[i].attributes.data.pattern !== 'undefined') {
+				patterns[i] = this.block.innerBlocks[i].attributes.data.pattern;
+			}
+		}
+
+		this.setAttribute('patterns', patterns.join(','));
+	}
+}
+
+new AdminBlockInitializer(
+	'.wp-block-acf-tabs',
+	(blockDiv) => {
+		window.mytest = new Tabs(blockDiv);
+	}
+);

blocks/tabs/assets/tabs.js

@@ -0,0 +1,57 @@
+class Tabs {
+
+	elements = {};
+
+	constructor(wrapper) {
+		this.loadElements(wrapper);
+		this.setTabActiveState();
+		this.addEventListeners();
+	}
+
+	loadElements(wrapper) {
+		this.elements.wrapper = wrapper;
+		this.elements.tab = wrapper.find('.tabs__tab');
+		this.elements.pattern = wrapper.next().find('.tabs__pattern');
+	}
+
+	setTabActiveState() {
+		this.elements.tab.removeClass('tabs__tab--active');
+		this.elements.pattern.prop('hidden', true);
+		this.elements.pattern.attr('aria-hidden', true);
+
+		const index = this.elements.wrapper.data('active-tab');
+		const tab = this.elements.tab.eq(index);
+		const pattern = this.elements.pattern.eq(index);
+
+		tab.addClass('tabs__tab--active');
+		pattern.prop('hidden', false);
+		pattern.attr('aria-hidden', false);
+	}
+
+	addEventListeners() {
+		this.elements.tab.on(
+			'click',
+			() => {
+				const index = this.elements.tab.index(event.currentTarget);
+				this.setActiveTab(index);
+				this.setTabActiveState();
+			}
+		);
+	}
+
+	setActiveTab(index) {
+		this.elements.wrapper.data('active-tab', index);
+	}
+}
+
+jQuery(document).ready(
+	() => {
+		const wrappers = jQuery('.tabs__wrapper');
+
+		wrappers.each(
+			(index) => {
+				new Tabs(wrappers.eq(index));
+			}
+		);
+	}
+);

blocks/tabs/class-tabs-block.php

@@ -0,0 +1,142 @@
+<?php
+/**
+ * Tabs block class.
+ *
+ * @package Creode Blocks
+ */
+
+namespace Creode_Blocks;
+
+/**
+ * Tabs block class.
+ *
+ * @wordpress-block-version 2.6.0
+ */
+class Tabs_Block extends Block {
+
+	use Trait_Block_Pattern_Options;
+	use Trait_Has_Reduce_Bottom_Space_Option;
+
+	/**
+	 * The blocks icon from https://developer.wordpress.org/resource/dashicons/ or an inline SVG.
+	 *
+	 * @var string
+	 */
+	protected $icon = 'table-row-after';
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function name(): string {
+		return 'tabs';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function label(): string {
+		return 'Tabs';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function additional_attributes(): array {
+		return array(
+			'active_tab' => array(
+				'type'    => 'number',
+				'default' => 0,
+			),
+			'patterns' => array(
+				'type'    => 'string',
+				'default' => array(),
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function child_blocks(): array {
+		return array(
+			new Child_Block(
+				'tab',
+				'Tab',
+				array(
+					array(
+						'key'     => 'field_tabs_block_pattern',
+						'name'    => 'pattern',
+						'label'   => 'Pattern',
+						'type'    => 'select',
+						'choices' => $this->get_block_pattern_choices(),
+					),
+				),
+				__DIR__ . '/templates/tab.php',
+				array(),
+				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" context="list-view" aria-hidden="true" focusable="false"><path d="M19 6H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM6 17.5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5h3v10H6zm13.5-.5c0 .3-.2.5-.5.5h-3v-10h3c.3 0 .5.2.5.5v9z"></path></svg>',
+				array(
+					'mode'  => false,
+					'color' => array(
+						'text'       => false,
+						'background' => true,
+					),
+				)
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function template(): string {
+		return __DIR__ . '/templates/block.php';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function use_default_wrapper_template(): bool {
+		return false;
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function supports(): array {
+		return array(
+			'mode'  => false,
+			'color' => array(
+				'text'       => false,
+				'background' => true,
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function admin_scripts(): array {
+		return array(
+			new Script(
+				'tabs-block',
+				plugin_dir_url( __FILE__ ) . 'assets/admin.js',
+				array( 'jquery', 'admin-block-initializer', 'admin-block' ),
+				'1.0.0'
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function scripts(): array {
+		return array(
+			new Script(
+				'tabs-block',
+				plugin_dir_url( __FILE__ ) . 'assets/tabs.js',
+				array( 'jquery' ),
+				'1.0.0'
+			),
+		);
+	}
+}