Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing component cover size attribute

Browse Source
This commit is contained in:
Antoine M 2024-01-23 17:34:15 +01:00
parent 057d01f2ae
commit eea0ba7253
10 changed files with 62 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blocks/content-page-header/build/block.json
View File

@ -53,6 +53,10 @@
},
"anchor": {
"type": "string"
},
"coverSize": {
"type": "string",
"default": "medium"
}
}
}

2
blocks/content-page-header/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '707cbf4f5eee20e6f5ce');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '00a2ba43b23fe2f7862c');

29
blocks/content-page-header/build/index.js
View File

@ -45,7 +45,8 @@ function Edit({
hasCustomImage,
imageId,
imageAlt,
imageUrl
imageUrl,
coverSize
} = attributes;
const pageTitle = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
const {
@ -131,6 +132,11 @@ function Edit({
}
});
}
function onCoverSizeChange(coverSize) {
setAttributes({
coverSize
});
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
className: "homegrade-blocks-content-page-header__panel-cta",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Titre du bloc", "homegrade-blocks")
@ -163,7 +169,22 @@ function Edit({
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: "Supprimer",
onClick: removeImageAttributes
}))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControl, {
className: "homegrade-blocks-highlight__variant",
isBlock: true,
label: "Taille de la couverture",
onChange: onCoverSizeChange,
value: coverSize
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
label: "S",
value: "small"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
label: "M",
value: "medium"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
label: "L",
value: "large"
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
className: "homegrade-blocks-content-page-header__panel-cta",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Call to action", "homegrade-blocks")
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
@ -216,7 +237,7 @@ function Edit({
}), hasCustomImage && imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: imageUrl,
alt: imageAlt,
className: "block-content-page-header__page-icon"
className: `block-content-page-header__page-icon block-content-page-header__page-icon--${coverSize}`
}), hasCustomImage && !imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.MediaPlaceholder, {
accept: "image/*",
allowedTypes: ["image"],
@ -434,7 +455,7 @@ module.exports = window["wp"]["primitives"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"},"hasCustomImage":{"type":"boolean","default":false},"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"anchor":{"type":"string"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"},"hasCustomImage":{"type":"boolean","default":false},"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"anchor":{"type":"string"},"coverSize":{"type":"string","default":"medium"}}}');
/***/ })

2
blocks/content-page-header/build/index.js.map
View File

File diff suppressed because one or more lines are too long

5
blocks/content-page-header/build/render.php
View File

@ -7,6 +7,7 @@ $pageIllustration = get_field('page_illustration');
$hasCustomImage = $attributes['hasCustomImage'] ?? null;
$customImageUrl = $attributes['imageUrl'] ?? null;
$customImageAlt = $attributes['imageAlt'] ?? null;
$coverSize = $attributes['coverSize'] ?? null;
$customTitle = $attributes['blockCustomTitle'] ?? null;
$anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
@ -32,10 +33,10 @@ $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
</div>
<?php if ($pageIllustration && !$hasCustomImage) : ?>
<img class="block-content-page-header__page-icon" src="<?php echo $pageIllustration['url'] ?>" alt="">
<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : "" ?> " src="<?php echo $pageIllustration['url'] ?>" alt="">
<?php endif; ?>
<?php if ($hasCustomImage && $customImageUrl) : ?>
<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : "" ?>" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
<?php endif; ?>
</section>

11
blocks/content-page-header/build/style-index.css
View File

@ -1,11 +0,0 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/
.block-content-page-header p {
display: none;
}
.block-content-page-header .innerblocks p {
display: block;
}
/*# sourceMappingURL=style-index.css.map*/

1
blocks/content-page-header/build/style-index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAEC;EACC;AADF;AAGC;EACC;AADF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["// Styled by the theme\r\n.block-content-page-header {\r\n\tp {\r\n\t\tdisplay: none;\r\n\t}\r\n\t.innerblocks p {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

4
blocks/content-page-header/src/block.json
View File

@ -53,6 +53,10 @@
},
"anchor": {
"type": "string"
},
"coverSize": {
"type": "string",
"default": "medium"
}
}
}

21
blocks/content-page-header/src/edit.js
View File

@ -14,9 +14,11 @@ import {
import {
PanelBody,
TextControl,
ToggleControl,
Button,
Tip,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { trash } from "@wordpress/icons";
@ -33,6 +35,7 @@ export default function Edit({ attributes, setAttributes }) {
imageId,
imageAlt,
imageUrl,
coverSize,
} = attributes;
const pageTitle = useSelect((select) => {
@ -105,6 +108,9 @@ export default function Edit({ attributes, setAttributes }) {
},
});
}
function onCoverSizeChange(coverSize) {
setAttributes({ coverSize });
}
return (
<>
<InspectorControls>
@ -171,6 +177,17 @@ export default function Edit({ attributes, setAttributes }) {
</div>
</>
)}
<ToggleGroupControl
className="homegrade-blocks-highlight__variant"
isBlock
label="Taille de la couverture"
onChange={onCoverSizeChange}
value={coverSize}
>
<ToggleGroupControlOption label="S" value="small" />
<ToggleGroupControlOption label="M" value="medium" />
<ToggleGroupControlOption label="L" value="large" />
</ToggleGroupControl>
</PanelBody>
<PanelBody
@ -262,7 +279,7 @@ export default function Edit({ attributes, setAttributes }) {
<img
src={imageUrl}
alt={imageAlt}
className="block-content-page-header__page-icon"
className={`block-content-page-header__page-icon block-content-page-header__page-icon--${coverSize}`}
/>
)}
{hasCustomImage && !imageUrl && (

5
blocks/content-page-header/src/render.php
View File

@ -7,6 +7,7 @@ $pageIllustration = get_field('page_illustration');
$hasCustomImage = $attributes['hasCustomImage'] ?? null;
$customImageUrl = $attributes['imageUrl'] ?? null;
$customImageAlt = $attributes['imageAlt'] ?? null;
$coverSize = $attributes['coverSize'] ?? null;
$customTitle = $attributes['blockCustomTitle'] ?? null;
$anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
@ -32,10 +33,10 @@ $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
</div>
<?php if ($pageIllustration && !$hasCustomImage) : ?>
<img class="block-content-page-header__page-icon" src="<?php echo $pageIllustration['url'] ?>" alt="">
<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : "" ?> " src="<?php echo $pageIllustration['url'] ?>" alt="">
<?php endif; ?>
<?php if ($hasCustomImage && $customImageUrl) : ?>
<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : "" ?>" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
<?php endif; ?>
</section>