/** * Taxonomy blocks — Material 3 opt-in variations for taxonomy LINKS (core/post-terms, * core/tag-cloud) and the Terms Query item (core/term-template). * * These are chip-SHAPED navigation links, NOT M3 filter chips: no selection state, no * aria-pressed, no toggle. A real filter chip (selected state / aria-pressed) is a * separate component for when a query-filter feature exists, and is not applied here. * * The neutral inline base (quiet typography + link colour) lives in theme.json; this * file owns only the opt-in geometry + state, scoped to .is-style-* so default * taxonomy links stay quiet inline text. The tag/badge geometry matches the Axismundi * template `.t-tag`: 28px tall, 8px radius, surface-container, 8px inline padding. */ /* ========================================================================= * core/post-terms * is-style-inline (default): quiet comma-separated links — theme.json base only. * ========================================================================= */ /* is-style-tags — every term becomes a compact tag link (28px, 8px radius). */ .wp-block-post-terms.is-style-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--50); } .wp-block-post-terms.is-style-tags.has-text-align-center { justify-content: center; } .wp-block-post-terms.is-style-tags.has-text-align-right { justify-content: flex-end; } .wp-block-post-terms.is-style-tags > a { box-sizing: border-box; display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: var(--wp--preset--spacing--100); border-radius: 8px; background-color: var(--wp--preset--color--surface-container); color: var(--wp--preset--color--on-surface-variant); text-decoration: none; } .wp-block-post-terms.is-style-tags > a:hover { background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) 8%, var(--wp--preset--color--surface-container)); } .wp-block-post-terms.is-style-tags > a:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; } .wp-block-post-terms.is-style-tags .wp-block-post-terms__separator { display: none; } /* is-style-badge — a single leading category as a tonal badge (media overlay / eyebrow). */ .wp-block-post-terms.is-style-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--50); } .wp-block-post-terms.is-style-badge.has-text-align-center { justify-content: center; } .wp-block-post-terms.is-style-badge.has-text-align-right { justify-content: flex-end; } .wp-block-post-terms.is-style-badge > a { box-sizing: border-box; display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: var(--wp--preset--spacing--100); border-radius: 8px; background-color: var(--wp--preset--color--secondary-container); color: var(--wp--preset--color--on-secondary-container); font-size: var(--wp--preset--font-size--label-large); text-decoration: none; } .wp-block-post-terms.is-style-badge > a:hover { background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) 8%, var(--wp--preset--color--secondary-container)); } .wp-block-post-terms.is-style-badge .wp-block-post-terms__separator { display: none; } /* ========================================================================= * ax_hashtag — the shared social vocabulary. A WordPress term name has no "#", * so the glyph supplies the hashtag marker the ActivityStreams name carries * inline elsewhere. The glyph is decorative; the link text carries the meaning. * ========================================================================= */ .wp-block-post-terms.taxonomy-ax_hashtag.is-style-tags > a::before { font-family: "Material Symbols Outlined", sans-serif; font-weight: normal; font-size: 1.125em; line-height: 1; margin-inline-end: var(--wp--preset--spacing--50); letter-spacing: normal; text-transform: none; white-space: nowrap; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; font-variation-settings: "FILL" var(--md-icon-fill, 0), "wght" var(--md-icon-wght, 400), "GRAD" var(--md-icon-grad, 0), "opsz" var(--md-icon-opsz, 20); } .wp-block-post-terms.taxonomy-ax_hashtag.is-style-tags > a::before { content: "tag"; } /* ========================================================================= * core/tag-cloud * is-style-tags — uniform tag links. Overrides the inline popularity font-size * (the variable size is a separate signal; tags are opt-in and drop it). * ========================================================================= */ .wp-block-tag-cloud.is-style-tags { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); } .wp-block-tag-cloud.is-style-tags .tag-cloud-link { box-sizing: border-box; margin: 0; /* reset core's .wp-block-tag-cloud a { margin-right:5px } so only the flex gap applies */ display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: var(--wp--preset--spacing--100); border-radius: 8px; background-color: var(--wp--preset--color--surface-container); color: var(--wp--preset--color--on-surface-variant); text-decoration: none; font-size: var(--wp--preset--font-size--label-medium) !important; } .wp-block-tag-cloud.is-style-tags .tag-cloud-link:hover { background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) 8%, var(--wp--preset--color--surface-container)); } .wp-block-tag-cloud.is-style-tags .tag-link-count { margin-inline-start: var(--wp--preset--spacing--50); color: var(--wp--preset--color--on-surface-variant); } /* ========================================================================= * core/term-template (inside core/terms-query) * Variations skin the repeated item; the item content stays pattern-owned. * ========================================================================= */ /* is-style-row — sidebar list rows: divider rhythm + trailing count. */ .wp-block-term-template.is-style-row > * { box-sizing: border-box; min-block-size: 48px; align-items: center; padding-block: var(--wp--preset--spacing--100); border-block-end: 1px solid var(--wp--preset--color--outline-variant); } .wp-block-term-template.is-style-row .wp-block-term-count { margin-inline-start: auto; color: var(--wp--preset--color--on-surface-variant); } /* is-style-card — category-discovery cards. */ .wp-block-term-template.is-style-card > * { box-sizing: border-box; padding: var(--wp--preset--spacing--300); border-radius: 12px; background-color: var(--wp--preset--color--surface-container-low); } /* ========================================================================= * core/categories (Categories / Terms List) + core/archives — is-style-row * The finished list widgets as the M3 divided list from the reference * `.t-aside__list`: transparent (no surface / radius — a wrapping pattern owns * those), hairline dividers between rows, name left + count right, count muted, * hover -> primary. * * Core renders the count as a BARE TEXT NODE after the (categories: ` (3)`, * archives: ` (1)`), not a wrapped element. display:grid turns that text * run into an anonymous grid item, so the count right-aligns and inherits the * row's on-surface-variant colour while the keeps on-surface — no PHP * filter / DOM rewrite needed. Whole-row click is intentionally NOT added: the * link text is the accessible target and the count stays inert. * * Scoped to the list mode — the dropdown wrapper has no
  • , so applying the * style there is a harmless no-op. * ========================================================================= */ .wp-block-categories.is-style-row, .wp-block-archives.is-style-row { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; } .wp-block-categories.is-style-row .children { list-style: none; margin: 0; padding: 0; } .wp-block-categories.is-style-row li, .wp-block-archives.is-style-row li { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--wp--preset--spacing--150); color: var(--wp--preset--color--on-surface-variant); /* the bare count text node */ } .wp-block-categories.is-style-row li:not(:last-child), .wp-block-archives.is-style-row li:not(:last-child) { border-block-end: 1px solid var(--wp--preset--color--outline-variant); } .wp-block-categories.is-style-row li > a, .wp-block-archives.is-style-row li > a { box-sizing: border-box; display: inline-flex; align-items: center; padding-block: var(--wp--preset--spacing--100); color: var(--wp--preset--color--on-surface); text-decoration: none; } .wp-block-categories.is-style-row li > a:hover, .wp-block-archives.is-style-row li > a:hover { color: var(--wp--preset--color--primary); } .wp-block-categories.is-style-row li > a:focus-visible, .wp-block-archives.is-style-row li > a:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; border-radius: 4px; } /* Hierarchy — the nested