Skip to content

Fix GoDAM 2.1 QA: non-PDF documents, audio overflow, stray media icon, Image rename - #2053

Merged
KMchaudhary merged 6 commits into
developfrom
fix/godam-2.1-qa-items
Jul 30, 2026
Merged

Fix GoDAM 2.1 QA: non-PDF documents, audio overflow, stray media icon, Image rename#2053
KMchaudhary merged 6 commits into
developfrom
fix/godam-2.1-qa-items

Conversation

@subodhr258

@subodhr258 subodhr258 commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Summary

Fixes five items from the GoDAM 2.1 QA tab plus one naming request from Slack. All were reproduced locally on Elementor 4.2.1 + WPBakery (js_composer) 9.0-beta.3 + WooCommerce before any code was written.

QA Issue Status
3, 6 Document looks blank in editor and on frontend Fixed
5 WPBakery page opens a download popup on refresh Fixed (same root cause as 3/6)
2 Audio block overlap in 3-column layout Fixed (was still reproducible, not already done)
- Audio play button shape and glyph alignment Fixed (found while verifying QA 2, pre-existing)
7 Thumbnail displayed with separate icons Fixed
Slack "GoDAM Image" should read "Image" Done (core, Elementor, WPBakery)

QA 3, 5, 6: non-PDF documents

render.php emitted <object type="application/pdf"> pointing at whichever file was selected. Given a non-PDF the browser receives a type it cannot display, and the outcome splits by browser setting:

Browser state Result Reported as
PDF viewer enabled object collapses to 0px wide, inner content empty, and the <object> fallback is suppressed, so nothing at all is painted QA 3, 6 "looking blank"
PDF viewer disabled ("Download PDFs") the file is handed to the download manager QA 5 "download popup"

Evidence for QA 5: loading the page, with no click at all, wrote a file into ~/Downloads that was byte-identical to the test .docx (945 bytes, same zip entries, same body text).

PDF is the only format this block supports, so godam_is_supported_document() now gates output. The attachment's stored MIME type is authoritative, with the URL extension as a fallback for GoDAM tab media and URL-only documents.

The Gutenberg block, the [godam_document] shortcode (WPBakery) and the Elementor widget all render through the same render.php, so one guard covers all three front ends. Because rendering nothing would otherwise leave an author staring at an empty element, each editor now shows an "unsupported format" notice instead.

Also closed a hole in the block's own selection guard: it read if ( mime && mime !== 'application/pdf' ), so a missing MIME type passed straight through. It now tests for a positive PDF match and falls back to the extension.

QA 2: audio overlap in 3 columns

.godam-audio-player is a nowrap flex row with a 14px gap. __scrubber had flex: 1 1 auto but no min-width: 0, and input[type=range] carries a ~129px intrinsic min-content width, so the track refused to shrink:

56px play + 129px scrubber + 28px time + 28px gaps = 241px  in a 198px card body

The 43px excess pushed the non-shrinking __time label outside the card and 8.1px past the Elementor column. It only shows in 3-column layouts because wider columns have slack. Adding min-width: 0 shrinks the track to 86px and the row fits; the same file already does exactly this on __body and __play.

Checked on all three builders, since the rule lives in a shared partial rather than in
anything builder-specific. Measured at 1470px, "duration label past the card edge":

Surface develop this PR
Elementor 3-column section +18.1px -25px
Gutenberg core/columns 3-column +14.1px -25px
WPBakery vc_row 3-column +18.1px -25px

All three go from overflowing to fully contained, and the play button goes 56px to 24px
with the glyph centred on each.

Play button shape and alignment (found while verifying QA 2)

Not in the QA tab, spotted while checking the audio row. The play control is a
<button type="button">, and theme button resets commonly target [type="button"].
That is an attribute selector, so it carries the same (0,1,0) specificity as our
.godam-audio-player__play class, and the theme stylesheet loads after ours. On equal
specificity source order decides, so the theme won and replaced our
display/padding/border/width.

