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

extending the features

Browse Source
This commit is contained in:
Antoine M 2023-10-23 16:30:22 +02:00
parent ca8274cd1d
commit 9bd887dde8
10 changed files with 330 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
blocks/monoblock/build/block.json
View File

@ -10,10 +10,25 @@
"html": false
},
"parent": [
"homegrade-content-blocks/grey-box"
"homegrade-content-blocks/content-box"
],
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
"style": "file:./style-index.css",
"attributes": {
"hasIllustration": {
"type": "boolean",
"default": false
},
"illustrationUrl": {
"type": "string"
},
"illustrationId": {
"type": "string"
},
"illustrationAlt": {
"type": "string"
}
}
}

2
blocks/monoblock/build/index.asset.php
View File

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

28
blocks/monoblock/build/index.css
View File

@ -1,13 +1,27 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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;
.homegrade-blocks-box-monoblock__superior-illustration {
max-width: 200px !important;
}
.homegrade-blocks-box-monoblock__panel-body .components-dropdown .components-toolbar__control {
background-color: #e04d42;
color: white;
}
.homegrade-blocks-box-monoblock__panel-body img {
display: block;
}
.homegrade-blocks-box-monoblock__panel-body .components-dropdown {
display: block;
width: -moz-fit-content;
width: fit-content;
}
.homegrade-blocks-box-monoblock__panel-body .media-replace-container {
padding: 10px 0;
display: flex;
gap: 10px;
align-items: center;
}
/*# sourceMappingURL=index.css.map*/

2
blocks/monoblock/build/index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;AACD;;AAEC;EACC;EACA;AACF;AACC;EACC;AACF;AACC;EACC;EACA;EAAA;AACF;AACC;EACC;EACA;EACA;EACA;AACF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-box-monoblock__superior-illustration {\n\tmax-width: 200px !important;\n}\n.homegrade-blocks-box-monoblock__panel-body {\n\t.components-dropdown .components-toolbar__control {\n\t\tbackground-color: #e04d42;\n\t\tcolor: white;\n\t}\n\timg {\n\t\tdisplay: block;\n\t}\n\t.components-dropdown {\n\t\tdisplay: block;\n\t\twidth: fit-content;\n\t}\n\t.media-replace-container {\n\t\tpadding: 10px 0;\n\t\tdisplay: flex;\n\t\tgap: 10px;\n\t\talign-items: center;\n\t\t// margin-top: 10px;\n\t}\n}\n"],"names":[],"sourceRoot":""}

147
blocks/monoblock/build/index.js
View File

@ -19,6 +19,13 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* 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");
@ -29,12 +36,74 @@ function Edit({
setAttributes,
...props
}) {
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)("div", {
let {
hasIllustration,
illustrationId,
illustrationUrl,
illustrationAlt
} = attributes;
function onHasIllustrationChange() {
setAttributes({
hasIllustration: !hasIllustration
});
if (!hasIllustration) {
setAttributes({
illustrationUrl: null,
illustrationId: null,
illustrationAlt: null
});
}
}
function setIllustrationAttributes(media) {
setAttributes({
illustrationUrl: media.url,
illustrationId: media.id,
illustrationAlt: media?.alt
});
}
function removeIllustrationAttributes() {
setAttributes({
illustrationUrl: null,
illustrationId: null,
illustrationAlt: null
});
}
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: "Illustration",
className: "homegrade-blocks-box-monoblock__panel-body"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
help: hasIllustration ? "Afficher une illustration" : "Pas d'illustration",
label: "Illustration sup\xE9rieure",
checked: hasIllustration,
onChange: onHasIllustrationChange
}), illustrationUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: illustrationUrl,
alt: illustrationAlt
}), hasIllustration && (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: illustrationId,
mediaUrl: illustrationUrl,
allowedTypes: ["image"],
accept: "image/*",
onSelect: setIllustrationAttributes,
name: !illustrationUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
}), illustrationUrl && (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_4__.Button, {
className: "custom-flow-button",
variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
onClick: removeIllustrationAttributes
}))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `box-monoblock card-large-content`
className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${hasIllustration ? "homegrade-blocks-box-monoblock--has-illustration " : ""}`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph"]
}, hasIllustration && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
className: " homegrade-blocks-box-monoblock__superior-illustration",
src: illustrationUrl,
alt: illustrationAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph", "homegrade-content-blocks/section-titling"]
})));
}
@ -99,12 +168,23 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
function save() {
function save({
attributes
}) {
const {
hasIllustration,
illustrationUrl,
illustrationAlt
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `box-monoblock card-large-content`
className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${hasIllustration ? "homegrade-blocks-box-monoblock--has-illustration" : ""}`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
}, hasIllustration && illustrationUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
className: " homegrade-blocks-box-monoblock__superior-illustration",
src: illustrationUrl,
alt: illustrationAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
}
/***/ }),
@ -131,6 +211,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":
@ -153,6 +264,16 @@ module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
@ -173,13 +294,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/box-monoblock","version":"0.1.0","title":"Monobloc","category":"homegrade-blocks","description":"Bloc conteneur d\'une seule colonne","supports":{"html":false},"parent":["homegrade-content-blocks/grey-box"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/box-monoblock","version":"0.1.0","title":"Monobloc","category":"homegrade-blocks","description":"Bloc conteneur d\'une seule colonne","supports":{"html":false},"parent":["homegrade-content-blocks/content-box"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasIllustration":{"type":"boolean","default":false},"illustrationUrl":{"type":"string"},"illustrationId":{"type":"string"},"illustrationAlt":{"type":"string"}}}');
/***/ })

