working v1
This commit is contained in:
parent
aeff53523d
commit
96069807c6
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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*/
|
||||
|
|
@ -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
|
|
@ -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*/
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user