[KMchaudhary]

Summary

While testing GoDAM blocks' compatibility with core WordPress container blocks (Group/Row/Stack/Grid, Columns, Cover, Media & Text, Details), two layout issues surfaced. This PR fixes both, in the front-end and the block editor.

1. Blocks collapsed inside flex containers (Row/Stack)

Several block roots declared no width, so inside a core Group using a Row or Stack (flex) layout they became flex items with the default flex: 0 1 auto and collapsed to their min-content width:

• Document (PDF) — tall, narrow, empty box (fixed pixel height, no width).
• Audio — the player shrank to ~50px.
• Video Thumbnail — collapsed likewise (its intended home is a grid/query-loop cell that gives it width).

Fix: width: 100% on each affected block root, so flex parents behave like the flow/grid/columns layouts.

Unaffected: Image (intrinsic <img>), Video Duration (inline <time>). Video (min-width: 0) and Video Gallery (width: 100%) already handle flex.

2. Document card view responded to the viewport, not its container

The card view stacked only below a viewport breakpoint via a media query, so a card in a narrow column/grid cell on a wide screen kept the side-by-side layout and truncated its title.

Fix: make the card wrapper a size-query container (container-type: inline-size) and switch the stacking rule to @container (400px container width). The editor renders the card from its own markup (.godam-pdf-preview--card + editor.scss), so the same treatment is mirrored there. Full title shown once stacked, on both sides.

Before / after

Audio block inside a core Group (Row / Stack) — real develop vs this branch, captured on a local site. Before, the player collapses to a narrow sliver; after, it fills the container.

Document (PDF) — default embed inside a Group → Row. Before, the embed collapses to a narrow box; after, it fills the container.

Document (PDF) — card view in a Columns layout (two narrow cards, wide viewport). Before, the cards stay side-by-side and truncate their titles; after, they stack with the cover on top and the full title. The full-width card (Cover section) stays side-by-side in both.

Audio is a real develop-vs-branch capture. The Document pages only exist on a remote site running the current release, so their before is that live build and their after is this branch's compiled CSS applied to the same pages — visually identical to the shipped result.

Changes

• godam-pdf/style.scss, godam-pdf/editor.scss — flex width fix + card container queries (front-end & editor).
• godam-audio/style.scss — flex width fix.
• godam-video-thumbnail/style.scss — flex width fix.

Test plan

Place the blocks (and the Document card view) inside Group (flow/Row/Stack/Grid), Columns, Cover, Media & Text, Details — front-end and editor.

Context	Before	After
PDF embed in Row/Stack	tall & empty (~154px)	fills container width
Audio in Row/Stack	~50px sliver	fills (Row shares w/ text, Stack full)
Video Thumbnail in Row/Stack	collapsed	fills container width
Card in narrow column/grid	side-by-side, truncated title	stacks, full title

Verified on the front-end and in the block editor canvas.

Notes

