FEATURE Handling cover type variation

This commit is contained in:
Antoine M 2025-07-15 10:40:50 +02:00
parent 596e210aef
commit 889d9f01d2
7 changed files with 58 additions and 7 deletions

View File

@ -30,6 +30,14 @@
"contained"
]
},
"coverType": {
"type": "string",
"default": "image",
"enum": [
"classic",
"photoframe"
]
},
"coverUrl": {
"type": "string"
},

View File

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

View File

@ -41,7 +41,7 @@ const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx
\************************/
/***/ ((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":"carhop-blocks","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"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"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"},"textColor":{"type":"string","default":"#136f63"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"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":"carhop-blocks","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"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"coverType":{"type":"string","default":"image","enum":["classic","photoframe"]},"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"},"textColor":{"type":"string","default":"#136f63"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
/***/ }),
@ -80,6 +80,7 @@ function Edit({
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
const {
disposition,
coverType,
coverUrl,
coverAlt,
coverId,
@ -124,6 +125,11 @@ function Edit({
});
}
}
function onCoverTypeChange(value) {
setAttributes({
coverType: value
});
}
function onBackgroundOrientationChange(value) {
setAttributes({
backgroundOrientation: value
@ -174,6 +180,19 @@ function Edit({
onClick: removeCoverAttributes
})
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant",
isBlock: true,
label: "Type d'image",
onChange: onCoverTypeChange,
value: coverType,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Classique",
value: "classic"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Encadr\xE9e",
value: "photoframe"
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant",
isBlock: true,
@ -271,7 +290,7 @@ function Edit({
})
})
}), coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", {
className: `chapter-section__cover chapter-section__cover--${coverSize}`,
className: `chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`,
src: coverUrl,
alt: coverAlt
}), !coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaPlaceholder, {
@ -361,6 +380,7 @@ function save({
coverUrl,
coverAlt,
coverSize,
coverType,
backgroundColor,
hasBackgroundColor,
backgroundOrientation,
@ -391,7 +411,7 @@ function save({
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
})
}), coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img", {
className: `chapter-section__cover chapter-section__cover--${coverSize}`,
className: `chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`,
src: coverUrl,
alt: coverAlt
})]

File diff suppressed because one or more lines are too long

View File

@ -30,6 +30,14 @@
"contained"
]
},
"coverType": {
"type": "string",
"default": "image",
"enum": [
"classic",
"photoframe"
]
},
"coverUrl": {
"type": "string"
},

View File

@ -22,6 +22,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme");
const {
disposition,
coverType,
coverUrl,
coverAlt,
coverId,
@ -60,6 +61,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
setAttributes({ backgroundColor: null });
}
}
function onCoverTypeChange(value) {
setAttributes({ coverType: value });
}
function onBackgroundOrientationChange(value) {
setAttributes({ backgroundOrientation: value });
@ -113,6 +117,16 @@ export default function Edit({ attributes, setAttributes, ...props }) {
)}
</div>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Type d'image"
onChange={onCoverTypeChange}
value={coverType}
>
<ToggleGroupControlOption label="Classique" value="classic" />
<ToggleGroupControlOption label="Encadrée" value="photoframe" />
</ToggleGroupControl>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
@ -241,7 +255,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
</div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize}`}
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>

View File

@ -5,6 +5,7 @@ export default function save({ attributes }) {
coverUrl,
coverAlt,
coverSize,
coverType,
backgroundColor,
hasBackgroundColor,
backgroundOrientation,
@ -47,7 +48,7 @@ export default function save({ attributes }) {
</div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize}`}
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>