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

adding block aller plus loin

Browse Source
This commit is contained in:
Antoine M 2023-09-29 15:54:38 +02:00
parent e227bc9f08
commit e36e9fdd51
23 changed files with 372 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
blocks/content-heading/build/block.json
View File

@ -23,6 +23,14 @@
"headingLevel": {
"type": "string",
"default": "h3"
},
"hasIcon": {
"type": "boolean",
"default": false
},
"iconName": {
"type": "string",
"default": "key"
}
}
}

2
blocks/content-heading/build/index.asset.php
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' => '9d127840849a10578990');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '915fe1008255560e528e');

10
blocks/content-heading/build/index.css
View File

@ -1,10 +0,0 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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.
*/
/*# sourceMappingURL=index.css.map*/

1
blocks/content-heading/build/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA,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// .block-editor-image-size-control {\n// \tdisplay: none;\n// }\n"],"names":[],"sourceRoot":""}

128
blocks/content-heading/build/index.js
View File

@ -16,18 +16,18 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-3.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-4.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-5.js");
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
@ -35,6 +35,8 @@ __webpack_require__.r(__webpack_exports__);
// import BlockHeadingControls from "./BlockHeadingControls";
function Edit({
@ -45,24 +47,79 @@ function Edit({
}) {
const {
title,
headingLevel
headingLevel,
hasIcon,
iconName
} = attributes;
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
const {
getBlockIndex
} = select("core/block-editor");
return getBlockIndex(clientId);
});
function onChangeHeadingLevel(newHeadingLevel) {
setAttributes({
headingLevel: newHeadingLevel
});
}
function insertParagraphOnEnter(e) {
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__.createBlock)("core/paragraph", {});
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__.createBlock)("core/paragraph", {});
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.dispatch)("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
const {
getBlockIndex
} = select("core/block-editor");
return getBlockIndex(clientId);
function handleIconChange(newIconName) {
setAttributes({
iconName: newIconName
});
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_2__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}
function onHasIconChange(hasIconToggleValue) {
setAttributes({
hasIcon: hasIconToggleValue
});
}
// function getIconPicture() {
// switch (iconName) {
// case "key":
// return keyIcon;
// case "chain":
// return chainIcon;
// case "house":
// return houseIcon;
// case "bulb":
// return bulbIcon;
// }
// }
// function getDashiconSymbol() {
// switch (iconName) {
// case "key":
// return "admin-network";
// case "chain":
// return "admin-links";
// case "house":
// return "admin-home";
// case "bulb":
// return "lightbulb";
// }
// }
// let iconPicture = getIconPicture();
// let iconDashiconSymbol = getDashiconSymbol();
console.log("hasIcon", hasIcon);
console.log("iconName", iconName);
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_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-fonctionnel"),
initialOpen: true
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
label: "Afficher un icone",
checked: hasIcon,
onChange: onHasIconChange
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
isActive: headingLevel === "h3",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
onClick: () => {
@ -80,11 +137,31 @@ function Edit({
onClick: () => {
onChangeHeadingLevel("h5");
}
})), hasIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
title: "Clé",
icon: "admin-network",
isActive: iconName === "key",
onClick: () => handleIconChange("key")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
title: "Lien",
icon: "admin-links",
isActive: iconName === "chain",
onClick: () => handleIconChange("chain")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
title: "Homegrade",
icon: "admin-home",
isActive: iconName === "house",
onClick: () => handleIconChange("house")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
title: "Inspiration",
icon: "lightbulb",
isActive: iconName === "bulb",
onClick: () => handleIconChange("bulb")
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.KeyboardShortcuts, {
shortcuts: {
enter: e => insertParagraphOnEnter(e)
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
onChange: value => setAttributes({
title: value
}),
@ -93,9 +170,12 @@ function Edit({
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez votre titre ici", "homegrade-blocks__texte-fonctionnel"),
allowedFormats: ["homegrade-format/tooltip"],
tagName: headingLevel,
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-custom-heading`
})
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
className: `homegrade-blocks-custom-heading ${hasIcon ? "has-icon has-icon--" + iconName : " "}`
}),
style: {
backgroundImage: "red"
}
})));
}
@ -163,13 +243,15 @@ function save({
}) {
const {
title,
headingLevel
headingLevel,
hasIcon,
iconName
} = attributes;
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__.RichText.Content, {
tagName: headingLevel,
value: title,
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-custom-heading`
className: `homegrade-blocks-custom-heading ${hasIcon ? "has-icon has-icon--" + iconName : ""}`
})
}));
}
@ -369,7 +451,7 @@ module.exports = window["wp"]["primitives"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-heading","version":"0.1.0","title":"Titre","category":"homegrade-blocks","icon":"smiley","description":"Bloc de titrage","supports":{"html":false},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"headingLevel":{"type":"string","default":"h3"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-heading","version":"0.1.0","title":"Titre","category":"homegrade-blocks","icon":"smiley","description":"Bloc de titrage","supports":{"html":false},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"headingLevel":{"type":"string","default":"h3"},"hasIcon":{"type":"boolean","default":false},"iconName":{"type":"string","default":"key"}}}');
/***/ })