• Source only; built assets (assets/build/) are gitignored and produced by CI (npm run build:blocks). Passes npm run lint:css.
• CSS container queries are supported in all current evergreen browsers (2023+). A viewport media-query fallback can be added if older browsers must be supported.
• Before/after images are hosted on the throwaway pr-2234-assets branch (kept out of this PR's diff); it can be deleted after review.

🤖 Generated with Claude Code

[github-actions]

🔍 WordPress Plugin Check Report

⚠️ Status: Passed with warnings

📊 Report

🎯 Total Issues	❌ Errors	⚠️ Warnings
13	0	13

---

⚠️ Warnings (13)

📁 readme.txt (2 warnings)

📍 Line	🔖 Check	💬 Message
0	mismatched_plugin_name	Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM".
0	trademarked_term	The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name.

📁 assets/build/css/main.css (1 warning)

📍 Line	🔖 Check	💬 Message
0	EnqueuedStylesScope	This style is being loaded in all contexts.

📁 assets/src/libs/analytics.min.js (5 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/2026/10/21/hello-world/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/sample-page/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/demo-attachment-post/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.

📁 assets/build/js/main.min.js (5 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/2026/10/21/hello-world/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/sample-page/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/demo-attachment-post/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.

---

🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check

[subodhr258]

Tested c01a0de against develop in headless Chrome. I compiled the three blocks' SCSS from both commits and used WordPress 7.1.3's own block-library and layout CSS, with root padding on (50 px a side, like Twenty Twenty-Five) and a 1440 px window. This was not a live site: my local WP was down, so the markup copies each block's render.php structure with a placeholder player and cover.

Works as described

Claim	develop	This PR
PDF embed in a Row / Stack	2 px wide	590 px / 645 px (fills)
Audio in a Row / Stack	87 px	590 px / 645 px
Video Thumbnail in a Stack	640 px (my 640 px test image)	645 px
Card in a 300 px / 345 px column	side by side, title cut off	stacked, full title
Card at full content width (645 px)	side by side	side by side, unchanged
Editor gets the same card rule	n/a	compiled editor.scss has the same 400 px @container rule on .godam-pdf-preview--card (read, not run in the editor)

One issue, inline: the root width: 100% also applies outside Row/Stack. On all three blocks, Align: Full width now stops 100 px short of the right edge. A side margin set in the editor pushes the PDF and Audio blocks past their column, and a left-aligned card no longer floats. Scoping the width to flex parents, and keeping floats out of the card's query container, fixes all three. It keeps every Row/Stack and card result above. I tested that version; the code is in the comment on godam-pdf/style.scss.

Side note: Align left/right on Audio and the PDF embed already collapses on develop (87 px and 2 px wide). This PR makes them full width, and the scoped version puts them back to develop's state. That fits better in its own issue than in this PR.

Not tested: the block editor, a real theme, npm run lint:css, and browsers without container queries. No class, hook or route is renamed, so the Woo add-on and other repos are not affected.

[subodhr258]

This width: 100% also applies outside flex parents (Row/Stack groups). There it breaks three settings that work on develop and that block.json offers:

1. Align: Full width. WordPress stretches .alignfull to the screen edges with negative margins equal to the theme's side padding (.has-global-padding > .alignfull, used by Twenty Twenty-Five). With width: 100% the block keeps the padded width, so it starts at the left edge and stops short on the right by twice the padding.
2. Side margins from the Dimensions panel. In a column or any other flow container, width: 100% plus margin-left is wider than the container, so the block sticks out on the right.
3. Align left/right on the card view. On develop the card floats with text beside it. Here it spans the whole content area.

Measured with WP 7.1.3's layout CSS and this PR's compiled SCSS, 1440 px window, 50 px side padding:

Case	develop	This PR
PDF / Audio / Video Thumbnail, Align: Full width	0 to 1440 px	0 to 1340 px (100 px gap on the right)
PDF / Audio in a column ending at 720 px, margin-left 40 px	438 to 720 px	438 to 760 px (40 px past the column)
PDF card, Align: Left, then a paragraph	262 px float, text beside it	1340 px, text below

Suggestion: set the width only in flex parents, where the bug is. Flow, constrained and grid parents already stretch the block. Without a root width, a floated block is sized by its content, and container-type: inline-size makes that size zero. So the card's query container also has to skip floats. With the scoped width alone, the left-aligned card measured 0 px.

// Drop `width: 100%` from the root rule, then add after the `.wp-block-godam-pdf { }` block:
:where(.is-layout-flex) > .wp-block-godam-pdf {
	width: 100%;
}

// Inside `.wp-block-godam-pdf`, in place of the two container lines on `.godam-pdf-card-wrapper`:
&:not(.alignleft):not(.alignright) .godam-pdf-card-wrapper {
	container-type: inline-size;
	container-name: godam-pdf-card;
}

With this version, all three cases above match develop and the PR's fixes stay: Row 590 px, Stack 645 px, the card stacks in 300 and 345 px columns, and it stays side by side at 645 px. editor.scss needs the same float guard on .godam-pdf-preview--card (not tested in the editor).

[subodhr258]

Same issue as the comment on godam-pdf/style.scss. With Align: Full width this block now spans 0 to 1340 px instead of 0 to 1440 px (1440 px window, 50 px side padding). With a 40 px left margin in a column it ends 40 px past the column (760 px instead of 720 px). Scoping the width keeps the Row/Stack fix (590 / 645 px) and puts both cases back to develop:

:where(.is-layout-flex) > .wp-block-godam-audio {
	width: 100%;
}

[subodhr258]

Same issue as the comment on godam-pdf/style.scss. Full width is in this block's align list, and with it the thumbnail now spans 0 to 1340 px instead of 0 to 1440 px (1440 px window, 50 px side padding). Scoping the width keeps the Stack result (645 px) and puts full width back to develop:

:where(.is-layout-flex) > .wp-block-godam-video-thumbnail {
	width: 100%;
}