REFACTOR cleaning block

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/blocks-manifest.php

@@ -21,6 +21,12 @@ return array(
 		'editorStyle' => 'file:./index.css',
 		'style' => 'file:./style-index.css',
 		'viewScript' => 'file:./view.js',
-		'render' => 'file:./render.php'
+		'render' => 'file:./render.php',
+		'attributes' => array(
+			'displayType' => array(
+				'type' => 'string',
+				'default' => 'grid'
+			)
+		)
 	)
 );

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/block.json

@@ -16,5 +16,11 @@
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
   "viewScript": "file:./view.js",
-  "render": "file:./render.php"
+  "render": "file:./render.php",
+  "attributes": {
+    "displayType": {
+      "type": "string",
+      "default": "grid"
+    }
+  }
 }

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/index.asset.php

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

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/index.js

@@ -8,7 +8,7 @@
   \*********************************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"dynamiques-blocks/dernieres-dynamiques","version":"0.1.0","title":"Dernieres Dynamiques","category":"dynamiques-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"dernieres-dynamiques","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php"}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"dynamiques-blocks/dernieres-dynamiques","version":"0.1.0","title":"Dernieres Dynamiques","category":"dynamiques-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"dernieres-dynamiques","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"displayType":{"type":"string","default":"grid"}}}');
 
 /***/ }),
 
@@ -26,45 +26,51 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/dernieres-dynamiques/editor.scss");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./editor.scss */ "./src/dernieres-dynamiques/editor.scss");
-/**
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
- * Retrieves the translation of text.
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
- */
 
 
-/**
- * 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
- */
 
 
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * Those files can contain any CSS code that gets applied to the editor.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
 
-
+function Edit({
-/**
+  attributes,
- * The edit function describes the structure of your block in the context of the
+  setAttributes
- * editor. This represents what the editor will render when the block is used.
+}) {
- *
+  const {
- * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+    displayType
- *
+  } = attributes;
- * @return {Element} Element to render.
+  function onDisplayTypeChange(value) {
- */
+    setAttributes({
-
+      displayType: value
-function Edit() {
+    });
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", {
+  }
-    ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(),
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
-    children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Dernieres Dynamiques – hello from the editor!', 'dernieres-dynamiques')
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
+        title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Paramètres", "dernieres-dynamiques"),
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
+          className: "homegrade-blocks-highlight__variant",
+          isBlock: true,
+          label: "Type d'affichage des posts",
+          onChange: onDisplayTypeChange,
+          value: displayType,
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            label: "Slider",
+            value: "slider"
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            label: "Grille",
+            value: "grid"
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p", {
+      ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(),
+      children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Dernieres Dynamiques – hello from the editor!", "dernieres-dynamiques")
+    })]
   });
 }
 
@@ -209,6 +215,16 @@ module.exports = window["wp"]["blocks"];
 
 /***/ }),
 