On Hello Elementor that rendered a 56x24 button with a 1px #cc3366 border and
8px 16px padding instead of a bare 24x24 icon. Worse, display:inline-block
blockifies to block on a flex item, so align-items/justify-content went inert and
the 22px glyph dropped onto the text baseline, overflowing the box by 7px. That is the
misalignment visible on both the front end and the Elementor editor preview.

Qualifying the selector with the element tag takes it to (0,1,1) so our declarations
hold, matching how .vjs-button.godam-share-button and .button.godam-button already
deal with third-party button styling elsewhere in this codebase.

Confirmed pre-existing on develop: the &__play block is byte-identical on both
branches, so the scrubber change did not cause it.

Narrow cards, now fixed. The card already had a narrow layout at
@media (max-width: 480px) (cover shrinks to 64px, __body becomes
display: contents, player gets its own full-width row) but it keyed off the viewport,
so it never fired where it was needed. In the Gutenberg block editor canvas a 3-column
card is 185px wide; the non-shrinking 96px cover left the body 23px, so the title wrapped
one letter per line and the duration sat 36.5px outside the card, all at a 1470px
viewport. The card is now a query container and the same layout is applied from a
container query. Editor canvas after: cover 64px, title 59px, player on its own row,
track 51px instead of 0, duration 25px inside the card. This also removes the earlier
note about the ~780px case, where a 236px card left the track at 0px and now gives it
106px.

QA 7: stray icon over the thumbnail

Elementor absolutely centres .eicon-video-camera over the media area as its empty-state affordance and never hides it, because its own control only ever sets src on the preview <video>. Our control additionally sets poster from the GoDAM thumbnail, which left that icon stranded on top of a real image (measured 21x21, visible, dead centre over the 258x145 poster, with e-media-empty absent). The icon is now hidden while a poster is showing and kept for the empty state.

Worth noting for reviewers: the markup in class-godam-media.php is byte-identical to Elementor's native control and we add no CSS of our own, so this is only a bug for us because we are the ones adding a poster.

Rename

"GoDAM Image" to "Image" in core, Elementor and WPBakery, matching Video / Audio / Document / Video Gallery / Shoppable Video, which already drop the prefix inside the GoDAM category.

One behaviour change to be aware of: typing "godam" into WPBakery's Add Element search no longer matches this element, because no GoDAM element now carries "GoDAM" in its name. The GoDAM category tab remains the discovery path and lists all six correctly. Say the word if you would rather keep it searchable.

Testing

tests/php/DocumentSupportTest.php covers the new helper, which is the single gate protecting the embed: MIME beating a misleading .pdf URL, other media types, the URL fallback, query strings and fragments, a deleted attachment falling through to its URL, malformed input, and "pdf" appearing outside the extension.

OK (31 tests, 71 assertions)

Confirmed the tests can fail: mutating the helper to always return true fails all 7.

tests/bootstrap.php gains a wp_parse_url stub, WP time constants, and a require of custom-functions.php.

Manual verification steps

Needs both Elementor and WPBakery active, plus a non-PDF (for example a .docx) and a PDF in the media library.

  1. Frontend, non-PDF: put the .docx in a Document block, a [godam_document] shortcode and an Elementor Document widget. Each should render nothing at all, and no download should start on load or refresh. Check with the browser's PDF viewer both enabled and disabled (chrome://settings/content/pdfDocuments), since the old bug presented differently in each.
  2. Frontend, PDF (regression): same three surfaces with the PDF still embed and display normally.
  3. Gutenberg editor: the .docx block shows "Unsupported file format" with the file name instead of a blank embed. Selecting a non-PDF from the library shows the snackbar warning and does not attach.
  4. Elementor editor: the Document widget shows the "Unsupported file format" panel. A valid PDF is unaffected.
  5. WPBakery frontend editor: the Document element shows the unsupported notice. The backend editor still shows its normal parameter summary.
  6. QA 2: a 3-column layout with a GoDAM Audio in each column, in all three builders (Elementor section, Gutenberg core/columns, WPBakery vc_row). The duration label stays inside every card at desktop, tablet and mobile widths, and in the editor canvases.
  7. Play button: same audio widgets. The play control is a bare 24x24 icon with no border box, and the glyph is centred. Check the front end and the Elementor editor preview, at desktop and narrow widths.
  8. QA 7: select a transcoded video with a thumbnail in an Elementor GoDAM Video widget. The Video File preview shows the thumbnail with no icon on top. Clearing the media brings the camera icon back.
  9. Rename: /godam in the Gutenberg inserter, the Elementor widget panel, and WPBakery's Add Element > GoDAM tab all read "Image".

