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

FEATURE Handling background color option

Browse Source
This commit is contained in:
Antoine M 2025-06-04 10:02:29 +02:00
parent 9dceecb8e1
commit 3e61f48018
9 changed files with 222 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/carhop-blocks/blocks/chapter-section/build/block.json
View File

@ -49,9 +49,21 @@
"right" "right"
] ]
}, },
"color": { "hasBackgroundColor": {
"type": "boolean",
"default": false
},
"backgroundColor": {
"type": "string", "type": "string",
"default": "#000000" "default": "#ffffff"
},
"backgroundOrientation": {
"type": "string",
"default": "left",
"enum": [
"left",
"right"
]
} }
}, },
"usesContext": [ "usesContext": [

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

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

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

@ -41,7 +41,7 @@ const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"deliblocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"color":{"type":"string","default":"#000000"}},"usesContext":["postType","postId"]}'); module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"deliblocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#ffffff"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
/***/ }), /***/ }),
@ -71,17 +71,22 @@ __webpack_require__.r(__webpack_exports__);
function Edit({ function Edit({
attributes, attributes,
setAttributes, setAttributes,
...props ...props
}) { }) {
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
const { const {
disposition, disposition,
coverUrl, coverUrl,
coverAlt, coverAlt,
coverId, coverId,
coverSize coverSize,
hasBackgroundColor,
backgroundColor,
backgroundOrientation
} = attributes; } = attributes;
function onDispositionChange(disposition) { function onDispositionChange(disposition) {
setAttributes({ setAttributes({
@ -107,9 +112,29 @@ function Edit({
coverUrl: null coverUrl: null
}); });
} }
function onBackgroundColorChange(value) {
setAttributes({
backgroundColor: value
});
}
function onHasBackgroundColorChange(value) {
setAttributes({
hasBackgroundColor: value
});
if (!value) {
setAttributes({
backgroundColor: null
});
}
}
function onBackgroundOrientationChange(value) {
setAttributes({
backgroundOrientation: value
});
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, { 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__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body", className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Image d'accompagnement", "deligraph-blocks"), title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Image d'accompagnement", "deligraph-blocks"),
children: [coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", { children: [coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", {
@ -166,12 +191,49 @@ function Edit({
value: "small" value: "small"
})] })]
})] })]
}) }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Arrière plan", "deligraph-blocks"),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CheckboxControl, {
label: "Arri\xE8re plan color\xE9",
checked: hasBackgroundColor,
onChange: onHasBackgroundColorChange
}), hasBackgroundColor && /*#__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_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors,
value: backgroundColor,
onChange: onBackgroundColorChange
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant",
isBlock: true,
label: "Disposition",
onChange: onBackgroundOrientationChange,
value: backgroundOrientation,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Gauche",
value: "left"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Droite",
value: "right"
})]
})]
})]
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} alignfull` className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`
}), }),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", { children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("svg", {
className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,
width: "1302",
height: "654",
viewBox: "0 0 1302 654",
preserveAspectRatio: "none",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path", {
d: "M1302 0L0 15.8281V654L1302 642.633L1302 0Z",
fill: backgroundColor
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
className: "chapter-section__content", className: "chapter-section__content",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
className: "chapter-section__innerblocks", className: "chapter-section__innerblocks",
@ -247,7 +309,7 @@ __webpack_require__.r(__webpack_exports__);
d: "M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z" d: "M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z"
}) })
}), }),
foreground: "#723d46" foreground: "#136f63"
}, },
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"], edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"] save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
@ -278,13 +340,26 @@ function save({
disposition, disposition,
coverUrl, coverUrl,
coverAlt, coverAlt,
coverSize coverSize,
backgroundColor,
hasBackgroundColor,
backgroundOrientation
} = attributes; } = attributes;
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("section", { return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ` className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${backgroundColor ? "chapter-section--has-background" : ""}`
}), }),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", { children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,
width: "1302",
height: "654",
viewBox: "0 0 1302 654",
preserveAspectRatio: "none",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path", {
d: "M1302 0L0 15.8281V654L1302 642.633L1302 0Z",
fill: backgroundColor
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
className: "chapter-section__content", className: "chapter-section__content",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
className: "chapter-section__innerblocks", className: "chapter-section__innerblocks",

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

File diff suppressed because one or more lines are too long

16
plugins/carhop-blocks/blocks/chapter-section/src/block.json
View File

@ -49,9 +49,21 @@
"right" "right"
] ]
}, },
"color": { "hasBackgroundColor": {
"type": "boolean",
"default": false
},
"backgroundColor": {
"type": "string", "type": "string",
"default": "#000000" "default": "#ffffff"
},
"backgroundOrientation": {
"type": "string",
"default": "left",
"enum": [
"left",
"right"
]
} }
}, },
"usesContext": [ "usesContext": [

3
plugins/carhop-blocks/blocks/chapter-section/src/carhop-bg-shape.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1302" height="654" viewBox="0 0 1302 654" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z" fill="#FCF3F8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 179 B

79
plugins/carhop-blocks/blocks/chapter-section/src/edit.js
View File

@ -5,19 +5,32 @@ import {
InspectorControls, InspectorControls,
MediaReplaceFlow, MediaReplaceFlow,
MediaPlaceholder, MediaPlaceholder,
useSetting,
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import { lock, trash } from "@wordpress/icons"; import { lock, trash } from "@wordpress/icons";
import { ColorPalette } from "@wordpress/components";
import { import {
PanelBody, PanelBody,
__experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOption as ToggleGroupControlOption,
Button, Button,
CheckboxControl,
} from "@wordpress/components"; } from "@wordpress/components";
import "./editor.scss"; import "./editor.scss";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
const { disposition, coverUrl, coverAlt, coverId, coverSize } = attributes; const colors = useSetting("color.palette.theme");
const {
disposition,
coverUrl,
coverAlt,
coverId,
coverSize,
hasBackgroundColor,
backgroundColor,
backgroundOrientation,
} = attributes;
function onDispositionChange(disposition) { function onDispositionChange(disposition) {
setAttributes({ disposition }); setAttributes({ disposition });
} }
@ -39,6 +52,19 @@ export default function Edit({ attributes, setAttributes, ...props }) {
coverUrl: null, coverUrl: null,
}); });
} }
function onBackgroundColorChange(value) {
setAttributes({ backgroundColor: value });
}
function onHasBackgroundColorChange(value) {
setAttributes({ hasBackgroundColor: value });
if (!value) {
setAttributes({ backgroundColor: null });
}
}
function onBackgroundOrientationChange(value) {
setAttributes({ backgroundOrientation: value });
}
return ( return (
<> <>
<InspectorControls> <InspectorControls>
@ -96,12 +122,59 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<ToggleGroupControlOption label="Petite" value="small" /> <ToggleGroupControlOption label="Petite" value="small" />
</ToggleGroupControl> </ToggleGroupControl>
</PanelBody> </PanelBody>
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Arrière plan", "deligraph-blocks")}
>
<CheckboxControl
label="Arrière plan coloré"
checked={hasBackgroundColor}
onChange={onHasBackgroundColorChange}
/>
{hasBackgroundColor && (
<>
<ColorPalette
colors={colors}
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Disposition"
onChange={onBackgroundOrientationChange}
value={backgroundOrientation}
>
<ToggleGroupControlOption label="Gauche" value="left" />
<ToggleGroupControlOption label="Droite" value="right" />
</ToggleGroupControl>
</>
)}
</PanelBody>
</InspectorControls> </InspectorControls>
<section <section
{...useBlockProps({ {...useBlockProps({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} alignfull`, className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${
hasBackgroundColor && backgroundColor
? "chapter-section--has-background"
: ""
}`,
})} })}
> >
{hasBackgroundColor && backgroundColor && (
<svg
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
width="1302"
height="654"
viewBox="0 0 1302 654"
preserveAspectRatio="none"
>
<path
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
fill={backgroundColor}
/>
</svg>
)}
<div className="chapter-section__content"> <div className="chapter-section__content">
<div className="chapter-section__innerblocks"> <div className="chapter-section__innerblocks">
<InnerBlocks <InnerBlocks

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

@ -11,7 +11,7 @@ registerBlockType(metadata.name, {
<path d="M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z" /> <path d="M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z" />
</svg> </svg>
), ),
foreground: "#723d46", foreground: "#136f63",
}, },
edit: Edit, edit: Edit,
save, save,

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

@ -1,12 +1,36 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { disposition, coverUrl, coverAlt, coverSize } = attributes; const {
disposition,
coverUrl,
coverAlt,
coverSize,
backgroundColor,
hasBackgroundColor,
backgroundOrientation,
} = attributes;
return ( return (
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} `, className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${
backgroundColor ? "chapter-section--has-background" : ""
}`,
})} })}
> >
{hasBackgroundColor && backgroundColor && (
<svg
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
width="1302"
height="654"
viewBox="0 0 1302 654"
preserveAspectRatio="none"
>
<path
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
fill={backgroundColor}
/>
</svg>
)}
<div className="chapter-section__content"> <div className="chapter-section__content">
<div className="chapter-section__innerblocks"> <div className="chapter-section__innerblocks">
<InnerBlocks.Content /> <InnerBlocks.Content />