/** * SP7 — layout shift (CLS) + third-party / DOM rules. Speed checklist P7 + P8, 2026-09-17. * PHP: inc/areas/fix-sp7-cls.php (prints the per-product / per-logo values inline, builds the * Google Maps facade and defers third-party widgets). Kill switch: define( 'YB_FIX_SP7_OFF', true ). * * Everything here only RESERVES space that a block takes anyway once the footer JS has run, or * styles markup this area creates itself (.yb-sp7-*). No block changes size, colour or position. * * The placeholders live inside @supports selector(:has(*)) on purpose: they must disappear the * moment the real block exists. A browser without :has() (Safari < 15.4) keeps today's behaviour * instead of getting a permanent empty gap. * * Sections * 1. Announcement (promo) bar — never appears after first paint * 2. Category archive — breadcrumb slot above the H1 * 3. Blog post — breadcrumb + meta slots around the H1 * 4. Product page — the hidden WoodMart gallery is as tall as the JS grid that replaces it * 5. Google Maps facade (click to load) + generic 16:9 embed box * 6. Header logo box */ /* --------------------------------------------------------------------------- * 1. Announcement bar * The bar is printed by inc/shortcodes-layout.php with an inline script that sets hidden=true * when it was closed earlier in the session; assets/js/areas/global-header.js then always sets * hidden=false again ("reference has no close button") at DOM ready. That made the whole page * jump down by 36px on the second page view of a session. Showing it from the start matches the * end state. The coming-soon page keeps it hidden (same guard as fix-a1-header-footer.css). * ------------------------------------------------------------------------- */ body:not(:has(.wp-block-woocommerce-coming-soon)) .yb-promo[hidden] { display: block; } .yb .yb-promo { min-height: 36px; } /* 9px + 18px track + 9px, so an empty message list cannot collapse it */ /* --------------------------------------------------------------------------- * 2. Category / shop archive: breadcrumb slot * assets/js/areas/category-grid.js copies the toolbar breadcrumb above the H1 after load * (.yb-cat-grid-crumbs). Height = 14px x 1.4 line-height + 1px padding + 1px underline = 22px. * .page-title .container is a flex column, so the slot is a zero-width 22px tall flex item. * ------------------------------------------------------------------------- */ @supports selector(:has(*)) { /* Only when the toolbar really has a breadcrumb to copy (so search results, where A3 also adds .yb-cat-grid but WoodMart prints no breadcrumb, never get an empty gap). */ body.yb.yb-cat-grid:has(.shop-loop-head .woocommerce-breadcrumb) .page-title .container:not(:has(.yb-cat-grid-crumbs))::before { content: ""; display: block; height: 22px; } } /* --------------------------------------------------------------------------- * 3. Blog post: breadcrumb + meta slots * assets/js/areas/auto-archives.js moves .yb-autoarch-crumbs and .yb-autoarch-meta out of * .entry-content (where PHP prints them, under the hero) up to either side of the H1. * That moved the H1 and the 16:9 hero by ~81px after load. So: keep the source block in the DOM * but out of the flow (still readable by screen readers before the JS runs), and reserve exactly * the two boxes the JS will create. * crumbs: 14px x 1.25 = 17.5px + 16px margin-bottom * meta: 14px / 20px line + 24px margin-bottom * ------------------------------------------------------------------------- */ @supports selector(:has(*)) { .yb.yb-autoarch-post .post-single-page .entry-content > .yb-autoarch-post-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Each slot only exists while that block is still sitting in .entry-content. */ .yb.yb-autoarch-post .post-single-page:has(.yb-autoarch-crumbs) > .article-inner:not(:has(> .yb-autoarch-crumbs))::before { content: ""; display: block; max-width: 720px; height: 18px; margin: 0 auto 16px; } .yb.yb-autoarch-post .post-single-page:has(.yb-autoarch-meta) > .article-inner:not(:has(> .yb-autoarch-meta)) > .entry-header::before, .yb.yb-autoarch-post .post-single-page:has(.yb-autoarch-meta) > .article-inner:not(:has(> .yb-autoarch-meta)):not(:has(> .entry-header)) > .article-body-container::before { content: ""; display: block; height: 20px; margin-bottom: 24px; } } /* --------------------------------------------------------------------------- * 4. Product page gallery * assets/js/areas/pdp-top.js builds .yb-pdp-grid and then hides WoodMart's gallery * (.yb-pdp-ready). Until then the gallery is opacity:0 but still sets the column height, so the * page moved when the grid (2 columns, 390/470 tiles) replaced it. Giving the hidden gallery the * grid's own ratio makes the swap free. * one 2-column row = (width - gap) / 2 x 470/390 -> 0.6026 x width * inc/areas/fix-sp7-cls.php prints the real row count per product (1 image = one tall tile); * the default below (2 rows = 3 or 4 images) is only used if that rule is switched off. * ------------------------------------------------------------------------- */ .yb.single-product .product-images-inner:not(.yb-pdp-ready) > .woocommerce-product-gallery { aspect-ratio: 1 / calc(var(--yb-sp7-pdp-rows, 2) * 0.6026); overflow: hidden; } /* Phones: fix-a4-pdp.css turns the same grid into a full-width 390/470 swiper (one tile visible) plus a 32px dot row, so the reserved box is one tile tall whatever the image count is. */ @media (max-width: 767px) { .yb.single-product .product-images-inner:not(.yb-pdp-ready) > .woocommerce-product-gallery { aspect-ratio: 390 / 470; } } /* --------------------------------------------------------------------------- * 5. Google Maps facade (P8) + generic embed box * The facade is a real