Compare commits

...

4 Commits

Author SHA1 Message Date
Antoine M
41a1bbad3d STYLE Refining cta aspect
All checks were successful
continuous-integration/drone/push Build is passing
2025-07-03 17:03:28 +02:00
Antoine M
5dfe5743fa FEATURE passing custom class to determine if the background is light or dark 2025-07-03 17:03:17 +02:00
Antoine M
7d6d758b46 FEATURE Handling TextColor variable and behaviours 2025-07-03 17:02:38 +02:00
Antoine M
7d773401ed FEATURE introducing the isColorLight helper function 2025-07-03 17:01:48 +02:00
19 changed files with 174 additions and 74 deletions

View File

@ -0,0 +1,24 @@
// Fonction pour déterminer si une couleur est claire ou sombre
export function isColorLight(color) {
// Si pas de couleur, considérer comme claire
if (!color) return true;
// Convertir hex en RGB
let hex = color.replace("#", "");
if (hex.length === 3) {
hex = hex
.split("")
.map((char) => char + char)
.join("");
}
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
// Calculer la luminance relative (formule standard)
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Si luminance > 0.5, la couleur est claire
return luminance > 0.5;
}

View File

@ -65,6 +65,10 @@
"type": "string",
"default": "#ffffff"
},
"textColor": {
"type": "string",
"default": "#136f63"
},
"backgroundOrientation": {
"type": "string",
"default": "left",

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '62a57819a79c88fe5e2d');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => 'd0e3316a30114b6e5e46');

View File

