Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR Block to display a dynamic content to avoid wpkses problems on save
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2026-05-21 09:34:20 +02:00
parent 7b27f68053
commit 40afe803ae
16 changed files with 282 additions and 1020 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugins/carhop-blocks/build/chapter-section/index-rtl.css
View File

@ -1,20 +1 @@
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/chapter-section/editor.scss ***!
\*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.wp-block-carhop-blocks-chapter-section {
margin: 2rem calc(50% - 50vw);
}
.chapter-section--bg-light {
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
}
.chapter-section--bg-light .wp-block-carhop-blocks-cta {
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
}
.chapter-section--bg-light .wp-block-carhop-blocks-cta svg,
.chapter-section--bg-light .wp-block-carhop-blocks-cta path,
.chapter-section--bg-light .wp-block-carhop-blocks-cta circle {
stroke: var(--wp--preset--color--carhop-green, inherit);
}
.wp-block-carhop-blocks-chapter-section{margin:2rem calc(50% - 50vw)}.chapter-section--bg-light,.chapter-section--bg-light .wp-block-carhop-blocks-cta{--cta-current-color:var(--wp--preset--color--carhop-green,inherit)}.chapter-section--bg-light .wp-block-carhop-blocks-cta circle,.chapter-section--bg-light .wp-block-carhop-blocks-cta path,.chapter-section--bg-light .wp-block-carhop-blocks-cta svg{stroke:var(--wp--preset--color--carhop-green,inherit)}

2
plugins/carhop-blocks/build/chapter-section/index.asset.php
View File

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

23
plugins/carhop-blocks/build/chapter-section/index.css
View File

@ -1,22 +1 @@
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/chapter-section/editor.scss ***!
\*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.wp-block-carhop-blocks-chapter-section {
margin: 2rem calc(50% - 50vw);
}
.chapter-section--bg-light {
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
}
.chapter-section--bg-light .wp-block-carhop-blocks-cta {
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
}
.chapter-section--bg-light .wp-block-carhop-blocks-cta svg,
.chapter-section--bg-light .wp-block-carhop-blocks-cta path,
.chapter-section--bg-light .wp-block-carhop-blocks-cta circle {
stroke: var(--wp--preset--color--carhop-green, inherit);
}
/*# sourceMappingURL=index.css.map*/
.wp-block-carhop-blocks-chapter-section{margin:2rem calc(50% - 50vw)}.chapter-section--bg-light,.chapter-section--bg-light .wp-block-carhop-blocks-cta{--cta-current-color:var(--wp--preset--color--carhop-green,inherit)}.chapter-section--bg-light .wp-block-carhop-blocks-cta circle,.chapter-section--bg-light .wp-block-carhop-blocks-cta path,.chapter-section--bg-light .wp-block-carhop-blocks-cta svg{stroke:var(--wp--preset--color--carhop-green,inherit)}

