Skip to content

[28] Fixes container width and height values causing layout issues when changing theme or updating settings.layout.contentSize value in theme.json #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
PaulREnglish wants to merge 7 commits into from
Closed

[28] Fixes container width and height values causing layout issues when changing theme or updating settings.layout.contentSize value in theme.json #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3daf7b4
fix: assign height and width a default value of null
PaulREnglish Oct 7, 2024
8c657d8
fix(image-comparison): move block props into own function
PaulREnglish Oct 7, 2024
d7a2b22
Revert "fix(image-comparison): move block props into own function"
PaulREnglish Oct 7, 2024
97c4c27
fix(image comparison): create function for getting container size
PaulREnglish Oct 8, 2024
6edfadc
docs: fix invalid getContainerSize typehinting in docblock
PaulREnglish Oct 8, 2024
e304e01
docs: correct return param type in getContainerSize docblock
PaulREnglish Oct 8, 2024
71f341a
docs: improve getContainerSize docblock description
PaulREnglish Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions inc/blocks/image-comparison/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@
},
"containerHeight": {
"type": "string",
"default": "500px"
"default": null
},
"containerWidth": {
"type": "string",
"default": "500px"
"default": null
}
},
"supports": {
Expand Down
45 changes: 31 additions & 14 deletions src/blocks/image-comparison/components/Edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { ResizableBox } from '@wordpress/components';
import { useInnerBlocksProps, useBlockProps, useSettings } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -46,10 +45,39 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
customCaptionTextColour,
captionBackgroundColour,
customCaptionBackgroundColour,
containerHeight,
containerWidth,
} = attributes;

/**
* Get the container's size. If this has not been set by
* the user then we overwrite the default size of the block
* with the theme's defined contentSize, if it exists.
*
* @returns {
* width: string
* height: string
* } The size containing the height and width of the block's container.
*/
const getContainerSize = () => {
let containerHeight = '500px';
if (attributes.containerHeight) {
containerHeight = attributes.containerHeight;
}

let containerWidth = '500px';
if (attributes.containerWidth) {
containerWidth = attributes.containerWidth;
} else if (contentWidth) {
containerWidth = contentWidth;
}

return {
containerHeight,
containerWidth,
};
};

const { containerHeight, containerWidth } = getContainerSize();

const innerBlockSettings = {
template: [['bigbite/image-comparison-item'], ['bigbite/image-comparison-item']],
templateLock: 'inserter',
Expand All @@ -61,17 +89,6 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
*/
let shouldDisplayResize = false;

/**
* Overwrite the default size of the block with the theme's
* defined contentSize, if it exists. This should only be
* applied if no images have been added to the block.
*/
useEffect(() => {
if (!shouldDisplayResize) {
setAttributes({ containerWidth: contentWidth });
}
}, [contentWidth]);

/**
* Retrieve the inner blocks
*/
Expand Down