REFACTOR cleaning block

This commit is contained in:
Antoine M 2025-05-21 14:51:29 +02:00
parent f5d4139926
commit c72a5b5374
9 changed files with 203 additions and 151 deletions

View File

@ -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'
)
)
)
);

View File

@ -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"
}
}
}

View File

@ -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');

View File

@ -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 react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);
/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
*/
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* 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");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/**
* 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
*/
/**
* 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.
*/
function Edit() {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", {
function Edit({
attributes,
setAttributes
}) {
const {
displayType
} = attributes;
function onDisplayTypeChange(value) {
setAttributes({
displayType: value
});
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
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')
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"] ***!

View File

@ -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,7 +81,7 @@ $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">
@ -122,6 +120,16 @@ $issue_related_articles = new WP_Query(array(
</div>
<?php endforeach; ?>
<?php else : ?>
<div class="article-caroussel__slider">
<p>sliiiiiiiidzer</p>
<?php foreach ($issue_related_articles->posts as $article) : ?>
<div class="article-card">
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<button class="related-articles__show-all">

View File

@ -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"
}
}
}

View File

@ -1,41 +1,43 @@
/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
*/
import { __ } from '@wordpress/i18n';
import { __ } from "@wordpress/i18n";
import { InspectorControls, useBlockProps } from "@wordpress/block-editor";
import {
PanelBody,
CheckboxControl,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import "./editor.scss";
/**
* 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';
export default function Edit({ attributes, setAttributes }) {
const { displayType } = attributes;
/**
* 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
*/
import './editor.scss';
function onDisplayTypeChange(value) {
setAttributes({ displayType: value });
}
/**
* 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 (
<>
<InspectorControls>
<PanelBody title={__("Paramètres", "dernieres-dynamiques")}>
<ToggleGroupControl
className="homegrade-blocks-highlight__variant"
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'
"Dernieres Dynamiques hello from the editor!",
"dernieres-dynamiques"
)}
</p>
</>
);
}

View File

@ -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,7 +81,7 @@ $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">
@ -122,6 +120,16 @@ $issue_related_articles = new WP_Query(array(
</div>
<?php endforeach; ?>
<?php else : ?>
<div class="article-caroussel__slider">
<p>sliiiiiiiidzer</p>
<?php foreach ($issue_related_articles->posts as $article) : ?>
<div class="article-card">
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<button class="related-articles__show-all">