# BW Video Text — Session Log Append-only history of development sessions. Newest entries at the top. ## Format ``` ## YYYY-MM-DD HH:MM — **Goal:** What we set out to do **Done:** What got done **Left off at:** Where we stopped **Notes:** Anything worth remembering ``` --- ## 2026-06-08 (5) — adi **Goal:** Gray icon top-right corner; Play Video icon+text horizontal; more dash spacing. **Done:** - Gray YouTube icon: removed from heading flex-row; placed as first child of `.bw-vt-text-inner` with `position: absolute; top: 32px; right: 0`. Text-inner gained `position: relative`. Icon floats clear of content at top-right corner. - Play Video link: forced horizontal with `flex-direction: row !important; align-items: center !important` in CSS AND as inline `!important` on the span element (belt + suspenders against theme CSS). - Dash spacing: `margin-top` on `.bw-vt-dash-svg` increased from 12px → 24px. - Editor (editor.js): heading-row div removed; icon rendered first as absolutely-positioned `bw-vt-heading-yt-btn--preview` span with hardcoded `fill="#9CA3AF"` (was red). Play link icon class corrected to `bw-vt-yt-icon`; both SVGs get explicit `width`/`height` props. - Bumped to 0.1.7; both scans clean. **Left off at:** 0.1.7 deployed to dev site. **Notes:** - `right: 0` on the icon means it sits at the padding-box edge of text-inner, so content (heading, body) naturally doesn't wrap under it. No extra heading `padding-right` needed. --- ## 2026-06-08 (4) — adi **Goal:** Fix SVG YouTube icons rendering huge (~300px) and heading icon showing wrong (dark) colour. **Done:** - Root cause identified: Kadence theme CSS (`svg { width: 100% }` or similar with `!important`) was overriding the block stylesheet `width: 30px` / `width: 20px` rules. - Replaced `BW_VT_YT_SVG` constant with `bw_vt_yt_icon( $px, $fill )` function that embeds `style="width:Xpx!important;height:Ypx!important;display:block!important;flex-shrink:0!important;"` directly on the SVG element. - Heading icon: `bw_vt_yt_icon( 30, '#9CA3AF' )` — size and gray fill both enforced at inline level, completely independent of CSS cascade. - Play link icon: `bw_vt_yt_icon( 20, $play_link_color )` — size and user-configurable fill both enforced at inline level. - Dash SVG constant similarly hardened with inline `!important` styles (width: 64px, height: 4px). - Bumped to 0.1.6; both scans clean. **Left off at:** 0.1.6 deployed to dev site. Icons should now render at correct pixel sizes and correct colours regardless of theme CSS. **Notes:** - Inline style `!important` beats any external stylesheet `!important` per CSS cascade spec (step 4 < step 5 in author origin). This is the only reliable way to override Kadence theme SVG rules without knowing the exact selector Kadence uses. - The `bw_vt_yt_icon()` function height = round(px × 512/576) to maintain the exact 576:512 viewBox aspect ratio. --- ## 2026-06-08 (3) — adi **Goal:** Pixel-match reference image: use SVG asset files for icons, fix overlap direction, fix icon sizes. **Done:** - Added `BW_VT_DASH_SVG` constant: clean inline SVG matching `assets/images/dash.svg` (64×4, `#9CA3AF`). Replaced `
` in render helper with this SVG. - YouTube icon path already matches `assets/images/Youtube-icon.svg` — confirmed, no change needed. - Reversed Layout 1 overlap: VIDEO col now extends 2rem right (`flex: 0 0 calc(60% + 2rem); margin-right: -2rem; z-index: 1`) so video visually crosses into text area. Text col (`z-index: 0; padding-left: 4rem`) stays clear of video overlap zone. - Icon sizes matched to reference: heading icon 28×25px, play link icon 18×16px (correct 576:512 aspect ratio). - Dash CSS updated: `#9CA3AF` colour, 64×4px, no opacity applied (SVG handles it). - Mobile reset updated: resets `margin-right: 0` on video col (was resetting text col's `margin-left`). - Bumped to 0.1.2; both scans clean. **Left off at:** Block is at 0.1.2, ready to test in browser. Existing page blocks will pick up CSS changes on reload. **Notes:** - The video's 2rem overlap creates a "video extends into text" visual effect without requiring a text background colour. The text's `padding-left: 4rem` (2rem clear + 2rem breathing room) keeps text words clear of the overlap. ## 2026-06-08 (2) — adi **Goal:** Fix Layout 1 display issues: icon sizing, new features off by default, text-overlap-video effect. **Done:** - Fixed CSS bug: `.bw-vt-play-link .bw-vt-yt-icon--link` → `.bw-vt-yt-icon` (wrong class name meant the YouTube icon in the play link was unsized / rendered huge). - Implemented Layout 1 text-column overlap: `flex: 0 0 calc(40% + 2rem); margin-left: -2rem; z-index: 1;` so text block sits slightly over video (matches brentwood.ca reference). Responsive reset restores normal stacked layout on ≤768 px. - Added `padding-left: 4rem` to `.bw-video-text--layout-1 .bw-vt-text-inner` so text content clears the overlap area. - Mirrored all layout-1 overlap changes in `editor.css`. - Changed `showHeadingVideoIcon`, `showPlayLink`, `showTextDash`, `showTextBottomBorder` defaults to `true` in `block.json`. - Bumped to 0.1.1; both scans clean. **Left off at:** Fixes deployed to dev site. **Existing blocks need a delete-and-re-add** to pick up new `true` defaults (or user must enable each toggle manually in the sidebar — they are already there). CSS fixes apply immediately to any existing block. **Notes:** - The YouTube SVG constants (`BW_VT_YT_SVG`) have no explicit `width`/`height` attributes. Size is controlled entirely by CSS. The heading icon (`bw-vt-heading-yt-btn .bw-vt-yt-icon { width: 28px }`) was always correct; only the play-link rule had the wrong class name. ## 2026-06-08 — adi **Goal:** Build the `bw/video-text` Gutenberg block from scratch. **Done:** - Scaffolded plugin with `tools/new-plugin.sh`. - Created `blocks/bw-video-text/` with `block.json`, `editor.js`, `editor.css`, `style.css`, `render.php`, `frontend.js`. - 4 layouts: layout-1 (60/40 video left), layout-2 (30/70 text-bg left), layout-3 (35/65 text left), layout-4 (50/50 video left). - YouTube + MP4 file upload sources; click-to-play via `frontend.js`. - Inline RichText editing for heading (H1–H6) and body; sidebar color/font controls. - cleanup-scan and security-scan both pass. - Block confirmed registered in WP (`bw/video-text`). **Left off at:** Block is live on dev site, ready for first use/testing in editor. **Notes:** - `test-plugin.sh` PHP lint uses Docker (not available to developers); syntax verified via `srv-gw wp eval` — block registered successfully. - Column order in HTML: layouts 1 & 4 → video first; layouts 2 & 3 → text first (CSS `order` swaps on mobile). ## 2026-06-08 — scaffold **Goal:** Create initial plugin scaffold **Done:** Scaffolded via tools/new-plugin.sh at version 0.1.0 **Left off at:** Ready to begin development **Notes:** Standard BW plugin structure. Docs stubs in place, awaiting real content.