wp-block-styles 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -175,4 +175,76 @@ Print styles are included via `@media print`. Embeds are replaced with a `[Embed
175
175
 
176
176
  ## Testing
177
177
 
178
- Open `test.html` directly in a browser to visually verify all block types at once. No build step or server required — it loads `index.css` via a relative path and uses placeholder images from picsum.photos.
178
+ Open `test.html` directly in a browser to visually verify all block types at once. No build step or server required — it loads `index.css` via a relative path and uses placeholder images from picsum.photos.
179
+
180
+ ## Headless quirks & known issues
181
+
182
+ ### Cover block child element duplication
183
+
184
+ In some WordPress configurations, `content.rendered` outputs the cover block's child elements — the background image, overlay span, and inner container — both inside **and** outside the `.wp-block-cover` wrapper. This is a WordPress block renderer bug; `wp-block-styles` cannot fix it with CSS alone.
185
+
186
+ If you encounter it, sanitize `content.rendered` before passing it to `dangerouslySetInnerHTML`:
187
+
188
+ ```js
189
+ import { parse } from 'node-html-parser'
190
+
191
+ function cleanCoverBlocks(html) {
192
+ const root = parse(html)
193
+ root.querySelectorAll('img.wp-block-cover__image-background').forEach(el => {
194
+ if (!el.closest('.wp-block-cover')) el.remove()
195
+ })
196
+ root.querySelectorAll('.wp-block-cover__background').forEach(el => {
197
+ if (!el.closest('.wp-block-cover')) el.remove()
198
+ })
199
+ root.querySelectorAll('.wp-block-cover__inner-container').forEach(el => {
200
+ if (!el.closest('.wp-block-cover')) el.remove()
201
+ })
202
+ return root.toString()
203
+ }
204
+
205
+ // Usage
206
+ const content = cleanCoverBlocks(post.content.rendered)
207
+ ```
208
+
209
+ Install `node-html-parser` separately — it is not a dependency of this package.
210
+
211
+ ### Cover block image not visible (object-fit)
212
+
213
+ WordPress applies `object-fit` to cover block images via a frontend script (`wp-polyfill-object-fit`) that does not run in headless environments. This package applies `object-fit: cover` directly via CSS attribute selectors so the image fills the container without that script:
214
+
215
+ ```css
216
+ .wp-block-cover__image-background[data-object-fit="cover"] { object-fit: cover; }
217
+ .wp-block-cover__image-background[data-object-fit="contain"] { object-fit: contain; }
218
+ ```
219
+
220
+ `object-position` focal points (set via `data-object-position`) cannot be polyfilled with CSS alone since `attr()` is not yet supported for non-`content` properties in current browsers. The inline `style` attribute WordPress emits (`style="object-position: 52% 64%"`) handles this automatically — no workaround needed.
221
+
222
+ ### Accordion block interactivity (wp-block-accordion)
223
+
224
+ The Accordion block (`core/accordion`, added in WordPress 6.7) uses the WordPress Interactivity API (`@wordpress/interactivity`) to toggle panels open and closed. This script does not run in headless environments, so all panels render with the `inert` attribute and stay hidden.
225
+
226
+ `wp-block-styles` overrides `inert` with `display: block` so panel content remains accessible:
227
+
228
+ ```css
229
+ .wp-block-accordion-panel[inert] {
230
+ display: block;
231
+ pointer-events: auto;
232
+ }
233
+ ```
234
+
235
+ This means accordions render as fully expanded static sections rather than interactive collapsed panels. If you need interactive accordions in headless, either:
236
+
237
+ - Use the **Details block** (`core/details`) instead — it uses native HTML `<details>`/`<summary>` elements with no JavaScript required
238
+ - Wire up your own toggle with a small client-side script targeting `.wp-block-accordion-heading__toggle`
239
+
240
+ ### Conflict with Tailwind Typography (`prose`)
241
+
242
+ Do not apply Tailwind's `prose` class to the same element as `wp-content`. The `@tailwindcss/typography` plugin processes and re-renders HTML content in a way that duplicates block elements and conflicts with `wp-block-styles` selectors on nearly every element. Use one or the other — `wp-block-styles` is the correct choice for rendering WordPress `content.rendered` output.
243
+
244
+ ### Social icons brand colors
245
+
246
+ WordPress injects per-service background colors via its own frontend stylesheet, which does not load in headless. `wp-block-styles` includes fallback brand colors for all common services (`wp-social-link-github`, `wp-social-link-youtube`, `wp-social-link-twitter`, etc.) so icons render correctly without WordPress's stylesheet.
247
+
248
+ ### Checkmark list class name (`is-style-checkmark-list`)
249
+
250
+ The Gutenberg editor emits `is-style-checkmark-list` for the checkmark list style. Earlier versions of this package targeted `is-style-checked-list` instead. Both are now supported for backwards compatibility.
package/index.css CHANGED
@@ -188,11 +188,13 @@
188
188
  list-style-type: lower-roman;
189
189
  }
190
190
 
191
+ .wp-block-list.is-style-checkmark-list,
191
192
  .wp-block-list.is-style-checked-list {
192
193
  list-style: none;
193
194
  padding-left: 0;
194
195
  }
195
196
 
197
+ .wp-block-list.is-style-checkmark-list li::before,
196
198
  .wp-block-list.is-style-checked-list li::before {
197
199
  content: "✓ ";
198
200
  font-weight: 700;
@@ -348,12 +350,22 @@
348
350
  background: var(--wp-button-bg);
349
351
  color: var(--wp-button-color);
350
352
  padding: 2rem;
353
+ border-color: transparent;
351
354
  }
352
355
 
353
356
  .wp-block-pullquote.is-style-solid-color a {
354
357
  color: #fff;
355
358
  }
356
359
 
360
+ .wp-block-pullquote.is-style-solid-color cite {
361
+ color: rgba(255, 255, 255, 0.6);
362
+ }
363
+
364
+ .wp-block-pullquote.is-style-solid-color code {
365
+ background: rgba(255, 255, 255, 0.15);
366
+ color: #fff;
367
+ }
368
+
357
369
  /* ─── 4. Image ──────────────────────────────────────────────────────────────── */
358
370
  .wp-block-image {
359
371
  margin: 1.75rem 0;
@@ -396,6 +408,8 @@
396
408
  list-style: none;
397
409
  }
398
410
 
411
+ .wp-block-gallery.columns-default,
412
+ .wp-block-gallery.is-layout-flex { display: grid; }
399
413
  .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
400
414
  .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
401
415
  .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
@@ -564,8 +578,10 @@
564
578
  padding: 1rem;
565
579
  }
566
580
 
567
- .wp-block-media-text.is-stacked-on-mobile {
568
- grid-template-columns: 1fr;
581
+ @media (max-width: 768px) {
582
+ .wp-block-media-text.is-stacked-on-mobile {
583
+ grid-template-columns: 1fr;
584
+ }
569
585
  }
570
586
 
571
587
  @media (max-width: 768px) {
@@ -606,6 +622,16 @@
606
622
  z-index: 0;
607
623
  }
608
624
 
625
+ /* WordPress sets data-object-fit via a frontend script that doesn't run in headless.
626
+ These rules ensure cover images are positioned correctly without that script. */
627
+ .wp-block-cover__image-background[data-object-fit="cover"] {
628
+ object-fit: cover;
629
+ }
630
+
631
+ .wp-block-cover__image-background[data-object-fit="contain"] {
632
+ object-fit: contain;
633
+ }
634
+
609
635
  .wp-block-cover__background,
610
636
  .wp-block-cover-image__background {
611
637
  position: absolute;
@@ -902,18 +928,49 @@
902
928
  }
903
929
 
904
930
  .wp-block-accordion-heading {
905
- padding: 0.9rem 1.1rem;
931
+ padding: 0;
906
932
  font-weight: 600;
907
933
  cursor: pointer;
908
934
  background: var(--wp-surface-bg);
909
935
  -webkit-user-select: none;
910
936
  user-select: none;
937
+ margin: 0;
938
+ }
939
+
940
+ .wp-block-accordion-heading__toggle {
941
+ display: flex;
942
+ align-items: center;
943
+ justify-content: space-between;
944
+ width: 100%;
945
+ padding: 0.9rem 1.1rem;
946
+ background: none;
947
+ border: none;
948
+ font-size: inherit;
949
+ font-weight: 600;
950
+ text-align: left;
951
+ cursor: pointer;
952
+ color: inherit;
953
+ }
954
+
955
+ .wp-block-accordion-heading__toggle-icon {
956
+ flex-shrink: 0;
957
+ margin-left: 1rem;
958
+ font-size: 1.2em;
959
+ font-weight: 300;
911
960
  }
912
961
 
962
+ /* The Interactivity API toggles inert and .is-open in a live WP environment.
963
+ In headless, the API script does not run so panels stay inert/hidden.
964
+ We override inert with display:block so content remains accessible. */
913
965
  .wp-block-accordion-panel {
914
966
  padding: 1rem 1.1rem;
915
967
  }
916
968
 
969
+ .wp-block-accordion-panel[inert] {
970
+ display: block;
971
+ pointer-events: auto;
972
+ }
973
+
917
974
  /* ─── 17. Social Icons ─────────────────────────────────────────────────────── */
918
975
  .wp-block-social-links {
919
976
  display: flex;
@@ -944,9 +1001,23 @@
944
1001
  }
945
1002
 
946
1003
  .wp-block-social-link svg {
947
- width: 1em;
948
- height: 1em;
1004
+ width: 1.1rem;
1005
+ height: 1.1rem;
949
1006
  fill: currentColor;
1007
+ display: block;
1008
+ flex-shrink: 0;
1009
+ }
1010
+
1011
+ .wp-block-social-link-label.screen-reader-text {
1012
+ position: absolute;
1013
+ width: 1px;
1014
+ height: 1px;
1015
+ padding: 0;
1016
+ margin: -1px;
1017
+ overflow: hidden;
1018
+ clip: rect(0, 0, 0, 0);
1019
+ white-space: nowrap;
1020
+ border: 0;
950
1021
  }
951
1022
 
952
1023
  /* Pill style */
@@ -964,6 +1035,26 @@
964
1035
  /* Default colors */
965
1036
  .wp-block-social-link-anchor { color: #fff; }
966
1037
 
1038
+ /* Default fallback background — WordPress normally injects inline colors per service */
1039
+ .wp-block-social-link { background: #444; }
1040
+
1041
+ /* Per-service brand colors */
1042
+ .wp-social-link-facebook { background: #1877f2; }
1043
+ .wp-social-link-twitter,
1044
+ .wp-social-link-x { background: #000; }
1045
+ .wp-social-link-instagram { background: #e1306c; }
1046
+ .wp-social-link-linkedin { background: #0a66c2; }
1047
+ .wp-social-link-youtube { background: #ff0000; }
1048
+ .wp-social-link-github { background: #24292e; }
1049
+ .wp-social-link-tiktok { background: #010101; }
1050
+ .wp-social-link-pinterest { background: #e60023; }
1051
+ .wp-social-link-snapchat { background: #fffc00; color: #000; }
1052
+ .wp-social-link-tumblr { background: #35465c; }
1053
+ .wp-social-link-reddit { background: #ff4500; }
1054
+ .wp-social-link-spotify { background: #1db954; }
1055
+ .wp-social-link-mastodon { background: #6364ff; }
1056
+ .wp-social-link-chain { background: #444; }
1057
+
967
1058
  /* ─── 17b. Social Embed Overrides (Twitter/X, Instagram, TikTok) ───────────── */
968
1059
 
969
1060
  /*
package/index.min.css CHANGED
@@ -1 +1,51 @@
1
- :root{--wp-content-max-width:860px;--wp-wide-max-width:1200px;--wp-gap:1.5rem;--wp-border-color:#e2e2e2;--wp-code-bg:#1e1e1e;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#f4f4f4;--wp-inline-code-color:#1a1a1a;--wp-blockquote-border:#888;--wp-pullquote-border:currentColor;--wp-caption-color:#6b6b6b;--wp-button-bg:#333;--wp-button-color:#fff;--wp-input-bg:#fff;--wp-input-color:inherit;--wp-scrollbar-color:#555;--wp-surface-bg:#f9f9f9;--wp-surface-alt-bg:#f5f5f5}.wp-content{max-width:var(--wp-content-max-width);margin:0 auto;padding:0;line-height:1.7;word-break:break-word;overflow-wrap:break-word}.wp-content *{box-sizing:border-box}.wp-content a{word-wrap:break-word}.wp-content a:visited{opacity:.8}.wp-block-paragraph,.wp-content p{margin-bottom:1.25rem}.wp-block-paragraph.has-drop-cap::first-letter{float:left;font-size:4em;line-height:.68;font-weight:700;margin:.1em .15em 0 0}.wp-block-heading,.wp-content h1,.wp-content h2,.wp-content h3,.wp-content h4,.wp-content h5,.wp-content h6{margin-top:2rem;margin-bottom:.75rem;line-height:1.25;font-weight:700}.wp-content h1:first-child,.wp-content h2:first-child,.wp-content h3:first-child{margin-top:0}.wp-content h1{font-size:2em}.wp-content h2{font-size:1.6em}.wp-content h3{font-size:1.35em}.wp-content h4{font-size:1.15em}.wp-content h5{font-size:1em}.wp-content h6{font-size:.9em}.wp-block-list,.wp-content ol,.wp-content ul{padding:0 0 0 1.5rem;margin-bottom:1.25rem}.wp-block-list li,.wp-content ol li,.wp-content ul li{margin-bottom:.35rem;line-height:1.6}.wp-block-list:not(ol),.wp-content ul{list-style-type:disc;list-style-position:outside}.wp-content ol ul,.wp-content ul ul{list-style-type:circle;list-style-position:outside;margin-left:1.25rem;padding-top:.25rem}.wp-content ul ul ul{list-style-type:square}.wp-block-list[type=ordered],.wp-content ol{list-style-type:decimal;list-style-position:outside}.wp-content ol ol,.wp-content ul ol{list-style-type:lower-latin;list-style-position:outside;margin-left:1.25rem;padding-top:.25rem}.wp-content ol ol ol{list-style-type:lower-roman}.wp-block-list.is-style-checked-list{list-style:none;padding-left:0}.wp-block-list.is-style-checked-list li::before{content:"✓ ";font-weight:700}.wp-block-preformatted{font-family:monospace;font-size:.9em;white-space:pre-wrap;background:var(--wp-code-bg);color:var(--wp-code-color);padding:1.25rem;border-radius:4px;overflow-x:auto;margin:1.75rem 0}.wp-block-code{background:var(--wp-code-bg);color:var(--wp-code-color);border-radius:4px;margin:1.75rem 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--wp-scrollbar-color) var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar{height:6px;background:var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar-track{background:var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar-thumb{background-color:var(--wp-scrollbar-color);border-radius:10px}.wp-block-code code{display:block;padding:1.25rem;font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:.875em;line-height:1.6;white-space:pre}.wp-content code{font-family:SFMono-Regular,Consolas,monospace;font-size:.875em;background:var(--wp-inline-code-bg);color:var(--wp-inline-code-color);padding:.15em .4em;border-radius:3px}.wp-block-code code{background:0 0;color:inherit;padding:12px;border-radius:0;font-size:inherit}.wp-block-verse{font-family:inherit;font-style:italic;white-space:pre-wrap;padding:1rem 1.5rem;margin:1.75rem 0;border-left:3px solid var(--wp-blockquote-border)}.wp-block-footnotes{font-size:.85em;color:var(--wp-caption-color);border-top:1px solid var(--wp-border-color);margin-top:2.5rem;padding-top:1rem}.wp-block-footnotes ol{padding-left:1.25rem}.wp-block-quote{border-left:4px solid var(--wp-blockquote-border);margin:2rem 0;padding:1rem 1.5rem}.wp-block-quote p{margin:0 0 .5rem;font-style:italic}.wp-block-quote cite{display:block;font-size:.85em;color:var(--wp-caption-color);font-style:normal}.wp-block-quote.is-large,.wp-block-quote.is-style-large{border-left:none;padding:2rem 2.5rem;text-align:center}.wp-block-quote.is-large p,.wp-block-quote.is-style-large p{font-size:1.4em;font-weight:300}.wp-block-pullquote{border-top:4px solid var(--wp-pullquote-border);border-bottom:4px solid var(--wp-pullquote-border);margin:2rem 0;padding:1.5rem 0;text-align:center}.wp-block-pullquote blockquote{margin:0}.wp-block-pullquote p{font-size:1.4em;font-style:italic;font-weight:300}.wp-block-pullquote cite{font-size:.85em;color:var(--wp-caption-color);font-style:normal}.wp-block-pullquote.is-style-solid-color{background:var(--wp-button-bg);color:var(--wp-button-color);padding:2rem}.wp-block-pullquote.is-style-solid-color a{color:#fff}.wp-block-image{margin:1.75rem 0}.wp-block-image img{max-width:100%;height:auto;display:block}.wp-block-image figure{margin:0}.wp-block-image .wp-element-caption,.wp-block-image figcaption{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin-top:.5rem}.wp-block-image.is-style-rounded img{border-radius:9999px}.wp-block-image.is-style-default img{border-radius:0}.wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--wp-gap);margin:1.75rem 0;padding:0;list-style:none}.wp-block-gallery.columns-1{grid-template-columns:1fr}.wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}.wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}.wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)}.wp-block-gallery.columns-5{grid-template-columns:repeat(5,1fr)}.wp-block-gallery.columns-6{grid-template-columns:repeat(6,1fr)}.wp-block-gallery .wp-block-image,.wp-block-gallery figure{margin:0}.wp-block-gallery .wp-block-image img{width:100%;height:100%;object-fit:cover}.wp-block-gallery .wp-element-caption,.wp-block-gallery figcaption{font-size:.8em;color:var(--wp-caption-color);text-align:center;margin-top:.35rem}@media (max-width:640px){.wp-block-gallery.columns-3,.wp-block-gallery.columns-4,.wp-block-gallery.columns-5,.wp-block-gallery.columns-6{grid-template-columns:repeat(2,1fr)}}.wp-block-video{margin:1.75rem 0}.wp-block-video video{width:100%;height:auto;display:block}.wp-block-video .wp-element-caption,.wp-block-video figcaption{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin-top:.5rem}.wp-block-audio{margin:1.75rem 0}.wp-block-audio audio{width:100%;display:block}.wp-block-audio .wp-element-caption,.wp-block-audio figcaption{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin-top:.5rem}.wp-block-embed{margin:1.75rem 0}.wp-block-embed__wrapper{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden}.wp-block-embed__wrapper embed,.wp-block-embed__wrapper iframe,.wp-block-embed__wrapper object,.wp-block-embed__wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.wp-block-embed.is-type-video.wp-embed-aspect-4-3 .wp-block-embed__wrapper,.wp-block-embed[class*=wp-embed-aspect-4-3] .wp-block-embed__wrapper{padding-bottom:75%}.wp-block-embed[class*=wp-embed-aspect-1-1] .wp-block-embed__wrapper{padding-bottom:100%}.wp-block-embed[class*=wp-embed-aspect-9-16] .wp-block-embed__wrapper{padding-bottom:177.78%}.wp-block-embed[class*=wp-embed-aspect-21-9] .wp-block-embed__wrapper{padding-bottom:42.86%}.wp-block-embed.is-type-rich .wp-block-embed__wrapper{height:auto;padding-bottom:0}.wp-block-embed.is-type-rich .wp-block-embed__wrapper iframe{position:static;width:100%;height:auto}.wp-block-embed .wp-element-caption,.wp-block-embed figcaption{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin-top:.5rem}.wp-block-media-text{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp-gap);align-items:center;margin:1.75rem 0}.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 1fr}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:1}.wp-block-media-text__media img,.wp-block-media-text__media video{width:100%;height:auto;display:block}.wp-block-media-text__content{padding:1rem}.wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr}@media (max-width:768px){.wp-block-media-text{grid-template-columns:1fr}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:0}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:0}}.wp-block-cover{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:430px;margin:1.75rem 0;background-size:cover;background-position:center}.wp-block-cover__image-background,.wp-block-cover__video-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.wp-block-cover-image__background,.wp-block-cover__background{position:absolute;inset:0;z-index:1}.wp-block-cover__inner-container{position:relative;z-index:2;width:100%;max-width:var(--wp-content-max-width);padding:2rem;color:#fff;text-align:center}.wp-block-cover.has-left-content .wp-block-cover__inner-container{text-align:left}.wp-block-cover.has-right-content .wp-block-cover__inner-container{text-align:right}.wp-block-cover.is-light .wp-block-cover__inner-container{color:#333}.wp-block-columns{display:flex;flex-wrap:wrap;gap:var(--wp-gap);margin:1.75rem 0}.wp-block-column{flex:1 1 0%;min-width:0}.wp-block-columns.is-not-stacked-on-mobile .wp-block-column{flex-wrap:nowrap}@media (max-width:768px){.wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column}.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column{flex-basis:100%!important}}.wp-block-group{margin:1.75rem 0}.wp-block-group.is-layout-flex{display:flex;flex-wrap:wrap;gap:var(--wp-gap);align-items:center}.wp-block-group.is-layout-grid{display:grid;gap:var(--wp-gap)}.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0}.wp-block-buttons.is-vertical{flex-direction:column;align-items:flex-start}.wp-block-button{display:inline-flex}.wp-block-button__link{display:inline-block;padding:.65em 1.4em;background:var(--wp-button-bg);color:var(--wp-button-color);text-decoration:none;border-radius:4px;font-weight:600;font-size:.95em;transition:opacity .15s ease;cursor:pointer;border:none}.wp-block-button__link:hover{opacity:.85;color:#fff}.wp-block-button.is-style-outline .wp-block-button__link{background:0 0;border:2px solid currentColor;color:inherit}.wp-block-button.is-style-outline .wp-block-button__link:hover{opacity:.75}.wp-block-button.is-style-fill .wp-block-button__link{background:var(--wp-button-bg);color:var(--wp-button-color)}.wp-block-table{margin:1.75rem 0;overflow-x:auto}.wp-block-table table{width:100%;border-collapse:collapse;font-size:.95em}.wp-block-table td,.wp-block-table th{padding:.6rem .9rem;border:1px solid var(--wp-border-color);text-align:left;vertical-align:top}.wp-block-table th{background:var(--wp-surface-alt-bg);font-weight:700}.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:var(--wp-surface-bg)}.wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th{border-color:transparent}.wp-block-table .wp-element-caption,.wp-block-table figcaption{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin-top:.5rem}.wp-block-separator{border:none;border-top:2px solid var(--wp-border-color);margin:2rem auto;width:100%}.wp-block-separator.is-style-wide{width:100%}.wp-block-separator.is-style-dots{border:none;text-align:center;height:1.5rem}.wp-block-separator.is-style-dots::before{content:"· · ·";font-size:1.4em;letter-spacing:.6em;color:var(--wp-caption-color)}.wp-block-spacer{display:block}.wp-block-file{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--wp-border-color);border-radius:4px;margin:1.75rem 0}.wp-block-file .wp-block-file__content-wrapper{flex:1}.wp-block-file .wp-block-file__textlink{font-weight:600;text-decoration:none}.wp-block-file .wp-block-file__textlink:hover{text-decoration:underline}.wp-block-file .wp-block-file__button{display:inline-block;padding:.5em 1em;background:var(--wp-button-bg);color:var(--wp-button-color);text-decoration:none;border-radius:4px;font-size:.85em;white-space:nowrap}.wp-block-file .wp-block-file__button:hover{opacity:.85;color:#fff}.wp-block-details{margin:1.75rem 0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-details>summary{padding:.9rem 1.1rem;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;justify-content:space-between;background:var(--wp-surface-bg)}.wp-block-details>summary::-webkit-details-marker{display:none}.wp-block-details>summary::after{content:"+";font-size:1.2em;font-weight:300;transition:transform .2s ease}.wp-block-details[open]>summary::after{content:"−"}.wp-block-details>:not(summary){padding:.9rem 1.1rem}.wp-block-accordion{margin:1.75rem 0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-accordion-item{border-bottom:1px solid var(--wp-border-color)}.wp-block-accordion-item:last-child{border-bottom:none}.wp-block-accordion-heading{padding:.9rem 1.1rem;font-weight:600;cursor:pointer;background:var(--wp-surface-bg);-webkit-user-select:none;user-select:none}.wp-block-accordion-panel{padding:1rem 1.1rem}.wp-block-social-links{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;margin:1.75rem 0}.wp-block-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;overflow:hidden}.wp-block-social-link a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}.wp-block-social-link svg{width:1em;height:1em;fill:currentColor}.wp-block-social-links.is-style-pill-shape .wp-block-social-link{border-radius:9999px;padding:0 .75rem;width:auto}.wp-block-social-links.is-style-logos-only .wp-block-social-link{background:0 0!important}.wp-block-social-link-anchor{color:#fff}blockquote.twitter-tweet{display:flex;flex-direction:column;border-left:3px solid #1da1f2;padding:1rem 1rem 2rem 1.25rem;margin:1.75rem 0;font-style:italic;background:0 0}blockquote.twitter-tweet p{margin:0 0 .75rem}blockquote.twitter-tweet a{color:#1da1f2;word-break:break-word}.is-provider-twitter,.wp-block-embed-twitter{display:flex}.is-provider-twitter>.wp-block-embed__wrapper,.wp-block-embed-twitter>.wp-block-embed__wrapper{position:static;height:auto;padding-bottom:0!important;width:100%}.is-provider-twitter .twitter-tweet,.wp-block-embed-twitter .twitter-tweet{height:100%}.is-provider-twitter iframe,.wp-block-embed-twitter iframe{position:static;width:100%!important;max-width:550px;height:auto!important}.instagram-media{border-radius:4px;margin:1.5rem auto!important;max-width:540px!important}.tiktok-embed{border-radius:4px;margin:1.5rem auto;max-width:605px}.tiktok-embed a{word-break:break-word}.wp-block-search{margin:1.75rem 0}.wp-block-search__inside-wrapper{display:flex;align-items:stretch;gap:0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-search__input{flex:1;padding:.6rem .9rem;border:none;font-size:1em;outline:0;background:var(--wp-input-bg);color:var(--wp-input-color)}.wp-block-search__button{padding:.6rem 1rem;background:var(--wp-button-bg);color:var(--wp-button-color);border:none;cursor:pointer;font-size:.9em;font-weight:600;white-space:nowrap}.wp-block-search__button:hover{background:#555}.wp-block-search__label{display:block;font-size:.85em;font-weight:600;margin-bottom:.35rem}.wp-block-latest-posts{padding:0;list-style:none;margin:1.75rem 0}.wp-block-latest-posts__post-title{font-weight:600;text-decoration:none;display:block}.wp-block-latest-posts__post-title:hover{text-decoration:underline}.wp-block-latest-posts__post-date{font-size:.8em;color:var(--wp-caption-color);display:block;margin-bottom:.35rem}.wp-block-latest-posts__post-excerpt{font-size:.9em;margin-top:.25rem}.wp-block-latest-posts.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--wp-gap)}.wp-block-latest-comments{padding:0;list-style:none;margin:1.75rem 0}.wp-block-latest-comments__comment{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--wp-border-color)}.wp-block-latest-comments__comment-meta{font-size:.85em;color:var(--wp-caption-color)}.wp-block-math{margin:1.75rem 0;overflow-x:auto;overflow-y:hidden}.wp-block-math .math-inline,.wp-block-math math{display:block;font-size:1.1em;line-height:1.6}.math-inline{display:inline;font-size:1em}.MathJax,.katex-display{overflow-x:auto;overflow-y:hidden;padding:.25rem 0}.wp-block-navigation{display:flex;flex-wrap:wrap;gap:.5rem}.wp-block-navigation-item{list-style:none}.wp-block-navigation-item__content{text-decoration:none;padding:.25rem .5rem;display:block}.alignwide{max-width:var(--wp-wide-max-width);margin-left:auto;margin-right:auto;width:100%}.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.alignleft{float:left;margin:0 1.5rem 1rem 0;max-width:50%}.alignright{float:right;margin:0 0 1rem 1.5rem;max-width:50%}.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-content::after{content:"";display:table;clear:both}@media (max-width:640px){.alignleft,.alignright{float:none;margin:1rem 0;max-width:100%}}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.has-text-align-right{text-align:right}.has-background{padding:1.25rem 1.5rem}[class*=has-][class*="-background-color"]{padding:.2em 0}.has-black-color{color:#000}.has-white-color{color:#fff}.has-cyan-bluish-gray-color{color:#abb8c3}.has-pale-pink-color{color:#f78da7}.has-vivid-red-color{color:#cf2e2e}.has-luminous-vivid-orange-color{color:#ff6900}.has-luminous-vivid-amber-color{color:#fcb900}.has-light-green-cyan-color{color:#7bdcb5}.has-vivid-green-cyan-color{color:#00d084}.has-pale-cyan-blue-color{color:#8ed1fc}.has-vivid-cyan-blue-color{color:#0693e3}.has-vivid-purple-color{color:#9b51e0}.has-black-background-color{background-color:#000}.has-white-background-color{background-color:#fff}.has-cyan-bluish-gray-background-color{background-color:#abb8c3}.has-pale-pink-background-color{background-color:#f78da7}.has-vivid-red-background-color{background-color:#cf2e2e}.has-luminous-vivid-orange-background-color{background-color:#ff6900}.has-luminous-vivid-amber-background-color{background-color:#fcb900}.has-light-green-cyan-background-color{background-color:#7bdcb5}.has-vivid-green-cyan-background-color{background-color:#00d084}.has-pale-cyan-blue-background-color{background-color:#8ed1fc}.has-vivid-cyan-blue-background-color{background-color:#0693e3}.has-vivid-purple-background-color{background-color:#9b51e0}.has-small-font-size{font-size:.8em}.has-medium-font-size{font-size:1em}.has-large-font-size{font-size:1.4em}.has-x-large-font-size{font-size:1.8em}.has-xx-large-font-size{font-size:2.4em}.has-huge-font-size{font-size:2.8em}.wp-block-freeform{line-height:1.7}.wp-caption{max-width:100%;margin:1rem 0}.wp-caption img{display:block;max-width:100%;height:auto}.wp-caption p,.wp-caption-text{font-size:.85em;color:var(--wp-caption-color);text-align:center;margin:.35rem 0 0}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--wp-border-color:#333;--wp-code-bg:#111;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#1a1a1a;--wp-inline-code-color:#f8f8f2;--wp-blockquote-border:#555;--wp-caption-color:#aaa;--wp-button-bg:#555;--wp-button-color:#fff;--wp-input-bg:#1a1a1a;--wp-input-color:#f0f0f0;--wp-scrollbar-color:#666;--wp-surface-bg:#1a1a1a;--wp-surface-alt-bg:#1a1a1a}:root:not([data-theme=light]) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:#161616}:root:not([data-theme=light]) .wp-block-latest-comments__comment{border-bottom-color:#333}}[data-theme=dark]{--wp-border-color:#333;--wp-code-bg:#111;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#1a1a1a;--wp-inline-code-color:#f8f8f2;--wp-blockquote-border:#555;--wp-caption-color:#aaa;--wp-button-bg:#555;--wp-button-color:#fff;--wp-input-bg:#1a1a1a;--wp-input-color:#f0f0f0;--wp-scrollbar-color:#666;--wp-surface-bg:#1a1a1a;--wp-surface-alt-bg:#1a1a1a}[data-theme=dark] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:#161616}[data-theme=dark] .wp-block-latest-comments__comment{border-bottom-color:#333}@media print{.wp-block-button,.wp-block-buttons,.wp-block-cover__video-background,.wp-block-navigation,.wp-block-search,.wp-block-social-links{display:none!important}.alignfull,.alignwide{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}.alignleft,.alignright{float:none!important;max-width:100%!important;margin:1rem 0!important}.wp-block-gallery .wp-block-image img,.wp-block-image img,.wp-block-media-text__media img{max-width:100%!important;height:auto!important}.wp-block-embed{border:1px solid #ccc;padding:1rem;text-align:center;font-size:.85em;color:#666}.wp-block-embed__wrapper{position:static!important;height:auto!important;padding-bottom:0!important}.wp-block-embed__wrapper iframe{display:none!important}.wp-block-embed::before{content:"[Embedded media — view online]";display:block}.wp-block-code,.wp-block-preformatted{overflow:visible!important;white-space:pre-wrap!important;border:1px solid #ccc}.wp-block-columns{flex-direction:column!important}.wp-block-code,.wp-block-image,.wp-block-pullquote,.wp-block-quote,.wp-block-table{break-inside:avoid;page-break-inside:avoid}.wp-content a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#555;word-break:break-all}.wp-block-button__link::after,.wp-block-navigation-item__content::after{content:none!important}}
1
+ /**
2
+ * wp-block-styles.css
3
+ * Comprehensive styles for WordPress Gutenberg block classes
4
+ * rendered via the WP REST API in a headless/Next.js context.
5
+ *
6
+ * Usage (global):
7
+ * import 'wp-block-styles.css' // in _app.js or app/layout.tsx
8
+ *
9
+ * Usage (scoped to a wrapper):
10
+ * All selectors are prefixed with .wp-content so you can scope
11
+ * by adding className="wp-content" to your post content wrapper.
12
+ * In that case, use: import 'wp-block-styles.css' anywhere above the component.
13
+ *
14
+ * Caching:
15
+ * This file is static and side-effect free — safe to cache aggressively.
16
+ * Recommended Cache-Control: public, max-age=31536000, immutable
17
+ * Rename or version the file on updates (e.g. wp-block-styles.v2.css)
18
+ *
19
+ * ─────────────────────────────────────────────────────────────────────────────
20
+ * TABLE OF CONTENTS
21
+ * 1. Reset & Base
22
+ * 2. Typography (paragraph, heading, list, preformatted, code, poetry)
23
+ * 3. Quote & Pullquote
24
+ * 4. Image
25
+ * 5. Gallery
26
+ * 6. Video & Audio
27
+ * 7. Embed (iframe / oEmbed)
28
+ * 8. Media & Text
29
+ * 9. Cover
30
+ * 10. Columns & Column
31
+ * 11. Group
32
+ * 12. Buttons & Button
33
+ * 13. Table
34
+ * 14. Separator & Spacer
35
+ * 15. File Download
36
+ * 16. Details / Accordion
37
+ * 17. Social Icons
38
+ * 18. Search Block
39
+ * 19. Latest Posts / Latest Comments
40
+ * 20. Math (MathML / LaTeX)
41
+ * 21. Navigation (minimal reset)
42
+ * 22. Alignment Utilities (alignwide, alignfull, alignleft, alignright)
43
+ * 23. Has-text-align helpers
44
+ * 24. Color & Gradient utility classes
45
+ * 25. Legacy / Classic Editor classes
46
+ * 26. Dark Mode (@media prefers-color-scheme: dark) + [data-theme="dark"]
47
+ * 27. Print (@media print)
48
+ * ─────────────────────────────────────────────────────────────────────────────
49
+ */
50
+
51
+ :root{--wp-content-max-width:860px;--wp-wide-max-width:1200px;--wp-gap:1.5rem;--wp-border-color:#e2e2e2;--wp-code-bg:#1e1e1e;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#f4f4f4;--wp-inline-code-color:#1a1a1a;--wp-blockquote-border:#888;--wp-pullquote-border:currentColor;--wp-caption-color:#6b6b6b;--wp-button-bg:#333;--wp-button-color:#fff;--wp-input-bg:#fff;--wp-input-color:inherit;--wp-scrollbar-color:#555;--wp-surface-bg:#f9f9f9;--wp-surface-alt-bg:#f5f5f5}.wp-content{max-width:var(--wp-content-max-width);margin:0 auto;padding:0;line-height:1.7;word-break:break-word;overflow-wrap:break-word}.wp-content *{box-sizing:border-box}.wp-content a{word-wrap:break-word}.wp-content a:visited{opacity:0.8}.wp-block-paragraph,.wp-content p{margin-bottom:1.25rem}.wp-block-paragraph.has-drop-cap::first-letter{float:left;font-size:4em;line-height:0.68;font-weight:700;margin:0.1em 0.15em 0 0}.wp-block-heading,.wp-content h1,.wp-content h2,.wp-content h3,.wp-content h4,.wp-content h5,.wp-content h6{margin-top:2rem;margin-bottom:0.75rem;line-height:1.25;font-weight:700}.wp-content h1:first-child,.wp-content h2:first-child,.wp-content h3:first-child{margin-top:0}.wp-content h1{font-size:2em}.wp-content h2{font-size:1.6em}.wp-content h3{font-size:1.35em}.wp-content h4{font-size:1.15em}.wp-content h5{font-size:1em}.wp-content h6{font-size:0.9em}.wp-block-list,.wp-content ul,.wp-content ol{padding:0 0 0 1.5rem;margin-bottom:1.25rem}.wp-block-list li,.wp-content ul li,.wp-content ol li{margin-bottom:0.35rem;line-height:1.6}.wp-content ul,.wp-block-list:not(ol){list-style-type:disc;list-style-position:outside}.wp-content ul ul,.wp-content ol ul{list-style-type:circle;list-style-position:outside;margin-left:1.25rem;padding-top:0.25rem}.wp-content ul ul ul{list-style-type:square}.wp-content ol,.wp-block-list[type="ordered"]{list-style-type:decimal;list-style-position:outside}.wp-content ol ol,.wp-content ul ol{list-style-type:lower-latin;list-style-position:outside;margin-left:1.25rem;padding-top:0.25rem}.wp-content ol ol ol{list-style-type:lower-roman}.wp-block-list.is-style-checkmark-list,.wp-block-list.is-style-checked-list{list-style:none;padding-left:0}.wp-block-list.is-style-checkmark-list li::before,.wp-block-list.is-style-checked-list li::before{content:"✓ ";font-weight:700}.wp-block-preformatted{font-family:monospace;font-size:0.9em;white-space:pre-wrap;background:var(--wp-code-bg);color:var(--wp-code-color);padding:1.25rem;border-radius:4px;overflow-x:auto;margin:1.75rem 0}.wp-block-code{background:var(--wp-code-bg);color:var(--wp-code-color);border-radius:4px;margin:1.75rem 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--wp-scrollbar-color) var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar{height:6px;background:var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar-track{background:var(--wp-code-bg)}.wp-block-code::-webkit-scrollbar-thumb{background-color:var(--wp-scrollbar-color);border-radius:10px}.wp-block-code code{display:block;padding:1.25rem;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:0.875em;line-height:1.6;white-space:pre}.wp-content code{font-family:"SFMono-Regular",Consolas,monospace;font-size:0.875em;background:var(--wp-inline-code-bg);color:var(--wp-inline-code-color);padding:0.15em 0.4em;border-radius:3px}.wp-block-code code{background:transparent;color:inherit;padding:12px;border-radius:0;font-size:inherit}.wp-block-verse{font-family:inherit;font-style:italic;white-space:pre-wrap;padding:1rem 1.5rem;margin:1.75rem 0;border-left:3px solid var(--wp-blockquote-border)}.wp-block-footnotes{font-size:0.85em;color:var(--wp-caption-color);border-top:1px solid var(--wp-border-color);margin-top:2.5rem;padding-top:1rem}.wp-block-footnotes ol{padding-left:1.25rem}.wp-block-quote{border-left:4px solid var(--wp-blockquote-border);margin:2rem 0;padding:1rem 1.5rem}.wp-block-quote p{margin:0 0 0.5rem;font-style:italic}.wp-block-quote cite{display:block;font-size:0.85em;color:var(--wp-caption-color);font-style:normal}.wp-block-quote.is-style-large,.wp-block-quote.is-large{border-left:none;padding:2rem 2.5rem;text-align:center}.wp-block-quote.is-style-large p,.wp-block-quote.is-large p{font-size:1.4em;font-weight:300}.wp-block-pullquote{border-top:4px solid var(--wp-pullquote-border);border-bottom:4px solid var(--wp-pullquote-border);margin:2rem 0;padding:1.5rem 0;text-align:center}.wp-block-pullquote blockquote{margin:0}.wp-block-pullquote p{font-size:1.4em;font-style:italic;font-weight:300}.wp-block-pullquote cite{font-size:0.85em;color:var(--wp-caption-color);font-style:normal}.wp-block-pullquote.is-style-solid-color{background:var(--wp-button-bg);color:var(--wp-button-color);padding:2rem;border-color:transparent}.wp-block-pullquote.is-style-solid-color a{color:#fff}.wp-block-pullquote.is-style-solid-color cite{color:rgba(255,255,255,0.6)}.wp-block-pullquote.is-style-solid-color code{background:rgba(255,255,255,0.15);color:#fff}.wp-block-image{margin:1.75rem 0}.wp-block-image img{max-width:100%;height:auto;display:block}.wp-block-image figure{margin:0}.wp-block-image figcaption,.wp-block-image .wp-element-caption{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin-top:0.5rem}.wp-block-image.is-style-rounded img{border-radius:9999px}.wp-block-image.is-style-default img{border-radius:0}.wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--wp-gap);margin:1.75rem 0;padding:0;list-style:none}.wp-block-gallery.columns-default,.wp-block-gallery.is-layout-flex{display:grid}.wp-block-gallery.columns-1{grid-template-columns:1fr}.wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}.wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}.wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)}.wp-block-gallery.columns-5{grid-template-columns:repeat(5,1fr)}.wp-block-gallery.columns-6{grid-template-columns:repeat(6,1fr)}.wp-block-gallery .wp-block-image,.wp-block-gallery figure{margin:0}.wp-block-gallery .wp-block-image img{width:100%;height:100%;object-fit:cover}.wp-block-gallery figcaption,.wp-block-gallery .wp-element-caption{font-size:0.8em;color:var(--wp-caption-color);text-align:center;margin-top:0.35rem}@media (max-width:640px){.wp-block-gallery.columns-3,.wp-block-gallery.columns-4,.wp-block-gallery.columns-5,.wp-block-gallery.columns-6{grid-template-columns:repeat(2,1fr)}}.wp-block-video{margin:1.75rem 0}.wp-block-video video{width:100%;height:auto;display:block}.wp-block-video figcaption,.wp-block-video .wp-element-caption{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin-top:0.5rem}.wp-block-audio{margin:1.75rem 0}.wp-block-audio audio{width:100%;display:block}.wp-block-audio figcaption,.wp-block-audio .wp-element-caption{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin-top:0.5rem}.wp-block-embed{margin:1.75rem 0}.wp-block-embed__wrapper{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden}.wp-block-embed__wrapper iframe,.wp-block-embed__wrapper video,.wp-block-embed__wrapper object,.wp-block-embed__wrapper embed{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.wp-block-embed.is-type-video.wp-embed-aspect-4-3 .wp-block-embed__wrapper,.wp-block-embed[class*="wp-embed-aspect-4-3"] .wp-block-embed__wrapper{padding-bottom:75%}.wp-block-embed[class*="wp-embed-aspect-1-1"] .wp-block-embed__wrapper{padding-bottom:100%}.wp-block-embed[class*="wp-embed-aspect-9-16"] .wp-block-embed__wrapper{padding-bottom:177.78%}.wp-block-embed[class*="wp-embed-aspect-21-9"] .wp-block-embed__wrapper{padding-bottom:42.86%}.wp-block-embed.is-type-rich .wp-block-embed__wrapper{height:auto;padding-bottom:0}.wp-block-embed.is-type-rich .wp-block-embed__wrapper iframe{position:static;width:100%;height:auto}.wp-block-embed figcaption,.wp-block-embed .wp-element-caption{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin-top:0.5rem}.wp-block-media-text{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp-gap);align-items:center;margin:1.75rem 0}.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 1fr}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:1}.wp-block-media-text__media img,.wp-block-media-text__media video{width:100%;height:auto;display:block}.wp-block-media-text__content{padding:1rem}@media (max-width:768px){.wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr}}@media (max-width:768px){.wp-block-media-text{grid-template-columns:1fr}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:0}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:0}}.wp-block-cover{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:430px;margin:1.75rem 0;background-size:cover;background-position:center}.wp-block-cover__image-background,.wp-block-cover__video-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.wp-block-cover__image-background[data-object-fit="cover"]{object-fit:cover}.wp-block-cover__image-background[data-object-fit="contain"]{object-fit:contain}.wp-block-cover__background,.wp-block-cover-image__background{position:absolute;inset:0;z-index:1}.wp-block-cover__inner-container{position:relative;z-index:2;width:100%;max-width:var(--wp-content-max-width);padding:2rem;color:#fff;text-align:center}.wp-block-cover.has-left-content .wp-block-cover__inner-container{text-align:left}.wp-block-cover.has-right-content .wp-block-cover__inner-container{text-align:right}.wp-block-cover.is-light .wp-block-cover__inner-container{color:#333}.wp-block-columns{display:flex;flex-wrap:wrap;gap:var(--wp-gap);margin:1.75rem 0}.wp-block-column{flex:1 1 0%;min-width:0}.wp-block-columns.is-not-stacked-on-mobile .wp-block-column{flex-wrap:nowrap}@media (max-width:768px){.wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column}.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column{flex-basis:100% !important}}.wp-block-group{margin:1.75rem 0}.wp-block-group.is-layout-flex{display:flex;flex-wrap:wrap;gap:var(--wp-gap);align-items:center}.wp-block-group.is-layout-grid{display:grid;gap:var(--wp-gap)}.wp-block-buttons{display:flex;flex-wrap:wrap;gap:0.75rem;margin:1.75rem 0}.wp-block-buttons.is-vertical{flex-direction:column;align-items:flex-start}.wp-block-button{display:inline-flex}.wp-block-button__link{display:inline-block;padding:0.65em 1.4em;background:var(--wp-button-bg);color:var(--wp-button-color);text-decoration:none;border-radius:4px;font-weight:600;font-size:0.95em;transition:opacity 0.15s ease;cursor:pointer;border:none}.wp-block-button__link:hover{opacity:0.85;color:#fff}.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border:2px solid currentColor;color:inherit}.wp-block-button.is-style-outline .wp-block-button__link:hover{opacity:0.75}.wp-block-button.is-style-fill .wp-block-button__link{background:var(--wp-button-bg);color:var(--wp-button-color)}.wp-block-table{margin:1.75rem 0;overflow-x:auto}.wp-block-table table{width:100%;border-collapse:collapse;font-size:0.95em}.wp-block-table th,.wp-block-table td{padding:0.6rem 0.9rem;border:1px solid var(--wp-border-color);text-align:left;vertical-align:top}.wp-block-table th{background:var(--wp-surface-alt-bg);font-weight:700}.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:var(--wp-surface-bg)}.wp-block-table.is-style-stripes th,.wp-block-table.is-style-stripes td{border-color:transparent}.wp-block-table figcaption,.wp-block-table .wp-element-caption{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin-top:0.5rem}.wp-block-separator{border:none;border-top:2px solid var(--wp-border-color);margin:2rem auto;width:100%}.wp-block-separator.is-style-wide{width:100%}.wp-block-separator.is-style-dots{border:none;text-align:center;height:1.5rem}.wp-block-separator.is-style-dots::before{content:"· · ·";font-size:1.4em;letter-spacing:0.6em;color:var(--wp-caption-color)}.wp-block-spacer{display:block}.wp-block-file{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--wp-border-color);border-radius:4px;margin:1.75rem 0}.wp-block-file .wp-block-file__content-wrapper{flex:1}.wp-block-file .wp-block-file__textlink{font-weight:600;text-decoration:none}.wp-block-file .wp-block-file__textlink:hover{text-decoration:underline}.wp-block-file .wp-block-file__button{display:inline-block;padding:0.5em 1em;background:var(--wp-button-bg);color:var(--wp-button-color);text-decoration:none;border-radius:4px;font-size:0.85em;white-space:nowrap}.wp-block-file .wp-block-file__button:hover{opacity:0.85;color:#fff}.wp-block-details{margin:1.75rem 0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-details>summary{padding:0.9rem 1.1rem;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;justify-content:space-between;background:var(--wp-surface-bg)}.wp-block-details>summary::-webkit-details-marker{display:none}.wp-block-details>summary::after{content:"+";font-size:1.2em;font-weight:300;transition:transform 0.2s ease}.wp-block-details[open]>summary::after{content:"−"}.wp-block-details>:not(summary){padding:0.9rem 1.1rem}.wp-block-accordion{margin:1.75rem 0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-accordion-item{border-bottom:1px solid var(--wp-border-color)}.wp-block-accordion-item:last-child{border-bottom:none}.wp-block-accordion-heading{padding:0;font-weight:600;cursor:pointer;background:var(--wp-surface-bg);-webkit-user-select:none;user-select:none;margin:0}.wp-block-accordion-heading__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.9rem 1.1rem;background:none;border:none;font-size:inherit;font-weight:600;text-align:left;cursor:pointer;color:inherit}.wp-block-accordion-heading__toggle-icon{flex-shrink:0;margin-left:1rem;font-size:1.2em;font-weight:300}.wp-block-accordion-panel{padding:1rem 1.1rem}.wp-block-accordion-panel[inert]{display:block;pointer-events:auto}.wp-block-social-links{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;list-style:none;margin:1.75rem 0}.wp-block-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;overflow:hidden}.wp-block-social-link a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}.wp-block-social-link svg{width:1.1rem;height:1.1rem;fill:currentColor;display:block;flex-shrink:0}.wp-block-social-link-label.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wp-block-social-links.is-style-pill-shape .wp-block-social-link{border-radius:9999px;padding:0 0.75rem;width:auto}.wp-block-social-links.is-style-logos-only .wp-block-social-link{background:transparent !important}.wp-block-social-link-anchor{color:#fff}.wp-block-social-link{background:#444}.wp-social-link-facebook{background:#1877f2}.wp-social-link-twitter,.wp-social-link-x{background:#000}.wp-social-link-instagram{background:#e1306c}.wp-social-link-linkedin{background:#0a66c2}.wp-social-link-youtube{background:#ff0000}.wp-social-link-github{background:#24292e}.wp-social-link-tiktok{background:#010101}.wp-social-link-pinterest{background:#e60023}.wp-social-link-snapchat{background:#fffc00;color:#000}.wp-social-link-tumblr{background:#35465c}.wp-social-link-reddit{background:#ff4500}.wp-social-link-spotify{background:#1db954}.wp-social-link-mastodon{background:#6364ff}.wp-social-link-chain{background:#444}blockquote.twitter-tweet{display:flex;flex-direction:column;border-left:3px solid #1da1f2;padding:1rem 1rem 2rem 1.25rem;margin:1.75rem 0;font-style:italic;background:transparent}blockquote.twitter-tweet p{margin:0 0 0.75rem}blockquote.twitter-tweet a{color:#1da1f2;word-break:break-word}.is-provider-twitter,.wp-block-embed-twitter{display:flex}.is-provider-twitter>.wp-block-embed__wrapper,.wp-block-embed-twitter>.wp-block-embed__wrapper{position:static;height:auto;padding-bottom:0 !important;width:100%}.is-provider-twitter .twitter-tweet,.wp-block-embed-twitter .twitter-tweet{height:100%}.is-provider-twitter iframe,.wp-block-embed-twitter iframe{position:static;width:100% !important;max-width:550px;height:auto !important}.instagram-media{border-radius:4px;margin:1.5rem auto !important;max-width:540px !important}.tiktok-embed{border-radius:4px;margin:1.5rem auto;max-width:605px}.tiktok-embed a{word-break:break-word}.wp-block-search{margin:1.75rem 0}.wp-block-search__inside-wrapper{display:flex;align-items:stretch;gap:0;border:1px solid var(--wp-border-color);border-radius:4px;overflow:hidden}.wp-block-search__input{flex:1;padding:0.6rem 0.9rem;border:none;font-size:1em;outline:none;background:var(--wp-input-bg);color:var(--wp-input-color)}.wp-block-search__button{padding:0.6rem 1rem;background:var(--wp-button-bg);color:var(--wp-button-color);border:none;cursor:pointer;font-size:0.9em;font-weight:600;white-space:nowrap}.wp-block-search__button:hover{background:#555}.wp-block-search__label{display:block;font-size:0.85em;font-weight:600;margin-bottom:0.35rem}.wp-block-latest-posts{padding:0;list-style:none;margin:1.75rem 0}.wp-block-latest-posts__post-title{font-weight:600;text-decoration:none;display:block}.wp-block-latest-posts__post-title:hover{text-decoration:underline}.wp-block-latest-posts__post-date{font-size:0.8em;color:var(--wp-caption-color);display:block;margin-bottom:0.35rem}.wp-block-latest-posts__post-excerpt{font-size:0.9em;margin-top:0.25rem}.wp-block-latest-posts.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--wp-gap)}.wp-block-latest-comments{padding:0;list-style:none;margin:1.75rem 0}.wp-block-latest-comments__comment{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--wp-border-color)}.wp-block-latest-comments__comment-meta{font-size:0.85em;color:var(--wp-caption-color)}.wp-block-math{margin:1.75rem 0;overflow-x:auto;overflow-y:hidden}.wp-block-math math,.wp-block-math .math-inline{display:block;font-size:1.1em;line-height:1.6}.math-inline{display:inline;font-size:1em}.MathJax,.katex-display{overflow-x:auto;overflow-y:hidden;padding:0.25rem 0}.wp-block-navigation{display:flex;flex-wrap:wrap;gap:0.5rem}.wp-block-navigation-item{list-style:none}.wp-block-navigation-item__content{text-decoration:none;padding:0.25rem 0.5rem;display:block}.alignwide{max-width:var(--wp-wide-max-width);margin-left:auto;margin-right:auto;width:100%}.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.alignleft{float:left;margin:0 1.5rem 1rem 0;max-width:50%}.alignright{float:right;margin:0 0 1rem 1.5rem;max-width:50%}.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-content::after{content:"";display:table;clear:both}@media (max-width:640px){.alignleft,.alignright{float:none;margin:1rem 0;max-width:100%}}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.has-text-align-right{text-align:right}.has-background{padding:1.25rem 1.5rem}[class*="has-"][class*="-background-color"]{padding:0.2em 0}.has-black-color{color:#000}.has-white-color{color:#fff}.has-cyan-bluish-gray-color{color:#abb8c3}.has-pale-pink-color{color:#f78da7}.has-vivid-red-color{color:#cf2e2e}.has-luminous-vivid-orange-color{color:#ff6900}.has-luminous-vivid-amber-color{color:#fcb900}.has-light-green-cyan-color{color:#7bdcb5}.has-vivid-green-cyan-color{color:#00d084}.has-pale-cyan-blue-color{color:#8ed1fc}.has-vivid-cyan-blue-color{color:#0693e3}.has-vivid-purple-color{color:#9b51e0}.has-black-background-color{background-color:#000}.has-white-background-color{background-color:#fff}.has-cyan-bluish-gray-background-color{background-color:#abb8c3}.has-pale-pink-background-color{background-color:#f78da7}.has-vivid-red-background-color{background-color:#cf2e2e}.has-luminous-vivid-orange-background-color{background-color:#ff6900}.has-luminous-vivid-amber-background-color{background-color:#fcb900}.has-light-green-cyan-background-color{background-color:#7bdcb5}.has-vivid-green-cyan-background-color{background-color:#00d084}.has-pale-cyan-blue-background-color{background-color:#8ed1fc}.has-vivid-cyan-blue-background-color{background-color:#0693e3}.has-vivid-purple-background-color{background-color:#9b51e0}.has-small-font-size{font-size:0.8em}.has-medium-font-size{font-size:1em}.has-large-font-size{font-size:1.4em}.has-x-large-font-size{font-size:1.8em}.has-xx-large-font-size{font-size:2.4em}.has-huge-font-size{font-size:2.8em}.wp-block-freeform{line-height:1.7}.wp-caption{max-width:100%;margin:1rem 0}.wp-caption img{display:block;max-width:100%;height:auto}.wp-caption-text,.wp-caption p{font-size:0.85em;color:var(--wp-caption-color);text-align:center;margin:0.35rem 0 0}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wp-border-color:#333;--wp-code-bg:#111;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#1a1a1a;--wp-inline-code-color:#f8f8f2;--wp-blockquote-border:#555;--wp-caption-color:#aaa;--wp-button-bg:#555;--wp-button-color:#fff;--wp-input-bg:#1a1a1a;--wp-input-color:#f0f0f0;--wp-scrollbar-color:#666;--wp-surface-bg:#1a1a1a;--wp-surface-alt-bg:#1a1a1a}:root:not([data-theme="light"]) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:#161616}:root:not([data-theme="light"]) .wp-block-latest-comments__comment{border-bottom-color:#333}}[data-theme="dark"]{--wp-border-color:#333;--wp-code-bg:#111;--wp-code-color:#f8f8f2;--wp-inline-code-bg:#1a1a1a;--wp-inline-code-color:#f8f8f2;--wp-blockquote-border:#555;--wp-caption-color:#aaa;--wp-button-bg:#555;--wp-button-color:#fff;--wp-input-bg:#1a1a1a;--wp-input-color:#f0f0f0;--wp-scrollbar-color:#666;--wp-surface-bg:#1a1a1a;--wp-surface-alt-bg:#1a1a1a}[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{background:#161616}[data-theme="dark"] .wp-block-latest-comments__comment{border-bottom-color:#333}@media print{.wp-block-buttons,.wp-block-button,.wp-block-search,.wp-block-social-links,.wp-block-navigation,.wp-block-cover__video-background{display:none !important}.alignfull,.alignwide{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important}.alignleft,.alignright{float:none !important;max-width:100% !important;margin:1rem 0 !important}.wp-block-image img,.wp-block-gallery .wp-block-image img,.wp-block-media-text__media img{max-width:100% !important;height:auto !important}.wp-block-embed{border:1px solid #ccc;padding:1rem;text-align:center;font-size:0.85em;color:#666}.wp-block-embed__wrapper{position:static !important;height:auto !important;padding-bottom:0 !important}.wp-block-embed__wrapper iframe{display:none !important}.wp-block-embed::before{content:"[Embedded media — view online]";display:block}.wp-block-code,.wp-block-preformatted{overflow:visible !important;white-space:pre-wrap !important;border:1px solid #ccc}.wp-block-columns{flex-direction:column !important}.wp-block-image,.wp-block-table,.wp-block-quote,.wp-block-pullquote,.wp-block-code{break-inside:avoid;page-break-inside:avoid}.wp-content a[href]::after{content:" (" attr(href) ")";font-size:0.8em;color:#555;word-break:break-all}.wp-block-button__link::after,.wp-block-navigation-item__content::after{content:none !important}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wp-block-styles",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "Comprehensive CSS styles for WordPress Gutenberg block classes rendered via the headless WP REST API. Zero dependencies, framework agnostic.",
5
5
  "style": "index.css",
6
6
  "main": "index.css",