FEATURE Handling a black and white version
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Antoine M 2025-10-14 10:31:00 +02:00
parent f487c95751
commit 2659311e7a
8 changed files with 75 additions and 11 deletions

View File

@ -37,6 +37,10 @@
},
"coverAlt": {
"type": "string"
},
"blackWhiteCoverFilter": {
"type": "boolean",
"default": true
}
}
}

View File

@ -42,6 +42,10 @@ return array(
),
'coverAlt' => array(
'type' => 'string'
),
'blackWhiteCoverFilter' => array(
'type' => 'boolean',
'default' => true
)
)
)

View File

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

View File

@ -79,7 +79,7 @@ function Cover({
\************************/
/***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/narrative-card","version":"0.1.0","title":"Carte narrative","category":"carhop-blocks","icon":"smiley","description":"Une carte narrative","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasCover":{"type":"boolean","default":true},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"}}}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/narrative-card","version":"0.1.0","title":"Carte narrative","category":"carhop-blocks","icon":"smiley","description":"Une carte narrative","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasCover":{"type":"boolean","default":true},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"blackWhiteCoverFilter":{"type":"boolean","default":true}}}');
/***/ }),
@ -120,9 +120,11 @@ function Edit({
coverUrl,
coverAlt,
coverPosition,
hasCover
hasCover,
blackWhiteCoverFilter
} = attributes;
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
console.log(blackWhiteCoverFilter);
function setCoverAttributes(cover) {
setAttributes({
coverId: cover.id,
@ -187,12 +189,30 @@ function Edit({
label: "Droite",
value: "right"
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant",
isBlock: true,
label: "Filtre",
onChange: value => {
console.log(value);
setAttributes({
blackWhiteCoverFilter: value === "true"
});
},
value: blackWhiteCoverFilter ? "true" : "false",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Noir et blanc",
value: "true"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Aucun",
value: "false"
})]
})]
})]
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}` : ""}`
className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
}),
children: [shouldShowCoverLeft && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Cover__WEBPACK_IMPORTED_MODULE_4__["default"], {
coverUrl: coverUrl,
@ -293,11 +313,12 @@ function save({
hasCover,
coverUrl,
coverAlt,
coverPosition
coverPosition,
blackWhiteCoverFilter
} = attributes;
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}` : ""}`
className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
}),
children: [hasCover && coverPosition === "left" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
className: "narrative-card__cover",

File diff suppressed because one or more lines are too long

View File

@ -37,6 +37,10 @@
},
"coverAlt": {
"type": "string"
},
"blackWhiteCoverFilter": {
"type": "boolean",
"default": true
}
}
}

View File

@ -21,8 +21,16 @@ import { lock, trash } from "@wordpress/icons";
import CoverImage from "./Cover";
export default function Edit({ attributes, setAttributes }) {
const { coverId, coverUrl, coverAlt, coverPosition, hasCover } = attributes;
const {
coverId,
coverUrl,
coverAlt,
coverPosition,
hasCover,
blackWhiteCoverFilter,
} = attributes;
const colors = useSetting("color.palette.theme");
console.log(blackWhiteCoverFilter);
function setCoverAttributes(cover) {
setAttributes({
@ -93,6 +101,20 @@ export default function Edit({ attributes, setAttributes }) {
<ToggleGroupControlOption label="Gauche" value="left" />
<ToggleGroupControlOption label="Droite" value="right" />
</ToggleGroupControl>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Filtre"
onChange={(value) => {
console.log(value);
setAttributes({ blackWhiteCoverFilter: value === "true" });
}}
value={blackWhiteCoverFilter ? "true" : "false"}
>
<ToggleGroupControlOption label="Noir et blanc" value="true" />
<ToggleGroupControlOption label="Aucun" value="false" />
</ToggleGroupControl>
</div>
)}
</PanelBody>
@ -101,7 +123,11 @@ export default function Edit({ attributes, setAttributes }) {
{...useBlockProps({
className: `narrative-card ${
hasCover
? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}`
? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
blackWhiteCoverFilter
? "narrative-card--black-white-cover-filter"
: ""
}`
: ""
}`,
})}

View File

@ -2,14 +2,19 @@ import { useBlockProps } from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { hasCover, coverUrl, coverAlt, coverPosition } = attributes;
const { hasCover, coverUrl, coverAlt, coverPosition, blackWhiteCoverFilter } =
attributes;
return (
<div
{...useBlockProps.save({
className: `narrative-card ${
hasCover
? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}`
? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
blackWhiteCoverFilter
? "narrative-card--black-white-cover-filter"
: ""
}`
: ""
}`,
})}