+/***/ "@wordpress/components":
+/*!************************************!*\
+  !*** external ["wp","components"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["components"];
+
+/***/ }),
+
 /***/ "@wordpress/i18n":
 /*!******************************!*\
   !*** external ["wp","i18n"] ***!

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/render.php

@@ -1,8 +1,9 @@
 <?php
+$displayType = $attributes['displayType'] ?? 'grid';
+
 $current_blog_id = get_current_blog_id();
 switch_to_blog(2);
 
-
 $args = array(
 	'post_type' => 'revues',
 	'posts_per_page' => 1,
@@ -10,9 +11,6 @@ $args = array(
 	'order' => 'DESC',
 );
 
-
-
-
 $dynamiques = new WP_Query($args);
 
 $last_issue = $dynamiques->posts[0];
@@ -83,45 +81,55 @@ $issue_related_articles =  new WP_Query(array(
 
 			<div class="article-caroussel">
 
+				<?php if ($displayType === 'grid') : ?>
+					<?php foreach ($issue_related_articles->posts as $article) : ?>
+
+						<div class="article-card">
+							<div class="content-meta">
+								<span class="content-meta__type content-meta__type--article">Article</span>
+								<!-- <span class="content-meta__reading-time"><?php echo calculate_reading_time($article->post_content); ?> minutes de lecture</span> -->
+							</div>
+
+
+							<a href="<?php echo get_the_permalink($article->ID); ?>" class="article-card__link">
+
+								<h4 class="article-card__title"><?php echo $article->post_title; ?></h4>
+							</a>
+
+							<ul class="article-card__tags">
+								<?php
+								$terms = get_the_terms($article->ID, 'etiquettes');
+								if ($terms): ?>
+									<?php foreach ($terms as $term): ?>
+										<li class="article-card__tag article-tag"><?php echo esc_html($term->name); ?></li>
+									<?php endforeach; ?>
+								<?php endif; ?>
+
+							</ul>
+							<a class="article-card__link-button" href="<?php echo get_the_permalink($article->ID); ?>">
+
+								<?php
+								$svg_path = get_template_directory() . '/resources/img/carhop-fleche-full.svg';
+								if (file_exists($svg_path)) {
+									echo file_get_contents($svg_path);
+								}
+								?>
+							</a>
 
-				<?php foreach ($issue_related_articles->posts as $article) : ?>
 
-					<div class="article-card">
-						<div class="content-meta">
-							<span class="content-meta__type content-meta__type--article">Article</span>
-							<!-- <span class="content-meta__reading-time"><?php echo calculate_reading_time($article->post_content); ?> minutes de lecture</span> -->
 						</div>
 
-
+					<?php endforeach; ?>
-						<a href="<?php echo get_the_permalink($article->ID); ?>" class="article-card__link">
+				<?php else : ?>
-
+					<div class="article-caroussel__slider">
-							<h4 class="article-card__title"><?php echo $article->post_title; ?></h4>
+						<p>sliiiiiiiidzer</p>
-						</a>
+						<?php foreach ($issue_related_articles->posts as $article) : ?>
-
+							<div class="article-card">
-						<ul class="article-card__tags">
+								<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
-							<?php
+							</div>
-							$terms = get_the_terms($article->ID, 'etiquettes');
+						<?php endforeach; ?>
-							if ($terms): ?>
-								<?php foreach ($terms as $term): ?>
-									<li class="article-card__tag article-tag"><?php echo esc_html($term->name); ?></li>
-								<?php endforeach; ?>
-							<?php endif; ?>
-
-						</ul>
-						<a class="article-card__link-button" href="<?php echo get_the_permalink($article->ID); ?>">
-
-							<?php
-							$svg_path = get_template_directory() . '/resources/img/carhop-fleche-full.svg';
-							if (file_exists($svg_path)) {
-								echo file_get_contents($svg_path);
-							}
-							?>
-						</a>
-
-
 					</div>
-
+				<?php endif; ?>
-				<?php endforeach; ?>
 			</div>
 
 			<button class="related-articles__show-all">

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/src/dernieres-dynamiques/block.json

@@ -16,5 +16,11 @@
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
 	"viewScript": "file:./view.js",
-	"render": "file:./render.php"
+	"render": "file:./render.php",
+	"attributes": {
+		"displayType": {
+			"type": "string",
+			"default": "grid"
+		}
+	}
 }

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/src/dernieres-dynamiques/edit.js

@@ -1,41 +1,43 @@
-/**
+import { __ } from "@wordpress/i18n";
- * Retrieves the translation of text.
+import { InspectorControls, useBlockProps } from "@wordpress/block-editor";
- *
+import {
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+	PanelBody,
- */
+	CheckboxControl,
-import { __ } from '@wordpress/i18n';
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from "@wordpress/components";
+import "./editor.scss";
 
-/**
+export default function Edit({ attributes, setAttributes }) {
- * React hook that is used to mark the block wrapper element.
+	const { displayType } = attributes;
- * 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';
 
-/**
+	function onDisplayTypeChange(value) {
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+		setAttributes({ displayType: value });
- * Those files can contain any CSS code that gets applied to the editor.
+	}
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
-import './editor.scss';
 
-/**
- * The edit function describes the structure of your block in the context of the
- * editor. This represents what the editor will render when the block is used.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
- *
- * @return {Element} Element to render.
- */
-export default function Edit() {
 	return (
-		<p { ...useBlockProps() }>
+		<>
-			{ __(
+			<InspectorControls>
-				'Dernieres Dynamiques – hello from the editor!',
+				<PanelBody title={__("Paramètres", "dernieres-dynamiques")}>
-				'dernieres-dynamiques'
+					<ToggleGroupControl
-			) }
+						className="homegrade-blocks-highlight__variant"
-		</p>
+						isBlock
+						label="Type d'affichage des posts"
+						onChange={onDisplayTypeChange}
+						value={displayType}
+					>
+						<ToggleGroupControlOption label="Slider" value="slider" />
+						<ToggleGroupControlOption label="Grille" value="grid" />
+					</ToggleGroupControl>
+				</PanelBody>
+			</InspectorControls>
+			<p {...useBlockProps()}>
+				{__(
+					"Dernieres Dynamiques – hello from the editor!",
+					"dernieres-dynamiques"
+				)}
+			</p>
+		</>
 	);
 }

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/src/dernieres-dynamiques/render.php