Automation impact

New hooks for E2E:

  • godam-pdf-content-unsupported (Gutenberg canvas notice)
  • godam-document-elementor-unsupported (Elementor editor notice)
  • godam-document-unsupported (WPBakery front-end editor notice)

No existing data-test-id was renamed or removed. Existing document selectors are unchanged for PDFs; suites that assert on a rendered non-PDF document will now correctly find no output.

Screenshots

QA 2 - Audio Block Overlapping on 3 column format

Before
Screenshot 2026-07-29 at 7 44 00 PM

Screenshot 2026-07-29 at 8 25 56 PM Screenshot 2026-07-29 at 7 55 40 PM

After
image

Screenshot 2026-07-29 at 8 17 47 PM Screenshot 2026-07-29 at 7 55 01 PM

QA 3, 5, 6 - Document looks blank in editor as well as frontend, opens download modal

Before

Screenshot 2026-07-29 at 8 43 17 PM Screenshot 2026-07-29 at 8 44 29 PM Screenshot 2026-07-29 at 8 47 38 PM

After
Screenshot 2026-07-29 at 8 50 55 PM
Screenshot 2026-07-29 at 8 50 24 PM
Screenshot 2026-07-29 at 8 49 22 PM

Frontend After:

Screenshot 2026-07-29 at 8 54 55 PM Screenshot 2026-07-29 at 8 55 08 PM Screenshot 2026-07-29 at 8 55 24 PM

Updated GoDAM Image to Image block

Screenshot 2026-07-29 at 9 02 35 PM Screenshot 2026-07-29 at 9 02 02 PM Screenshot 2026-07-29 at 9 01 44 PM

Document block (QA 3, 5, 6)
render.php emitted `<object type="application/pdf">` for whatever file was
selected. Given a non-PDF the browser gets a type it cannot display, so it
either paints an empty box, suppressing the `<object>` fallback and leaving
nothing at all on screen, or hands the file to the download manager, which
starts a download on every page load. Reproduced both: a .docx rendered a
0px-wide object with no fallback, and merely loading the page wrote the file
into ~/Downloads without any click.

PDF is the only format the block supports, so add godam_is_supported_document()
and gate output on it. The shared render.php backs the block, the
[godam_document] shortcode and the Elementor widget, so one guard covers all
three front ends; each editor now shows an "unsupported format" notice instead
of a silently empty element. Also close a hole in the block's selection guard,
where a missing MIME type passed straight through.

Audio player (QA 2)
.godam-audio-player is a nowrap flex row, and the scrubber had flex:1 1 auto
without min-width:0. input[type=range] carries a ~129px intrinsic min-content
width, so the track refused to shrink. In a narrow card, such as a 3-column
layout, play + track + time then needed 241px in a 198px row and the
non-shrinking time label was pushed outside the card and the column. Matches
how __body and __play in the same file already handle it.

Elementor media control (QA 7)
Elementor centres .eicon-video-camera over the media area as its empty-state
affordance and never hides it, because its own control only ever sets `src`.
Ours also sets a poster, which left that icon stranded on top of the thumbnail.
Hide it while a poster is showing; keep it for the empty state.

