feat: editor-styles

wp-content/themes/headless/app/assets/css/_main.css

@@ -1,7 +1,12 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static) source("../../..");
 @import "@nuxt/ui";
 
 @import "./containers.css";
 @import "./links.css";
+@import "./lists.css";
+@import "./prose.css";
 @import "./theme.css";
 @import "./typography.css";
+
+@import "./vendors/tinymce.css";
+@import "./vendors/wordpress.css";

wp-content/themes/headless/app/assets/css/lists.css

@@ -0,0 +1,12 @@
+/* List styles */
+@utility list-horizontal {
+  @apply flex list-none flex-wrap items-center gap-3;
+}
+
+@utility list-ordered {
+  @apply list-decimal list-inside;
+}
+
+@utility list-unordered {
+  @apply list-disc list-inside;
+}

wp-content/themes/headless/app/assets/css/prose.css

@@ -0,0 +1,35 @@
+@utility prose {
+  /* Font size */
+  @apply text-lg;
+
+  /* Headings (allow class overrides) */
+  h1:not([class*="heading-"]) {
+    @apply heading-1;
+  }
+  h2:not([class*="heading-"]) {
+    @apply heading-2;
+  }
+  h3:not([class*="heading-"]) {
+    @apply heading-3;
+  }
+  h4:not([class*="heading-"]) {
+    @apply heading-4;
+  }
+
+  /* Links */
+  @apply links:link-underline;
+
+  /* Lists */
+  ol:not([class*="list-"]) {
+    @apply list-ordered;
+  }
+  ul:not([class*="list-"]) {
+    @apply list-unordered;
+  }
+
+  /* Spacing */
+  @apply space-y-3;
+
+  /* WordPress */
+  @apply wordpress;
+}

wp-content/themes/headless/app/assets/css/vendors/tinymce.css

@@ -0,0 +1,3 @@
+body#tinymce {
+  @apply prose;
+}

wp-content/themes/headless/app/assets/css/vendors/wordpress.css

@@ -0,0 +1,39 @@
+@utility wordpress {
+  /* Alignment */
+  .alignleft {
+    @apply float-left mr-6;
+  }
+  .alignright {
+    @apply float-right ml-6;
+  }
+  .aligncenter {
+    @apply mx-auto block;
+  }
+
+  /* Image */
+  img {
+    @apply h-auto max-w-full;
+  }
+  figure {
+    @apply max-w-full;
+  }
+
+  /* Caption */
+  .wp-caption {
+    @apply text-center;
+  }
+  .wp-caption-text,
+  figcaption {
+    @apply mt-3 text-sm text-muted;
+  }
+
+  /* Video */
+  .wp-video {
+    @apply w-full;
+  }
+
+  /* IFrame */
+  iframe {
+    @apply aspect-video w-full;
+  }
+}

wp-content/themes/headless/includes/vendors/tinymce.php

@@ -126,6 +126,7 @@ function headless_remove_tinymce_default_styles() {
 	</script>
 	<?php
 }
+
 // Convert absolute URLs to relative in link query
 add_filter( 'wp_link_query', 'headless_tinymce_relative_urls' );
 function headless_tinymce_relative_urls( $results ) {

wp-content/themes/headless/package.json

@@ -8,6 +8,7 @@
     "build": "pnpm --sequential /build:.*/",
     "build:nuxt": "nuxt build",
     "dev": "nuxt dev",
+    "editor-style": "pnpx @tailwindcss/cli -i ./app/assets/css/_main.css -o ./editor-style.css --minify",
     "format": "oxfmt .",
     "lint": "oxlint . --fix",
     "preview": "nuxt preview",