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

adding icon shadow handling

Browse Source
This commit is contained in:
Antoine M 2023-11-08 16:17:06 +01:00
parent 29c198387a
commit f175d115ea
13 changed files with 71 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,10 @@
},
"iconId": {
"type": "number"
},
"hasShadow": {
"type": "boolean",
"default": false
}
}
}

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

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

10
blocks/icon/build/index.css
View File

@ -1,13 +1,9 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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-components-icon__panel-body .icon-preview {
max-width: 80px;
padding: 20px 0;
}
/*# sourceMappingURL=index.css.map*/

2
blocks/icon/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":";;;AACC;EACC;EACA;AAAF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-components-icon__panel-body {\n\t.icon-preview {\n\t\tmax-width: 80px;\n\t\tpadding: 20px 0;\n\t}\n}\n"],"names":[],"sourceRoot":""}

29
blocks/icon/build/index.js
View File

@ -203,6 +203,7 @@ __webpack_require__.r(__webpack_exports__);
function Edit({
attributes,
setAttributes
@ -210,7 +211,8 @@ function Edit({
let {
iconUrl,
iconAlt,
iconId
iconId,
hasShadow
} = attributes;
function setIconAttributes(icon) {
setAttributes({
@ -226,15 +228,22 @@ function Edit({
iconUrl: null
});
}
function onHasShadowChange() {
setAttributes({
hasShadow: !hasShadow
});
}
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_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelBody, {
className: "homegrade-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icon", "homegrade-blocks__texte-backoffice")
className: "homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
}, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
className: "icon-preview",
src: iconUrl,
alt: iconAlt
}), (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_6__.MediaReplaceFlow, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Source", "homegrade-blocks__texte-backoffice"),
mediaId: iconId,
mediaUrl: iconUrl,
allowedTypes: ["image"],
@ -247,7 +256,11 @@ function Edit({
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
label: "Supprimer",
onClick: removeIconAttributes
}))))), !iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaPlaceholder, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToggleControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ombre", "homegrade-blocks__texte-backoffice"),
checked: hasShadow,
onChange: onHasShadowChange
})))), !iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaPlaceholder, {
accept: "image/*",
allowedTypes: ["image"],
onSelect: setIconAttributes,
@ -255,7 +268,7 @@ function Edit({
handleUpload: true
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
className: `homegrade-blocks-icon`
className: `homegrade-blocks-icon ${hasShadow ? "homegrade-blocks-icon--has-shadow" : "homegrade-blocks-icon--no-shadow"} `
})
}, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: iconUrl,
@ -325,11 +338,11 @@ function save({
let {
iconUrl,
iconAlt,
iconId
hasShadow
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-icon`
className: `homegrade-blocks-icon ${hasShadow ? "homegrade-blocks-icon--has-shadow" : "homegrade-blocks-icon--no-shadow"} `
})
}, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: iconUrl,
@ -460,7 +473,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/icon","version":"0.1.0","title":"Icone","category":"homegrade-blocks","icon":"smiley","description":"Pour insérer une icone personnalisée dans une zone de contenu","supports":{"html":false},"parent":["homegrade-content-blocks/column-card"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"iconUrl":{"type":"string"},"iconAlt":{"type":"string"},"iconId":{"type":"number"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/icon","version":"0.1.0","title":"Icone","category":"homegrade-blocks","icon":"smiley","description":"Pour insérer une icone personnalisée dans une zone de contenu","supports":{"html":false},"parent":["homegrade-content-blocks/column-card"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"iconUrl":{"type":"string"},"iconAlt":{"type":"string"},"iconId":{"type":"number"},"hasShadow":{"type":"boolean","default":false}}}');
/***/ })

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

File diff suppressed because one or more lines are too long

12
blocks/icon/build/style-index.css
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*/

1
blocks/icon/build/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":""}

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

@ -26,6 +26,10 @@
},
"iconId": {
"type": "number"
},
"hasShadow": {
"type": "boolean",
"default": false
}
}
}

31
blocks/icon/src/edit.js
View File

@ -12,9 +12,9 @@ import {
} from "@wordpress/block-editor";
import { PanelBody, Button } from "@wordpress/components";
import { trash } from "@wordpress/icons";
import { PanelRow, ToggleControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
let { iconUrl, iconAlt, iconId } = attributes;
let { iconUrl, iconAlt, iconId, hasShadow } = attributes;
function setIconAttributes(icon) {
setAttributes({
iconId: icon.id,
@ -31,16 +31,23 @@ export default function Edit({ attributes, setAttributes }) {
});
}
function onHasShadowChange() {
setAttributes({ hasShadow: !hasShadow });
}
return (
<>
<InspectorControls>
<PanelBody
className="homegrade-blocks-components-image__panel-body"
title={__("Icon", "homegrade-blocks__texte-backoffice")}
className="homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body"
title={__("Icone", "homegrade-blocks__texte-backoffice")}
>
{iconUrl && <img src={iconUrl} alt={iconAlt} />}
{iconUrl && (
<img className="icon-preview" src={iconUrl} alt={iconAlt} />
)}
<div className="media-replace-container">
<MediaReplaceFlow
label={__("Source", "homegrade-blocks__texte-backoffice")}
mediaId={iconId}
mediaUrl={iconUrl}
allowedTypes={["image"]}
@ -64,6 +71,14 @@ export default function Edit({ attributes, setAttributes }) {
</>
)}
</div>
<PanelRow>
<ToggleControl
label={__("Ombre", "homegrade-blocks__texte-backoffice")}
checked={hasShadow}
onChange={onHasShadowChange}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
{!iconUrl && (
@ -77,7 +92,11 @@ export default function Edit({ attributes, setAttributes }) {
)}
<div
{...useBlockProps({
className: `homegrade-blocks-icon`,
className: `homegrade-blocks-icon ${
hasShadow
? "homegrade-blocks-icon--has-shadow"
: "homegrade-blocks-icon--no-shadow"
} `,
})}
>
{iconUrl && <img src={iconUrl} alt={iconAlt} />}

13
blocks/icon/src/editor.scss
View File

@ -1,9 +1,6 @@
/**
* 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-components-icon__panel-body {
.icon-preview {
max-width: 80px;
padding: 20px 0;
}
}

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

@ -1,12 +1,16 @@
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
let { iconUrl, iconAlt, iconId } = attributes;
let { iconUrl, iconAlt, hasShadow } = attributes;
return (
<div
{...useBlockProps.save({
className: `homegrade-blocks-icon`,
className: `homegrade-blocks-icon ${
hasShadow
? "homegrade-blocks-icon--has-shadow"
: "homegrade-blocks-icon--no-shadow"
} `,
})}
>
{iconUrl && <img src={iconUrl} alt={iconAlt} />}

12
blocks/icon/src/style.scss
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;
}