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

updating highlights to handle warning version

Browse Source
This commit is contained in:
Antoine M 2023-10-18 15:01:41 +02:00
parent e76b003f81
commit fd736818f2
11 changed files with 135 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -13,6 +13,8 @@ build/Release
# Dependency directories
node_modules/
node_modules
# Optional npm cache directory
.npm

4
blocks/highlight/build/block.json
View File

@ -26,6 +26,10 @@
"hasTitle": {
"type": "boolean",
"default": true
},
"variant": {
"type": "string",
"default": "classic"
}
}
}

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

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

13
blocks/highlight/build/index.css
View File

@ -6,6 +6,12 @@
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-highlight--classic .wp-block-button__link {
background-color: #df1e1e !important;
}
.homegrade-blocks-highlight--warning:after {
z-index: 0 !important;
}
.homegrade-blocks-highlight ul li {
display: flex;
padding: 10px 0;
@ -21,4 +27,11 @@
margin-right: 10px;
}
.homegrade-blocks-highlight__variant .components-toggle-group-control-option-base[aria-checked=true] {
background-color: #e04d42;
}
.homegrade-blocks-highlight__variant .components-toggle-group-control-option-base[aria-checked=true]:focus {
outline: none;
}
/*# sourceMappingURL=index.css.map*/

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

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAQE;EAEC;EACA;AAHH;AAKE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHH,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.homegrade-blocks-highlight {\n\tul {\n\t\tli {\n\t\t\t// list-style: none !important;\n\t\t\tdisplay: flex;\n\t\t\tpadding: 10px 0;\n\t\t}\n\t\tli:before {\n\t\t\ttransform: translateY(6px);\n\t\t\tflex-shrink: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcontent: \"\";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAQE;EACC;AAFH;AAME;EACC;AAJH;AASE;EAEC;EACA;AARH;AAUE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARH;;AAcC;EACC;AAXF;AAYE;EACC;AAVH,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.homegrade-blocks-highlight {\n\t&--classic {\n\t\t.wp-block-button__link {\n\t\t\tbackground-color: #df1e1e !important;\n\t\t}\n\t}\n\t&--warning {\n\t\t&:after {\n\t\t\tz-index: 0 !important;\n\t\t}\n\t}\n\n\tul {\n\t\tli {\n\t\t\t// list-style: none !important;\n\t\t\tdisplay: flex;\n\t\t\tpadding: 10px 0;\n\t\t}\n\t\tli:before {\n\t\t\ttransform: translateY(6px);\n\t\t\tflex-shrink: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcontent: \"\";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n\n.homegrade-blocks-highlight__variant {\n\t.components-toggle-group-control-option-base[aria-checked=\"true\"] {\n\t\tbackground-color: #e04d42;\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}

74
blocks/highlight/build/index.js
View File

@ -199,13 +199,9 @@ function Edit({
const {
title,
iconName,
hasTitle
hasTitle,
variant
} = attributes;
const handleIconChange = newIconName => {
setAttributes({
iconName: newIconName
});
};
function getIconPicture() {
switch (iconName) {
case "key":
@ -218,17 +214,15 @@ function Edit({
return _img_icon_bulb_svg__WEBPACK_IMPORTED_MODULE_6__["default"];
}
}
function getDashiconSymbol() {
switch (iconName) {
case "key":
return "admin-network";
case "chain":
return "admin-links";
case "house":
return "admin-home";
case "bulb":
return "lightbulb";
function onIconChange(newIconName) {
setAttributes({
iconName: newIconName
});
}
function onTitleChange(title) {
setAttributes({
title
});
}
function onHasTitleChange() {
setAttributes({
@ -236,12 +230,30 @@ function Edit({
title: undefined
});
}
function onVariantChange(variant) {
console.log(variant);
setAttributes({
variant
});
}
let iconPicture = getIconPicture();
let iconDashiconSymbol = getDashiconSymbol();
console.log(variant);
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_7__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Titre", "homegrade-blocks__texte-fonctionnel"),
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Variantes", "homegrade-blocks__texte-fonctionnel"),
initialOpen: true
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControl, {
className: "homegrade-blocks-highlight__variant",
isBlock: true,
onChange: onVariantChange,
value: variant
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControlOption, {
variant: "primary",
label: "Classique",
value: "classic"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControlOption, {
label: "Warning",
value: "warning"
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
label: "Afficher le titre",
checked: hasTitle,
onChange: onHasTitleChange
@ -249,25 +261,25 @@ function Edit({
title: "Clé",
icon: "admin-network",
isActive: iconName === "key",
onClick: () => handleIconChange("key")
onClick: () => onIconChange("key")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
title: "Lien",
icon: "admin-links",
isActive: iconName === "chain",
onClick: () => handleIconChange("chain")
onClick: () => onIconChange("chain")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
title: "Homegrade",
icon: "admin-home",
isActive: iconName === "house",
onClick: () => handleIconChange("house")
onClick: () => onIconChange("house")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
title: "Inspiration",
icon: "lightbulb",
isActive: iconName === "bulb",
onClick: () => handleIconChange("bulb")
onClick: () => onIconChange("bulb")
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.useBlockProps)({
className: `homegrade-blocks-highlight`
className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
})
}, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-highlight__titling"
@ -278,9 +290,7 @@ function Edit({
alt: ""
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.RichText, {
className: "homegrade-blocks-highlight__block-title",
onChange: value => setAttributes({
title: value
}),
onChange: onTitleChange,
value: title,
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez un titre", "homegrade-blocks__texte-fonctionnel"),
tagName: "h3",
@ -364,13 +374,13 @@ __webpack_require__.r(__webpack_exports__);
function save({
attributes,
setAttributes
attributes
}) {
const {
title,
iconName,
hasTitle
hasTitle,
variant
} = attributes;
function getIconPicture() {
switch (iconName) {
@ -387,7 +397,7 @@ function save({
let iconPicture = getIconPicture();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-highlight`
className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
})
}, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-highlight__titling"
@ -506,7 +516,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/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"iconName":{"type":"string","default":"key"},"hasTitle":{"type":"boolean","default":true}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"iconName":{"type":"string","default":"key"},"hasTitle":{"type":"boolean","default":true},"variant":{"type":"string","default":"classic"}}}');
/***/ })

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

File diff suppressed because one or more lines are too long

4
blocks/highlight/src/block.json
View File

@ -26,6 +26,10 @@
"hasTitle": {
"type": "boolean",
"default": true
},
"variant": {
"type": "string",
"default": "classic"
}
}
}

67
blocks/highlight/src/edit.js
View File

@ -12,13 +12,17 @@ import {
InspectorControls,
} from "@wordpress/block-editor";
import { ToolbarButton, ToggleControl, PanelBody } from "@wordpress/components";
import {
ToolbarButton,
ToggleControl,
PanelBody,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
const { title, iconName, hasTitle } = attributes;
const handleIconChange = (newIconName) => {
setAttributes({ iconName: newIconName });
};
const { title, iconName, hasTitle, variant } = attributes;
function getIconPicture() {
switch (iconName) {
case "key":
@ -34,20 +38,12 @@ export default function Edit({ attributes, setAttributes }) {
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";
function onIconChange(newIconName) {
setAttributes({ iconName: newIconName });
}
function onTitleChange(title) {
setAttributes({ title });
}
function onHasTitleChange() {
setAttributes({
@ -55,17 +51,32 @@ export default function Edit({ attributes, setAttributes }) {
title: undefined,
});
}
function onVariantChange(variant) {
console.log(variant);
setAttributes({ variant });
}
let iconPicture = getIconPicture();
let iconDashiconSymbol = getDashiconSymbol();
console.log(variant);
return (
<>
<InspectorControls>
<PanelBody
title={__("Titre", "homegrade-blocks__texte-fonctionnel")}
title={__("Variantes", "homegrade-blocks__texte-fonctionnel")}
initialOpen={true}
>
<ToggleGroupControl
className="homegrade-blocks-highlight__variant"
isBlock
onChange={onVariantChange}
value={variant}
>
<ToggleGroupControlOption
variant="primary"
label="Classique"
value="classic"
/>
<ToggleGroupControlOption label="Warning" value="warning" />
</ToggleGroupControl>
<ToggleControl
label="Afficher le titre"
checked={hasTitle}
@ -78,30 +89,32 @@ export default function Edit({ attributes, setAttributes }) {
title={"Clé"}
icon={"admin-network"}
isActive={iconName === "key"}
onClick={() => handleIconChange("key")}
onClick={() => onIconChange("key")}
/>
<ToolbarButton
title={"Lien"}
icon={"admin-links"}
isActive={iconName === "chain"}
onClick={() => handleIconChange("chain")}
onClick={() => onIconChange("chain")}
/>
<ToolbarButton
title={"Homegrade"}
icon={"admin-home"}
isActive={iconName === "house"}
onClick={() => handleIconChange("house")}
onClick={() => onIconChange("house")}
/>
<ToolbarButton
title={"Inspiration"}
icon={"lightbulb"}
isActive={iconName === "bulb"}
onClick={() => handleIconChange("bulb")}
onClick={() => onIconChange("bulb")}
/>
</BlockControls>
<section
{...useBlockProps({
className: `homegrade-blocks-highlight`,
className: `homegrade-blocks-highlight ${
variant ? `homegrade-blocks-highlight--${variant}` : ""
}`,
})}
>
{hasTitle && (
@ -111,7 +124,7 @@ export default function Edit({ attributes, setAttributes }) {
</div>
<RichText
className="homegrade-blocks-highlight__block-title"
onChange={(value) => setAttributes({ title: value })}
onChange={onTitleChange}
value={title}
placeholder={__(
"Insérez un titre",

20
blocks/highlight/src/editor.scss
View File

@ -5,6 +5,17 @@
*/
.homegrade-blocks-highlight {
&--classic {
.wp-block-button__link {
background-color: #df1e1e !important;
}
}
&--warning {
&:after {
z-index: 0 !important;
}
}
ul {
li {
// list-style: none !important;
@ -23,3 +34,12 @@
}
}
}
.homegrade-blocks-highlight__variant {
.components-toggle-group-control-option-base[aria-checked="true"] {
background-color: #e04d42;
&:focus {
outline: none;
}
}
}

8
blocks/highlight/src/save.js
View File

@ -6,8 +6,8 @@ import chainIcon from "./img/icon_block_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
export default function save({ attributes, setAttributes }) {
const { title, iconName, hasTitle } = attributes;
export default function save({ attributes }) {
const { title, iconName, hasTitle, variant } = attributes;
function getIconPicture() {
switch (iconName) {
case "key":
@ -28,7 +28,9 @@ export default function save({ attributes, setAttributes }) {
return (
<section
{...useBlockProps.save({
className: `homegrade-blocks-highlight`,
className: `homegrade-blocks-highlight ${
variant ? `homegrade-blocks-highlight--${variant}` : ""
}`,
})}
>
{hasTitle && (