FEATURE Adding the ability to show hide icon
This commit is contained in:
parent
0296b12d4c
commit
74604c0a19
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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={[
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user