1
plugins/carhop-blocks/build/chapter-section/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"chapter-section/index.css","mappings":";;;AAAA;EACC;AACD;;AAEA;EACC;AACD;;AACC;EACC;AACF;;AAAE;;;EAGC;AAEH,C","sources":["webpack://carhop-blocks/./src/chapter-section/editor.scss"],"sourcesContent":[".wp-block-carhop-blocks-chapter-section {\n\tmargin: 2rem calc(50% - 50vw);\n}\n\n.chapter-section--bg-light {\n\t--cta-current-color: var(--wp--preset--color--carhop-green, inherit);\n\n\t.wp-block-carhop-blocks-cta {\n\t\t--cta-current-color: var(--wp--preset--color--carhop-green, inherit);\n\t\tsvg,\n\t\tpath,\n\t\tcircle {\n\t\t\tstroke: var(--wp--preset--color--carhop-green, inherit);\n\t\t}\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}

879
plugins/carhop-blocks/build/chapter-section/index.js
View File

File diff suppressed because one or more lines are too long

1
plugins/carhop-blocks/build/chapter-section/index.js.map
View File

File diff suppressed because one or more lines are too long

91
plugins/carhop-blocks/build/chapter-section/render.php Normal file
View File

@ -0,0 +1,91 @@
<?php
/**
* Rendu serveur : évite de persister du SVG/styles dans le post
* (filtrés par KSES pour les rôles sans unfiltered_html).
*
* @var array $attributes Attributs du bloc.
* @var string $content HTML des blocs internes (InnerBlocks).
* @var WP_Block $block Instance du bloc.
*/
$has_light_background = ! empty($attributes['hasLightBackground']);
$disposition = $attributes['disposition'] ?? 'left';
$cover_url = $attributes['coverUrl'] ?? '';
$cover_alt = $attributes['coverAlt'] ?? '';
$cover_size = $attributes['coverSize'] ?? 'large';
$cover_type = $attributes['coverType'] ?? 'image';
$background_color = $attributes['backgroundColor'] ?? '#ffffff';
$text_color = $attributes['textColor'] ?? '#136f63';
$shape_type = $attributes['shapeType'] ?? 'variationA';
$block_variant = $attributes['blockVariant'] ?? 'framed';
$border_color = $attributes['borderColor'] ?? '#136f63';
// Ancien contenu statique (save.js complet) : HTML déjà prêt, ne pas re-envelopper.
$is_legacy_static = $content && (
str_contains($content, 'deligraph-blocks-chapter-section')
|| str_contains($content, 'chapter-section__inner')
);
if ($is_legacy_static) {
echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return;
}
$bg_light_class = $has_light_background ? 'chapter-section--bg-light' : 'chapter-section--bg-dark';
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => sprintf(
'deligraph-blocks-chapter-section chapter-section chapter-section--%s chapter-section--%s %s',
esc_attr($disposition),
esc_attr($block_variant),
esc_attr($bg_light_class)
),
'style' => sprintf(
'--chapter-section-text-color:%s;--cta-current-color:%s',
esc_attr($text_color ? $text_color : 'var(--advised-text-color)'),
esc_attr($block_variant === 'backgrounded' ? 'inherit' : 'var(--wp--preset--color--primary) !important')
),
),
isset($block) ? $block : null
);
$show_shape_a = ($block_variant === 'backgrounded' || $block_variant === 'framed')
&& $background_color
&& $shape_type === 'variationA';
$show_shape_b = ($block_variant === 'backgrounded' || $block_variant === 'framed')
&& $background_color
&& $shape_type === 'variationB';
$shape_fill = $block_variant === 'backgrounded' ? esc_attr($background_color) : 'none';
$shape_stroke = $block_variant === 'framed' ? esc_attr($border_color) : 'none';
$stroke_width = ($block_variant === 'framed' && $border_color) ? '2px' : '0';
?>
<section <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>>
<div class="chapter-section__inner">
<?php if ($show_shape_a) : ?>
<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg" class="chapter-section__background" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M0 0H1440V686.701L0 744V0Z" fill="<?php echo $shape_fill; ?>" stroke="<?php echo $shape_stroke; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round"></path>
</svg>
<?php endif; ?>
<?php if ($show_shape_b) : ?>
<svg class="chapter-section__background" width="1302" height="654" viewBox="0 0 1302 654" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z" fill="<?php echo $shape_fill; ?>" stroke="<?php echo $shape_stroke; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round"></path>
</svg>
<?php endif; ?>
<div class="chapter-section__content">
<div class="chapter-section__innerblocks">
<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
</div>
<?php if ($cover_url) : ?>
<img
class="<?php echo esc_attr("chapter-section__cover chapter-section__cover--{$cover_size} chapter-section__cover--{$cover_type}"); ?>"
src="<?php echo esc_url($cover_url); ?>"
alt="<?php echo esc_attr($cover_alt); ?>" />
<?php endif; ?>
</div>
</section>

7
plugins/carhop-blocks/build/chapter-section/style-index-rtl.css
View File

