handling image caption and description
This commit is contained in:
parent
6d1e5a2558
commit
3acbf24c42
|
|
@ -23,6 +23,12 @@
|
|||
"imageId": {
|
||||
"type": "number"
|
||||
},
|
||||
"imageCaption": {
|
||||
"type": "string"
|
||||
},
|
||||
"imageDescription": {
|
||||
"type": "string"
|
||||
},
|
||||
"imageProportion": {
|
||||
"type": "string",
|
||||
"default": "original"
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2266df3a975a48180baf');
|
||||
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '86470840525466393d70');
|
||||
|
|
|
|||
|
|
@ -108,21 +108,25 @@ function ImagePanelBody({
|
|||
setAttributes
|
||||
}) {
|
||||
function setImageAttributes(image) {
|
||||
console.log(image);
|
||||
setAttributes({
|
||||
imageId: image.id,
|
||||
imageAlt: image.alt,
|
||||
imageUrl: image.url
|
||||
imageUrl: image.url,
|
||||
imageCaption: image.caption,
|
||||
imageDescription: image.description
|
||||
});
|
||||
}
|
||||
function removeImageAttributes() {
|
||||
setAttributes({
|
||||
imageId: null,
|
||||
imageAlt: null,
|
||||
imageUrl: null
|
||||
imageUrl: null,
|
||||
imageCaption: null,
|
||||
imageDescription: null
|
||||
});
|
||||
}
|
||||
function onImageProportionChange(imageProportion) {
|
||||
console.log(imageProportion);
|
||||
setAttributes({
|
||||
imageProportion
|
||||
});
|
||||
|
|
@ -210,16 +214,17 @@ function Edit({
|
|||
imageId,
|
||||
imageAlt,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
imageDescription,
|
||||
imageProportion,
|
||||
contentDisposition
|
||||
} = attributes;
|
||||
function changeContentDisposition(newContentDisposition) {
|
||||
console.log(newContentDisposition);
|
||||
setAttributes({
|
||||
contentDisposition: newContentDisposition
|
||||
});
|
||||
}
|
||||
console.log(typeof contentDisposition);
|
||||
console.log(imageDescription, imageCaption);
|
||||
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"
|
||||
|
|
@ -265,7 +270,7 @@ 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", {
|
||||
}), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption))), 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,
|
||||
|
|
@ -277,7 +282,7 @@ function Edit({
|
|||
imageAlt: imageAlt,
|
||||
imageUrl: imageUrl,
|
||||
imageProportion: imageProportion
|
||||
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
|
||||
}), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption)), (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", {
|
||||
|
|
@ -353,6 +358,8 @@ function save({
|
|||
let {
|
||||
imageAlt,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
imageDescription,
|
||||
imageProportion,
|
||||
contentDisposition
|
||||
} = attributes;
|
||||
|
|
@ -368,13 +375,13 @@ 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", {
|
||||
}), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption))), 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", {
|
||||
}), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption)), (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))));
|
||||
}
|
||||
|
|
@ -502,7 +509,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"},"contentDisposition":{"type":"string","default":"left"}}}');
|
||||
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"},"imageCaption":{"type":"string"},"imageDescription":{"type":"string"},"imageProportion":{"type":"string","default":"original"},"contentDisposition":{"type":"string","default":"left"}}}');
|
||||
|
||||
/***/ })
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,6 +23,12 @@
|
|||
"imageId": {
|
||||
"type": "number"
|
||||
},
|
||||
"imageCaption": {
|
||||
"type": "string"
|
||||
},
|
||||
"imageDescription": {
|
||||
"type": "string"
|
||||
},
|
||||
"imageProportion": {
|
||||
"type": "string",
|
||||
"default": "original"
|
||||
|
|
|
|||
|
|
@ -19,15 +19,22 @@ import {
|
|||
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
||||
} from "@wordpress/components";
|
||||
export default function Edit({ attributes, setAttributes, ...props }) {
|
||||
let { imageId, imageAlt, imageUrl, imageProportion, contentDisposition } =
|
||||
attributes;
|
||||
let {
|
||||
imageId,
|
||||
imageAlt,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
imageDescription,
|
||||
imageProportion,
|
||||
contentDisposition,
|
||||
} = attributes;
|
||||
|
||||
function changeContentDisposition(newContentDisposition) {
|
||||
console.log(newContentDisposition);
|
||||
setAttributes({ contentDisposition: newContentDisposition });
|
||||
}
|
||||
|
||||
console.log(typeof contentDisposition);
|
||||
console.log(imageDescription, imageCaption);
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
|
|
@ -101,6 +108,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
imageUrl={imageUrl}
|
||||
imageProportion={imageProportion}
|
||||
/>
|
||||
{imageDescription && <p>{imageDescription}</p>}
|
||||
{imageCaption && <p>{imageCaption}</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -119,6 +128,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
imageUrl={imageUrl}
|
||||
imageProportion={imageProportion}
|
||||
/>
|
||||
{imageDescription && <p>{imageDescription}</p>}
|
||||
{imageCaption && <p>{imageCaption}</p>}
|
||||
</div>
|
||||
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
|
||||
<InnerBlocks
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
||||
import Image from "../../_components/Image";
|
||||
export default function save({ attributes }) {
|
||||
let { imageAlt, imageUrl, imageProportion, contentDisposition } = attributes;
|
||||
let {
|
||||
imageAlt,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
imageDescription,
|
||||
imageProportion,
|
||||
contentDisposition,
|
||||
} = attributes;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -21,6 +28,8 @@ export default function save({ attributes }) {
|
|||
imageUrl={imageUrl}
|
||||
imageProportion={imageProportion}
|
||||
/>
|
||||
{imageDescription && <p>{imageDescription}</p>}
|
||||
{imageCaption && <p>{imageCaption}</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -32,6 +41,8 @@ export default function save({ attributes }) {
|
|||
imageUrl={imageUrl}
|
||||
imageProportion={imageProportion}
|
||||
/>
|
||||
{imageDescription && <p>{imageDescription}</p>}
|
||||
{imageCaption && <p>{imageCaption}</p>}
|
||||
</div>
|
||||
<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
|
||||
<InnerBlocks.Content />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user