Update: GoDAM blocks in wp bakery

[rudrakshi-gupta]

Sync WPBakery elements with the redesigned 2.0 blocks (Video Gallery, Audio, Video)

Issue - rtCamp/godam-plugin-wp#19

Summary

The GoDAM 2.0 redesign added new attributes and controls to the Video Gallery, Audio, and Video blocks, but the corresponding WPBakery (Visual Composer) elements were never updated, so those options were missing from the page builder. This PR brings all three WPBakery elements (and their shortcodes) up to parity with the redesigned Gutenberg blocks, and fixes the Video block preview not rendering inside the WPBakery inline editor.

Branch: update/godam-blocks-wp-bakery → develop

Background

Each GoDAM media block has a matching WPBakery element that renders through a shortcode (base → shortcode name), and each shortcode reuses the block's server template/render.php. When the blocks were redesigned, the new attributes were added to the blocks and their templates, but not surfaced in the WPBakery element params or mapped in the shortcodes — so WPBakery users couldn't configure them.

One important constraint throughout: WordPress' shortcode_parse_atts() lowercases every attribute name, so WPBakery params use lowercase/snake_case names that are then mapped to the blocks' camelCase attribute keys in each shortcode.

Changes by block

Video Gallery (godam/gallery-v2)

• Layout: added the List option (Grid / Carousel / List) — the block gained List in the redesign.
• Interaction: added an Interaction dropdown — Play on hover (default) vs Autoplay all videos — mapped to the block's mutually-exclusive autoplay / playOnHover booleans.
• Show Play Button: added a checkbox mapped to showPlayButton.
• Shortcode ([godam_video_gallery]): accepts interaction and show_play_button, splits interaction into autoplay/playOnHover, and passes showPlayButton to the shared template (which already consumes all three; playOnHover/showPlayButton default to true, matching the block).

Files: inc/classes/wpbakery-elements/class-wpb-godam-video-gallery.php, inc/classes/shortcodes/class-godam-video-gallery.php.

Audio (godam/audio)