@ -41,7 +41,7 @@ const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx
\************************/
/***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#ffffff"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#ffffff"},"textColor":{"type":"string","default":"#136f63"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
/***/ }),
@ -87,18 +87,14 @@ function Edit({
hasBackgroundColor,
backgroundColor,
backgroundOrientation,
blockWidth
blockWidth,
textColor
} = attributes;
function onDispositionChange(disposition) {
setAttributes({
disposition
});
}
function onCoverSizeChange(coverSize) {
setAttributes({
coverSize
});
}
function setCoverAttributes(cover) {
setAttributes({
coverId: cover.id,
@ -195,7 +191,9 @@ function Edit({
className: "deligraph-blocks__variant",
isBlock: true,
label: "Taille de l'image",
onChange: onCoverSizeChange,
onChange: coverSize => setAttributes({
coverSize
}),
value: coverSize,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Big",
@ -218,32 +216,32 @@ function Edit({
label: "Arri\xE8re plan color\xE9",
checked: hasBackgroundColor,
onChange: onHasBackgroundColorChange
}), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
}), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors,
value: backgroundColor,
onChange: onBackgroundColorChange
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant",
isBlock: true,
label: "Disposition",
onChange: onBackgroundOrientationChange,
value: backgroundOrientation,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Gauche",
value: "left"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Droite",
value: "right"
})]
})]
})
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors,
value: textColor,
onChange: value => setAttributes({
textColor: value
})
})
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.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" : ""}`
${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`,
style: {
"--chapter-section-text-color": textColor ? textColor : "#136f63"
}
}),
children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("svg", {
className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,
@ -366,11 +364,15 @@ function save({
backgroundColor,
hasBackgroundColor,
backgroundOrientation,
blockWidth
blockWidth,
textColor
} = attributes;
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${backgroundColor ? "chapter-section--has-background" : ""} ${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}`
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${backgroundColor ? "chapter-section--has-background" : ""} ${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}`,
style: {
"--chapter-section-text-color": textColor
}
}),
children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,

File diff suppressed because one or more lines are too long

View File

@ -65,6 +65,10 @@
"type": "string",
"default": "#ffffff"
},
"textColor": {
"type": "string",
"default": "#136f63"
},
"backgroundOrientation": {
"type": "string",
"default": "left",

View File

@ -30,14 +30,12 @@ export default function Edit({ attributes, setAttributes, ...props }) {
backgroundColor,
backgroundOrientation,
blockWidth,
textColor,
} = attributes;
function onDispositionChange(disposition) {
setAttributes({ disposition });
}
function onCoverSizeChange(coverSize) {
setAttributes({ coverSize });
}
function setCoverAttributes(cover) {
setAttributes({
@ -129,7 +127,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
className="deligraph-blocks__variant"
isBlock
label="Taille de l'image"
onChange={onCoverSizeChange}
onChange={(coverSize) => setAttributes({ coverSize })}
value={coverSize}
>
<ToggleGroupControlOption label="Big" value="large" />
@ -155,19 +153,20 @@ export default function Edit({ attributes, setAttributes, ...props }) {
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Disposition"
onChange={onBackgroundOrientationChange}
value={backgroundOrientation}
>
<ToggleGroupControlOption label="Gauche" value="left" />
<ToggleGroupControlOption label="Droite" value="right" />
</ToggleGroupControl>
</>
)}
</PanelBody>
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Couleur du texte", "deligraph-blocks")}
>
<ColorPalette
colors={colors}
value={textColor}
onChange={(value) => setAttributes({ textColor: value })}
/>
</PanelBody>
</InspectorControls>
<section
{...useBlockProps({
@ -182,6 +181,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
? "chapter-section--has-background"
: ""
}`,
style: {
"--chapter-section-text-color": textColor ? textColor : "#136f63",
},
})}
>
{hasBackgroundColor && backgroundColor && (

View File

@ -9,6 +9,7 @@ export default function save({ attributes }) {
hasBackgroundColor,
backgroundOrientation,
blockWidth,
textColor,
} = attributes;
return (
<section
@ -20,6 +21,9 @@ export default function save({ attributes }) {
? "chapter-section--width-full"
: "chapter-section--width-contained"
}`,
style: {
"--chapter-section-text-color": textColor,
},
})}
>
{hasBackgroundColor && backgroundColor && (

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '15318d1c4f5eab934866');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '73384dc26665f6c790ed');

View File

@ -2,6 +2,39 @@
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "../_utilities/utilities.js":
/*!**********************************!*\
!*** ../_utilities/utilities.js ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ isColorLight: () => (/* binding */ isColorLight)
/* harmony export */ });
// Fonction pour déterminer si une couleur est claire ou sombre
function isColorLight(color) {
// Si pas de couleur, considérer comme claire
if (!color) return true;
// Convertir hex en RGB
let hex = color.replace("#", "");
if (hex.length === 3) {
hex = hex.split("").map(char => char + char).join("");
}
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
// Calculer la luminance relative (formule standard)
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Si luminance > 0.5, la couleur est claire
return luminance > 0.5;
}
/***/ }),
/***/ "./src/block.json":
/*!************************!*\
!*** ./src/block.json ***!
@ -27,10 +60,12 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
@ -47,6 +82,8 @@ function Edit({
backgroundColor,
textColor
} = attributes;
const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_3__.isColorLight)(backgroundColor);
console.log(isLightBackgroundColor);
function onBackgroundColorChange(value) {
setAttributes({
backgroundColor: value
@ -67,48 +104,48 @@ function Edit({
textColor: value
});
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Arrière plan", "deligraph-blocks"),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.CheckboxControl, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.CheckboxControl, {
label: "Arri\xE8re plan color\xE9",
checked: hasBackgroundColor,
onChange: onHasBackgroundColorChange
}), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ColorPalette, {
}), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
colors: colors,
value: backgroundColor,
onChange: onBackgroundColorChange
})
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"),
children: hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ColorPalette, {
children: hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
colors: colors,
value: textColor,
onChange: onTextColorChange
})
})
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("section", {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
className: "content-box",
className: `content-box ${isLightBackgroundColor ? "content-box--bg-light" : "content-box--bg-dark"}`,
style: {
"--content-box-background-color": backgroundColor,
"--content-box-text-color": textColor
}
}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "content-box__innerblocks",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
template: [["core/paragraph", {
placeholder: "Ajouter ici le texte"
}]],
allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block"]
allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block", "ninja-forms/form"]
})
})
})]
@ -184,8 +221,10 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ });
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
function save({
@ -196,17 +235,18 @@ function save({
backgroundColor,
textColor
} = attributes;
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("section", {
const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_1__.isColorLight)(backgroundColor);
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: "content-box",
className: `content-box ${isLightBackgroundColor ? "content-box--bg-light" : "content-box--bg-dark"}`,
style: {
"--content-box-background-color": backgroundColor,
"--content-box-text-color": textColor
}
}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
className: "content-box__innerblocks",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
})
});
}

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
{"version":3,"file":"view.js","mappings":";;;;AAAAA,OAAO,CAACC,GAAG,CAAC,qDAAqD,CAAC,C","sources":["webpack://front-header/./src/view.js"],"sourcesContent":["console.log(\"Hello World! (from front-header-front-header block)\");\n"],"names":["console","log"],"sourceRoot":""}

View File

@ -8,6 +8,7 @@ import {
MediaPlaceholder,
} from "@wordpress/block-editor";
import "./editor.scss";
import { isColorLight } from "../../_utilities/utilities";
import {
PanelBody,
@ -22,6 +23,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme");
const { hasBackgroundColor, backgroundColor, textColor } = attributes;
const isLightBackgroundColor = isColorLight(backgroundColor);
console.log(isLightBackgroundColor);
function onBackgroundColorChange(value) {
setAttributes({ backgroundColor: value });
}
@ -73,7 +77,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
</InspectorControls>
<section
{...useBlockProps({
className: "content-box",
className: `content-box ${
isLightBackgroundColor
? "content-box--bg-light"
: "content-box--bg-dark"
}`,
style: {
"--content-box-background-color": backgroundColor,
"--content-box-text-color": textColor,
@ -95,6 +103,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
"carhop-blocks/decorative-shapes",
"acf/statistics-datas",
"carhop-blocks/scroll-story-block",
"ninja-forms/form",
]}
/>
</div>

View File

@ -1,11 +1,17 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { isColorLight } from "../../_utilities/utilities";
export default function save({ attributes }) {
const { hasBackgroundColor, backgroundColor, textColor } = attributes;
const isLightBackgroundColor = isColorLight(backgroundColor);
return (
<section
{...useBlockProps.save({
className: "content-box",
className: `content-box ${
isLightBackgroundColor
? "content-box--bg-light"
: "content-box--bg-dark"
}`,
style: {
"--content-box-background-color": backgroundColor,
"--content-box-text-color": textColor,

File diff suppressed because one or more lines are too long

View File

@ -23,7 +23,9 @@
}
.wp-block-carhop-blocks-cta .icon svg path,
.wp-block-carhop-blocks-cta .icon svg circle {
fill: transparent;
stroke: var(--cta-current-color);
stroke-width: 2;
}
.wp-block-carhop-blocks-cta.align--left {
margin-right: 0;

View File

@ -23,7 +23,9 @@
}
.wp-block-carhop-blocks-cta .icon svg path,
.wp-block-carhop-blocks-cta .icon svg circle {
fill: transparent;
stroke: var(--cta-current-color);
stroke-width: 2;
}
.wp-block-carhop-blocks-cta.align--left {
margin-left: 0;

View File

@ -1 +1 @@
{"version":3,"file":"cta/style-index.css","mappings":";;;AAAA;EACC;EACA;EAEA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EAEA;AADD;AAGC;EACC;AADF;AAIE;EACC;EACA;AAFH;AAIE;;EAEC;AAFH;AAMC;EACC;AAJF;AAMC;EACC;EACA;AAJF;AAMC;EACC;AAJF,C","sources":["webpack://cta/./src/cta/style.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\tmargin-top: 20px;\n\tcolor: var(--cta-current-color);\n\n\tpadding: 2px;\n\tdisplay: block;\n\twidth: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\tfont-weight: 700;\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tstroke: var(--cta-current-color);\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"cta/style-index.css","mappings":";;;AAAA;EACC;EACA;EAEA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EAEA;AADD;AAGC;EACC;AADF;AAIE;EACC;EACA;AAFH;AAIE;;EAEC;EACA;EACA;AAFH;AAMC;EACC;AAJF;AAMC;EACC;EACA;AAJF;AAMC;EACC;AAJF,C","sources":["webpack://cta/./src/cta/style.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\tmargin-top: 20px;\n\tcolor: var(--cta-current-color);\n\n\tpadding: 2px;\n\tdisplay: block;\n\twidth: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\tfont-weight: 700;\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tfill: transparent;\n\t\t\tstroke: var(--cta-current-color);\n\t\t\tstroke-width: 2;\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"sourceRoot":""}

View File

@ -22,7 +22,9 @@
}
svg path,
svg circle {
fill: transparent;
stroke: var(--cta-current-color);
stroke-width: 2;
}
}