Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling new parameters

Browse Source
This commit is contained in:
Antoine M 2024-08-19 16:23:35 +02:00
parent 08ce5886bd
commit ddd9f33142
7 changed files with 120 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
blocks/labelled-picture/build/block.json
View File

@ -19,6 +19,14 @@
"type": "boolean",
"default": "true"
},
"legendLocation": {
"type": "string",
"default": "after"
},
"hasLightbox": {
"type": "boolean",
"default": "false"
},
"hasRoundedShadow": {
"type": "boolean",
"default": "false"

2
blocks/labelled-picture/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '6de2664ba6b7abf8bd92');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'bc58aa87b993f5997c0d');

61
blocks/labelled-picture/build/index.js
View File

@ -37,6 +37,8 @@ function Edit({
}) {
const {
hasStickyLegend,
hasLightbox,
legendLocation,
hasFixedHeight,
hasRoundedShadow,
showTitle,
@ -91,8 +93,21 @@ function Edit({
hasRoundedShadow
});
}
function handleLegendLocationChange(legendLocation) {
setAttributes({
legendLocation
});
}
function handleHasLightbox(hasLightbox) {
setAttributes({
hasLightbox
});
}
const renderCaption = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption);
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "L\xE9gende",
title: "Param\xE8tres",
className: "homegrade-blocks-components-image__panel-body "
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "L\xE9gende Autocollante",
@ -112,7 +127,23 @@ function Edit({
label: "Rounded & Shadow",
checked: hasRoundedShadow,
onChange: handleHasRoundedShadow
})), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "Afficher une lightbox",
checked: hasLightbox,
onChange: handleHasLightbox
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControl, {
label: "Emplacement de la l\xE9gende",
value: "before",
onChange: handleLegendLocationChange,
isBlock: true,
__nextHasNoMarginBottom: true
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControlOption, {
value: "before",
label: "Avant l'Image"
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControlOption, {
value: "after",
label: "Apr\xE8s l'image"
}))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "Source de l'image",
className: "homegrade-blocks-components-image__panel-body "
}, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
@ -140,12 +171,10 @@ function Edit({
${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`
})
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
}, legendLocation === "before" && renderCaption(), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl,
alt: pictureAlt
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption)), !pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
}), legendLocation === "after" && renderCaption()), !pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
disableMediaButtons: pictureUrl,
icon: "admin-appearance",
onSelect: updatePictureImg,
@ -224,8 +253,10 @@ function save({
attributes
}) {
const {
hasFixedHeight,
hasStickyLegend,
hasLightbox,
legendLocation,
hasFixedHeight,
hasRoundedShadow,
showTitle,
pictureUrl,
@ -233,18 +264,22 @@ function save({
pictureTitle,
pictureCaption
} = attributes;
const renderCaption = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption);
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${hasStickyLegend ? "sticky" : "normal"} ${hasFixedHeight ? "homegrade-blocks-labelled-picture--fixed-height" : ""}
${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} singleLightbox-link`
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}
${hasLightbox ? "singleLightbox-link" : ""}
`
})
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
}, legendLocation === "before" && renderCaption(), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl,
alt: pictureAlt
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption)));
}), legendLocation === "after" && renderCaption()));
}
/***/ }),
@ -380,7 +415,7 @@ module.exports = window["wp"]["primitives"];
\************************/
/***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image + Légende","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasStickyLegend":{"type":"boolean","default":"true"},"hasRoundedShadow":{"type":"boolean","default":"false"},"hasFixedHeight":{"type":"boolean","default":"true"},"showTitle":{"type":"boolean","default":"true"},"pictureUrl":{"type":"string"},"pictureTitle":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image + Légende","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasStickyLegend":{"type":"boolean","default":"true"},"legendLocation":{"type":"string","default":"after"},"hasLightbox":{"type":"boolean","default":"false"},"hasRoundedShadow":{"type":"boolean","default":"false"},"hasFixedHeight":{"type":"boolean","default":"true"},"showTitle":{"type":"boolean","default":"true"},"pictureUrl":{"type":"string"},"pictureTitle":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
/***/ })

2
blocks/labelled-picture/build/index.js.map
View File

File diff suppressed because one or more lines are too long

8
blocks/labelled-picture/src/block.json
View File

@ -19,6 +19,14 @@
"type": "boolean",
"default": "true"
},
"legendLocation": {
"type": "string",
"default": "after"
},
"hasLightbox": {
"type": "boolean",
"default": "false"
},
"hasRoundedShadow": {
"type": "boolean",
"default": "false"

43
blocks/labelled-picture/src/edit.js
View File

@ -27,6 +27,8 @@ export default function Edit({
}) {
const {
hasStickyLegend,
hasLightbox,
legendLocation,
hasFixedHeight,
hasRoundedShadow,
showTitle,
@ -76,12 +78,27 @@ export default function Edit({
function handleHasRoundedShadow(hasRoundedShadow) {
setAttributes({ hasRoundedShadow });
}
function handleLegendLocationChange(legendLocation) {
setAttributes({ legendLocation });
}
function handleHasLightbox(hasLightbox) {
setAttributes({ hasLightbox });
}
const renderCaption = () => (
<figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
);
return (
<>
<InspectorControls>
<PanelBody
title="Légende"
title="Paramètres"
className="homegrade-blocks-components-image__panel-body "
>
<ToggleControl
@ -106,6 +123,22 @@ export default function Edit({
checked={hasRoundedShadow}
onChange={handleHasRoundedShadow}
/>
<ToggleControl
label="Afficher une lightbox"
checked={hasLightbox}
onChange={handleHasLightbox}
/>
<ToggleGroupControl
label="Emplacement de la légende"
value="before"
onChange={handleLegendLocationChange}
isBlock
__nextHasNoMarginBottom
>
<ToggleGroupControlOption value="before" label="Avant l'Image" />
<ToggleGroupControlOption value="after" label="Après l'image" />
</ToggleGroupControl>
</PanelBody>
<PanelBody
title="Source de l'image"
@ -161,13 +194,9 @@ export default function Edit({
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`,
})}
>
{legendLocation === "before" && renderCaption()}
<img src={pictureUrl} alt={pictureAlt} />
<figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
{legendLocation === "after" && renderCaption()}
</figure>
)}

30
blocks/labelled-picture/src/save.js
View File

@ -2,8 +2,10 @@ import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
const {
hasFixedHeight,
hasStickyLegend,
hasLightbox,
legendLocation,
hasFixedHeight,
hasRoundedShadow,
showTitle,
pictureUrl,
@ -12,6 +14,15 @@ export default function save({ attributes }) {
pictureCaption,
} = attributes;
const renderCaption = () => (
<figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
);
return (
<>
{pictureUrl && (
@ -29,20 +40,15 @@ export default function save({ attributes }) {
? "homegrade-blocks-labelled-picture--legend-has-title"
: ""
}
${
hasRoundedShadow
? "homegrade-blocks-labelled-picture--rounded-shadow"
: ""
} singleLightbox-link`,
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}
${hasLightbox ? "singleLightbox-link" : ""}
`,
})}
>
{legendLocation === "before" && renderCaption()}
<img src={pictureUrl} alt={pictureAlt} />
<figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
{legendLocation === "after" && renderCaption()}
</figure>
)}
</>