added gallery block for frontend

.gitignore

@@ -28,3 +28,6 @@ node_modules/
 
 # dotenv environment variables file
 .env
+
+# component build files
+build

build/blocks-manifest.php

@@ -1,24 +0,0 @@
-<?php
-// This file is generated. Do not modify it manually.
-return array(
-	'theatergf-gallery' => array(
-		'$schema' => 'https://schemas.wp.org/trunk/block.json',
-		'apiVersion' => 3,
-		'name' => 'theatergf/theatergf-gallery',
-		'version' => '0.1.0',
-		'title' => 'Gallery',
-		'category' => 'media',
-		'example' => array(
-			
-		),
-		'supports' => array(
-			'html' => false
-		),
-		'textdomain' => 'theatergf-gallery',
-		'editorScript' => 'file:./index.js',
-		'editorStyle' => 'file:./index.css',
-		'style' => 'file:./style-index.css',
-		'render' => 'file:./render.php',
-		'viewScript' => 'file:./view.js'
-	)
-);

build/theatergf-gallery/block.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://schemas.wp.org/trunk/block.json",
-  "apiVersion": 3,
-  "name": "theatergf/theatergf-gallery",
-  "version": "0.1.0",
-  "title": "Gallery",
-  "category": "media",
-  "example": {},
-  "supports": {
-    "html": false
-  },
-  "textdomain": "theatergf-gallery",
-  "editorScript": "file:./index.js",
-  "editorStyle": "file:./index.css",
-  "style": "file:./style-index.css",
-  "render": "file:./render.php",
-  "viewScript": "file:./view.js"
-}

build/theatergf-gallery/index-rtl.css

@@ -1 +0,0 @@
-.wp-block-theatergf-theatergf-gallery{border:1px dotted red}

build/theatergf-gallery/index.asset.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'cf9890b5e4d67862718c');

build/theatergf-gallery/index.css

@@ -1 +0,0 @@
-.wp-block-theatergf-theatergf-gallery{border:1px dotted red}

build/theatergf-gallery/index.js

@@ -1 +0,0 @@
-(()=>{"use strict";var r,e={640(){const r=window.wp.blocks,e=window.wp.i18n,t=window.wp.blockEditor,o=window.ReactJSXRuntime,l=JSON.parse('{"UU":"theatergf/theatergf-gallery"}');(0,r.registerBlockType)(l.UU,{edit:function(){return(0,o.jsx)("p",{...(0,t.useBlockProps)(),children:(0,e.__)("Gallery – hello from the editor!","theatergf-gallery")})}})}},t={};function o(r){var l=t[r];if(void 0!==l)return l.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,o),a.exports}o.m=e,r=[],o.O=(e,t,l,a)=>{if(!t){var i=1/0;for(p=0;p<r.length;p++){for(var[t,l,a]=r[p],n=!0,s=0;s<t.length;s++)(!1&a||i>=a)&&Object.keys(o.O).every(r=>o.O[r](t[s]))?t.splice(s--,1):(n=!1,a<i&&(i=a));if(n){r.splice(p--,1);var h=l();void 0!==h&&(e=h)}}return e}a=a||0;for(var p=r.length;p>0&&r[p-1][2]>a;p--)r[p]=r[p-1];r[p]=[t,l,a]},o.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={53:0,513:0};o.O.j=e=>0===r[e];var e=(e,t)=>{var l,a,[i,n,s]=t,h=0;if(i.some(e=>0!==r[e])){for(l in n)o.o(n,l)&&(o.m[l]=n[l]);if(s)var p=s(o)}for(e&&e(t);h<i.length;h++)a=i[h],o.o(r,a)&&r[a]&&r[a][0](),r[a]=0;return o.O(p)},t=globalThis.webpackChunktheatergf_gallery=globalThis.webpackChunktheatergf_gallery||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))})();var l=o.O(void 0,[513],()=>o(640));l=o.O(l)})();

build/theatergf-gallery/render.php

@@ -1,15 +0,0 @@
-<?php
-/**
- * PHP file to use when rendering the block type on the server to show on the front end.
- *
- * The following variables are exposed to the file:
- *     $attributes (array): The block attributes.
- *     $content (string): The block default content.
- *     $block (WP_Block): The block instance.
- *
- * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
- */
-?>
-<p <?php echo get_block_wrapper_attributes(); ?>>
-	<?php esc_html_e( 'Gallery – hello from a dynamic block!', 'theatergf-gallery' ); ?>
-</p>

build/theatergf-gallery/style-index-rtl.css

