FEATURE Adding the ability to show hide icon

This commit is contained in:
Antoine M 2026-01-30 10:13:32 +01:00
parent 0296b12d4c
commit 74604c0a19
3 changed files with 29 additions and 6 deletions

View File

@ -15,5 +15,11 @@
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"viewScript": "file:./view.js" "viewScript": "file:./view.js",
"attributes": {
"hasIcon": {
"type": "boolean",
"default": true
}
}
} }

View File

@ -1,17 +1,33 @@
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import {
useBlockProps,
RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import "./editor.scss"; import "./editor.scss";
import { PanelBody, CheckboxControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) { export default function Edit({ attributes, setAttributes }) {
const { hasIcon } = attributes;
return ( return (
<> <>
<InspectorControls>
<PanelBody title={__("Icone", "carhop-blocks")}>
<CheckboxControl
label={__("Afficher une icône", "carhop-blocks")}
checked={hasIcon}
onChange={(value) => setAttributes({ hasIcon: value })}
/>
</PanelBody>
</InspectorControls>
<div <div
{...useBlockProps({ {...useBlockProps({
className: "notice-panel", className: "notice-panel",
})} })}
> >
<div className="notice-panel__content"> <div className={`notice-panel__content has-icon-${hasIcon}`}>
<div className="icon"></div> {hasIcon && <div className="icon"></div>}
<div className="innerblocks"> <div className="innerblocks">
<InnerBlocks <InnerBlocks
template={[ template={[

View File

@ -3,14 +3,15 @@ import { RichText } from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor"; import { InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { hasIcon } = attributes;
return ( return (
<div <div
{...useBlockProps.save({ {...useBlockProps.save({
className: "notice-panel", className: "notice-panel",
})} })}
> >
<div className="notice-panel__content"> <div className={`notice-panel__content has-icon-${hasIcon}`}>
<div className="icon"></div> {hasIcon && <div className="icon"></div>}
<div className="innerblocks"> <div className="innerblocks">
<InnerBlocks.Content /> <InnerBlocks.Content />