2
blocks/content-heading/build/index.js.map
View File

File diff suppressed because one or more lines are too long

72
blocks/content-heading/build/style-index.css
View File

@ -1,61 +1,33 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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.
*/
.wpblock-citation-block {
position: relative;
padding: 80px 20px;
margin-top: 50px !important;
margin-bottom: 50px !important;
.homegrade-blocks-custom-heading.has-icon {
display: flex;
align-items: center;
}
.wpblock-citation-block .wpblock-citation-citation {
font-weight: 600;
font-size: 50px;
line-height: 1.2;
text-transform: unset;
padding-bottom: 50px;
.homegrade-blocks-custom-heading.has-icon::before {
content: "";
background-color: red;
width: 40px;
height: 40px;
border-radius: 100%;
padding: 20px;
display: inline-block;
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
}
.wpblock-citation-block .wpblock-citation-author {
padding-top: 20px;
.homegrade-blocks-custom-heading.has-icon.has-icon--key::before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy44MDMiIGhlaWdodD0iMTcuNDI2IiB2aWV3Qm94PSIwIDAgMTcuODAzIDE3LjQyNiI+CiAgPHBhdGggaWQ9Ikljb25fZmVhdGhlci1rZXkiIGRhdGEtbmFtZT0iSWNvbiBmZWF0aGVyLWtleSIgZD0iTTE4LjAxMywzbC0xLjU4LDEuNThNMTAuNDIsMTAuNTkzYTQuMzQ2LDQuMzQ2LDAsMSwxLTYuMTQ2LDAsNC4zNDYsNC4zNDYsMCwwLDEsNi4xNDYsMFptMCwwLDMuMjQ4LTMuMjQ4bTAsMCwyLjM3LDIuMzdMMTguOCw2Ljk1MWwtMi4zNy0yLjM3TTEzLjY2OCw3LjM0NiwxNi40MzMsNC41OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMDAxIC0xLjU4NikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==);
}
.wpblock-citation-block .wpblock-citation-citation,
.wpblock-citation-block .wpblock-citation-author {
max-width: 1040px;
margin: 0;
.homegrade-blocks-custom-heading.has-icon.has-icon--house::before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zODgiIGhlaWdodD0iMTQuMTg2IiB2aWV3Qm94PSIwIDAgMTIuMzg4IDE0LjE4NiI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xODUzNCIgZGF0YS1uYW1lPSJUcmFjw6kgMTg1MzQiIGQ9Ik05NjAuMjE0LDkyOS40NDJsLTUuMTk0LDQuNzgydjcuNGgxMC4zODh2LTcuNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NTQuMDIgLTkyOC40NDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=);
}
.wpblock-citation-block.text-align-right {
padding-right: 50px;
text-align: right;
.homegrade-blocks-custom-heading.has-icon.has-icon--bulb::before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy4wOTgiIGhlaWdodD0iMTguNDA5IiB2aWV3Qm94PSIwIDAgMTMuMDk4IDE4LjQwOSI+CiAgPGcgaWQ9Ikdyb3VwZV8zMjA5IiBkYXRhLW5hbWU9Ikdyb3VwZSAzMjA5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTkzIC00ODEwKSI+CiAgICA8ZyBpZD0iVW5pb25fMTgiIGRhdGEtbmFtZT0iVW5pb24gMTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5MyA0ODEwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgPHBhdGggZD0iTTQuNDQ3LDE0Ljg0NWExLDEsMCwwLDEtMS0xVjEyLjA1OEE2LjM5Miw2LjM5MiwwLDAsMSwwLDYuNDExLDYuNDgxLDYuNDgxLDAsMCwxLDYuNTQ5LDAsNi40ODEsNi40ODEsMCwwLDEsMTMuMSw2LjQxMWE2LjM5Myw2LjM5MywwLDAsMS0zLjQ0Nyw1LjY0N3YxLjc4N2ExLDEsMCwwLDEtMSwxWiIgc3Ryb2tlPSJub25lIi8+CiAgICAgIDxwYXRoIGQ9Ik0gNy42NTA3MDAwOTIzMTU2NzQgMTIuODQ1NDk5OTkyMzcwNjEgTCA3LjY1MDcwMDA5MjMxNTY3NCAxMi4wNTgxMTk3NzM4NjQ3NSBDIDcuNjUwNzAwMDkyMzE1Njc0IDExLjMxNjIyMDI4MzUwODMgOC4wNjEzODAzODYzNTI1MzkgMTAuNjM1Mjc5NjU1NDU2NTQgOC43MTc1Nzk4NDE2MTM3NyAxMC4yODkxMzk3NDc2MTk2MyBDIDEwLjE4NTY4OTkyNjE0NzQ2IDkuNTE0NzE5OTYzMDczNzMgMTEuMDk3NzAwMTE5MDE4NTUgOC4wMjg1OTAyMDIzMzE1NDMgMTEuMDk3NzAwMTE5MDE4NTUgNi40MTA2OTk4NDQzNjAzNTIgQyAxMS4wOTc3MDAxMTkwMTg1NSAzLjk3ODYzMDA2NTkxNzk2OSA5LjA1NzI5OTYxMzk1MjYzNyAyIDYuNTQ5MzAwMTkzNzg2NjIxIDIgQyA0LjA0MDgxMDEwODE4NDgxNCAyIDIgMy45Nzg2MzAwNjU5MTc5NjkgMiA2LjQxMDY5OTg0NDM2MDM1MiBDIDIgOC4wMjg2MTAyMjk0OTIxODggMi45MTE5NzAxMzg1NDk4MDUgOS41MTQ2NTk4ODE1OTE3OTcgNC4zODAwMjAxNDE2MDE1NjIgMTAuMjg4OTQwNDI5Njg3NSBDIDUuMDM2MjgwMTU1MTgxODg1IDEwLjYzNTA2MDMxMDM2Mzc3IDUuNDQ3MDAwMDI2NzAyODgxIDExLjMxNjAyOTU0ODY0NTAyIDUuNDQ3MDAwMDI2NzAyODgxIDEyLjA1Nzk3MDA0Njk5NzA3IEwgNS40NDcwMDAwMjY3MDI4ODEgMTIuODQ1NDk5OTkyMzcwNjEgTCA3LjY1MDcwMDA5MjMxNTY3NCAxMi44NDU0OTk5OTIzNzA2MSBNIDguNjUwNzk5NzUxMjgxNzM4IDE0Ljg0NTQ5OTk5MjM3MDYxIEwgNC40NDY4OTk4OTA4OTk2NTggMTQuODQ1NDk5OTkyMzcwNjEgQyAzLjg5NDI5OTk4Mzk3ODI3MSAxNC44NDU0OTk5OTIzNzA2MSAzLjQ0NzAwMDAyNjcwMjg4MSAxNC4zOTcyOTk3NjY1NDA1MyAzLjQ0NzAwMDAyNjcwMjg4MSAxMy44NDU2MDAxMjgxNzM4MyBMIDMuNDQ3MDAwMDI2NzAyODgxIDEyLjA1Nzk3MDA0Njk5NzA3IEMgMS4zOTQ3MDAwNTAzNTQwMDQgMTAuOTc1NTQ5Njk3ODc1OTggNS45NTA5Mjc1NzI5Mzk2OWUtMDggOC44NTI2NDAxNTE5Nzc1MzkgNS45NTA5Mjc1NzI5Mzk2OWUtMDggNi40MTA2OTk4NDQzNjAzNTIgQyA1Ljk1MDkyNzU3MjkzOTY5ZS0wOCAyLjg3MDEwMDAyMTM2MjMwNSAyLjkzMjE5OTk1NDk4NjU3MiAtMy44MTQ2OTc4OTA5MDI2MDdlLTA5IDYuNTQ5MzAwMTkzNzg2NjIxIC0zLjgxNDY5Nzg5MDkwMjYwN2UtMDkgQyAxMC4xNjU0OTk2ODcxOTQ4MiAtMy44MTQ2OTc4OTA5MDI2MDdlLTA5IDEzLjA5NzcwMDExOTAxODU1IDIuODcwMTAwMDIxMzYyMzA1IDEzLjA5NzcwMDExOTAxODU1IDYuNDEwNjk5ODQ0MzYwMzUyIEMgMTMuMDk3NzAwMTE5MDE4NTUgOC44NTI2NDAxNTE5Nzc1MzkgMTEuNzAyNzEwMTUxNjcyMzYgMTAuOTc1NzAwMzc4NDE3OTcgOS42NTA2OTk2MTU0Nzg1MTYgMTIuMDU4MTE5NzczODY0NzUgTCA5LjY1MDY5OTYxNTQ3ODUxNiAxMy44NDU2MDAxMjgxNzM4MyBDIDkuNjUwNjk5NjE1NDc4NTE2IDE0LjM5NzI5OTc2NjU0MDUzIDkuMjAzMzk5NjU4MjAzMTI1IDE0Ljg0NTQ5OTk5MjM3MDYxIDguNjUwNzk5NzUxMjgxNzM4IDE0Ljg0NTQ5OTk5MjM3MDYxIFoiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI2ZmZiIvPgogICAgPC9nPgogICAgPGxpbmUgaWQ9IkxpZ25lXzMxOTciIGRhdGEtbmFtZT0iTGlnbmUgMzE5NyIgeDI9IjQuNzc5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTcuMDk2IDQ4MjcuNDA5KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPgogIDwvZz4KPC9zdmc+Cg==);
}
.wpblock-citation-block.text-align-right .wpblock-citation-citation,
.wpblock-citation-block.text-align-right .wpblock-citation-author {
margin-left: auto;
}
.wpblock-citation-block.text-align-left {
padding-left: 50px;
text-align: left;
}
.wpblock-citation-block.text-align-center {
text-align: center;
}
.wpblock-citation-block.text-align-center .wpblock-citation-citation,
.wpblock-citation-block.text-align-center .wpblock-citation-author {
margin: 0 auto;
}
.wpblock-citation-block figure,
.wpblock-citation-block img {
width: 100%;
height: 250px;
}
.wpblock-citation-block img {
-o-object-fit: cover;
object-fit: cover;
filter: brightness(0.3) grayscale(100%) sepia(100%) hue-rotate(200deg) opacity(0.5);
.homegrade-blocks-custom-heading.has-icon.has-icon--chain::before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4wMTIiIGhlaWdodD0iMTUuOTk5IiB2aWV3Qm94PSIwIDAgMTYuMDEyIDE1Ljk5OSI+CiAgPGcgaWQ9Ikljb25fZmVhdGhlci1saW5rIiBkYXRhLW5hbWU9Ikljb24gZmVhdGhlci1saW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS45OTMgLTIuMDA3KSI+CiAgICA8cGF0aCBpZD0iVHJhY8OpXzE4NTU5IiBkYXRhLW5hbWU9IlRyYWPDqSAxODU1OSIgZD0iTTE1LDEwLjcwN2EzLjUsMy41LDAsMCwwLDUuMjguMzc4bDIuMS0yLjFBMy41LDMuNSwwLDEsMCwxNy40Myw0LjAzM2wtMS4yLDEuMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuNDAyIDApIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cGF0aCBpZD0iVHJhY8OpXzE4NTYwIiBkYXRhLW5hbWU9IlRyYWPDqSAxODU2MCIgZD0iTTExLjQsMTQuOWEzLjUsMy41LDAsMCwwLTUuMjgtLjM3OGwtMi4xLDIuMUEzLjUsMy41LDAsMSwwLDguOTcsMjEuNTdsMS4yLTEuMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNS41OSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8L2c+Cjwvc3ZnPgo=);
}
/*# sourceMappingURL=style-index.css.map*/

