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

adding contentDisposition feature

Browse Source
This commit is contained in:
Antoine M 2023-11-27 16:23:48 +01:00
parent 1ce61d8d30
commit 14210c9cf3
7 changed files with 220 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
blocks/text-image/build/block.json
View File

@ -5,7 +5,7 @@
"version": "0.1.0", "version": "0.1.0",
"title": "Texte + Image", "title": "Texte + Image",
"category": "homegrade-blocks", "category": "homegrade-blocks",
"description": "Bloc de texte + image latérale", "description": "Bloc de texte & image latérale",
"supports": { "supports": {
"html": false "html": false
}, },
@ -26,6 +26,10 @@
"imageProportion": { "imageProportion": {
"type": "string", "type": "string",
"default": "original" "default": "original"
},
"contentDisposition": {
"type": "string",
"default": "left"
} }
} }
} }

2
blocks/text-image/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '008466206a8d9026fb67'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2266df3a975a48180baf');

80
blocks/text-image/build/index.js
View File

@ -59,7 +59,6 @@ function ImageMediaPlaceholder({
}); });
} }
function removeImageAttributes() { function removeImageAttributes() {
console.log("removeImageAttributes");
setAttributes({ setAttributes({
imageId: null, imageId: null,
imageAlt: null, imageAlt: null,
@ -130,7 +129,7 @@ function ImagePanelBody({
} }
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "homegrade-blocks-components-image__panel-body", className: "homegrade-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice") title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks")
}, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: imageUrl, src: imageUrl,
alt: imageAlt alt: imageAlt
@ -142,7 +141,7 @@ function ImagePanelBody({
allowedTypes: ["image"], allowedTypes: ["image"],
accept: "image/*", accept: "image/*",
onSelect: setImageAttributes, onSelect: setImageAttributes,
name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice") name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks")
}), imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Button, { }), imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Button, {
className: "custom-flow-button", className: "custom-flow-button",
variant: "primary", variant: "primary",
@ -192,6 +191,9 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../_components/ImagePanelBody */ "../_components/ImagePanelBody.jsx"); /* harmony import */ var _components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../_components/ImagePanelBody */ "../_components/ImagePanelBody.jsx");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__);
@ -208,9 +210,31 @@ function Edit({
imageId, imageId,
imageAlt, imageAlt,
imageUrl, imageUrl,
imageProportion imageProportion,
contentDisposition
} = attributes; } = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__["default"], { function changeContentDisposition(newContentDisposition) {
console.log(newContentDisposition);
setAttributes({
contentDisposition: newContentDisposition
});
}
console.log(typeof contentDisposition);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Disposition", "homegrade"),
className: "homegrade-panel-body"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControl, {
className: "homegrade-blocks-highlight__variant",
isBlock: true,
onChange: changeContentDisposition,
value: contentDisposition
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControlOption, {
label: "Gauche",
value: "left"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControlOption, {
label: "Droite",
value: "right"
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__["default"], {
imageUrl: imageUrl, imageUrl: imageUrl,
imageId: imageId, imageId: imageId,
imageAlt: imageAlt, imageAlt: imageAlt,
@ -220,13 +244,15 @@ function Edit({
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
className: `homegrade-blocks-text-image` className: `homegrade-blocks-text-image`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, contentDisposition === "left" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text" className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
template: [["core/paragraph", { template: [["homegrade-content-blocks/content-heading", {
placeholder: "Demain, et demain, et demain!"
}], ["core/paragraph", {
placeholder: "Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée." placeholder: "Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée."
}]], }]],
allowedBlocks: ["core/paragraph"] allowedBlocks: ["core/paragraph", "core/list", "core/button", "core/buttons", "homegrade-content-blocks/content-heading"]
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image" className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], {
@ -239,7 +265,26 @@ function Edit({
imageAlt: imageAlt, imageAlt: imageAlt,
imageUrl: imageUrl, imageUrl: imageUrl,
imageProportion: imageProportion imageProportion: imageProportion
})))); }))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], {
imageAlt: imageAlt,
imageId: imageId,
imageUrl: imageUrl,
setAttributes: setAttributes,
imageProportion: imageProportion
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Image__WEBPACK_IMPORTED_MODULE_4__["default"], {
imageAlt: imageAlt,
imageUrl: imageUrl,
imageProportion: imageProportion
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
template: [["core/paragraph", {
placeholder: "Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée."
}]],
allowedBlocks: ["core/paragraph", "homegrade-content-blocks/content-heading"]
})))));
} }
/***/ }), /***/ }),
@ -308,13 +353,14 @@ function save({
let { let {
imageAlt, imageAlt,
imageUrl, imageUrl,
imageProportion imageProportion,
contentDisposition
} = attributes; } = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-text-image` className: `homegrade-blocks-text-image`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, contentDisposition === "left" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text" className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image" className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
@ -322,7 +368,15 @@ function save({
imageAlt: imageAlt, imageAlt: imageAlt,
imageUrl: imageUrl, imageUrl: imageUrl,
imageProportion: imageProportion imageProportion: imageProportion
}))); }))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
imageAlt: imageAlt,
imageUrl: imageUrl,
imageProportion: imageProportion
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
} }
/***/ }), /***/ }),
@ -448,7 +502,7 @@ module.exports = window["wp"]["primitives"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte + image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"}}}'); module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte & image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"contentDisposition":{"type":"string","default":"left"}}}');
/***/ }) /***/ })

2
blocks/text-image/build/index.js.map
View File

File diff suppressed because one or more lines are too long

6
blocks/text-image/src/block.json
View File

@ -5,7 +5,7 @@
"version": "0.1.0", "version": "0.1.0",
"title": "Texte + Image", "title": "Texte + Image",
"category": "homegrade-blocks", "category": "homegrade-blocks",
"description": "Bloc de texte + image latérale", "description": "Bloc de texte & image latérale",
"supports": { "supports": {
"html": false "html": false
}, },
@ -26,6 +26,10 @@
"imageProportion": { "imageProportion": {
"type": "string", "type": "string",
"default": "original" "default": "original"
},
"contentDisposition": {
"type": "string",
"default": "left"
} }
} }
} }

141
blocks/text-image/src/edit.js
View File

@ -10,12 +10,41 @@ import {
InnerBlocks, InnerBlocks,
MediaPlaceholder, MediaPlaceholder,
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import {
Button,
ToolbarButton,
PanelBody,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
let { imageId, imageAlt, imageUrl, imageProportion } = attributes; let { imageId, imageAlt, imageUrl, imageProportion, contentDisposition } =
attributes;
function changeContentDisposition(newContentDisposition) {
console.log(newContentDisposition);
setAttributes({ contentDisposition: newContentDisposition });
}
console.log(typeof contentDisposition);
return ( return (
<> <>
<InspectorControls> <InspectorControls>
<PanelBody
title={__("Disposition", "homegrade")}
className="homegrade-panel-body"
>
<ToggleGroupControl
className="homegrade-blocks-highlight__variant"
isBlock
onChange={changeContentDisposition}
value={contentDisposition}
>
<ToggleGroupControlOption label="Gauche" value="left" />
<ToggleGroupControlOption label="Droite" value="right" />
</ToggleGroupControl>
</PanelBody>
<ImagePanelBody <ImagePanelBody
imageUrl={imageUrl} imageUrl={imageUrl}
imageId={imageId} imageId={imageId}
@ -29,36 +58,88 @@ export default function Edit({ attributes, setAttributes, ...props }) {
className: `homegrade-blocks-text-image`, className: `homegrade-blocks-text-image`,
})} })}
> >
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"> {contentDisposition === "left" && (
<InnerBlocks <>
template={[ <div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
[ <InnerBlocks
"core/paragraph", template={[
{ [
placeholder: "homegrade-content-blocks/content-heading",
"Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée.", {
}, placeholder: "Demain, et demain, et demain!",
], },
]} ],
allowedBlocks={["core/paragraph"]} [
/> "core/paragraph",
{} {
</div> placeholder:
"Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée.",
},
],
]}
allowedBlocks={[
"core/paragraph",
"core/list",
"core/button",
"core/buttons",
"homegrade-content-blocks/content-heading",
]}
/>
{}
</div>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"> <div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
<ImageMediaPlaceholder <ImageMediaPlaceholder
imageAlt={imageAlt} imageAlt={imageAlt}
imageId={imageId} imageId={imageId}
imageUrl={imageUrl} imageUrl={imageUrl}
setAttributes={setAttributes} setAttributes={setAttributes}
imageProportion={imageProportion} imageProportion={imageProportion}
/> />
<Image <Image
imageAlt={imageAlt} imageAlt={imageAlt}
imageUrl={imageUrl} imageUrl={imageUrl}
imageProportion={imageProportion} imageProportion={imageProportion}
/> />
</div> </div>
</>
)}
{contentDisposition === "right" && (
<>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
<ImageMediaPlaceholder
imageAlt={imageAlt}
imageId={imageId}
imageUrl={imageUrl}
setAttributes={setAttributes}
imageProportion={imageProportion}
/>
<Image
imageAlt={imageAlt}
imageUrl={imageUrl}
imageProportion={imageProportion}
/>
</div>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
<InnerBlocks
template={[
[
"core/paragraph",
{
placeholder:
"Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée.",
},
],
]}
allowedBlocks={[
"core/paragraph",
"homegrade-content-blocks/content-heading",
]}
/>
{}
</div>
</>
)}
</div> </div>
</> </>
); );

41
blocks/text-image/src/save.js
View File

@ -1,7 +1,7 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import Image from "../../_components/Image"; import Image from "../../_components/Image";
export default function save({ attributes }) { export default function save({ attributes }) {
let { imageAlt, imageUrl, imageProportion } = attributes; let { imageAlt, imageUrl, imageProportion, contentDisposition } = attributes;
return ( return (
<div <div
@ -9,16 +9,35 @@ export default function save({ attributes }) {
className: `homegrade-blocks-text-image`, className: `homegrade-blocks-text-image`,
})} })}
> >
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"> {contentDisposition === "left" && (
<InnerBlocks.Content /> <>
</div> <div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"> <InnerBlocks.Content />
<Image </div>
imageAlt={imageAlt}
imageUrl={imageUrl} <div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
imageProportion={imageProportion} <Image
/> imageAlt={imageAlt}
</div> imageUrl={imageUrl}
imageProportion={imageProportion}
/>
</div>
</>
)}
{contentDisposition === "right" && (
<>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
<Image
imageAlt={imageAlt}
imageUrl={imageUrl}
imageProportion={imageProportion}
/>
</div>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
<InnerBlocks.Content />
</div>
</>
)}
</div> </div>
); );
} }