From 1ad86e78802f68aa782324497bd9dc9e50b1d9d5 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Thu, 11 Dec 2025 15:23:56 +0100 Subject: [PATCH] FEATURE Adding core block variations and styles for enhanced customization --- plugins/carhop-blocks/carhop-blocks.php | 60 ++++--- plugins/carhop-blocks/package.json | 2 +- .../core-embed-variant/editor.js | 4 + .../core-heading-variant/editor.js | 4 + .../core-image-variant/editor.js | 10 ++ .../core-variants/core-list-variant/.DS_Store | Bin 0 -> 6148 bytes .../core-variants/core-list-variant/editor.js | 168 ++++++++++++++++++ .../icons/carhop-cadenas.svg | 5 + .../core-list-variant/icons/carhop-check.svg | 4 + .../icons/carhop-loupe-alt.svg | 11 ++ .../core-list-variant/icons/carhop-loupe.svg | 4 + .../icons/carhop-pendule.svg | 4 + .../icons/carhop-sablier.svg | 13 ++ .../src/core-variants/variants.js | 6 + .../src/core-variants/variants.scss | 74 ++++++++ plugins/carhop-blocks/webpack.config.js | 11 ++ 16 files changed, 352 insertions(+), 28 deletions(-) create mode 100644 plugins/carhop-blocks/src/core-variants/core-embed-variant/editor.js create mode 100644 plugins/carhop-blocks/src/core-variants/core-heading-variant/editor.js create mode 100644 plugins/carhop-blocks/src/core-variants/core-image-variant/editor.js create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/.DS_Store create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/editor.js create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-cadenas.svg create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-check.svg create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe-alt.svg create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe.svg create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-pendule.svg create mode 100644 plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-sablier.svg create mode 100644 plugins/carhop-blocks/src/core-variants/variants.js create mode 100644 plugins/carhop-blocks/src/core-variants/variants.scss create mode 100644 plugins/carhop-blocks/webpack.config.js diff --git a/plugins/carhop-blocks/carhop-blocks.php b/plugins/carhop-blocks/carhop-blocks.php index 91df22d..9d5663f 100644 --- a/plugins/carhop-blocks/carhop-blocks.php +++ b/plugins/carhop-blocks/carhop-blocks.php @@ -22,23 +22,21 @@ if (! defined('ABSPATH')) { ##### REGISTER BLOCKS ##### function create_block_carhop_blocks_block_init() { - - - ##### REGISTER ACF BLOCKS ##### + // ##### REGISTER ACF BLOCKS ##### register_block_type(__DIR__ . '/acf-blocks/gallery'); register_block_type(__DIR__ . '/acf-blocks/social-networks'); register_block_type(__DIR__ . '/acf-blocks/custom-video'); register_block_type(__DIR__ . '/acf-blocks/team-carhop'); - if (function_exists('wp_register_block_types_from_metadata_collection')) { - wp_register_block_types_from_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php'); - return; - } + // if (function_exists('wp_register_block_types_from_metadata_collection')) { + // wp_register_block_types_from_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php'); + // return; + // } - if (function_exists('wp_register_block_metadata_collection')) { - wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php'); - } + // if (function_exists('wp_register_block_metadata_collection')) { + // wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php'); + // } $manifest_data = require __DIR__ . '/build/blocks-manifest.php'; foreach (array_keys($manifest_data) as $block_type) { @@ -85,10 +83,6 @@ function carhop_register_blocks() if (!function_exists('register_block_type')) { return; } - register_block_type(__DIR__ . '/acf-blocks/gallery'); - register_block_type(__DIR__ . '/acf-blocks/social-networks'); - register_block_type(__DIR__ . '/acf-blocks/custom-video'); - register_block_type(__DIR__ . '/acf-blocks/team-carhop'); // Enregistrer le script pour le bloc gallery wp_register_script( @@ -98,6 +92,12 @@ function carhop_register_blocks() filemtime(__DIR__ . '/acf-blocks/gallery/view.js'), true ); + + wp_enqueue_style( + 'carhop-blocks-variations', + plugins_url('build/variations.css', __FILE__), + + ); } add_action('init', 'carhop_register_blocks'); @@ -105,23 +105,29 @@ add_action('init', 'carhop_register_blocks'); ##### EDITOR EXTENSIONS ------------------------------------------------------------------*/ /** - * Étend le bloc Titre (core/heading) avec un attribut "carhopVariant" - * et ajoute une interface pour choisir une variante (ajoute une classe CSS). + * Enqueue plusieurs extensions éditeur (variantes/styles pour blocs core). */ function carhop_enqueue_editor_assets() { - $script_path = __DIR__ . '/src/core-heading-variant/editor.js'; - if (!file_exists($script_path)) { - return; - } - - + $asset_file = include __DIR__ . '/build/variations.asset.php'; wp_enqueue_script( - 'carhop-heading-variant', - plugins_url('src/core-heading-variant/editor.js', __FILE__), - array('wp-blocks', 'wp-element', 'wp-dom-ready', 'wp-components', 'wp-compose', 'wp-data', 'wp-hooks', 'wp-i18n', 'wp-block-editor', 'wp-edit-post'), - filemtime($script_path), - true + 'carhop-variants', + plugins_url('build/variations.js', __FILE__), ); } add_action('enqueue_block_editor_assets', 'carhop_enqueue_editor_assets'); + + +function carhop_enqueue_variants_admin_scripts() +{ + $css = __DIR__ . '/build/variations.css'; + if (file_exists($css)) { + wp_enqueue_style( + 'carhop-variants', + plugins_url('build/variations.css', __FILE__), + array(), + filemtime($css) + ); + } +} +add_action('admin_enqueue_scripts', 'carhop_enqueue_admin_scripts'); diff --git a/plugins/carhop-blocks/package.json b/plugins/carhop-blocks/package.json index bdafde7..d63f92b 100644 --- a/plugins/carhop-blocks/package.json +++ b/plugins/carhop-blocks/package.json @@ -23,4 +23,4 @@ "@wordpress/icons": "^11.2.0", "url-loader": "^4.1.1" } -} +} \ No newline at end of file diff --git a/plugins/carhop-blocks/src/core-variants/core-embed-variant/editor.js b/plugins/carhop-blocks/src/core-variants/core-embed-variant/editor.js new file mode 100644 index 0000000..d279194 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-embed-variant/editor.js @@ -0,0 +1,4 @@ +wp.blocks.registerBlockStyle("core/embed", { + name: "stacked-background", + label: "Fond empilé", +}); diff --git a/plugins/carhop-blocks/src/core-variants/core-heading-variant/editor.js b/plugins/carhop-blocks/src/core-variants/core-heading-variant/editor.js new file mode 100644 index 0000000..ada2fc7 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-heading-variant/editor.js @@ -0,0 +1,4 @@ +wp.blocks.registerBlockStyle("core/heading", { + name: "stroked-after", + label: "Titre + trait ", +}); diff --git a/plugins/carhop-blocks/src/core-variants/core-image-variant/editor.js b/plugins/carhop-blocks/src/core-variants/core-image-variant/editor.js new file mode 100644 index 0000000..5bd1c37 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-image-variant/editor.js @@ -0,0 +1,10 @@ +wp.blocks.registerBlockStyle("core/image", { + name: "framed", + label: "Encadré", + isDefault: true, +}); +wp.blocks.registerBlockStyle("core/image", { + name: "stacked", + label: "Empilé", + isDefault: false, +}); diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/.DS_Store b/plugins/carhop-blocks/src/core-variants/core-list-variant/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..511ff00e6f9b8384beb9aca8c212c26353c6a61d GIT binary patch literal 6148 zcmeHK%}T>S5Z<+|O(;SR3Oz1(Ef{U7h?h|73mDOZN=;1BV9b`LHHT8jSzpK}@p+ut z-9U@Mqlle>-EVe&b~7Jje;8wYFpmxya~NY5G(?U{g`m08wPk`4xtb#j^K23(GOU>9 zZ<_Gi8!ToIOtO@%e*Z@}N#bngx}SWjR&Q)Kn|8C+yz`%A?$3hRJR1bl8ysCqnS`Yt zgjex6A33{cGMxo+I-aV8I2uF9?RA_+G9So!8f7Zi*ACmZ?2*%6EV^#LBf7`^Wk)Pd zj@*vu^?S>uZSCzJoL-Eclb2M!X(Bl=u4Knx3Gbk+RP^dk(?q6^U@bGsNJ3(O7$63S zfz4#VoCj8GGs~x{i2-8Z2L^C|5YP}kgM~)5bwG#LXY|(*Q9#GH1fnqL87wq{2ZZZX zK%L6X6NBq?unQCC87wsFbjH=nFppWee7tbAI@pB@XWY|BJuyHGtTRy4LkG|QbNFQ{ zANlJkG$ICwfq%vTuMhp<0E#ka>$mdotQFAip`l=0feHxdYnK2R;6Bn;PVE<{L!4)@ W(1^33U8MukML-ck9Wn3=4157l2TJt- literal 0 HcmV?d00001 diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/editor.js b/plugins/carhop-blocks/src/core-variants/core-list-variant/editor.js new file mode 100644 index 0000000..0619c43 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/editor.js @@ -0,0 +1,168 @@ +import { registerBlockVariation } from "@wordpress/blocks"; +import { __ } from "@wordpress/i18n"; +import { + InspectorControls, + BlockControls, + AlignmentToolbar, +} from "@wordpress/block-editor"; +import { ToolbarGroup, ToolbarDropdownMenu } from "@wordpress/components"; +import { Fragment } from "@wordpress/element"; +import { addFilter } from "@wordpress/hooks"; +import { createHigherOrderComponent } from "@wordpress/compose"; + +import { check, arrowRight, starFilled } from "@wordpress/icons"; + +// Variation du bloc "Liste" pour ajouter une classe spéciale +registerBlockVariation("core/list", { + name: "iconed-list", + title: "Liste avec icônes", + description: "Liste dont chaque élément peut avoir une icône personnalisée.", + attributes: { + className: "is-iconed-list", + }, + scope: ["inserter", "transform"], + isActive: (blockAttributes) => { + const cls = (blockAttributes && blockAttributes.className) || ""; + return cls.split(" ").includes("is-iconed-list"); + }, +}); + +// ----------------------------- +// 1. On étend les attributs de core/list-item +// ----------------------------- + +addFilter( + "blocks.registerBlockType", + "am/iconed-list-item-attributes", + (settings, name) => { + if (name !== "core/list-item") { + return settings; + } + + return { + ...settings, + attributes: { + ...settings.attributes, + icon: { + type: "string", + default: "", + }, + }, + }; + } +); + +// ----------------------------- +// 2. On ajoute un panneau de réglages pour choisir l'icône +// ----------------------------- + +addFilter( + "editor.BlockEdit", + "am/iconed-list-item-controls", + (BlockEdit) => (props) => { + if (props.name !== "core/list-item") { + return ; + } + const { attributes, setAttributes } = props; + const { icon } = attributes; + + const ICONS = [ + { + title: __("Loupe"), + value: "loupe", + }, + { + title: __("Sablier"), + value: "sablier", + }, + { title: __("Cadenas"), value: "cadenas" }, + { title: __("Check"), value: "check" }, + { title: __("Loupe Alt"), value: "loupe-alt" }, + { title: __("Pendule"), value: "pendule" }, + ]; + + return ( + + + + + + } + controls={ICONS.map(({ title, value }) => ({ + title, + icon: ( +
+ ), + + isActive: icon === value, + onClick: () => setAttributes({ icon: value }), + }))} + /> + + setAttributes({ align: value })} + /> + + + ); + } +); + +// ----------------------------- +// 3. On ajoute des props au HTML sauvegardé pour chaque
  • +// ----------------------------- +addFilter( + "blocks.getSaveContent.extraProps", + "carhop/iconed-list-item-save-props", + (extraProps, blockType, attributes) => { + if (blockType.name !== "core/list-item") { + return extraProps; + } + + if (attributes.icon) { + extraProps = { + ...extraProps, + className: + (extraProps.className || "") + + " has-custom-icon has-custom-icon--" + + attributes.icon, + }; + } + + return extraProps; + } +); + +// ----------------------------- +// 4. Applique les mêmes classes en mode éditeur (BlockListBlock) +// ----------------------------- +addFilter( + "editor.BlockListBlock", + "carhop/iconed-list-item-editor-classes", + createHigherOrderComponent((BlockListBlock) => { + return (props) => { + if (props.name !== "core/list-item") { + return ; + } + const slug = props.attributes?.icon || ""; + const className = [ + props.className || "", + slug ? "has-custom-icon" : "", + slug ? `has-custom-icon--${slug}` : "", + ] + .filter(Boolean) + .join(" "); + + return ; + }; + }, "withIconedListItemEditorClasses") +); diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-cadenas.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-cadenas.svg new file mode 100644 index 0000000..de18237 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-cadenas.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-check.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-check.svg new file mode 100644 index 0000000..babd872 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe-alt.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe-alt.svg new file mode 100644 index 0000000..2b4ecc1 --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe-alt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe.svg new file mode 100644 index 0000000..93f033d --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-loupe.svg @@ -0,0 +1,4 @@ + + + + diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-pendule.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-pendule.svg new file mode 100644 index 0000000..b4f261a --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-pendule.svg @@ -0,0 +1,4 @@ + + + + diff --git a/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-sablier.svg b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-sablier.svg new file mode 100644 index 0000000..1ec0cea --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/core-list-variant/icons/carhop-sablier.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/plugins/carhop-blocks/src/core-variants/variants.js b/plugins/carhop-blocks/src/core-variants/variants.js new file mode 100644 index 0000000..ed9780c --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/variants.js @@ -0,0 +1,6 @@ +import "./core-heading-variant/editor.js"; +import "./core-image-variant/editor.js"; +import "./core-embed-variant/editor.js"; +import "./core-list-variant/editor.js"; + +import "./variants.scss"; diff --git a/plugins/carhop-blocks/src/core-variants/variants.scss b/plugins/carhop-blocks/src/core-variants/variants.scss new file mode 100644 index 0000000..2c20a4c --- /dev/null +++ b/plugins/carhop-blocks/src/core-variants/variants.scss @@ -0,0 +1,74 @@ +.wp-block-list.is-iconed-list { + display: block; + + li.has-custom-icon { + padding-left: 0; + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 20px; + + &::before { + content: " "; + position: static; + display: inline-block; + padding: 20px; + width: 40px; + height: 40px; + background-color: var(--wp--preset--color--primary); + background-size: 20px auto; + background-repeat: no-repeat; + background-position: center; + } + &--sablier::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-sablier.svg"); + } + &--loupe::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-loupe.svg"); + } + &--cadenas::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-cadenas.svg"); + } + &--check::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-check.svg"); + } + &--loupe-alt::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-loupe-alt.svg"); + } + &--pendule::before { + background-image: url("../core-variants/core-list-variant/icons/carhop-pendule.svg"); + } + } +} + +.iconed-list-item-icon-dropdown { +} + +.iconed-list-item-backend-icon-square { + display: inline-block; + width: 20px; + height: 20px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + color: currentColor; + filter: invert(1); + &--sablier { + background-image: url("../core-variants/core-list-variant/icons/carhop-sablier.svg"); + } + &--loupe { + background-image: url("../core-variants/core-list-variant/icons/carhop-loupe.svg"); + } + &--cadenas { + background-image: url("../core-variants/core-list-variant/icons/carhop-cadenas.svg"); + } + &--check { + background-image: url("../core-variants/core-list-variant/icons/carhop-check.svg"); + } + &--loupe-alt { + background-image: url("../core-variants/core-list-variant/icons/carhop-loupe-alt.svg"); + } + &--pendule { + background-image: url("../core-variants/core-list-variant/icons/carhop-pendule.svg"); + } +} diff --git a/plugins/carhop-blocks/webpack.config.js b/plugins/carhop-blocks/webpack.config.js new file mode 100644 index 0000000..09884a5 --- /dev/null +++ b/plugins/carhop-blocks/webpack.config.js @@ -0,0 +1,11 @@ +// Import the original config from the @wordpress/scripts package. +const defaultConfig = require("@wordpress/scripts/config/webpack.config"); + +// Add any a new entry point by extending the webpack config. +module.exports = { + ...defaultConfig, + entry: { + ...defaultConfig.entry(), + variations: "./src/core-variants/variants.js", + }, +};