FEATURE Extending block features with border and background shape refactoring into dedicated components
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Antoine M
parent
77e3a3c62e
commit
05c48e2779
|
|
@ -9,7 +9,12 @@
|
|||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
"html": false,
|
||||
"border": {
|
||||
"color": true,
|
||||
"style": true,
|
||||
"width": true
|
||||
}
|
||||
},
|
||||
"textdomain": "carhop-blocks",
|
||||
"editorScript": "file:./index.js",
|
||||
|
|
@ -65,10 +70,23 @@
|
|||
"right"
|
||||
]
|
||||
},
|
||||
"hasBackgroundColor": {
|
||||
"hasBorder": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"blockVariant": {
|
||||
"type": "string",
|
||||
"default": "framed",
|
||||
"enum": [
|
||||
"framed",
|
||||
"backgrounded",
|
||||
"nude"
|
||||
]
|
||||
},
|
||||
"borderColor": {
|
||||
"type": "string",
|
||||
"default": "#136f63"
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
|
|
@ -88,14 +106,6 @@
|
|||
"variationA",
|
||||
"variationB"
|
||||
]
|
||||
},
|
||||
"backgroundOrientation": {
|
||||
"type": "string",
|
||||
"default": "left",
|
||||
"enum": [
|
||||
"left",
|
||||
"right"
|
||||
]
|
||||
}
|
||||
},
|
||||
"usesContext": [
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {
|
|||
MediaPlaceholder,
|
||||
useSetting,
|
||||
} from "@wordpress/block-editor";
|
||||
import shapeA from "./shapeA.jsx";
|
||||
import shapeB from "./shapeB.jsx";
|
||||
import { lock, trash } from "@wordpress/icons";
|
||||
import { ColorPalette } from "@wordpress/components";
|
||||
import {
|
||||
|
|
@ -19,6 +21,8 @@ import {
|
|||
|
||||
import "./editor.scss";
|
||||
import { isColorLight } from "../../_utilities/utilities";
|
||||
import ShapeA from "./shapeA.jsx";
|
||||
import ShapeB from "./shapeB.jsx";
|
||||
|
||||
export default function Edit({ attributes, setAttributes, ...props }) {
|
||||
const colors = useSetting("color.palette.theme");
|
||||
|
|
@ -30,12 +34,13 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
coverAlt,
|
||||
coverId,
|
||||
coverSize,
|
||||
hasBackgroundColor,
|
||||
backgroundColor,
|
||||
backgroundOrientation,
|
||||
|
||||
blockWidth,
|
||||
textColor,
|
||||
shapeType,
|
||||
blockVariant,
|
||||
borderColor,
|
||||
} = attributes;
|
||||
|
||||
function onDispositionChange(disposition) {
|
||||
|
|
@ -61,34 +66,37 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
setAttributes({ backgroundColor: value });
|
||||
setHasLightBackground(value);
|
||||
}
|
||||
function onHasBackgroundColorChange(value) {
|
||||
setAttributes({ hasBackgroundColor: value });
|
||||
if (!value) {
|
||||
setAttributes({ backgroundColor: null });
|
||||
}
|
||||
}
|
||||
|
||||
function onCoverTypeChange(value) {
|
||||
setAttributes({ coverType: value });
|
||||
}
|
||||
|
||||
function onBackgroundOrientationChange(value) {
|
||||
setAttributes({ backgroundOrientation: value });
|
||||
function onBlockVariantChange(value) {
|
||||
setAttributes({ blockVariant: value });
|
||||
|
||||
if (value === "framed" || value === "nude") {
|
||||
setAttributes({ backgroundColor: "#fff" });
|
||||
setAttributes({ hasLightBackground: true });
|
||||
}
|
||||
}
|
||||
|
||||
function setHasLightBackground(backgroundColor) {
|
||||
if (!backgroundColor) return;
|
||||
|
||||
const isLightBackgroundColor = isColorLight(backgroundColor);
|
||||
console.log(isLightBackgroundColor);
|
||||
setAttributes({ hasLightBackground: isLightBackgroundColor });
|
||||
}
|
||||
console.log(backgroundColor);
|
||||
console.log(isColorLight(backgroundColor));
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Largeur", "deligraph-blocks")}
|
||||
title={__("Aspect & Variante de bloc", "deligraph-blocks")}
|
||||
>
|
||||
{/* Largeur du bloc */}
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
|
|
@ -99,10 +107,95 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
<ToggleGroupControlOption label="Contenue" value="contained" />
|
||||
<ToggleGroupControlOption label="Pleine largeur" value="full" />
|
||||
</ToggleGroupControl>
|
||||
{/* Modèle de bloc */}
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Modèle de bloc"
|
||||
onChange={onBlockVariantChange}
|
||||
value={blockVariant}
|
||||
>
|
||||
<ToggleGroupControlOption label="Nu" value="nude" />
|
||||
<ToggleGroupControlOption label="Encadré" value="framed" />
|
||||
<ToggleGroupControlOption
|
||||
label="Fond Coloré"
|
||||
value="backgrounded"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
{/* Disposition */}
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Disposition"
|
||||
onChange={onDispositionChange}
|
||||
value={disposition}
|
||||
>
|
||||
<ToggleGroupControlOption label="Gauche" value="left" />
|
||||
<ToggleGroupControlOption label="Droite" value="right" />
|
||||
</ToggleGroupControl>
|
||||
</PanelBody>
|
||||
|
||||
{blockVariant === "backgrounded" && (
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Arrière plan", "deligraph-blocks")}
|
||||
>
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Type de forme"
|
||||
onChange={(value) => setAttributes({ shapeType: value })}
|
||||
value={shapeType}
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation A"
|
||||
value="variationA"
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation B"
|
||||
value="variationB"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
<ColorPalette
|
||||
colors={colors}
|
||||
value={backgroundColor}
|
||||
onChange={onBackgroundColorChange}
|
||||
/>
|
||||
</PanelBody>
|
||||
)}
|
||||
{blockVariant === "framed" && (
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Bordure", "deligraph-blocks")}
|
||||
>
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Type de forme"
|
||||
onChange={(value) => setAttributes({ shapeType: value })}
|
||||
value={shapeType}
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation A"
|
||||
value="variationA"
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation B"
|
||||
value="variationB"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
<ColorPalette
|
||||
colors={colors}
|
||||
value={borderColor}
|
||||
onChange={(value) => setAttributes({ borderColor: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
)}
|
||||
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Image d'accompagnement", "deligraph-blocks")}
|
||||
initialOpen={false}
|
||||
>
|
||||
{coverUrl && <img src={coverUrl} alt={coverAlt} />}
|
||||
<div className="media-replace-container">
|
||||
|
|
@ -141,16 +234,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
<ToggleGroupControlOption label="Classique" value="classic" />
|
||||
<ToggleGroupControlOption label="Encadrée" value="photoframe" />
|
||||
</ToggleGroupControl>
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Disposition"
|
||||
onChange={onDispositionChange}
|
||||
value={disposition}
|
||||
>
|
||||
<ToggleGroupControlOption label="Gauche" value="left" />
|
||||
<ToggleGroupControlOption label="Droite" value="right" />
|
||||
</ToggleGroupControl>
|
||||
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
|
|
@ -165,45 +249,10 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
</ToggleGroupControl>
|
||||
</PanelBody>
|
||||
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Arrière plan", "deligraph-blocks")}
|
||||
>
|
||||
<CheckboxControl
|
||||
label="Arrière plan coloré"
|
||||
checked={hasBackgroundColor}
|
||||
onChange={onHasBackgroundColorChange}
|
||||
/>
|
||||
{hasBackgroundColor && (
|
||||
<>
|
||||
<ToggleGroupControl
|
||||
className="deligraph-blocks__variant"
|
||||
isBlock
|
||||
label="Type de forme"
|
||||
onChange={(value) => setAttributes({ shapeType: value })}
|
||||
value={shapeType}
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation A"
|
||||
value="variationA"
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
label="Variation B"
|
||||
value="variationB"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
<ColorPalette
|
||||
colors={colors}
|
||||
value={backgroundColor}
|
||||
onChange={onBackgroundColorChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</PanelBody>
|
||||
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Couleur du texte", "deligraph-blocks")}
|
||||
initialOpen={false}
|
||||
>
|
||||
<ColorPalette
|
||||
colors={colors}
|
||||
|
|
@ -214,62 +263,47 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
</InspectorControls>
|
||||
<section
|
||||
{...useBlockProps({
|
||||
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}
|
||||
${
|
||||
blockWidth === "full"
|
||||
? "chapter-section--width-full"
|
||||
: "chapter-section--width-contained"
|
||||
}
|
||||
${
|
||||
hasBackgroundColor && backgroundColor
|
||||
? "chapter-section--has-background"
|
||||
: ""
|
||||
}
|
||||
${
|
||||
hasLightBackground
|
||||
? "chapter-section--bg-light"
|
||||
: "chapter-section--bg-dark"
|
||||
}`,
|
||||
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
|
||||
${
|
||||
blockWidth === "full"
|
||||
? "chapter-section--width-full"
|
||||
: "chapter-section--width-contained"
|
||||
}
|
||||
|
||||
${
|
||||
hasLightBackground
|
||||
? "chapter-section--bg-light"
|
||||
: "chapter-section--bg-dark"
|
||||
}`,
|
||||
|
||||
style: {
|
||||
"--chapter-section-text-color": textColor ? textColor : "#136f63",
|
||||
"--cta-current-color":
|
||||
blockVariant === "backgrounded"
|
||||
? "inherit"
|
||||
: "var(--wp--preset--color--primary) !important",
|
||||
},
|
||||
})}
|
||||
>
|
||||
{hasBackgroundColor &&
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationA" && (
|
||||
<>
|
||||
<svg
|
||||
width="1440"
|
||||
height="744"
|
||||
viewBox="0 0 1440 744"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path d="M0 0H1440V686.701L0 744V0Z" fill={backgroundColor} />
|
||||
</svg>
|
||||
</>
|
||||
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{hasBackgroundColor &&
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationB" && (
|
||||
<>
|
||||
<svg
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
width="1302"
|
||||
height="654"
|
||||
viewBox="0 0 1302 654"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
|
||||
fill={backgroundColor}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationA" && (
|
||||
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationB" && (
|
||||
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
<div className="chapter-section__content">
|
||||
<div className="chapter-section__innerblocks">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
||||
import ShapeA from "./shapeA.jsx";
|
||||
import ShapeB from "./shapeB.jsx";
|
||||
export default function save({ attributes }) {
|
||||
const {
|
||||
hasLightBackground,
|
||||
|
|
@ -8,64 +10,57 @@ export default function save({ attributes }) {
|
|||
coverSize,
|
||||
coverType,
|
||||
backgroundColor,
|
||||
hasBackgroundColor,
|
||||
backgroundOrientation,
|
||||
blockWidth,
|
||||
textColor,
|
||||
shapeType,
|
||||
blockVariant,
|
||||
borderColor,
|
||||
} = attributes;
|
||||
|
||||
return (
|
||||
<section
|
||||
{...useBlockProps.save({
|
||||
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}
|
||||
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
|
||||
${
|
||||
blockWidth === "full"
|
||||
? "chapter-section--width-full"
|
||||
: "chapter-section--width-contained"
|
||||
}
|
||||
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
|
||||
${
|
||||
hasBackgroundColor && backgroundColor
|
||||
? "chapter-section--has-background"
|
||||
: ""
|
||||
}`,
|
||||
|
||||
${
|
||||
hasLightBackground
|
||||
? "chapter-section--bg-light"
|
||||
: "chapter-section--bg-dark"
|
||||
}`,
|
||||
style: {
|
||||
"--chapter-section-text-color": textColor ? textColor : "#136f63",
|
||||
"--cta-current-color":
|
||||
blockVariant === "backgrounded"
|
||||
? "inherit"
|
||||
: "var(--wp--preset--color--primary) !important",
|
||||
},
|
||||
})}
|
||||
>
|
||||
{hasBackgroundColor && backgroundColor && shapeType === "variationA" && (
|
||||
<>
|
||||
<svg
|
||||
width="1440"
|
||||
height="744"
|
||||
viewBox="0 0 1440 744"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path d="M0 0H1440V686.701L0 744V0Z" fill={backgroundColor} />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
{hasBackgroundColor && backgroundColor && shapeType === "variationB" && (
|
||||
<>
|
||||
<svg
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
width="1302"
|
||||
height="654"
|
||||
viewBox="0 0 1302 654"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
|
||||
fill={backgroundColor}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationA" && (
|
||||
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationB" && (
|
||||
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationA" && (
|
||||
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "variationB" && (
|
||||
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
|
||||
<div className="chapter-section__content">
|
||||
<div className="chapter-section__innerblocks">
|
||||
|
|
|
|||
32
plugins/carhop-blocks/src/chapter-section/shapeA.jsx
Normal file
32
plugins/carhop-blocks/src/chapter-section/shapeA.jsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React from "react";
|
||||
|
||||
export default function ShapeA({
|
||||
backgroundOrientation,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
width="1440"
|
||||
height="744"
|
||||
viewBox="0 0 1440 744"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
preserveAspectRatio="none"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M0 0H1440V686.701L0 744V0Z"
|
||||
fill={backgroundColor}
|
||||
stroke={borderColor}
|
||||
strokeWidth={borderColor ? "2px" : "0"}
|
||||
style={{
|
||||
strokeLinejoin: "round",
|
||||
vectorEffect: "non-scaling-stroke",
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
30
plugins/carhop-blocks/src/chapter-section/shapeB.jsx
Normal file
30
plugins/carhop-blocks/src/chapter-section/shapeB.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from "react";
|
||||
|
||||
export default function ShapeB({
|
||||
backgroundOrientation,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
||||
width="1302"
|
||||
height="654"
|
||||
viewBox="0 0 1302 654"
|
||||
preserveAspectRatio="none"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
|
||||
fill={backgroundColor}
|
||||
stroke={borderColor}
|
||||
strokeWidth={borderColor ? "2px" : "0"}
|
||||
style={{
|
||||
strokeLinejoin: "round",
|
||||
vectorEffect: "non-scaling-stroke",
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user