Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Handling size variation

Browse Source
This commit is contained in:
Antoine M 2025-07-15 10:38:41 +02:00
parent 235510e7ab
commit 59f46f2e96
4 changed files with 60 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/carhop-blocks/blocks/decorative-shapes/src/block.json
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": {
"variant": {
"type": "string",
"default": "medium"
}
}
} }

30
plugins/carhop-blocks/blocks/decorative-shapes/src/edit.js
View File

@ -1,13 +1,37 @@
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import {
useBlockProps,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import "./editor.scss"; import "./editor.scss";
import Shapes from "./Shapes"; import Shapes from "./Shapes";
export default function Edit() { import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
PanelBody,
} from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
const { variant } = attributes;
return ( return (
<> <>
<InspectorControls>
<PanelBody title={__("Shapes", "carhop-blocks")}>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Variante"
onChange={(value) => setAttributes({ variant: value })}
value={variant}
>
<ToggleGroupControlOption label="Medium" value="medium" />
<ToggleGroupControlOption label="Big" value="big" />
</ToggleGroupControl>
</PanelBody>
</InspectorControls>
<div <div
{...useBlockProps({ {...useBlockProps({
className: "carhop-decorative-shapes decorative-shapes", className: `carhop-decorative-shapes decorative-shapes decorative-shapes--${variant}`,
})} })}
> >
<Shapes /> <Shapes />

7
plugins/carhop-blocks/blocks/decorative-shapes/src/save.js
View File

@ -1,11 +1,14 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import Shapes from "./Shapes"; import Shapes from "./Shapes";
export default function save() { export default function save({ attributes }) {
const { variant } = attributes;
return ( return (
<div <div
{...useBlockProps.save({ {...useBlockProps.save({
className: "carhop-decorative-shapes decorative-shapes", className: `carhop-decorative-shapes decorative-shapes decorative-shapes--${variant} ${
variant === "big" ? "alignfull" : ""
}`,
})} })}
> >
<Shapes /> <Shapes />

24
plugins/carhop-blocks/blocks/decorative-shapes/src/style.scss
View File

@ -6,9 +6,9 @@
&__shape { &__shape {
// background-color: red; // background-color: red;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
svg { svg {
// background-color: blue; // background-color: blue;
width: 100%; width: 100%;
@ -18,4 +18,22 @@
object-fit: contain; object-fit: contain;
} }
} }
&--big {
padding: 0rem 2rem;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6rem;
.decorative-shapes__shape {
display: block;
width: 100vw;
max-width: 400px;
svg {
max-width: 800px;
max-height: 800px;
}
}
}
} }