@ -1,6 +1 @@
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/chapter-section/style.scss ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.wp-block-carhop-blocks-chapter-section {
margin: 2rem calc(50% - 50vw);
}
.wp-block-carhop-blocks-chapter-section{margin:2rem calc(50% - 50vw)}

9
plugins/carhop-blocks/build/chapter-section/style-index.css
View File

@ -1,8 +1 @@
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/chapter-section/style.scss ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.wp-block-carhop-blocks-chapter-section {
margin: 2rem calc(50% - 50vw);
}
/*# sourceMappingURL=style-index.css.map*/
.wp-block-carhop-blocks-chapter-section{margin:2rem calc(50% - 50vw)}

1
plugins/carhop-blocks/build/chapter-section/style-index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"chapter-section/style-index.css","mappings":";;;AAAA;EACC;AACD,C","sources":["webpack://carhop-blocks/./src/chapter-section/style.scss"],"sourcesContent":[".wp-block-carhop-blocks-chapter-section {\r\n\tmargin: 2rem calc(50% - 50vw);\r\n}\r\n"],"names":[],"ignoreList":[],"sourceRoot":""}

2
plugins/carhop-blocks/build/chapter-section/view.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '1d5a917f7fd29dd5219e');
<?php return array('dependencies' => array(), 'version' => '31d6cfe0d16ae931b73c');

7
plugins/carhop-blocks/build/chapter-section/view.js
View File

@ -1,7 +0,0 @@
/******/ (() => { // webpackBootstrap
/*!*************************************!*\
!*** ./src/chapter-section/view.js ***!
\*************************************/
/******/ })()
;

88
plugins/carhop-blocks/src/chapter-section/deprecated.js Normal file
View File

