FEATURE introducing block

plugins/carhop-blocks/src/reportages-list/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "carhop-blocks/reportages-list",
+	"version": "0.1.0",
+	"title": "Liste des reportages",
+	"category": "carhop-blocks",
+	"icon": "smiley",
+	"description": "Liste des reportages",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "carhop-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php",
+	"viewScript": "file:./view.js"
+}

plugins/carhop-blocks/src/reportages-list/edit.js

@@ -0,0 +1,12 @@
+import { __ } from "@wordpress/i18n";
+import { useBlockProps } from "@wordpress/block-editor";
+import "./editor.scss";
+import ServerSideRender from "@wordpress/server-side-render";
+
+export default function Edit() {
+	return (
+		<div {...useBlockProps({ className: "alignwide" })}>
+			<ServerSideRender block="carhop-blocks/reportages-list" />
+		</div>
+	);
+}

plugins/carhop-blocks/src/reportages-list/index.js

@@ -0,0 +1,16 @@
+import { registerBlockType } from "@wordpress/blocks";
+import "./style.scss";
+
+import Edit from "./edit";
+import metadata from "./block.json";
+
+registerBlockType(metadata.name, {
+	icon: {
+		src: (
+			<svg width="32" height="32" viewBox="0 0 32 32">
+				<path d="M16 24L8 16L16 8L24 16L16 24Z" />
+			</svg>
+		),
+	},
+	edit: Edit,
+});

plugins/carhop-blocks/src/reportages-list/render.php

@@ -0,0 +1,15 @@
+	<?php
+	$wrapper_attributes = get_block_wrapper_attributes(['class' => 'press-ressources alignwide']);
+
+	$contact_persons = get_field('contact_persons', 'option');
+	$ressources_graphiques = get_field('ressources_graphiques', 'option');
+	?>
+
+	<section <?php echo $wrapper_attributes; ?>>
+
+		<div class="ressources-tabs-grid ressources-grid-content-wrapper" data-active-tab="communiques">
+
+			<?php get_template_part('template-parts/post-types/reportages/reportages-grid'); ?>
+
+		</div>
+	</section>

plugins/carhop-blocks/src/reportages-list/style.scss

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-chapo {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

plugins/carhop-blocks/src/reportages-list/view.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const toolbar = document.querySelector("#press-toolbar");
+	if (!toolbar) return;
+	const toolbarButtons = toolbar.querySelectorAll("button");
+	const ressourcesGridContentWrapper = document.querySelector(
+		".ressources-grid-content-wrapper"
+	);
+
+	function setActiveTab(currentButton) {
+		toolbarButtons.forEach((button) => {
+			button.setAttribute("aria-selected", "false");
+		});
+
+		currentButton.setAttribute("aria-selected", "true");
+		ressourcesGridContentWrapper.setAttribute(
+			"data-active-tab",
+			currentButton.getAttribute("data-tab")
+		);
+	}
+
+	function initToolbar() {
+		toolbarButtons.forEach((button) => {
+			button.addEventListener("click", function () {
+				setActiveTab(button);
+			});
+		});
+	}
+	initToolbar();
+});