• Added the redesign's attributes as params: Audio Title (audio_title → audioTitle), Description (description), Thumbnail (thumbnail, empty falls back to the GoDAM-generated cover), Show Transcript (show_transcript → showTranscript, default on) and Show Chapters (show_chapters → showChapters, default on).
• Removed the obsolete Caption param — the redesign dropped it from the block and render.php no longer reads it.
• Selector param JS: auto-populates Audio Title and Description from the attachment on selection (parity with the block's onSelectAudio), and targets the src hidden field specifically via [name="src"] instead of any hidden field.
• Shortcode ([godam_audio]): maps the new snake_case atts to the block's camelCase keys the shared render.php consumes (transcript/chapters default to true).

Files: inc/classes/wpbakery-elements/class-wpb-godam-audio.php, inc/classes/shortcodes/class-godam-audio.php, assets/src/js/wpbakery/wpbakery-audio-selector-param.js.

Video (godam/video)

• Added the two new Playback-Controls toggles the redesign introduced: Show Transcription (show_transcription → showTranscription) and Show Caption (show_caption → showCaption), both defaulting to Yes (matching the block toggles' true defaults).
• Shortcode ([godam_video]): maps these to the block's camelCase attributes only when explicitly provided, so hand-written [godam_video] shortcodes keep the template's own defaults (transcription on; caption derived from the attachment's Display-captions setting). The template already honors an explicit showCaption/showTranscription.

Files: inc/classes/wpbakery-elements/class-wpb-godam-video.php, inc/classes/shortcodes/class-godam-player.php.

Fix: Video preview not rendering in the WPBakery inline editor

Problem: In the WPBakery inline editor the Video block showed only a play button on a zero-height area — the player was stuck in its pre-init state (easydam-video-container.loading / vjs-hidden, 0×0).

Root cause: godam-player/frontend.js initialized players only on DOMContentLoaded. WPBakery renders the shortcode markup into its preview iframe after that event has already fired, so PlayerManager never ran against the block and the player was never initialized. (Gutenberg avoids this by rendering its own React player in the editor; WPBakery uses the shortcode path.)

Fix (in assets/src/js/godam-player/frontend.js):

• Run initialization immediately when the DOM is already parsed (readyState fallback), not only on DOMContentLoaded.
• Add deferred re-init passes (300/1200/3000 ms). PlayerManager.initializeVideo() is idempotent — guarded by data-godam-initialized — so a re-run only initializes players that were missed; on a normal front-end load where everything is already initialized this is a cheap querySelector no-op.
• In a WPBakery editor preview only (detected via the #vc_inline-frame wrapper / vc_editor body class), attach a MutationObserver that re-initializes on demand as elements are re-rendered during editing. No observer is attached on the published front end.

Verified live in the inline editor: after a plain reload the player initializes on its own (0×0 → 645×363, loading cleared, data-godam-initialized="1"). Because the changes are additive and idempotent, published-page behavior is unchanged (init still runs once; the deferred passes find nothing pending).

How to test

1. Ensure WPBakery (js_composer) is active. Run npm run build:js and npm run build:blocks (build artifacts under assets/build/ are gitignored).
2. Video Gallery: add the GoDAM → Video Gallery element; confirm Layout offers List, the Interaction dropdown switches autoplay/hover, and Show Play Button toggles the overlay on the front end.
3. Audio: add the Audio element, select an audio file → Title/Description auto-fill; set a Thumbnail; toggle Show Transcript / Show Chapters and confirm on the front end.
4. Video: add the Video element; toggle Show Transcription / Show Caption and confirm the transcript button / captions on the front end.
5. Editor preview: open the WPBakery inline editor on a page with a Video element and confirm the player renders (not just a play button) after load.

Notes for reviewers

• Build files (assets/build/**) are gitignored — rebuild with npm run build:js / npm run build:blocks.
• The frontend.js change is on the shared player bundle used by all render paths; it is additive and idempotent (single init on the front end; deferred passes are no-ops when nothing is pending).

Demo Video

Screen.Recording.2026-07-20.at.7.mp4

[github-actions]

🔍 WordPress Plugin Check Report

⚠️ Status: Passed with warnings

📊 Report

🎯 Total Issues	❌ Errors	⚠️ Warnings
23	0	23

---

⚠️ Warnings (23)

📁 composer.json (1 warning)

📍 Line	🔖 Check	💬 Message
0	missing_composer_json_file	The "/vendor" directory using composer exists, but "composer.json" file is missing.

📁 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/blocks/godam-gallery-v2/render.php (2 warnings)

📍 Line	🔖 Check	💬 Message
15	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound	Global variables defined by a theme/plugin should start with the theme/plugin prefix. Found: "$inner_block_video_ids".
23	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound	Global variables defined by a theme/plugin should start with the theme/plugin prefix. Found: "$inner_block_video_ids".

📁 tests/bootstrap.php (7 warnings)

📍 Line	🔖 Check	💬 Message
28	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "wp_strip_all_tags".
48	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "wp_prepare_attachment_for_js".
63	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "get_post_meta".
77	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "get_post_mime_type".
88	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "wp_get_attachment_url".
99	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "get_the_title".
111	WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound	Functions declared in the global namespace by a theme/plugin should start with the theme/plugin prefix. Found: "date_i18n".

📁 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/07/22/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/07/22/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

[Copilot]

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.

Syncs WPBakery (Visual Composer) elements/shortcodes with the redesigned GoDAM 2.0 Gutenberg blocks (Video Gallery, Audio, Video) and fixes GoDAM video player preview initialization inside the WPBakery inline editor.

Changes:

• Adds newly introduced block controls to WPBakery elements (Video Gallery interaction + list layout; Audio metadata/transcript/chapters; Video transcription/caption toggles).
• Updates shortcodes to map WPBakery snake_case attributes to the blocks’ camelCase attributes consumed by shared render.php templates.
• Makes player initialization resilient to inline-editor DOM injection via readyState fallback, deferred re-init passes, and a WPBakery-only MutationObserver.

Reviewed changes

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

Show a summary per file

File	Description
inc/classes/wpbakery-elements/class-wpb-godam-video.php	Adds WPBakery params for new Video block toggles (transcription/captions).
inc/classes/wpbakery-elements/class-wpb-godam-video-gallery.php	Adds List layout + interaction + play-button params to match redesigned gallery block.
inc/classes/wpbakery-elements/class-wpb-godam-audio.php	Adds redesigned Audio params and replaces obsolete caption parameter with transcript/chapters toggles.
inc/classes/shortcodes/class-godam-video-gallery.php	Maps new gallery params into block attributes (autoplay, playOnHover, showPlayButton).
inc/classes/shortcodes/class-godam-player.php	Maps new video toggles into block attributes while preserving defaults for hand-written shortcodes.
inc/classes/shortcodes/class-godam-audio.php	Maps new audio attributes (title/transcript/chapters) into block-consumed camelCase keys.
assets/src/js/wpbakery/wpbakery-audio-selector-param.js	Targets the correct hidden src field and auto-fills audio title/description on selection.
assets/src/js/godam-player/frontend.js	Improves init/re-init behavior to support WPBakery inline editor preview rendering.

---

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

[KMchaudhary]

Review notes

Reviewed all 8 files against the shared templates (godam-video-gallery.php, godam-audio/render.php, godam-player.php), the block block.json / edit defaults, the custom WPBakery param types, and the shared PlayerManager. The core attribute mapping looks correct (the interaction → autoplay/playOnHover split, the snake→camel remaps, and the "map only when explicitly provided" guard for the video toggles). A few things worth addressing before merge:

Correctness

1. show_play_button can't be turned off — class-wpb-godam-video-gallery.php
   The new Show Play Button checkbox is missing 'save_always' => true. When a user unchecks it, VC omits the empty value from the saved shortcode, so [godam_video_gallery] carries no show_play_button attr → shortcode_atts default true → the overlay stays on. Every other toggle added in this PR (audio show_transcript/show_chapters, video show_transcription/show_caption) correctly sets save_always => true, so this looks like an oversight. The interaction dropdown has the same omission, though it's less impactful since dropdowns still persist non-default selections.

2. show_caption overrides the attachment's caption setting — class-wpb-godam-video.php + class-godam-player.php
   The dropdown defaults to '1' with save_always, so WPBakery always emits show_caption="1" → showCaption = true. In godam-player.php (~L261) an explicit showCaption wins over $godam_attachment_show_caption, so a video whose attachment has Display captions disabled will still force captions on. The Gutenberg block instead derives showCaption from the attachment when the user hasn't set it (edit.js ~L316-318). This is a behavior divergence between the two builders.

3. show_transcription default mismatch with the block — class-wpb-godam-video.php
   The dropdown defaults to '1' (on), but block.json declares showTranscription with "default": false. So a freshly inserted Gutenberg block defaults transcription off while a freshly inserted WPBakery element defaults it on for the same media. The description says these match the block's "true defaults" — worth reconciling against block.json.

frontend.js re-init path (lower severity, mostly editor-scoped)

The idempotency argument holds for the paths that have guards — data-godam-initialized, data-engagement-bind, window.godamKeyboardHandlerInitialized. The gap is initializeAutoplayOnView(), which has no cross-instance guard: each repeated new PlayerManager() builds a fresh IntersectionObserver over all autoplay-on-view videos, so in the editor preview (where the MutationObserver fires reinitPendingPlayers repeatedly) observers accumulate and autoplay can retrigger.

Two smaller notes on the same block:

• The editor MutationObserver on document.body (subtree: true) is never disconnected — it keeps firing for the life of the preview.
• setTimeout(reinitPendingPlayers, 300) is armed unconditionally at parse time; on a slow page it can fire before the DOMContentLoaded init and run full player init mid-parse.

Minor

• wpbakery-audio-selector-param.js overwrites Audio Title and Description on every select/replace. It matches the block's onSelectAudio, but it silently discards custom text if the user edits those fields and then swaps the audio file — consider only populating when the field is empty.

Scoping the src hidden field to [name="src"] and the caption param removal both look good.