Skip to content

Add form_attrs support to all StreamField blocks #13211

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

Jump to bottom
Merged
merged 2 commits into from
Jul 12, 2025
Merged

Add form_attrs support to all StreamField blocks #13211

merged 2 commits into from
Jul 12, 2025

Conversation

laymonage
Copy link
Member

Fixes #13203.

An example to test:

diff --git a/bakerydemo/base/blocks.py b/bakerydemo/base/blocks.py
index 263d22f..ef32e30 100644
--- a/bakerydemo/base/blocks.py
+++ b/bakerydemo/base/blocks.py
@@ -124,7 +124,7 @@ class BaseStreamBlock(StreamBlock):
         ),
         description="A rich text paragraph",
     )
-    image_block = CaptionedImageBlock()
+    image_block = CaptionedImageBlock(form_attrs={"data-controller": "w-action"})
     block_quote = BlockQuote()
     embed_block = EmbedBlock(
         help_text="Insert an embed URL e.g https://www.youtube.com/watch?v=SGJFWirQ3ks",
image

@laymonage laymonage requested a review from thibaudcolas July 4, 2025 18:21
@laymonage laymonage force-pushed the feature/block-attrs branch from 6ed096a to 68310e3 Compare July 7, 2025 08:15
@lb- lb- added status:Needs Review component:Streamfield javascript Pull requests that update Javascript code labels Jul 7, 2025
@laymonage laymonage moved this to 🔍 Reviewing in Wagtail 7.1* release planning Jul 8, 2025
laymonage
laymonage commented Jul 8, 2025
View reviewed changes
client/src/utils/attrs.ts
Comment on lines +10 to +12
Object.entries(attrs).forEach(([key, value]) => {
element.setAttribute(key, `${value}`);
});
Copy link
Member Author

Choose a reason for hiding this comment

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

Do we want to add support for removing attributes, e.g. passing None/null as the value will remove it?

Copy link
Member

Choose a reason for hiding this comment

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

Not sure!

laymonage
laymonage commented Jul 8, 2025
View reviewed changes
wagtail/blocks/base.py
@@ -62,6 +62,7 @@ class Meta:
label = None
icon = "placeholder"
classname = None
form_attrs = None
Copy link
Member Author

Choose a reason for hiding this comment

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

I'm calling the Python attribute form_attrs instead of attrs because despite the line above saying classname, we decided to standardise this to form_classname rather than classname (see #6192 and #6470). The classname attribute is a remnant of the old implementation that we keep for backwards-compatibility (but we haven't put it through a deprecation process so it still exists until now).

I suppose this makes sense seeing that the Python code is used for both the admin and the site's frontend, so we need to be explicit that this is only for the page editor form.

Meanwhile, it will be serialised for Telepath as attrs, so the JS will do blockDef.meta.attrs, similar to blockDef.meta.classname. I think this is OK as in the JS context we're strictly dealing with Wagtail's page editor and not the site's frontend.

@thibaudcolas thibaudcolas force-pushed the feature/block-attrs branch from 68310e3 to 24f6eaf Compare July 12, 2025 14:27
thibaudcolas
thibaudcolas approved these changes Jul 12, 2025
View reviewed changes
Copy link
Member

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

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

One small issue with jQuery, otherwise all good!

client/src/utils/attrs.ts
Comment on lines +10 to +12
Object.entries(attrs).forEach(([key, value]) => {
element.setAttribute(key, `${value}`);
});
Copy link
Member

Choose a reason for hiding this comment

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

Not sure!

client/src/components/StreamField/blocks/StreamBlock.js Outdated
@@ -230,6 +231,8 @@ export class StreamBlock extends BaseSequenceBlock {
}

this.initDragNDrop();

setAttrs(this.container, this.blockDef.meta.attrs || {});
Copy link
Member

Choose a reason for hiding this comment

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

I was wondering why TypeScript didn’t raise alarm balls about this. Turns out we’re inside a .js file!

@thibaudcolas thibaudcolas force-pushed the feature/block-attrs branch from 24f6eaf to f5e607c Compare July 12, 2025 15:03
@thibaudcolas thibaudcolas merged commit 515ec46 into wagtail:main Jul 12, 2025
12 of 15 checks passed
@github-project-automation github-project-automation bot moved this from 🔍 Reviewing to ✅ Done in Wagtail 7.1* release planning Jul 12, 2025
@laymonage laymonage mentioned this pull request Jul 14, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thibaudcolas thibaudcolas thibaudcolas approved these changes

Assignees

@thibaudcolas thibaudcolas

Labels
component:Streamfield javascript Pull requests that update Javascript code
Projects
Wagtail 7.1* release planning
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support for Stimulus controllers in StreamField blocks
3 participants
@laymonage @thibaudcolas @lb-