POC: add data-test-id attributes to blocks, settings, and dynamic UI

[subodhr258]

Summary

POC adding 33 unique data-test-id attributes across 9 files to give us a worked example of a naming convention for selector-based testing. Strictly additive — no logic, markup structure, or styling changes. Visual review should focus on the convention and coverage, not behaviour.

This pairs with #1885 (unit testing infrastructure) but is independent of it: this PR can land first or second, and lints/runs clean on its own.

Naming convention

Format: godam-{area}-{role}-{name}

Token	Vocabulary
area	Block slug without the godam- prefix (e.g., video, gallery-v2, video-duration, gallery-v2-item), or settings-{tab} for settings (e.g., settings-video). Top-level chrome (the tab nav) uses just settings.
role	toolbar / panel / control / canvas / element / nav / content / button
name	Kebab-case identifier. For controls, the attribute name (autoplay, hover-select). For panels, the slugified title (overlay-blocks). For elements/buttons, a semantic role (save, query-label, thumbnail-fallback).

Uniqueness check: every static ID appears exactly once across assets/src/ and pages/ (verified locally: grep -rohE 'data-test-id=\"[^\"]+\"' assets/src pages \| sort \| uniq -c shows count of 1 for all values).

What's covered

Blocks (2 representative)

godam/video (assets/src/blocks/godam-player/) — richest block in the editor. Comprehensive tagging of toolbar, panels, controls, canvas wrappers, and one dynamic overlay container:

• 2 toolbar buttons (-toolbar-edit, -toolbar-seo)
• 2 InspectorControls panels (-panel-settings, -panel-overlay-blocks)
• 11 controls across both panels + shared edit-common-settings.js (autoplay, loop, muted, controls, performance, hover-select, aspect-ratio, player-height, show-overlay, vertical-alignment, overlay-time-range)
• 2 canvas wrappers (-canvas figure, -canvas-overlay div)
• 1 dynamic span (-element-query-label)

godam/gallery-v2 (assets/src/blocks/godam-gallery-v2/) — richest variety of control types:

• 3 InspectorControls panels (-panel-source, -panel-settings, -panel-query)
• 6 controls covering ToggleGroupControl + ToggleControl + RangeControl + SelectControl variants
• 3 canvas wrappers (outer + handpicked-mode + query-mode)
• 2 dynamic elements (-element-query-item with ratio-driven class, -element-thumbnail-fallback span)

Blocks with dynamic UI

• godam/video-duration — the duration-format preview span whose content varies with the durationFormat attribute
• godam/gallery-v2-item — the title <strong> and date <span> populated from resolved media attributes

Settings tabs

• pages/godam/App.js — tab nav container + templated godam-settings-nav-${tab.id} on each tab link (expands to 5 IDs at render time: general-settings, video-settings, video-player, video-ads, integrations-settings) + content root
• pages/godam/components/tabs/VideoSettings/VideoSettings.jsx — tab root + Save button
• pages/godam/components/tabs/VideoSettings/VideoWatermark.jsx — 2 ToggleControls + TextControl
• pages/godam/components/tabs/VideoSettings/APISettings.jsx — Save API Key + Remove API Key buttons

What's not covered (and why)

This is a POC, not exhaustive coverage. Deliberately out of scope:

• The other 30+ blocks in assets/src/blocks/
• Block-extensions in assets/src/block-extensions/
• All InspectorControls of every block (we covered "a meaningful subset of representative variety" instead of every Toggle/Select)
• Frontend rendered output (save.js / view.js / PHP templates)
• The other 4 settings tabs (general, video-player, video-ads, integrations) — only video-settings is fully tagged in this POC
• Admin meta-boxes, modal dialogs, Elementor widgets, and form-integration UIs

If the convention is approved, follow-up PRs extend coverage one block / tab / area at a time using the same godam-{area}-{role}-{name} template.

Why data-test-id (with hyphens)

The maintainer specified data-test-id. React Testing Library's default is data-testid (no hyphen). To make tests find these via screen.getByTestId(...), the JS test setup (introduced in #1885) should call:

import { configure } from '@testing-library/dom';
configure({ testIdAttribute: 'data-test-id' });

I left this out of this PR because it belongs in tests/js/setup.js which lives in #1885. Either:

• (a) Land Add unit testing infrastructure (PHPUnit + Jest) excluded from build artifact #1885 first, then a tiny follow-up PR adds the configure() call, or
• (b) Add the configure() call to Add unit testing infrastructure (PHPUnit + Jest) excluded from build artifact #1885 before it merges (one-line addition).

Component-prop forwarding sanity

@wordpress/components 30.7.0 forwards unknown props (including data-*) on ToggleControl, SelectControl, RangeControl, UnitControl, RadioControl, TextControl, ToggleGroupControl, ToolbarButton, Button, PanelBody. All controls in this PR pass data-test-id directly — no wrapper divs needed. Verify in dev tools: each tagged control should render with the attribute on its root wrapper element.

Test plan

