refactoring block to be dynamic and enqueuing translations

This commit is contained in:
Antoine M 2023-11-23 16:15:44 +01:00
parent a45f3494ee
commit 79660d33a5
15 changed files with 98 additions and 74 deletions

View File

@ -14,5 +14,6 @@
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": {}
}

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'b0b53a6fd3aa0f022ae5');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b667c1fff3778109862a');

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

@ -1 +0,0 @@
{"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":""}

View File

@ -181,8 +181,11 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _img_icon_bulb_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./img/icon_bulb.svg */ "./src/img/icon_bulb.svg");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__);
@ -196,14 +199,32 @@ function Edit({
attributes,
setAttributes
}) {
function getAdminLanguageFromCookie(c_name) {
var c_value = document.cookie,
c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
const localBlockName = currentLang === "fr" ? "Pour aller plus loin" : "Om verder te gaan";
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)("section", {
id: "aller-plus-loin",
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.useBlockProps)({
className: `homegrade-blocks-plus-loin`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
}, localBlockName && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
className: "homegrade-blocks-plus-loin__block-title"
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.InnerBlocks, {
}, localBlockName), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.InnerBlocks, {
allowedBlocks: ["core/paragraph", "homegrade-blocks/content-heading", "core/list", "core/buttons", "core/button", "core/colums", "core/colum", "homegrade-content-blocks/content-heading"],
template: [["core/paragraph"]]
})));
@ -271,14 +292,7 @@ function save({
attributes,
setAttributes
}) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
id: "aller-plus-loin",
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-plus-loin`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
className: "homegrade-blocks-plus-loin__block-title"
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, 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_1__.InnerBlocks.Content, null));
}
/***/ }),
@ -347,6 +361,16 @@ module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
@ -373,7 +397,7 @@ module.exports = window["wp"]["i18n"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/plus-loin","version":"0.1.0","title":"Plus loin","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations pour aller plus loin","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/plus-loin","version":"0.1.0","title":"Plus loin","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations pour aller plus loin","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,15 @@
<?php
// echo '<pre>';
// print_r($attributes);
// echo '</pre>';
?>
<section id="aller-plus-loin" <?php echo get_block_wrapper_attributes(['class' => 'homegrade-blocks-plus-loin']); ?>>
<h2 class="homegrade-blocks-plus-loin__block-title">
<?php echo
__("Pour aller plus loin", "homegrade-blocks")
?>
</h2>
<?php echo $content; ?>
</section>

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

@ -1 +0,0 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

View File

@ -14,5 +14,6 @@
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": {}
}

View File

@ -5,19 +5,40 @@ import chainIcon from "./img/icon_block_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { ToolbarButton, ToggleControl, PanelBody } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
function getAdminLanguageFromCookie(c_name) {
var c_value = document.cookie,
c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
const localBlockName =
currentLang === "fr" ? "Pour aller plus loin" : "Om verder te gaan";
return (
<>
<section
id="aller-plus-loin"
{...useBlockProps({ className: `homegrade-blocks-plus-loin` })}
>
{localBlockName && (
<h2 className="homegrade-blocks-plus-loin__block-title">
{__("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")}
{localBlockName}
</h2>
)}
<InnerBlocks
allowedBlocks={[

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

@ -0,0 +1,15 @@
<?php
// echo '<pre>';
// print_r($attributes);
// echo '</pre>';
?>
<section id="aller-plus-loin" <?php echo get_block_wrapper_attributes(['class' => 'homegrade-blocks-plus-loin']); ?>>
<h2 class="homegrade-blocks-plus-loin__block-title">
<?php echo
__("Pour aller plus loin", "homegrade-blocks")
?>
</h2>
<?php echo $content; ?>
</section>

View File

@ -3,17 +3,8 @@ import { __ } from "@wordpress/i18n";
export default function save({ attributes, setAttributes }) {
return (
<section
id="aller-plus-loin"
{...useBlockProps.save({
className: `homegrade-blocks-plus-loin`,
})}
>
<h2 className="homegrade-blocks-plus-loin__block-title">
{__("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")}
</h2>
<>
<InnerBlocks.Content />
</section>
</>
);
}

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;
}