working v1

This commit is contained in:
Antoine M 2023-11-24 14:17:16 +01:00
parent aeff53523d
commit 96069807c6
11 changed files with 109 additions and 90 deletions

View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/labelled-picture",
"version": "0.1.0",
"title": "Image Sticker-Légende",
"title": "Image + Légende Autocollante",
"category": "homegrade-blocks",
"icon": "smiley",
"description": "Bloc image contenant une légende autocollante",

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'c78e69ebe27d4272f3d4');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '49e83b88e7e47ccb671c');

View File

@ -1,13 +1,4 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
border: 1px dotted #f00;
}
/*# sourceMappingURL=index.css.map*/

View File

@ -21,6 +21,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
@ -63,34 +65,31 @@ function Edit({
noticeOperations.createErrorNotice(message);
}
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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "Source de l'image"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
title: "Source de l'image",
className: "homegrade-blocks-components-image__panel-body "
}, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl,
alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "media-replace-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: pictureUrlId,
mediaId: pictureId,
mediaUrl: pictureUrl,
allowedTypes: ["image"],
accept: "image/*",
onSelect: updatePictureImg,
name: !pictureUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
}), pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Button, {
}), pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button",
variant: "primary",
icon: trash,
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
onClick: removeLateralCoverAttributes
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.FocalPointPicker, {
label: "position",
url: pictureUrl,
dimensions: {
width: 400,
height: 100
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
onClick: removePictureImg
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Le texte de votre L\xE9gende est automatiquement attribu\xE9 depuis le champ \"L\xE9gende\" de votre image dans la gallerie des m\xE9dias")))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `homegrade-blocks-labelled-picture`
})
}, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl,
alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption)), !pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
@ -171,11 +170,20 @@ __webpack_require__.r(__webpack_exports__);
function save({
attributes
}) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
const {
pictureUrl,
pictureAlt,
pictureId,
pictureCaption
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-starter`
className: `homegrade-blocks-labelled-picture`
})
}, "Multiblocks salut from the saved content!");
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl,
alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption)));
}
/***/ }),
@ -202,6 +210,37 @@ __webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "../../node_modules/@wordpress/icons/build-module/library/trash.js":
/*!*************************************************************************!*\
!*** ../../node_modules/@wordpress/icons/build-module/library/trash.js ***!
\*************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const trash = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M20 5h-5.7c0-1.3-1-2.3-2.3-2.3S9.7 3.7 9.7 5H4v2h1.5v.3l1.7 11.1c.1 1 1 1.7 2 1.7h5.7c1 0 1.8-.7 2-1.7l1.7-11.1V7H20V5zm-3.2 2l-1.7 11.1c0 .1-.1.2-.3.2H9.1c-.1 0-.3-.1-.3-.2L7.2 7h9.6z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (trash);
//# sourceMappingURL=trash.js.map
/***/ }),
/***/ "@wordpress/block-editor":
@ -254,13 +293,23 @@ module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/primitives":
/*!************************************!*\
!*** external ["wp","primitives"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["primitives"];
/***/ }),
/***/ "./src/block.json":
/*!************************!*\
!*** ./src/block.json ***!
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image Sticker-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":{"pictureUrl":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
module.exports = 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 Autocollante","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":{"pictureUrl":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -1,16 +1,4 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
background-color: #21759b;
color: #fff;
padding: 2px;
}
/*# sourceMappingURL=style-index.css.map*/

View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/labelled-picture",
"version": "0.1.0",
"title": "Image Sticker-Légende",
"title": "Image + Légende Autocollante",
"category": "homegrade-blocks",
"icon": "smiley",
"description": "Bloc image contenant une légende autocollante",

View File

@ -9,16 +9,19 @@ import {
} from "@wordpress/block-editor";
import {
Button,
ToolbarGroup,
ToolbarButton,
Spinner,
withNotices,
FocalPointPicker,
PanelBody,
Tip,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { trash } from "@wordpress/icons";
export default function Edit({
attributes,
@ -56,10 +59,14 @@ export default function Edit({
return (
<>
<InspectorControls>
<PanelBody title="Source de l'image">
<PanelBody
title="Source de l'image"
className="homegrade-blocks-components-image__panel-body "
>
{pictureUrl && <img src={pictureUrl} alt={pictureAlt} />}
<div className="media-replace-container">
<MediaReplaceFlow
mediaId={pictureUrlId}
mediaId={pictureId}
mediaUrl={pictureUrl}
allowedTypes={["image"]}
accept="image/*"
@ -77,28 +84,26 @@ export default function Edit({
variant="primary"
icon={trash}
label="Supprimer"
onClick={removeLateralCoverAttributes}
onClick={removePictureImg}
/>
</div>
)}
</div>
<FocalPointPicker
label="position"
url={pictureUrl}
dimensions={{
width: 400,
height: 100,
}}
/>
<Tip>
<p>
Le texte de votre Légende est automatiquement attribué depuis le
champ "Légende" de votre image dans la gallerie des médias
</p>
</Tip>
</PanelBody>
</InspectorControls>
<section
{...useBlockProps({
className: `homegrade-blocks-labelled-picture`,
})}
>
<div>
{pictureUrl && (
<figure>
<figure
{...useBlockProps({
className: `homegrade-blocks-labelled-picture`,
})}
>
<img src={pictureUrl} alt={pictureAlt} />
<figcaption>{pictureCaption}</figcaption>
</figure>
@ -115,7 +120,7 @@ export default function Edit({
onError={onUploadError}
/>
)}
</section>
</div>
</>
);
}

View File

@ -1,9 +0,0 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
border: 1px dotted #f00;
}

View File

@ -1,13 +1,20 @@
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { pictureUrl, pictureAlt, pictureId, pictureCaption } = attributes;
return (
<p
{...useBlockProps.save({
className: `homegrade-blocks-starter`,
})}
>
{"Multiblocks salut from the saved content!"}
</p>
<>
{pictureUrl && (
<figure
{...useBlockProps.save({
className: `homegrade-blocks-labelled-picture`,
})}
>
<img src={pictureUrl} alt={pictureAlt} />
<figcaption>{pictureCaption}</figcaption>
</figure>
)}
</>
);
}

View File

@ -1,12 +0,0 @@
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
background-color: #21759b;
color: #fff;
padding: 2px;
}