Skip to content

Fix image block alignment #8262

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
iRohitSingh wants to merge 2 commits into from
Closed

Fix image block alignment #8262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3323ec
Fix image block alignment
iRohitSingh May 21, 2026
c49fdd0
Merge branch 'seven' into image-alignment
avoinea May 22, 2026
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
56 changes: 56 additions & 0 deletions packages/blocks/Image/ImageBlock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* Image block */

.block.image {
clear: both;
}

.block.image.align.left img {
max-width: 50%;
margin-right: 1em !important;
margin-bottom: 1em;
float: left;

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iRohitSingh Why is this using float for alignment?

Can we instead use a modern layout approach (flexbox, grid, or display: flow-root

}

.block.image.align.right img {
max-width: 50%;
margin-bottom: 1em;
margin-left: 1em !important;
float: right;

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The

element with float requires clear: both on the parent.

Let's try using a more modern flex box / grid approach.

}

.block.image.align.center {
text-align: center;
}

.block.image.align.center img {
max-width: 100%;
margin-inline: auto;
}

.block.image.align.center img.medium {
max-width: 50%;
}

.block.image.align.center img.small {
max-width: 25%;
}

.block.image.align.left img.large,
.block.image.align.right img.large {
max-width: 50%;
}

.block.image.align.left img.medium,
.block.image.align.right img.medium {
max-width: 25%;
}

.block.image.align.left img.small,
.block.image.align.right img.small {
max-width: 15%;
}

.block.image img.full-width {
width: 100%;
max-width: 100%;
}
8 changes: 5 additions & 3 deletions packages/blocks/Image/ImageBlockEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import type {
Content,
RelatedItem,
} from '@plone/types';

import Image from '@plone/layout/components/Image/Image';
import clsx from 'clsx';
import config from '@plone/registry';
import './ImageBlock.css';

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aren't we supposed to use tailwind in Seven?


function flattenToAppUrl(url: string) {
const apiPath = config.settings.apiPath || '';
Expand Down Expand Up @@ -66,11 +68,11 @@ const ImageBlockEdit = (props: BlockEditProps) => {
: undefined;

return (
<div
<figure

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should re-use ImageView component in the Edit component

className={clsx(
'image align block',
{
center: !Boolean(data.align),
center: !data.align,
},
data.align,
)}
Expand Down Expand Up @@ -105,7 +107,7 @@ const ImageBlockEdit = (props: BlockEditProps) => {
objectBrowserPickerType="image"
/>
) : null}
</div>
</figure>
);
};

Expand Down
20 changes: 19 additions & 1 deletion packages/blocks/Image/ImageBlockView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import type { BlockViewProps, ContainedItem } from '@plone/types';
import Image from '@plone/layout/components/Image/Image';
import clsx from 'clsx';

import './ImageBlock.css';

const ImageBlockView = (props: BlockViewProps) => {
const { data } = props;

if (!data.url) return null;

const item = {
Expand All @@ -12,8 +16,22 @@ const ImageBlockView = (props: BlockViewProps) => {
} as ContainedItem;

return (
<figure>
<figure
className={clsx(
'image align block',
{
center: !data.align,
},
data.align,
)}
>
<Image
className={clsx({
'full-width': data.align === 'full',

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add full to the alignment actions

large: data.size === 'l',
medium: data.size === 'm',
small: data.size === 's',
})}

@avoinea avoinea May 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also have

loading="lazy"
responsive={true}

item={item}
alt={(data.alt as string) || ''}
imageField={data.image_field as string}
Expand Down
Loading