2
blocks/content-heading/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;EACA;AAAD;AAEC;EACC;EACA;EACA;EACA;EACA;AAAF;AAEC;EACC;AAAF;AAGC;;EAEC;EACA;AADF;AAIC;EACC;EACA;AAFF;AAGE;;EAEC;AADH;AAIC;EACC;EACA;AAFF;AAIC;EACC;AAFF;AAIE;;EAEC;AAFH;AAMC;;EAEC;EACA;AAJF;AAMC;EACC;KAAA;EACA;AAJF,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.wpblock-citation-block {\n\tposition: relative;\n\tpadding: 80px 20px;\n\tmargin-top: 50px !important;\n\tmargin-bottom: 50px !important;\n\n\t.wpblock-citation-citation {\n\t\tfont-weight: 600;\n\t\tfont-size: 50px;\n\t\tline-height: 1.2;\n\t\ttext-transform: unset;\n\t\tpadding-bottom: 50px;\n\t}\n\t.wpblock-citation-author {\n\t\tpadding-top: 20px;\n\t}\n\n\t.wpblock-citation-citation,\n\t.wpblock-citation-author {\n\t\tmax-width: 1040px;\n\t\tmargin: 0;\n\t}\n\n\t&.text-align-right {\n\t\tpadding-right: 50px;\n\t\ttext-align: right;\n\t\t.wpblock-citation-citation,\n\t\t.wpblock-citation-author {\n\t\t\tmargin-left: auto;\n\t\t}\n\t}\n\t&.text-align-left {\n\t\tpadding-left: 50px;\n\t\ttext-align: left;\n\t}\n\t&.text-align-center {\n\t\ttext-align: center;\n\n\t\t.wpblock-citation-citation,\n\t\t.wpblock-citation-author {\n\t\t\tmargin: 0 auto;\n\t\t}\n\t}\n\n\tfigure,\n\timg {\n\t\twidth: 100%;\n\t\theight: 250px;\n\t}\n\timg {\n\t\tobject-fit: cover;\n\t\tfilter: brightness(0.3) grayscale(100%) sepia(100%) hue-rotate(200deg)\n\t\t\topacity(0.5);\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;EACC;EACA;AACD;AACC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACF;AACC;EACC;AACF;AACC;EACC;AACF;AACC;EACC;AACF;AACC;EACC;AACF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-custom-heading.has-icon {\n\tdisplay: flex;\n\talign-items: center;\n\n\t&::before {\n\t\tcontent: \"\";\n\t\tbackground-color: red;\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tborder-radius: 100%;\n\t\tpadding: 20px;\n\t\tdisplay: inline-block;\n\t\tmargin-right: 10px;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t}\n\t&.has-icon--key::before {\n\t\tbackground-image: url(\"../src/img/icon_key.svg\");\n\t}\n\t&.has-icon--house::before {\n\t\tbackground-image: url(\"../src/img/icon_house.svg\");\n\t}\n\t&.has-icon--bulb::before {\n\t\tbackground-image: url(\"../src/img/icon_bulb.svg\");\n\t}\n\t&.has-icon--chain::before {\n\t\tbackground-image: url(\"../src/img/icon_chain.svg\");\n\t}\n}\n"],"names":[],"sourceRoot":""}

46
blocks/content-heading/src/BlockHeadingControls.js Normal file
View File

@ -0,0 +1,46 @@
import { __ } from "@wordpress/i18n";
export default function BlockHeadingControls({
hasIcon,
setAttributes,
headingLevel,
iconName,
}) {
function handleIconChange(newIconName) {
setAttributes({ iconName: newIconName });
}
function getIconPicture() {
switch (iconName) {
case "key":
return keyIcon;
case "chain":
return chainIcon;
case "house":
return houseIcon;
case "bulb":
return bulbIcon;
}
}
function getDashiconSymbol() {
switch (iconName) {
case "key":
return "admin-network";
case "chain":
return "admin-links";
case "house":
return "admin-home";
case "bulb":
return "lightbulb";
}
}
return (
);
}

18
blocks/content-heading/src/IconControls.js Normal file
View File

@ -0,0 +1,18 @@
import { __ } from "@wordpress/i18n";
export default function IconControls({ hasIcon, setAttributes }) {
return (
<InspectorControls>
<PanelBody
title={__("Icone", "homegrade-blocks__texte-fonctionnel")}
initialOpen={true}
>
<ToggleControl
label="Afficher un icone"
checked={hasIcon}
onChange={onHasIconChange}
/>
</PanelBody>
</InspectorControls>
);
}

8
blocks/content-heading/src/block.json
View File

@ -23,6 +23,14 @@
"headingLevel": {
"type": "string",
"default": "h3"
},
"hasIcon": {
"type": "boolean",
"default": false
},
"iconName": {
"type": "string",
"default": "key"
}
}
}

