# Visit block (`visit-block`)
The last screen done right: Apple-style hours with today in bold and a live status, holiday closures, the address with a landmark, Get directions, Copy address, and a map that loads only when tapped.
| | |
|---|---|
| Tag | Showcase |
| Size | 4.2 KB gzipped own code (JS 2.9 KB + CSS 1.3 KB; 10.2 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Every VISIT business (restaurants, cafes, salons, shops) and any storefront |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/visit-block/) |
## What it does
Builds the hours table from JSON (or marks today in a server-rendered table), shows "Open now · closes 7 pm" in the business's time zone, honours data-closed-dates. Get directions opens Apple Maps on iPhone/iPad and Google Maps elsewhere. Copy address uses the Clipboard API with a small status toast. The map is a facade: a sized box with a "Show the map" button that injects the Google Maps embed (no API key) on tap, so the page doesn't pay ~500 KB of map scripts up front and nothing shifts.
## When to use
- Mobbin upgrade #10 (stronger last screen).
- Replace the always-on iframe map in the builder's Visit section (also fixes the headless blank-map screenshots).
## Don't
- Show the map without the street as text.
- Precise addresses for home-based businesses: use the service-area towns instead.
- Repeat hours elsewhere on the page more than once (skill: say each fact once or twice).
## Reduced motion, no JS, accessibility
- Reduced motion: the toast appears without sliding.
- No JS: the address, Directions link and any server-written hours show; the map button is hidden (link instead).
- Real <table> with row headers; today has aria-current=date; status and toast are live regions.
## Notes
- data-map-q overrides the map query (e.g. the business name + city, which pins the listing).
## Relation to the effects libraries
New. The builder's hours_script/wblOC uses the same week format (window.WBLH), so this drops in.
## Use it
Copy this folder to the site as `/wbl/visit-block/` (keep `vendor/` if there is one), then:
```html
Visit the studio
Tue–Sun
Opening hours
Closed Thanksgiving (Nov 26) and Christmas Day.
2214 W Sunset Blvd Los Angeles, CA 90026
Echo Park, two doors from the laundromat · street parking on Lemoyne
```
Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).
## License
Our code: WBL-owned, original. No third-party code.