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

adding bloc height control in the input control

Browse Source
This commit is contained in:
Antoine M 2023-11-08 11:27:33 +01:00
parent 18138882f7
commit ecb50de76f
4 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/picture-banner/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f073dc5f029a71961853');
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '796584d0ce5be6b0516b');

33
blocks/picture-banner/build/index.js
View File

@ -72,6 +72,11 @@ function Edit({
coverAlt: image.alt
});
}
function onHeightFixedChange(heightFixed) {
setAttributes({
heightFixed
});
}
// Si l'upload s'est mal passé -> reset
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@ -82,8 +87,6 @@ function Edit({
});
}
}, []);
// Gestion de l'url temporaire
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if ((0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) {
@ -95,9 +98,23 @@ function Edit({
setBlobUrl();
}
}, [coverUrl]);
console.log(heightFixed);
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_2__.InspectorControls, null, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
title: "Position de l'image de couverture"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.FocalPointPicker, {
title: "Image de couverture"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControl, {
label: "Hauteur",
className: "homegrade-blocks-highlight__variant",
isBlock: true,
onChange: onHeightFixedChange,
value: heightFixed
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControlOption, {
label: "Fixe",
value: true
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControlOption, {
label: "Enti\xE8re",
value: false
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.FocalPointPicker, {
label: "position",
url: coverUrl,
dimensions: {
width: 400,
@ -113,16 +130,12 @@ function Edit({
icon: "fullscreen-exit-alt",
label: "Hauteur Fixe",
isActive: heightFixed,
onClick: () => setAttributes({
heightFixed: true
})
onClick: () => onHeightFixedChange(true)
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
icon: "editor-expand",
label: "Hauteur Pleine",
isActive: !heightFixed,
onClick: () => setAttributes({
heightFixed: false
})
onClick: () => onHeightFixedChange(false)
})), coverUrl && (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_2__.MediaReplaceFlow, {
group: "inline",
name: "Remplacer l'image",

2
blocks/picture-banner/build/index.js.map
View File

File diff suppressed because one or more lines are too long

27
blocks/picture-banner/src/edit.js
View File

@ -14,6 +14,9 @@ import {
withNotices,
FocalPointPicker,
PanelBody,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import "./editor.scss";
import { isBlobURL, revokeBlobURL } from "@wordpress/blob";
@ -58,6 +61,10 @@ function Edit({
});
}
function onHeightFixedChange(heightFixed) {
setAttributes({ heightFixed });
}
// Si l'upload s'est mal passé -> reset
useEffect(() => {
if (!coverId && isBlobURL(coverUrl)) {
@ -65,7 +72,6 @@ function Edit({
}
}, []);
// Gestion de l'url temporaire
useEffect(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if (isBlobURL(coverUrl)) {
@ -77,13 +83,24 @@ function Edit({
setBlobUrl();
}
}, [coverUrl]);
console.log(heightFixed);
return (
<>
<InspectorControls>
{coverUrl && (
<PanelBody title="Position de l'image de couverture">
<PanelBody title="Image de couverture">
<ToggleGroupControl
label="Hauteur"
className="homegrade-blocks-highlight__variant"
isBlock
onChange={onHeightFixedChange}
value={heightFixed}
>
<ToggleGroupControlOption label="Fixe" value={true} />
<ToggleGroupControlOption label="Entière" value={false} />
</ToggleGroupControl>
<FocalPointPicker
label="position"
url={coverUrl}
dimensions={{
width: 400,
@ -103,13 +120,13 @@ function Edit({
icon={"fullscreen-exit-alt"}
label="Hauteur Fixe"
isActive={heightFixed}
onClick={() => setAttributes({ heightFixed: true })}
onClick={() => onHeightFixedChange(true)}
/>
<ToolbarButton
icon={"editor-expand"}
label="Hauteur Pleine"
isActive={!heightFixed}
onClick={() => setAttributes({ heightFixed: false })}
onClick={() => onHeightFixedChange(false)}
/>
</ToolbarGroup>
{coverUrl && (