123
blocks/content-heading/src/edit.js
View File

@ -1,18 +1,24 @@
import { __ } from "@wordpress/i18n";
import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";
import {
useBlockProps,
RichText,
BlockControls,
InspectorControls,
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
import { KeyboardShortcuts } from "@wordpress/components";
import {
ToggleControl,
PanelBody,
KeyboardShortcuts,
} from "@wordpress/components";
import "./editor.scss";
// import BlockHeadingControls from "./BlockHeadingControls";
import { BlockControls } from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
export default function Edit({
attributes,
@ -20,7 +26,11 @@ export default function Edit({
clientId,
...blockProps
}) {
const { title, headingLevel } = attributes;
const { title, headingLevel, hasIcon, iconName } = attributes;
const blockIndex = useSelect((select) => {
const { getBlockIndex } = select("core/block-editor");
return getBlockIndex(clientId);
});
function onChangeHeadingLevel(newHeadingLevel) {
setAttributes({ headingLevel: newHeadingLevel });
@ -29,13 +39,66 @@ export default function Edit({
const newBlock = createBlock("core/paragraph", {});
dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
const blockIndex = useSelect((select) => {
const { getBlockIndex } = select("core/block-editor");
return getBlockIndex(clientId);
function handleIconChange(newIconName) {
setAttributes({ iconName: newIconName });
}
function onHasIconChange(hasIconToggleValue) {
setAttributes({
hasIcon: hasIconToggleValue,
});
}
// function getIconPicture() {
// switch (iconName) {
// case "key":
// return keyIcon;
// case "chain":
// return chainIcon;
// case "house":
// return houseIcon;
// case "bulb":
// return bulbIcon;
// }
// }
// function getDashiconSymbol() {
// switch (iconName) {
// case "key":
// return "admin-network";
// case "chain":
// return "admin-links";
// case "house":
// return "admin-home";
// case "bulb":
// return "lightbulb";
// }
// }
// let iconPicture = getIconPicture();
// let iconDashiconSymbol = getDashiconSymbol();
console.log("hasIcon", hasIcon);
console.log("iconName", iconName);
return (
<>
<InspectorControls>
<PanelBody
title={__("Icone", "homegrade-blocks__texte-fonctionnel")}
initialOpen={true}
>
<ToggleControl
label="Afficher un icone"
checked={hasIcon}
onChange={onHasIconChange}
/>
</PanelBody>
</InspectorControls>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
@ -60,7 +123,42 @@ export default function Edit({
}}
/>
</ToolbarGroup>
{hasIcon && (
<ToolbarGroup>
<ToolbarButton
title={"Clé"}
icon={"admin-network"}
isActive={iconName === "key"}
onClick={() => handleIconChange("key")}
/>
<ToolbarButton
title={"Lien"}
icon={"admin-links"}
isActive={iconName === "chain"}
onClick={() => handleIconChange("chain")}
/>
<ToolbarButton
title={"Homegrade"}
icon={"admin-home"}
isActive={iconName === "house"}
onClick={() => handleIconChange("house")}
/>
<ToolbarButton
title={"Inspiration"}
icon={"lightbulb"}
isActive={iconName === "bulb"}
onClick={() => handleIconChange("bulb")}
/>
</ToolbarGroup>
)}
</BlockControls>
{/* <BlockHeadingControls
hasIcon={hasIcon}
iconName={iconName}
setAttributes={setAttributes}
headingLevel={headingLevel}
/> */}
<KeyboardShortcuts
shortcuts={{
enter: (e) => insertParagraphOnEnter(e),
@ -77,8 +175,11 @@ export default function Edit({
allowedFormats={["homegrade-format/tooltip"]}
tagName={headingLevel}
{...useBlockProps({
className: `homegrade-blocks-custom-heading`,
className: `homegrade-blocks-custom-heading ${
hasIcon ? "has-icon has-icon--" + iconName : " "
}`,
})}
style={{ backgroundImage: "red" }}
/>
</KeyboardShortcuts>
</>

1
blocks/content-heading/src/editor.scss
View File

@ -7,3 +7,4 @@
// .block-editor-image-size-control {
// display: none;
// }

BIN
blocks/content-heading/src/img/icon_bulb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 B

9
blocks/content-heading/src/img/icon_bulb.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.098" height="18.409" viewBox="0 0 13.098 18.409">
<g id="Groupe_3209" data-name="Groupe 3209" transform="translate(-193 -4810)">
<g id="Union_18" data-name="Union 18" transform="translate(193 4810)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M4.447,14.845a1,1,0,0,1-1-1V12.058A6.392,6.392,0,0,1,0,6.411,6.481,6.481,0,0,1,6.549,0,6.481,6.481,0,0,1,13.1,6.411a6.393,6.393,0,0,1-3.447,5.647v1.787a1,1,0,0,1-1,1Z" stroke="none"/>
<path d="M 7.650700092315674 12.84549999237061 L 7.650700092315674 12.05811977386475 C 7.650700092315674 11.3162202835083 8.061380386352539 10.63527965545654 8.71757984161377 10.28913974761963 C 10.18568992614746 9.51471996307373 11.09770011901855 8.028590202331543 11.09770011901855 6.410699844360352 C 11.09770011901855 3.978630065917969 9.057299613952637 2 6.549300193786621 2 C 4.040810108184814 2 2 3.978630065917969 2 6.410699844360352 C 2 8.028610229492188 2.911970138549805 9.514659881591797 4.380020141601562 10.2889404296875 C 5.036280155181885 10.63506031036377 5.447000026702881 11.31602954864502 5.447000026702881 12.05797004699707 L 5.447000026702881 12.84549999237061 L 7.650700092315674 12.84549999237061 M 8.650799751281738 14.84549999237061 L 4.446899890899658 14.84549999237061 C 3.894299983978271 14.84549999237061 3.447000026702881 14.39729976654053 3.447000026702881 13.84560012817383 L 3.447000026702881 12.05797004699707 C 1.394700050354004 10.97554969787598 5.95092757293969e-08 8.852640151977539 5.95092757293969e-08 6.410699844360352 C 5.95092757293969e-08 2.870100021362305 2.932199954986572 -3.814697890902607e-09 6.549300193786621 -3.814697890902607e-09 C 10.16549968719482 -3.814697890902607e-09 13.09770011901855 2.870100021362305 13.09770011901855 6.410699844360352 C 13.09770011901855 8.852640151977539 11.70271015167236 10.97570037841797 9.650699615478516 12.05811977386475 L 9.650699615478516 13.84560012817383 C 9.650699615478516 14.39729976654053 9.203399658203125 14.84549999237061 8.650799751281738 14.84549999237061 Z" stroke="none" fill="#fff"/>
</g>
<line id="Ligne_3197" data-name="Ligne 3197" x2="4.779" transform="translate(197.096 4827.409)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

6
blocks/content-heading/src/img/icon_chain.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.012" height="15.999" viewBox="0 0 16.012 15.999">
<g id="Icon_feather-link" data-name="Icon feather-link" transform="translate(-1.993 -2.007)">
<path id="Tracé_18559" data-name="Tracé 18559" d="M15,10.707a3.5,3.5,0,0,0,5.28.378l2.1-2.1A3.5,3.5,0,1,0,17.43,4.033l-1.2,1.2" transform="translate(-6.402 0)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_18560" data-name="Tracé 18560" d="M11.4,14.9a3.5,3.5,0,0,0-5.28-.378l-2.1,2.1A3.5,3.5,0,1,0,8.97,21.57l1.2-1.2" transform="translate(0 -5.59)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

BIN
blocks/content-heading/src/img/icon_feather_key.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
blocks/content-heading/src/img/icon_house.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 B

3
blocks/content-heading/src/img/icon_house.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.388" height="14.186" viewBox="0 0 12.388 14.186">
<path id="Tracé_18534" data-name="Tracé 18534" d="M960.214,929.442l-5.194,4.782v7.4h10.388v-7.4Z" transform="translate(-954.02 -928.442)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

3
blocks/content-heading/src/img/icon_key.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.803" height="17.426" viewBox="0 0 17.803 17.426">
<path id="Icon_feather-key" data-name="Icon feather-key" d="M18.013,3l-1.58,1.58M10.42,10.593a4.346,4.346,0,1,1-6.146,0,4.346,4.346,0,0,1,6.146,0Zm0,0,3.248-3.248m0,0,2.37,2.37L18.8,6.951l-2.37-2.37M13.668,7.346,16.433,4.58" transform="translate(-2.001 -1.586)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

BIN
blocks/content-heading/src/img/lily _light copie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

6
blocks/content-heading/src/save.js
View File

@ -1,7 +1,7 @@
import { useBlockProps, RichText } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { title, headingLevel } = attributes;
const { title, headingLevel, hasIcon, iconName } = attributes;
return (
<>
@ -9,7 +9,9 @@ export default function save({ attributes }) {
tagName={headingLevel}
value={title}
{...useBlockProps.save({
className: `homegrade-blocks-custom-heading`,
className: `homegrade-blocks-custom-heading ${
hasIcon ? "has-icon has-icon--" + iconName : ""
}`,
})}
/>
</>

79
blocks/content-heading/src/style.scss
View File

@ -1,62 +1,29 @@
/**
* 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.
*/
.homegrade-blocks-custom-heading.has-icon {
display: flex;
align-items: center;
.wpblock-citation-block {
position: relative;
padding: 80px 20px;
margin-top: 50px !important;
margin-bottom: 50px !important;
.wpblock-citation-citation {
font-weight: 600;
font-size: 50px;
line-height: 1.2;
text-transform: unset;
padding-bottom: 50px;
&::before {
content: "";
background-color: red;
width: 40px;
height: 40px;
border-radius: 100%;
padding: 20px;
display: inline-block;
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
}
.wpblock-citation-author {
padding-top: 20px;
&.has-icon--key::before {
background-image: url("../src/img/icon_key.svg");
}
.wpblock-citation-citation,
.wpblock-citation-author {
max-width: 1040px;
margin: 0;
&.has-icon--house::before {
background-image: url("../src/img/icon_house.svg");
}
&.text-align-right {
padding-right: 50px;
text-align: right;
.wpblock-citation-citation,
.wpblock-citation-author {
margin-left: auto;
}
}
&.text-align-left {
padding-left: 50px;
text-align: left;
}
&.text-align-center {
text-align: center;
.wpblock-citation-citation,
.wpblock-citation-author {
margin: 0 auto;
}
}
figure,
img {
width: 100%;
height: 250px;
}
img {
object-fit: cover;
filter: brightness(0.3) grayscale(100%) sepia(100%) hue-rotate(200deg)
opacity(0.5);
&.has-icon--bulb::before {
background-image: url("../src/img/icon_bulb.svg");
}
&.has-icon--chain::before {
background-image: url("../src/img/icon_chain.svg");
}
}