Skip to content

Banner block schema and tailwind conflict fix #24

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

Open
Tishasoumya-02 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Banner block schema and tailwind conflict fix #24

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45e677a
fix the schema
Tishasoumya-02 Jul 29, 2026
4ac1ae5
fix tailwind container conflict
Tishasoumya-02 Jul 29, 2026
fda4339
changelog
Tishasoumya-02 Jul 29, 2026
fbd7e95
fix cypress test
Tishasoumya-02 Jul 29, 2026
606cf6f
remove the hardcoded values
Tishasoumya-02 Aug 10, 2026
53f7c45
fix
Tishasoumya-02 Aug 11, 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
1 change: 1 addition & 0 deletions packages/volto-banner-block/news/+fixBlockWidthHighlight.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fix the block width highlight bug @Tishasoumya-02
1 change: 1 addition & 0 deletions packages/volto-banner-block/news/+fixTailwindContainerConflict.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Neutralize the Tailwind `container` utility max-width caps on the banner wrapper, so the banner follows its block width. @Tishasoumya-02
7 changes: 4 additions & 3 deletions packages/volto-banner-block/src/components/schema.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { defineMessages } from 'react-intl';
import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
import config from '@plone/volto/registry';

const messages = defineMessages({
Banner: {
Expand Down Expand Up @@ -88,8 +87,10 @@ export const BannerBlockSchema = (props) => {
widget: 'blockWidth',
title: intl.formatMessage(messages.BlockWidth),
default: 'layout',
filterActions: ['layout', 'full'],
actions: config.blocks.widths,
actions: [

@iFlameing iFlameing Aug 7, 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.

@Tishasoumya-02 Aren’t we going backward from a configurable approach to a hardcoded one?

@Tishasoumya-02 Tishasoumya-02 Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It was a quick fix at that moment, I created a PR in VLT kitconcept/volto-light-theme#910, applying the same fix as it is for separator and button block blocks.tsx and ButtonStylingSchema

@Tishasoumya-02 Tishasoumya-02 Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

We can close this PR

@iFlameing iFlameing Aug 11, 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.

@Tishasoumya-02 no because standalone banner block will be broken. The correct fix is only one line change.

actions: config.blocks.widths.map((width) => width.name)

missing map which we fix in Volto and left here. please amend this and then we will merge this. I will check the VLT pr.

@Tishasoumya-02 Tishasoumya-02 Aug 11, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This still breaks the acceptance test , screenshot below
Screenshot 2026-08-11 at 2 12 20 PM

@iFlameing iFlameing Aug 12, 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.

yes, i check the button block there we don't even pass this will talk with @sneridagh regarding this https://github.com/kitconcept/volto-button-block/blob/main/packages/volto-button-block/src/components/schema.js#L86

{ name: 'layout', label: 'Layout' },
{ name: 'full', label: 'Full' },
],
};

return schema;
Expand Down
5 changes: 5 additions & 0 deletions packages/volto-banner-block/src/theme/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
.banner.container {
// Tailwind's generic `container` utility caps max-width per breakpoint.
// The banner width is driven by `--block-width`, so neutralize it.
// Remove when CSS layers are resolved later
display: grid;
width: 100%;
max-width: none;
grid-template-columns: 1fr;
grid-template-rows: 300px;

Expand Down
Loading