{"id":50341248,"url":"https://github.com/bacoords/wc-block-visualizer","last_synced_at":"2026-05-29T17:01:34.543Z","repository":{"id":351345493,"uuid":"1210613769","full_name":"bacoords/wc-block-visualizer","owner":"bacoords","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-14T15:36:25.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-14T17:24:27.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bacoords.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-14T15:30:55.000Z","updated_at":"2026-04-14T17:10:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bacoords/wc-block-visualizer","commit_stats":null,"previous_names":["bacoords/wc-block-visualizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bacoords/wc-block-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacoords%2Fwc-block-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacoords%2Fwc-block-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacoords%2Fwc-block-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacoords%2Fwc-block-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bacoords","download_url":"https://codeload.github.com/bacoords/wc-block-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacoords%2Fwc-block-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33662205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-29T17:01:33.842Z","updated_at":"2026-05-29T17:01:34.536Z","avatar_url":"https://github.com/bacoords.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WooCommerce Block Visualizer\n\nA developer tool that overlays visual outlines and class name labels on WooCommerce block components, making it easy to identify and target the right CSS selectors when styling Woo blocks.\n\n![visualizer](https://github.com/user-attachments/assets/050c7be9-9020-4a6b-8fab-6fe51aa6aa95)\n\n\n## Enabling the Visualizer\n\n### Admin Bar Toggle\n\nWhen browsing any WooCommerce page while logged in, a **Block Visualizer: ON/OFF** button appears in the admin bar. Click it to toggle the visualizer. State is persisted in a cookie so it stays on as you navigate between pages.\n\n### Query Parameter\n\nAppend `?wc_block_visualizer=1` to any URL to enable it on that page, or `?wc_block_visualizer=0` to force it off. This works on any page, not just WooCommerce pages — useful for custom templates.\n\n```\nhttps://yoursite.com/cart/?wc_block_visualizer=1\n```\n\n---\n\n## What You See\n\nEach WooCommerce block element gets a dashed outline and a label showing its primary class name and nesting depth.\n\n### Color Coding\n\n| Color | Class prefix |\n|-------|-------------|\n| Blue  | `wc-block-components-*` |\n| Pink  | `wc-block-*` |\n| Green | `wp-block-woocommerce-*` |\n\n### Depth Indicator\n\nLabels show a depth number in brackets — `[1]` is a top-level block, `[2]` is one level nested inside another WC block, and so on. Use the depth controls to focus on a specific nesting level.\n\n---\n\n## Keyboard Shortcuts\n\nAll shortcuts use `Cmd+Shift` on Mac.\n\n| Shortcut | Action |\n|----------|--------|\n| `Cmd+Shift+V` | Toggle visualizer on / off |\n| `Cmd+Shift+S` | Rescan the page for new elements (useful after AJAX loads or React re-renders) |\n| `Cmd+Shift+↑` | Go deeper — show the next nesting level |\n| `Cmd+Shift+↓` | Go shallower — show the previous nesting level |\n\nStart at depth 1 to see top-level blocks, then drill down with `Cmd+Shift+↑` to surface nested components.\n\n---\n\n## Copying CSS Selectors\n\nClicking a label copies a ready-to-use CSS rule to your clipboard.\n\n| Action | What gets copied |\n|--------|-----------------|\n| **Click** label | Single selector: `.class-name { }` |\n| **Cmd+Click** label | Nested selector with parent context: `.parent-class { .child-name { } }` |\n\nAfter copying, the label briefly shows **Copied!** or **Copied with parent!** as confirmation. The copied rule is also logged to the browser console.\n\n---\n\n## Typical Workflow\n\n1. Navigate to the WooCommerce page you want to style (cart, checkout, account, etc.).\n2. Enable the visualizer from the admin bar.\n3. Scan the page at depth 1 to orient yourself — top-level blocks are outlined.\n4. Press `Cmd+Shift+↑` to drill into nested components until you find the element you want.\n5. Click the label to copy its CSS selector, then paste it into your stylesheet.\n6. Use `Cmd+Shift+S` to rescan if blocks appear after a page interaction (e.g. updating cart quantities, switching checkout steps).\n7. Toggle off with `Cmd+Shift+V` when you're done to preview your styles cleanly.\n\n---\n\n## Notes\n\n- The visualizer only loads on WooCommerce pages (cart, checkout, account, shop, product, order received). Use the query param to force it on other pages.\n- Only users with `manage_woocommerce` capability see the admin bar toggle.\n- Visualizer outlines and labels are hidden automatically when printing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbacoords%2Fwc-block-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbacoords%2Fwc-block-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbacoords%2Fwc-block-visualizer/lists"}