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

FEATURE Refactoring block to handle native align width feature and remove duplicated initial blockWidth function

Browse Source
This commit is contained in:
Antoine M 2026-04-08 15:57:50 +02:00
parent c41db977d6
commit 6384af7175
14 changed files with 213 additions and 900 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/carhop-blocks/build/content-box/block.json
View File

@ -44,7 +44,13 @@
},
"blockVariant": {
"type": "string",
"default": "framed"
"default": "backgrounded",
"enum": [
"nude",
"framed",
"framed-backgrounded",
"backgrounded"
]
},
"shapeType": {
"type": "string",

16
plugins/carhop-blocks/build/content-box/index-rtl.css
View File

@ -1,6 +1,22 @@
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** 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/content-box/editor.scss ***!
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.content-box {
padding-right: 2.5rem !important;
padding-left: 2.5rem !important;
}
.content-box a {
color: var(--content-box-text-color) !important;
}
.editor-styles-wrapper .deligraph-blocks-chapter-section {
padding-right: 2.5rem !important;
padding-left: 2.5rem !important;
}
.content-box .wp-block-columns {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.content-box .block-editor-block-list__layout > .wp-block-columns {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

2
plugins/carhop-blocks/build/content-box/index.asset.php
View File

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

9
plugins/carhop-blocks/build/content-box/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/content-box/editor.scss ***!
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.content-box a {
color: var(--content-box-text-color) !important;
}
/*# sourceMappingURL=index.css.map*/
.content-box{padding-left:2.5rem!important;padding-right:2.5rem!important}.content-box a{color:var(--content-box-text-color)!important}.editor-styles-wrapper .deligraph-blocks-chapter-section{padding-left:2.5rem!important;padding-right:2.5rem!important}.content-box .block-editor-block-list__layout>.wp-block-columns,.content-box .wp-block-columns{margin-bottom:0!important;margin-top:0!important}

1
plugins/carhop-blocks/build/content-box/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"content-box/index.css","mappings":";;;AACC;EACC;AAAF,C","sources":["webpack://carhop-blocks/./src/content-box/editor.scss"],"sourcesContent":[".content-box {\n\ta {\n\t\tcolor: var(--content-box-text-color) !important;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}

863
plugins/carhop-blocks/build/content-box/index.js
View File

File diff suppressed because one or more lines are too long

1
plugins/carhop-blocks/build/content-box/index.js.map
View File

File diff suppressed because one or more lines are too long

3
plugins/carhop-blocks/build/content-box/style-index.css
View File

@ -1,4 +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/content-box/style.scss ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

7
plugins/carhop-blocks/build/content-box/view.js
View File

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

8
plugins/carhop-blocks/src/content-box/block.json
View File

@ -44,7 +44,13 @@
},
"blockVariant": {
"type": "string",
"default": "framed"
"default": "backgrounded",
"enum": [
"nude",
"framed",
"framed-backgrounded",
"backgrounded"
]
},
"shapeType": {
"type": "string",

95
plugins/carhop-blocks/src/content-box/deprecated-save.js Normal file
View File

@ -0,0 +1,95 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
/**
* Ancien save (blockWidth) — conservé pour la migration des blocs.
*/
export default function deprecatedSave({ attributes }) {
const {
backgroundColor,
textColor,
hasLightBackground,
blockVariant,
blockWidth,
shapeType,
borderColor,
} = attributes;
const blockWidthClass =
blockWidth === "contained"
? "aligncontained"
: blockWidth === "wide"
? "alignwide"
: "alignfull";
const lightnessClass = hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark";
return (
<section
{...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${blockWidthClass}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":
blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded"
? backgroundColor
: "transparent",
},
})}
>
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
)}
<div className="content-box__innerblocks">
<InnerBlocks.Content />
</div>
</section>
);
}

48
plugins/carhop-blocks/src/content-box/edit.js
View File

@ -37,11 +37,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
const {
hasBackgroundColor,
align,
backgroundColor,
textColor,
hasLightBackground,
blockVariant,
blockWidth,
shapeType,
borderColor,
} = attributes;
@ -91,8 +91,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}
}
console.log(shapeType);
console.log(blockVariant);
const alignClass =
align === "full"
? "alignfull"
: align === "wide"
? "alignwide"
: "aligncontained";
console.log(align);
return (
<>
<InspectorControls>
@ -118,20 +124,19 @@ export default function Edit({ attributes, setAttributes, ...props }) {
</ToggleGroupControl>
<ToggleGroupControl
label="Largeur du bloc"
value={blockWidth}
onChange={(value) => setAttributes({ blockWidth: value })}
value={align}
onChange={(value) => setAttributes({ align: value })}
isBlock
__nextHasNoMarginBottom
__next40pxDefaultSize
>
<ToggleGroupControlOption value="contained" label="Contenue" />
<ToggleGroupControlOption value="" label="Contenue" />
<ToggleGroupControlOption value="wide" label="Large" />
<ToggleGroupControlOption value="full" label="Pleine largeur" />
</ToggleGroupControl>
</PanelBody>
{(blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded") && (
{blockVariant !== "nude" && (
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Arrière plan", "deligraph-blocks")}
@ -210,8 +215,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark"
}
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
} ${alignClass}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":
@ -252,6 +256,30 @@ export default function Edit({ attributes, setAttributes, ...props }) {
shapeType === "shapeC" && (
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA
backgroundColor={backgroundColor}
borderColor={borderColor}
/>
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB
backgroundColor={backgroundColor}
borderColor={borderColor}
/>
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC
backgroundColor={backgroundColor}
borderColor={borderColor}
/>
)}
<div className="content-box__innerblocks">
<InnerBlocks
template={[

19
plugins/carhop-blocks/src/content-box/editor.scss
View File

@ -1,5 +1,24 @@
.content-box {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
a {
color: var(--content-box-text-color) !important;
}
}
.editor-styles-wrapper .deligraph-blocks-chapter-section {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
.content-box {
.wp-block-columns {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.block-editor-block-list__layout > .wp-block-columns {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}

33
plugins/carhop-blocks/src/content-box/save.js
View File

@ -9,18 +9,26 @@ export default function save({ attributes }) {
hasLightBackground,
hasBackgroundColor,
blockVariant,
blockWidth,
align,
shapeType,
borderColor,
} = attributes;
const lightnessClass = hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark";
const alignClass =
align === "full"
? "alignfull"
: align === "wide"
? "alignwide"
: "aligncontained";
return (
<section
{...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
}
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":
@ -61,6 +69,21 @@ export default function save({ attributes }) {
shapeType === "shapeC" && (
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
)}
<div className="content-box__innerblocks">
<InnerBlocks.Content />
</div>