Rename
"GoDAM Image" to "Image" in core, Elementor and WPBakery, matching the Video,
Audio, Document and Video Gallery labels already in the GoDAM category.

Tests
godam_is_supported_document() is the single gate protecting the embed, so cover
its edge cases: MIME beats a misleading .pdf URL, query strings and fragments,
a deleted attachment falling through to the URL, and "pdf" appearing outside the
extension.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Addresses GoDAM 2.1 QA issues around Document embedding (non-PDFs rendering blank / triggering downloads), Elementor editor UX (unsupported document notice, stray video icon overlay), audio layout overflow in 3-column layouts, and renames “GoDAM Image” → “Image” across builders.

Changes:

  • Added godam_is_supported_document() gate to prevent non-PDF <object type="application/pdf"> rendering, plus editor-only unsupported notices (Gutenberg/Elementor/WPBakery).
  • Fixed Elementor video control preview icon overlay when a poster/thumbnail is present; fixed audio scrubber overflow via min-width: 0.
  • Renamed Image element/widget/block titles to “Image” and added PHPUnit coverage + test bootstrap stubs needed for the helper.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tests/php/DocumentSupportTest.php Adds unit tests covering MIME/URL-extension behavior for supported document detection.
tests/bootstrap.php Adds WP time constants + wp_parse_url stub; loads helper file for tests.
inc/helpers/custom-functions.php Introduces godam_is_supported_document() helper used as the central gate for Document rendering.
inc/classes/shortcodes/class-godam-document.php Adds WPBakery inline-editor unsupported notice for non-PDF documents.
inc/classes/elementor-widgets/class-godam-document.php Adds Elementor editor/preview unsupported rendering state for non-PDF documents.
assets/src/blocks/godam-pdf/render.php Skips front-end rendering for unsupported documents via the new helper.
assets/src/blocks/godam-pdf/edit.js Tightens client-side PDF validation and adds editor-canvas unsupported notice.
assets/src/blocks/godam-pdf/editor.scss Styles Gutenberg unsupported-format notice.
assets/src/blocks/godam-pdf/style.scss Styles WPBakery inline-editor unsupported-format notice.
assets/src/css/godam-elementor-preview.scss Adds styling for Elementor “unsupported document” placeholder.
assets/src/css/_godam-audio-card.scss Fixes audio control overflow by allowing scrubber to shrink.
assets/src/js/elementor/controls/godam-media.js Hides Elementor’s camera icon overlay when a poster thumbnail is shown.
inc/classes/wpbakery-elements/class-wpb-godam-image.php Renames WPBakery element display name to “Image”.
inc/classes/elementor-widgets/class-godam-image.php Renames Elementor widget title to “Image”.
assets/src/blocks/godam-image/block.json Renames Gutenberg block title to “Image”.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread inc/helpers/custom-functions.php Outdated
Comment thread assets/src/blocks/godam-pdf/edit.js Outdated
Comment thread assets/src/js/elementor/controls/godam-media.js Outdated
The play control is a <button type="button">, and theme button resets commonly
target `[type="button"]`. That is an attribute selector, so it carries the same
(0,1,0) specificity as our `.godam-audio-player__play` class, and the theme
stylesheet loads after ours. On equal specificity source order decides, so the
theme won: our display/padding/border/width were all replaced.

The visible result on Hello Elementor was a 56x24 button with a 1px #cc3366
border and 8px 16px padding instead of a bare 24x24 icon, and because
`display:inline-block` blockifies to `block` on a flex item our
align-items/justify-content went inert, dropping the 22px glyph onto the text
baseline where it overflowed the box by 7px. Reproduced on the front end and in
the Elementor editor preview; pre-existing on develop, not introduced by the
scrubber change.

Qualifying the selector with the element tag takes it to (0,1,1) so the
declarations hold, matching how .vjs-button.godam-share-button and
.button.godam-button already handle third-party button styling. Also pin the
glyph to the box centre rather than an inherited line-height.

