make the block accepts innerblocks

This commit is contained in:
Antoine M 2023-11-24 15:44:11 +01:00
parent a77e197e02
commit 39b6befd5f
14 changed files with 103 additions and 9 deletions

View File

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

View File

@ -4,6 +4,12 @@
.block-content-page-header__page-icon {
max-width: 200px !important;
}
.block-content-page-header p {
display: block !important;
}
.block-content-page-header p[role=textbox] {
opacity: 0.5;
}
.homegrade-blocks-content-page-header .block-editor-media-placeholder {
max-height: 200px;

View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;;AAIC;EACC;AADF;;AAKC;EACC;AAFF;AAIC;EACC;AAFF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".block-content-page-header {\r\n\t&__page-icon {\r\n\t\tmax-width: 200px !important;\r\n\t}\r\n}\r\n.homegrade-blocks-content-page-header {\r\n\t.block-editor-media-placeholder {\r\n\t\tmax-height: 200px;\r\n\t}\r\n}\r\n.homegrade-blocks-content-page-header__panel-cta {\r\n\t.block-editor-link-control__field {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.block-editor-link-control {\r\n\t\tmin-width: unset;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;AAEC;EACC;AAAF;AAEC;EACC;AAAF;;AAIC;EACC;AADF;;AAMC;EACC;AAHF;AAKC;EACC;AAHF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".block-content-page-header {\r\n\t&__page-icon {\r\n\t\tmax-width: 200px !important;\r\n\t}\r\n\tp {\r\n\t\tdisplay: block !important;\r\n\t}\r\n\tp[role=\"textbox\"] {\r\n\t\topacity: 0.5;\r\n\t}\r\n}\r\n.homegrade-blocks-content-page-header {\r\n\t.block-editor-media-placeholder {\r\n\t\tmax-height: 200px;\r\n\t}\r\n}\r\n\r\n.homegrade-blocks-content-page-header__panel-cta {\r\n\t.block-editor-link-control__field {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.block-editor-link-control {\r\n\t\tmin-width: unset;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

View File

@ -213,6 +213,11 @@ function Edit({
value: pageHeaderDescription,
onChange: onChangeDescription
// style={{ textAlign: props.attributes.alignment }}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
template: [["core/paragraph", {
placeholder: "Ajouter ici le texte"
}]],
allowedBlocks: ["core/paragraph", "core/list", "core/button", "core/buttons", "gravityforms/form", "homegrade-content-blocks/section-titling"]
}), cta && cta.title && cta.url && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", {
href: cta.url
}, cta.title)), pageIcon && !hasCustomImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
@ -246,14 +251,16 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: {
foreground: "#f03",
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
@ -269,11 +276,42 @@ __webpack_require__.r(__webpack_exports__);
d: "m378.98,212.46h22.87v-23.16h-22.87v23.16Zm22.88-70.39h-22.8v23.02h22.8v-23.02ZM23.05,284.21H0v22.98h23.05v-22.98Zm0-47.48H.15v22.93h22.9v-22.93ZM.24,354.72h22.81v-23.23H.24v23.23Zm378.76-.18h22.87v-23.18h-22.87v23.18ZM154.05,70.49h188.68v-23.24h-188.68v23.24Zm-94.63.01h46.52v-23.11h-46.52v23.11Zm342.51,213.59h-22.82v23.14h22.82v-23.14Zm.01-284.09H.21v117.71h401.72V0Zm-23.3,92.03c0,.48-.2.95-.45,2.04H23.8c-.16-1.47-.4-2.75-.41-4.02-.02-20.67.06-41.33-.09-62-.03-3.65.91-4.87,4.73-4.87,115.33.09,230.65.08,345.98.05,2.73,0,4.77-.03,4.74,3.8-.15,21.66-.09,43.33-.12,65Zm-236.39,309.65h22.86v-22.83h-22.86v22.83Zm141.95.17h23.06v-22.89h-23.06v22.89Zm-47.24,0h22.85v-22.82h-22.85v22.82Zm94.54.02h23.11v-22.87h-23.11v22.87Zm47.48-22.9v22.78h22.96v-22.78h-22.96Zm22.79-142.11h-22.81v22.91h22.81v-22.91ZM.14,401.73h22.91v-22.88H.14v22.88Zm.07-189.19h22.87v-23.16H.21v23.16Zm-.07-47.59h23.05v-22.76H.15v22.76Zm94.7,236.76h22.98v-22.86h-22.98v22.86Zm94.53,0h23.24v-22.8h-23.24v22.8Zm-141.94.21h23.12v-23.03h-23.12v23.03Z"
})))
},
edit: _edit__WEBPACK_IMPORTED_MODULE_3__["default"]
edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
});
/***/ }),
/***/ "./src/save.js":
/*!*********************!*\
!*** ./src/save.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* 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_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
function save({
attributes,
setAttributes
}) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "innerblocks"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
}
/***/ }),
/***/ "./src/editor.scss":
/*!*************************!*\
!*** ./src/editor.scss ***!

File diff suppressed because one or more lines are too long

View File

@ -25,6 +25,7 @@ $customTitle = $attributes['blockCustomTitle'] ?? null;
<h2 class="section_titling__subtitle"><?php echo $pageHeaderTitle ?> </h2>
</div>
<p><?php echo $pageHeaderDescription ?> </p>
<?php echo $content ?>
<?php if ($cta && $cta['title'] && $cta['url']) : ?>
<a class="block-content-page-header__cta-link" href="<?php echo $cta['url'] ?>"><?php echo $cta['title'] ?></a>
<?php endif; ?>

View File

@ -1,4 +1,11 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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 ***!
\***************************************************************************************************************************************************************************************************************************************/
.block-content-page-header p {
display: none;
}
.block-content-page-header .innerblocks p {
display: block;
}
/*# sourceMappingURL=style-index.css.map*/

View File

@ -0,0 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAEC;EACC;AADF;AAGC;EACC;AADF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["// Styled by the theme\r\n.block-content-page-header {\r\n\tp {\r\n\t\tdisplay: none;\r\n\t}\r\n\t.innerblocks p {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

View File

@ -2,9 +2,9 @@ import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { useSelect } from "@wordpress/data";
import {
InnerBlocks,
useBlockProps,
RichText,
BlockControls,
MediaReplaceFlow,
InspectorControls,
__experimentalLinkControl as LinkControl,
@ -18,6 +18,7 @@ import {
Button,
Tip,
} from "@wordpress/components";
import { trash } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes }) {
@ -248,6 +249,19 @@ export default function Edit({ attributes, setAttributes }) {
onChange={onChangeDescription}
// style={{ textAlign: props.attributes.alignment }}
/>
<InnerBlocks
template={[
["core/paragraph", { placeholder: "Ajouter ici le texte" }],
]}
allowedBlocks={[
"core/paragraph",
"core/list",
"core/button",
"core/buttons",
"gravityforms/form",
"homegrade-content-blocks/section-titling",
]}
/>
{cta && cta.title && cta.url && <a href={cta.url}>{cta.title}</a>}
</div>
{pageIcon && !hasCustomImage && (

View File

@ -2,12 +2,19 @@
&__page-icon {
max-width: 200px !important;
}
p {
display: block !important;
}
p[role="textbox"] {
opacity: 0.5;
}
}
.homegrade-blocks-content-page-header {
.block-editor-media-placeholder {
max-height: 200px;
}
}
.homegrade-blocks-content-page-header__panel-cta {
.block-editor-link-control__field {
margin: 0;

View File

@ -1,6 +1,6 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import save from "./save";
import Edit from "./edit";
import metadata from "./block.json";
@ -25,4 +25,5 @@ registerBlockType(metadata.name, {
),
},
edit: Edit,
save,
});

View File

@ -25,6 +25,7 @@ $customTitle = $attributes['blockCustomTitle'] ?? null;
<h2 class="section_titling__subtitle"><?php echo $pageHeaderTitle ?> </h2>
</div>
<p><?php echo $pageHeaderDescription ?> </p>
<?php echo $content ?>
<?php if ($cta && $cta['title'] && $cta['url']) : ?>
<a class="block-content-page-header__cta-link" href="<?php echo $cta['url'] ?>"><?php echo $cta['title'] ?></a>
<?php endif; ?>

View File

@ -0,0 +1,10 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function save({ attributes, setAttributes }) {
return (
<div className="innerblocks">
<InnerBlocks.Content />
</div>
);
}

View File

@ -1 +1,9 @@
// Styled by the theme
.block-content-page-header {
p {
display: none;
}
.innerblocks p {
display: block;
}
}