@@ -1,8 +1,9 @@
 <?php
+$displayType = $attributes['displayType'] ?? 'grid';
+
 $current_blog_id = get_current_blog_id();
 switch_to_blog(2);
 
-
 $args = array(
 	'post_type' => 'revues',
 	'posts_per_page' => 1,
@@ -10,9 +11,6 @@ $args = array(
 	'order' => 'DESC',
 );
 
-
-
-
 $dynamiques = new WP_Query($args);
 
 $last_issue = $dynamiques->posts[0];
@@ -83,45 +81,55 @@ $issue_related_articles =  new WP_Query(array(
 
 			<div class="article-caroussel">
 
+				<?php if ($displayType === 'grid') : ?>
+					<?php foreach ($issue_related_articles->posts as $article) : ?>
+
+						<div class="article-card">
+							<div class="content-meta">
+								<span class="content-meta__type content-meta__type--article">Article</span>
+								<!-- <span class="content-meta__reading-time"><?php echo calculate_reading_time($article->post_content); ?> minutes de lecture</span> -->
+							</div>
+
+
+							<a href="<?php echo get_the_permalink($article->ID); ?>" class="article-card__link">
+
+								<h4 class="article-card__title"><?php echo $article->post_title; ?></h4>
+							</a>
+
+							<ul class="article-card__tags">
+								<?php
+								$terms = get_the_terms($article->ID, 'etiquettes');
+								if ($terms): ?>
+									<?php foreach ($terms as $term): ?>
+										<li class="article-card__tag article-tag"><?php echo esc_html($term->name); ?></li>
+									<?php endforeach; ?>
+								<?php endif; ?>
+
+							</ul>
+							<a class="article-card__link-button" href="<?php echo get_the_permalink($article->ID); ?>">
+
+								<?php
+								$svg_path = get_template_directory() . '/resources/img/carhop-fleche-full.svg';
+								if (file_exists($svg_path)) {
+									echo file_get_contents($svg_path);
+								}
+								?>
+							</a>
 
-				<?php foreach ($issue_related_articles->posts as $article) : ?>
 
-					<div class="article-card">
-						<div class="content-meta">
-							<span class="content-meta__type content-meta__type--article">Article</span>
-							<!-- <span class="content-meta__reading-time"><?php echo calculate_reading_time($article->post_content); ?> minutes de lecture</span> -->
 						</div>
 
-
+					<?php endforeach; ?>
-						<a href="<?php echo get_the_permalink($article->ID); ?>" class="article-card__link">
+				<?php else : ?>
-
+					<div class="article-caroussel__slider">
-							<h4 class="article-card__title"><?php echo $article->post_title; ?></h4>
+						<p>sliiiiiiiidzer</p>
-						</a>
+						<?php foreach ($issue_related_articles->posts as $article) : ?>
-
+							<div class="article-card">
-						<ul class="article-card__tags">
+								<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
-							<?php
+							</div>
-							$terms = get_the_terms($article->ID, 'etiquettes');
+						<?php endforeach; ?>
-							if ($terms): ?>
-								<?php foreach ($terms as $term): ?>
-									<li class="article-card__tag article-tag"><?php echo esc_html($term->name); ?></li>
-								<?php endforeach; ?>
-							<?php endif; ?>
-
-						</ul>
-						<a class="article-card__link-button" href="<?php echo get_the_permalink($article->ID); ?>">
-
-							<?php
-							$svg_path = get_template_directory() . '/resources/img/carhop-fleche-full.svg';
-							if (file_exists($svg_path)) {
-								echo file_get_contents($svg_path);
-							}
-							?>
-						</a>
-
-
 					</div>
-
+				<?php endif; ?>
-				<?php endforeach; ?>
 			</div>
 
 			<button class="related-articles__show-all">