• All 33 IDs are unique across the codebase (grep count of 1 each)
• Diff is strictly additive: 9 files, +46/-15 (the 15 deletions are all +/- pairs on lines that received a new prop)
• No data-testid (hyphen-less) introduced anywhere
• No --no-verify in commit history
• Bracket balance verified across all 9 modified files
• All 7 atomic commits scoped to their respective files (commit 7 covers 3 video-settings files as documented)
• CI: PHPCS workflow green (no PHP touched, expected)
• CI: Plugin Check workflow green (no plugin-header changes)
• Visual smoke test in editor: load each tagged block in the editor, inspect the DOM, confirm each ID renders on a stable element
• Visual smoke test in admin: open Video Settings tab, inspect DOM for godam-settings-* IDs

Reviewer focus

1. Is the godam-{area}-{role}-{name} template the right shape, or do you prefer something else? (Easy to bulk-rename.)
2. Are the role tokens reasonable, or should we collapse / expand the vocabulary?
3. Coverage breadth: is this the right POC slice, or should we pull in more / fewer blocks?
4. Do any of the tagged controls render the attribute on the wrong DOM node? (Sanity-check in dev tools.)

🤖 Generated with Claude Code — see CLAUDE attribution on each commit.

[Copilot]

Pull request overview

Adds data-test-id attributes across selected editor blocks and the GoDAM settings UI to establish a consistent selector naming convention for upcoming selector-based testing.

Changes:

• Added data-test-id markers to key Block Editor surfaces (toolbar buttons, inspector panels/controls, and canvas elements) for godam/video, godam/gallery-v2, godam/video-duration, and godam/gallery-v2-item.
• Added data-test-id markers to the GoDAM settings navigation/content shell and the Video Settings tab (including watermark and API key actions).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pages/godam/components/tabs/VideoSettings/VideoWatermark.jsx	Adds test ids to watermark toggles and watermark text control.
pages/godam/components/tabs/VideoSettings/VideoSettings.jsx	Adds test ids to Video Settings root and Save button.
pages/godam/components/tabs/VideoSettings/APISettings.jsx	Adds test ids to Save/Remove API key buttons.
pages/godam/App.js	Adds test ids to settings tab nav, per-tab links, and content container.
assets/src/blocks/godam-video-duration/edit.js	Adds test id to the duration preview element.
assets/src/blocks/godam-player/edit.js	Adds test ids to toolbar buttons, inspector panels/controls, and canvas/overlay containers.
assets/src/blocks/godam-player/edit-common-settings.js	Adds test ids to common video settings controls (autoplay/loop/muted/etc.).
assets/src/blocks/godam-gallery-v2/edit.js	Adds test ids to inspector panels/controls and canvas/query preview elements.
assets/src/blocks/godam-gallery-v2-item/edit.js	Adds test ids to dynamic title/date elements.

Comments suppressed due to low confidence (1)

assets/src/blocks/godam-gallery-v2/edit.js:910

• data-test-id="godam-gallery-v2-element-thumbnail-fallback" can appear multiple times (once per query item without a thumbnail). If tests rely on a single match, this will be flaky/ambiguous; consider making the id item-specific (e.g., include video.id) or attaching a single test id to the thumbnail container and asserting fallback presence within a specific item via scoped queries.

										<div className="godam-gallery-v2__query-thumb">
											{ video.thumbnail ? (
												<img src={ video.thumbnail } alt={ video.title } />
											) : (
												<span data-test-id="godam-gallery-v2-element-thumbnail-fallback">{ __( 'Video', 'godam' ) }</span>
											) }

---

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

[github-actions]

🔍 WordPress Plugin Check Report

❌ Status: Failed

📊 Report

🎯 Total Issues	❌ Errors	⚠️ Warnings
17	3	14

---

❌ Errors (3)

📁 readme.txt (1 error)

📍 Line	🔖 Check	💬 Message
0	outdated_tested_upto_header	Tested up to: 6.9 < 7.0. The "Tested up to" value in your plugin is not set to the current version of WordPress. This means your plugin will not show up in searches, as we require plugins to be compatible and documented as tested up to the most recent version of WordPress.

📁 lib/class-godam-frappe-dispatch-installer.php (2 errors)

📍 Line	🔖 Check	💬 Message
302	PluginCheck.CodeAnalysis.WriteFile.PluginDirectoryWrite	Plugin folders are deleted when upgraded. Do not save data to the plugin folder using unzip_file(). Detected usage of constant WP_PLUGIN_DIR. Use wp_upload_dir() to get the uploads directory path or save to the database instead.
347	PluginCheck.CodeAnalysis.WriteFile.PluginDirectoryWrite	Plugin folders are deleted when upgraded. Do not save data to the plugin folder using copy_dir(). Detected usage of constant WP_PLUGIN_DIR. Use wp_upload_dir() to get the uploads directory path or save to the database instead.

---

⚠️ Warnings (14)

📁 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.

📁 composer.json (1 warning)

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

📁 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/05/25/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/05/25/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