2
blocks/monoblock/build/index.js.map
View File

File diff suppressed because one or more lines are too long

19
blocks/monoblock/src/block.json
View File

@ -10,10 +10,25 @@
"html": false
},
"parent": [
"homegrade-content-blocks/grey-box"
"homegrade-content-blocks/content-box"
],
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
"style": "file:./style-index.css",
"attributes": {
"hasIllustration": {
"type": "boolean",
"default": false
},
"illustrationUrl": {
"type": "string"
},
"illustrationId": {
"type": "string"
},
"illustrationAlt": {
"type": "string"
}
}
}

97
blocks/monoblock/src/edit.js
View File

@ -3,16 +3,109 @@ import "./editor.scss";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";
import { PanelBody, ToggleControl, Button } from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons";
import { MediaReplaceFlow } from "@wordpress/block-editor";
export default function Edit({ attributes, setAttributes, ...props }) {
let { hasIllustration, illustrationId, illustrationUrl, illustrationAlt } =
attributes;
function onHasIllustrationChange() {
setAttributes({ hasIllustration: !hasIllustration });
if (!hasIllustration) {
removeIllustrationAttributes();
}
}
function setIllustrationAttributes(media) {
setAttributes({
illustrationUrl: media.url,
illustrationId: media.id,
illustrationAlt: media?.alt,
});
}
function removeIllustrationAttributes() {
setAttributes({
illustrationUrl: null,
illustrationId: null,
illustrationAlt: null,
});
}
return (
<>
<InspectorControls>
<PanelBody
title="Illustration"
className="homegrade-blocks-box-monoblock__panel-body"
>
<ToggleControl
help={
hasIllustration
? "Afficher une illustration"
: "Pas d'illustration"
}
label="Illustration supérieure"
checked={hasIllustration}
onChange={onHasIllustrationChange}
/>
{illustrationUrl && (
<img src={illustrationUrl} alt={illustrationAlt} />
)}
{hasIllustration && (
<div className="media-replace-container ">
<MediaReplaceFlow
mediaId={illustrationId}
mediaUrl={illustrationUrl}
allowedTypes={["image"]}
accept="image/*"
onSelect={setIllustrationAttributes}
name={
!illustrationUrl
? __("Ajouter", "homegrade-blocks__texte-backoffice")
: __("Remplacer", "homegrade-blocks__texte-backoffice")
}
/>
{illustrationUrl && (
<>
<Button
className="custom-flow-button"
variant="primary"
icon={trash}
label="Supprimer"
onClick={removeIllustrationAttributes}
/>
</>
)}
</div>
)}
</PanelBody>
</InspectorControls>
<div
{...useBlockProps({
className: `box-monoblock card-large-content`,
className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
hasIllustration
? "homegrade-blocks-box-monoblock--has-illustration "
: ""
}`,
})}
>
<InnerBlocks allowedBlocks={["core/paragraph"]} />
{hasIllustration && (
<img
className=" homegrade-blocks-box-monoblock__superior-illustration"
src={illustrationUrl}
alt={illustrationAlt}
/>
)}
<InnerBlocks
allowedBlocks={[
"core/paragraph",
"homegrade-content-blocks/section-titling",
]}
/>
</div>
</>
);

30
blocks/monoblock/src/editor.scss
View File

@ -1,9 +1,23 @@
/**
* 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;
.homegrade-blocks-box-monoblock__superior-illustration {
max-width: 200px !important;
}
.homegrade-blocks-box-monoblock__panel-body {
.components-dropdown .components-toolbar__control {
background-color: #e04d42;
color: white;
}
img {
display: block;
}
.components-dropdown {
display: block;
width: fit-content;
}
.media-replace-container {
padding: 10px 0;
display: flex;
gap: 10px;
align-items: center;
// margin-top: 10px;
}
}

18
blocks/monoblock/src/save.js
View File

@ -1,12 +1,26 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
export default function save() {
export default function save({ attributes }) {
const { hasIllustration, illustrationUrl, illustrationAlt } = attributes;
return (
<div
{...useBlockProps.save({
className: `box-monoblock card-large-content`,
className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
hasIllustration
? "homegrade-blocks-box-monoblock--has-illustration"
: ""
}`,
})}
>
{hasIllustration && illustrationUrl && (
<img
className=" homegrade-blocks-box-monoblock__superior-illustration"
src={illustrationUrl}
alt={illustrationAlt}
/>
)}
<InnerBlocks.Content />
</div>
);