REFACTOR Moving component from dynamiques-blocks to carhop-blocks

plugins/carhop-blocks/src/explore-tags/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "carhop-blocks/explore-tags",
+	"version": "0.1.0",
+	"title": "Explore Tags",
+	"category": "carhop-blocks",
+	"icon": "smiley",
+	"description": "Example block scaffolded with Create Block tool.",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "carhop-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./view.js",
+	"render": "file:./render.php"
+}

plugins/carhop-blocks/src/explore-tags/edit.js

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

plugins/carhop-blocks/src/explore-tags/editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-explore-tags {
+	border: 1px dotted #f00;
+}

plugins/carhop-blocks/src/explore-tags/index.js

@@ -0,0 +1,22 @@
+import { registerBlockType } from "@wordpress/blocks";
+import "./style.scss";
+
+import Edit from "./edit";
+import save from "./save";
+import metadata from "./block.json";
+
+registerBlockType(metadata.name, {
+	icon: {
+		src: (
+			<svg width="100" height="100" viewBox="0 0 100 100">
+				<g>
+					<path d="m93.4586,23.83625l1.57497,18.94503l0,0.00408c0.24482,2.87252 -0.79157,5.71244 -2.83168,7.75256l-41.89592,41.89592c-0.13057,0.13057 -0.2693,0.26114 -0.40802,0.38355l8.20548,4.73307c3.51721,2.02789 8.00962,0.82421 10.04159,-2.68888l29.6308,-51.32613c1.08539,-1.86881 1.28532,-4.12514 0.55492,-6.16118l-4.87213,-13.53802z" />
+					<path d="m89.93323,10.8859c-0.2897,-3.58657 -3.13365,-6.43047 -6.71615,-6.71615l-32.10325,-2.67666c-0.20401,-0.01633 -0.40802,-0.02448 -0.61204,-0.02448l0,-0.00407c-1.94631,0 -3.81502,0.77526 -5.19017,2.15439l-41.91263,41.90428l-0.00408,0c-1.37912,1.37912 -2.15846,3.252 -2.15846,5.20239c0,1.95039 0.77933,3.82327 2.15846,5.20239l34.77626,34.7679c2.87252,2.87252 7.53216,2.87252 10.40467,0l41.9001,-41.9001c1.53006,-1.53006 2.3094,-3.65186 2.12587,-5.80624l-2.66857,-32.10363zm-10.6492,13.01616c-2.36654,2.35839 -6.06738,2.72565 -8.8461,0.8691s-3.85586,-5.41861 -2.57879,-8.50735c1.28125,-3.08467 4.56177,-4.8392 7.83821,-4.18635c3.27645,0.65284 5.63483,3.52944 5.63483,6.86709l0,0.00408c0.00816,1.85648 -0.73037,3.63964 -2.04826,4.95347l0.0001,-0.00004z" />
+				</g>
+			</svg>
+		),
+		foreground: "#136f63",
+	},
+	edit: Edit,
+	save,
+});

plugins/carhop-blocks/src/explore-tags/render.php

@@ -0,0 +1,99 @@
+<?php
+if (!function_exists('explore_tags_get_post_types')) {
+	function explore_tags_get_post_types()
+	{
+		$current_blog_id = get_current_blog_id();
+
+		if ($current_blog_id === 2) {
+			return ['articles'];
+		}
+
+		if ($current_blog_id === 1 && is_page()) {
+			$tax = get_taxonomy('etiquettes');
+			return $tax->object_type ?? [];
+		}
+
+		// Single ou archive d'un post type
+		if (is_singular()) {
+			return [get_post_type()];
+		}
+		if (is_post_type_archive()) {
+			$post_type = get_query_var('post_type');
+			return is_array($post_type) ? $post_type : [$post_type];
+		}
+
+		return [];
+	}
+}
+
+if (!function_exists('explore_tags_get_post_ids')) {
+	function explore_tags_get_post_ids($post_types, $limit = 5000)
+	{
+		if (empty($post_types)) {
+			return [];
+		}
+
+		return get_posts([
+			'post_type'      => $post_types,
+			'post_status'    => 'publish',
+			'fields'         => 'ids',
+			'posts_per_page' => $limit,
+			'no_found_rows'  => true,
+		]);
+	}
+}
+
+if (!function_exists('explore_tags_get_tags_url')) {
+	function explore_tags_get_tags_url($tag)
+	{
+		$current_blog_id = get_current_blog_id();
+		if ($current_blog_id === 2) {
+			return add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles'));
+		}
+		if (is_page()) {
+			$link = get_term_link($tag);
+			return !is_wp_error($link) ? $link : '#';
+		}
+
+		return add_query_arg('etiquette', $tag->slug, get_post_type_archive_link(get_post_type()));
+	}
+}
+
+$post_types = explore_tags_get_post_types();
+$args = [
+	'taxonomy'   => 'etiquettes',
+	'hide_empty' => false,
+];
+
+if (!empty($post_types)) {
+	$post_ids = explore_tags_get_post_ids($post_types);
+	if (!empty($post_ids)) {
+		$args['object_ids'] = $post_ids;
+	}
+}
+
+$tags = get_terms($args);
+
+?>
+
+<section class="explore-tags alignfull">
+	<div class="inner">
+		<div class="explore-tags__titling">
+			<h2 class="explore-tags__title title-small">Tags</h2>
+			<h3 class="explore-tags__subtitle subtitle-big">Explorer <br /> par Tags</h3>
+		</div>
+		<div class="tag-list">
+			<?php foreach ($tags as $tag) : ?>
+				<a href="<?php echo esc_url(explore_tags_get_tags_url($tag)); ?>" class="tag-list__tag">
+					<?php echo $tag->name; ?>
+					<?php
+					$svg_path = get_template_directory() . '/resources/img/carhop-fleche-lien-externe-full.svg';
+					if (file_exists($svg_path)) {
+						echo file_get_contents($svg_path);
+					}
+					?>
+				</a>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</section>

plugins/carhop-blocks/src/explore-tags/save.js

@@ -0,0 +1,24 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @return {Element} Element to render.
+ */
+export default function save() {
+	return (
+		<p { ...useBlockProps.save() }>
+			{ 'Explore Tags – hello from the saved content!' }
+		</p>
+	);
+}

plugins/carhop-blocks/src/explore-tags/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-explore-tags {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}