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",
"title": "Texte + Image",
"category": "homegrade-blocks",
"description": "Bloc de texte + image latérale",
"description": "Bloc de texte & image latérale",
"supports": {
"html": false
},
@ -26,6 +26,10 @@
"imageProportion": {
"type": "string",
"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() {
console.log("removeImageAttributes");
setAttributes({
imageId: 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, {
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", {
src: imageUrl,
alt: imageAlt
@ -142,7 +141,7 @@ function ImagePanelBody({
allowedTypes: ["image"],
accept: "image/*",
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, {
className: "custom-flow-button",
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 _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_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,
imageAlt,
imageUrl,
imageProportion
imageProportion,
contentDisposition
} = 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,
imageId: imageId,
imageAlt: imageAlt,
@ -220,13 +244,15 @@ function Edit({
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
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"
}, (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."
}]],
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", {
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"], {
@ -239,7 +265,26 @@ function Edit({
imageAlt: imageAlt,
imageUrl: imageUrl,
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 {
imageAlt,
imageUrl,
imageProportion
imageProportion,
contentDisposition
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
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"
}, (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"
@ -322,7 +368,15 @@ function save({
imageAlt: imageAlt,
imageUrl: imageUrl,
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.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",
"title": "Texte + Image",
"category": "homegrade-blocks",
"description": "Bloc de texte + image latérale",
"description": "Bloc de texte & image latérale",
"supports": {
"html": false
},
@ -26,6 +26,10 @@
"imageProportion": {
"type": "string",
"default": "original"
},
"contentDisposition": {
"type": "string",
"default": "left"
}
}
}

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

@ -10,12 +10,41 @@ import {
InnerBlocks,
MediaPlaceholder,
} 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 }) {
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 (
<>
<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
imageUrl={imageUrl}
imageId={imageId}
@ -29,36 +58,88 @@ export default function Edit({ attributes, setAttributes, ...props }) {
className: `homegrade-blocks-text-image`,
})}
>
<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"]}
/>
{}
</div>
{contentDisposition === "left" && (
<>
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
<InnerBlocks
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.",
},
],
]}
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">
<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--image">
<ImageMediaPlaceholder
imageAlt={imageAlt}
imageId={imageId}
imageUrl={imageUrl}
setAttributes={setAttributes}
imageProportion={imageProportion}
/>
<Image
imageAlt={imageAlt}
imageUrl={imageUrl}
imageProportion={imageProportion}
/>
</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>
</>
);

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

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