@ -0,0 +1,88 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
/**
* Ancien save statique (SVG + section) — conservé pour la validation en éditeur
* des contenus déjà publiés avant le passage au rendu dynamique.
*/
function DeprecatedSave({ attributes }) {
const {
hasLightBackground,
disposition,
coverUrl,
coverAlt,
coverSize,
coverType,
backgroundColor,
textColor,
shapeType,
blockVariant,
borderColor,
} = attributes;
return (
<section
{...useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
${
hasLightBackground
? "chapter-section--bg-light"
: "chapter-section--bg-dark"
}`,
style: {
"--chapter-section-text-color": textColor
? textColor
: "var(--advised-text-color)",
"--cta-current-color":
blockVariant === "backgrounded"
? "inherit"
: "var(--wp--preset--color--primary) !important",
},
})}
>
<div className="chapter-section__inner">
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "variationA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "variationB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "variationA" && (
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "variationB" && (
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
<div className="chapter-section__content">
<div className="chapter-section__innerblocks">
<InnerBlocks.Content />
</div>
</div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
</div>
</section>
);
}
const deprecated = [
{
save: DeprecatedSave,
},
];
export default deprecated;

2
plugins/carhop-blocks/src/chapter-section/index.js
View File

@ -2,6 +2,7 @@ import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import deprecated from "./deprecated";
import metadata from "./block.json";
registerBlockType(metadata.name, {
@ -15,4 +16,5 @@ registerBlockType(metadata.name, {
},
edit: Edit,
save,
deprecated,
});

91
plugins/carhop-blocks/src/chapter-section/render.php Normal file
View File

@ -0,0 +1,91 @@
<?php
/**
* Rendu serveur : évite de persister du SVG/styles dans le post
* (filtrés par KSES pour les rôles sans unfiltered_html).
*
* @var array $attributes Attributs du bloc.
* @var string $content HTML des blocs internes (InnerBlocks).
* @var WP_Block $block Instance du bloc.
*/
$has_light_background = ! empty($attributes['hasLightBackground']);
$disposition = $attributes['disposition'] ?? 'left';
$cover_url = $attributes['coverUrl'] ?? '';
$cover_alt = $attributes['coverAlt'] ?? '';
$cover_size = $attributes['coverSize'] ?? 'large';
$cover_type = $attributes['coverType'] ?? 'image';
$background_color = $attributes['backgroundColor'] ?? '#ffffff';
$text_color = $attributes['textColor'] ?? '#136f63';
$shape_type = $attributes['shapeType'] ?? 'variationA';
$block_variant = $attributes['blockVariant'] ?? 'framed';
$border_color = $attributes['borderColor'] ?? '#136f63';
// Ancien contenu statique (save.js complet) : HTML déjà prêt, ne pas re-envelopper.
$is_legacy_static = $content && (
str_contains($content, 'deligraph-blocks-chapter-section')
|| str_contains($content, 'chapter-section__inner')
);
if ($is_legacy_static) {
echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return;
}
$bg_light_class = $has_light_background ? 'chapter-section--bg-light' : 'chapter-section--bg-dark';
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => sprintf(
'deligraph-blocks-chapter-section chapter-section chapter-section--%s chapter-section--%s %s',
esc_attr($disposition),
esc_attr($block_variant),
esc_attr($bg_light_class)
),
'style' => sprintf(
'--chapter-section-text-color:%s;--cta-current-color:%s',
esc_attr($text_color ? $text_color : 'var(--advised-text-color)'),
esc_attr($block_variant === 'backgrounded' ? 'inherit' : 'var(--wp--preset--color--primary) !important')
),
),
isset($block) ? $block : null
);
$show_shape_a = ($block_variant === 'backgrounded' || $block_variant === 'framed')
&& $background_color
&& $shape_type === 'variationA';
$show_shape_b = ($block_variant === 'backgrounded' || $block_variant === 'framed')
&& $background_color
&& $shape_type === 'variationB';
$shape_fill = $block_variant === 'backgrounded' ? esc_attr($background_color) : 'none';
$shape_stroke = $block_variant === 'framed' ? esc_attr($border_color) : 'none';
$stroke_width = ($block_variant === 'framed' && $border_color) ? '2px' : '0';
?>
<section <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>>
<div class="chapter-section__inner">
<?php if ($show_shape_a) : ?>
<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg" class="chapter-section__background" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M0 0H1440V686.701L0 744V0Z" fill="<?php echo $shape_fill; ?>" stroke="<?php echo $shape_stroke; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round"></path>
</svg>
<?php endif; ?>
<?php if ($show_shape_b) : ?>
<svg class="chapter-section__background" width="1302" height="654" viewBox="0 0 1302 654" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z" fill="<?php echo $shape_fill; ?>" stroke="<?php echo $shape_stroke; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round"></path>
</svg>
<?php endif; ?>
<div class="chapter-section__content">
<div class="chapter-section__innerblocks">
<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
</div>
<?php if ($cover_url) : ?>
<img
class="<?php echo esc_attr("chapter-section__cover chapter-section__cover--{$cover_size} chapter-section__cover--{$cover_type}"); ?>"
src="<?php echo esc_url($cover_url); ?>"
alt="<?php echo esc_attr($cover_alt); ?>" />
<?php endif; ?>
</div>
</section>

77
plugins/carhop-blocks/src/chapter-section/save.js
View File

@ -1,76 +1,5 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
export default function save({ attributes }) {
const {
hasLightBackground,
disposition,
coverUrl,
coverAlt,
coverSize,
coverType,
backgroundColor,
textColor,
shapeType,
blockVariant,
borderColor,
} = attributes;
import { InnerBlocks } from "@wordpress/block-editor";
return (
<section
{...useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
${
hasLightBackground
? "chapter-section--bg-light"
: "chapter-section--bg-dark"
}`,
style: {
"--chapter-section-text-color": textColor
? textColor
: "var(--advised-text-color)",
"--cta-current-color":
blockVariant === "backgrounded"
? "inherit"
: "var(--wp--preset--color--primary) !important",
},
})}
>
<div className="chapter-section__inner">
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "variationA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "variationB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "variationA" && (
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "variationB" && (
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
<div className="chapter-section__content">
<div className="chapter-section__innerblocks">
<InnerBlocks.Content />
</div>
</div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
</div>
</section>
);
export default function save() {
return <InnerBlocks.Content />;
}