@@ -1 +0,0 @@
-.wp-block-theatergf-theatergf-gallery{background-color:#21759b;color:#fff;padding:2px}

build/theatergf-gallery/style-index.css

@@ -1 +0,0 @@
-.wp-block-theatergf-theatergf-gallery{background-color:#21759b;color:#fff;padding:2px}

build/theatergf-gallery/view.asset.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array(), 'version' => '58813c89e11ed1cf4a36');

build/theatergf-gallery/view.js

@@ -1 +0,0 @@
-console.log("Hello World! (from theatergf-theatergf-gallery block)");

package.json

@@ -18,6 +18,6 @@
 		"@wordpress/i18n": "latest"
 	},
 	"devDependencies": {
-		"@wordpress/scripts": "^31.6.0"
+		"@wordpress/scripts": "latest"
 	}
 }

src/theatergf-gallery/block.json

@@ -1,10 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"name": "theatergf/theatergf-gallery",
+	"name": "theatergf/gallery",
 	"version": "0.1.0",
 	"title": "Gallery",
 	"category": "media",
+	"icon": "dashicons-images",
 	"example": {},
 	"supports": {
 		"html": false

src/theatergf-gallery/edit.js

@@ -31,8 +31,8 @@ import './editor.scss';
  */
 export default function Edit() {
 	return (
-		<p { ...useBlockProps() }>
+		<theatergf-gallery { ...useBlockProps() }>
-			{ __( 'Gallery – hello from the editor!', 'theatergf-gallery' ) }
+			{ __( 'Gallery', 'theatergf-gallery' ) }
-		</p>
+		</theatergf-gallery>
 	);
 }

src/theatergf-gallery/render.php

@@ -9,7 +9,11 @@
  *
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
+
+$images = rest_do_request(new WP_REST_Request( 'GET', '/theatergf/gallery/v1/gallery'));
 ?>
-<p <?php echo get_block_wrapper_attributes(); ?>>
+<theatergf-gallery <?php echo get_block_wrapper_attributes(); ?>>
-	<?php esc_html_e( 'Gallery – hello from a dynamic block!', 'theatergf-gallery' ); ?>
+	<?php foreach ( $images->data as $img_src ): ?>
-</p>
+		<img src="<?= $img_src ?>">
+	<?php endforeach ?>
+</theatergf-gallery>

src/theatergf-gallery/style.scss

@@ -6,7 +6,5 @@
  */
 
 .wp-block-theatergf-theatergf-gallery {
-	background-color: #21759b;
+
-	color: #fff;
-	padding: 2px;
 }

src/theatergf-gallery/view.js

@@ -20,6 +20,251 @@
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
  */
 
-/* eslint-disable no-console */
+class RoundRobinCounter {
-console.log( 'Hello World! (from theatergf-theatergf-gallery block)' );
+
-/* eslint-enable no-console */
+	get count() { return this._count; }
+	set count(value) { this._count = value; }
+
+	get min() { return this._min; }
+	set min(value) {
+		if (this.count < value) {
+			this.count = this.max;
+		}
+		this._min = value;
+	}
+	get max() { return this._max; }
+	set max(value) {
+		if (this.count > value) {
+			this.count = this.min;
+		}
+		this._max = value;
+	}
+
+	constructor(min = 0, max = 0, value = 0) {
+		this._min = min;
+		this._max = max;
+
+		this._count = value;
+	}
+
+	increment() {
+		if (this.count == this.max) {
+			this.count = this.min
+		} else {
+			this.count += 1
+		}
+	}
+
+	decrement() {
+		if (this.count == this.min) {
+			this.count = this.max
+		} else {
+			this.count -= 1
+		}
+	}
+}
+
+class TheaterGFGalleryHTMLElement extends HTMLElement {
+
+	constructor() {
+		super();
+
+		this.current_slide = new RoundRobinCounter();
+
+		this.observer = new MutationObserver(() => this.update_gallery());
+
+		this.shadow = this.attachShadow({ mode: "open" });
+
+		this.container = document.createElement("div");
+		this.container.classList.add("container");
+
+		this.slide_container = document.createElement("div");
+		this.slide_container.classList.add("slide-container");
+
+		this.button_l = document.createElement("button");
+		this.button_l.classList.add("slide-button", "left");
+		this.button_l.innerHTML = `
+			<svg xmlns="http://www.w3.org/2000/svg"
+				 width="20"
+				 height="20"
+				 viewBox="0 0 20 20"
+				 fill="currentColor">
+				<path d="M13 5l-5 5 5 5-1 2-7-7 7-7z"/>
+			</svg>`;
+		this.button_l.addEventListener("click", () => { this.slide_left(); });
+
+		this.button_r = document.createElement("button");
+		this.button_r.classList.add("slide-button", "right");
+		this.button_r.innerHTML = `
+			<svg xmlns="http://www.w3.org/2000/svg"
+				 width="20"
+				 height="20"
+				 viewBox="0 0 20 20"
+				 fill="currentColor">
+				<path d="M7 5l5 5-5 5 1 2 7-7-7-7z"/>
+			</svg>`;
+		this.button_r.addEventListener("click", () => { this.slide_right(); });
+
+		this.slide_control = document.createElement("div");
+		this.slide_control.classList.add("slide-control");
+
+		this.container.appendChild(this.slide_container);
+		this.container.appendChild(this.button_l);
+		this.container.appendChild(this.button_r);
+		this.container.appendChild(this.slide_control);
+
+		this.update_gallery()
+
+		const style = document.createElement("style");
+		style.textContent = `
+			.container {
+				position: relative;
+				width: var(--wp--style--global--content-size);
+				aspect-ratio: 2/1;
+
+				overflow: hidden;
+			}
+
+			.slide-container {
+				height: 100%;
+
+				position: absolute;
+				left: 0px;
+				top: 0px;
+
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+			}
+
+			.slide {
+				height: 100%;
+				width: var(--wp--style--global--content-size);
+				flex-shrink: 0;
+			}
+
+			.slide-button {
+				width: 25px;
+				height: 25px;
+				position: absolute;
+				top: 50%;
+
+				background: rgba(255, 255, 255, 0.75);
+				border: white;
+				border-radius: 50%;
+			}
+			.slide-button.left {
+				left: 10px;
+			}
+			.slide-button.right {
+				right: 10px;
+			}
+			.slide-button svg {
+				position: relative;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+
+			.slide-control {
+				height: 20px;
+				padding: 5px 10px;
+
+				position: absolute;
+				bottom: 0px;
+				left: 50%;
+				transform: translateX(-50%);
+
+				background-color: var(--wp--preset--color--base);
+				background: black;
+
+				border-top-left-radius: 15px;
+				border-top-right-radius: 15px;
+
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+				gap: 5px;
+
+				align-items: center;
+			}
+
+			.dot {
+				width: 10px;
+				height: 10px;
+				background-color: var(--wp--preset--color--highlight-dark);
+
+				border: none;
+				border-radius: 50%;
+			}
+			.dot.selected {
+				background-color: var(--wp--preset--color--highlight-light);
+			}
+		`;
+
+		this.shadow.appendChild(style);
+		this.shadow.appendChild(this.container);
+	}
+
+	connectedCallback() {
+		this.observer.observe(this, { childList: true });
+	}
+
+	disconnectedCallback() {
+		this.observer.disconnect();
+	}
+
+	update_gallery() {
+		const children = [...this.children];
+
+		this.slide_container.replaceChildren();
+
+		children.forEach((img, idx) => {
+			const slide = img.cloneNode();
+			slide.classList.add("slide");
+
+			this.slide_container.appendChild(slide);
+			this.slide_control.appendChild(this.__create_control_dot(idx));
+		});
+
+		this.current_slide.max = children.length - 1;
+
+		this.__got_to_current_slide();
+	}
+
+	slide_left() {
+		this.current_slide.decrement();
+		this.__got_to_current_slide();
+	}
+	slide_right() {
+		this.current_slide.increment();
+		this.__got_to_current_slide();
+	}
+
+	__got_to_current_slide() {
+		const target_position = this.offsetWidth * this.current_slide.count;
+
+		this.slide_container.animate([
+			{ transform: `translateX(-${target_position}px)`}
+		], {
+			duration: 300,
+			fill: "forwards"
+		}).addEventListener("finish", () => {
+			this.slide_control.querySelector(".selected")?.classList?.remove("selected");
+			this.slide_control.querySelector(`[slide='${this.current_slide.count}']`).classList.add("selected");
+		});
+	}
+
+	__create_control_dot(slide_idx) {
+		const div = document.createElement("button");
+		div.classList.add("dot");
+		div.setAttribute("slide", slide_idx);
+		div.addEventListener("click", () => {
+			this.current_slide.count = slide_idx;
+			this.__got_to_current_slide();
+		})
+		return div;
+	}
+}
+
+customElements.define("theatergf-gallery", TheaterGFGalleryHTMLElement);