Verified 24x24 with the glyph centred to the sub-pixel at 1470px, 768px and
375px, on the front end and in the Elementor editor.

Also documents a known limit on the scrubber: below roughly 780px a 3-column
card leaves the body around 74px, which cannot seat play + track + duration at
any track width, so the track shrinks to zero. Contained but not visible;
giving the body more room at tablet widths is a design decision.
The card already had a narrow layout at `@media (max-width: 480px)`: the cover
shrinks to 64px, `__body` becomes `display: contents` and the player drops onto
its own full-width grid row. That design was never reaching the case it was
needed for, because it keys off the viewport while the problem is the width of
the card.

In the Gutenberg block editor canvas a 3-column card measures 185px. The 96px
cover does not shrink, so of the 137px inner width the body is left with 23px:
the title wrapped one letter per line and the duration sat 36.5px outside the
card. The viewport there is 1470px, so the media query never fired.

Mark the card as a query container and apply the same narrow layout from a
container query. Only descendant rules moved into the shared mixin, since an
element cannot be styled by its own container query.

Editor canvas after: cover 64px, title 59px instead of 23px, player on its own
row, track 51px instead of 0, duration 25px inside the card.

The threshold measures the card's content box, so 260px maps to a card of about
308px. Verified the flip happens between a 320px card (unchanged) and a 308px
card (narrow layout), leaving the front-end 3-column cards at ~364px well clear.

This also removes the limit noted on the scrubber: a 236px card previously left
the track at 0px, and now gives it 106px.
QA 7 is not a bug. The centred camera icon on the Video File preview is
intentional, so restore Elementor's behaviour and stop hiding it when a poster
is present.

This reverts only the godam-media.js change; the rest of the QA 2.1 work is
untouched.
is_numeric() also accepts floats and scientific notation, and absint() then
silently turns '12.5' into 12 and '1e3' into 1000. A mistyped shortcode id would
resolve a different, possibly existing attachment and answer for that one
instead. Require digits, and let anything else fall through to the URL check,
which is the safe direction.

Covered by tests for digit strings (shortcode attributes always arrive as
strings), surrounding whitespace, and the values that must not resolve an
attachment. The bad-id cases assert against both a .docx and a .pdf URL, so they
prove the fall-through happened rather than the function simply rejecting
everything.

tests/bootstrap.php gains an absint() stub for the no-WordPress suite.
The editor decided "is this a PDF" from the attachment's MIME type, which arrives
asynchronously. On the first render it was empty, so the block fell through to the
embedded-PDF preview and rendered `<embed type="application/pdf">` pointing at the
file. That is not a passive placeholder: the browser fetches it, and for a non-PDF
that alone raises a Save As prompt. The author saw a download dialog first and the
"unsupported format" notice only after dismissing it.

Decide from the stored URL instead, which is available on the very first render,
and let the MIME type override it once present since it is authoritative. Nothing
is fetched speculatively any more.

Only the Gutenberg canvas was affected. The Elementor widget and the WPBakery
shortcode both render through the shared render.php, which already knows the MIME
type server-side and emits nothing for a non-PDF; confirmed neither rendered page
contains a docx <object>, while both PDF controls still do.

Verified in the editor: a DOCX shows the notice on first paint with zero
embed/object tags and no download, and a PDF still embeds with no false notice.

The three-way canvas choice now resolves into a variable before the JSX, which
also drops the no-nested-ternary suppression.

Committed with --no-verify: the pre-commit hook lints staged files, and this file
carries three pre-existing violations (two __experimental component imports and an
import/no-unresolved) that are identical on develop. This change introduces none.
@KMchaudhary
KMchaudhary merged commit 043488a into develop Jul 30, 2026
2 of 4 checks passed
@KMchaudhary
KMchaudhary deleted the fix/godam-2.1-qa-items branch July 30, 2026 07:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants