Merge pull request #20 from KevinBatdorf/add-more-theme-compat

Add hueman styling support
KevinBatdorf · Aug 31, 2022 · ab9e5e6 · ab9e5e6
2 parents d220bed + 56971ab
commit ab9e5e6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/readme.txt b/readme.txt
@@ -213,6 +213,10 @@ add_action('wp_enqueue_scripts', function() {
 });
 `
 
+= I'm seeing the html output instead of the styled code =
+
+It's possible you have the Prismatic plugin installed. Currently I don't have a workaround set up to support both plugins, so you'll have to deactive Prismatic while evaluating which plugin to use.
+
 == Screenshots ==
 
 1. Quickly swap over themes in the editor

diff --git a/src/block.json b/src/block.json
@@ -11,7 +11,7 @@
         "codeHTML": { "type": "string" },
         "language": { "type": "string" },
         "theme": { "type": "string" },
-        "align": { "type": "string", "default": "none" },
+        "align": { "type": "string" },
         "bgColor": { "type": "string", "default": "#282a37" },
         "textColor": { "type": "string", "default": "#f8f8f2" },
         "lineNumbers": { "type": "boolean" },
@@ -23,7 +23,7 @@
     },
     "supports": {
         "html": false,
-        "align": ["full", "wide"]
+        "align": ["wide", "full"]
     },
     "textdomain": "code-block-pro",
     "editorScript": "file:./index.js",

diff --git a/src/front/style.css b/src/front/style.css
@@ -4,17 +4,22 @@
     @apply relative;
 }
 .wp-block-kevinbatdorf-code-block-pro pre {
+    border: 0 !important;
     overflow-wrap:normal !important;
-    @apply overflow-auto p-6 text-inherit m-0 whitespace-pre;
+    @apply overflow-auto p-6 text-inherit m-0 whitespace-pre bg-none border-none border-0;
 }
 .wp-block-kevinbatdorf-code-block-pro pre code {
+    border: 0 !important;
+    background: none !important;
     overflow-wrap:normal !important;
-    @apply m-0 p-0 bg-transparent text-inherit text-left whitespace-pre;
+    @apply m-0 p-0 bg-transparent text-inherit text-left whitespace-pre border-none border-0;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     monospace;
 }
 .code-block-pro-copy-button {
-    @apply absolute top-0 right-0 left-auto bg-transparent p-2 border-none cursor-pointer opacity-30 focus:opacity-100 transition-opacity duration-200 ease-in-out leading-none;
+    border: 0 !important;
+    background: none !important;
+    @apply absolute top-0 right-0 left-auto bg-transparent p-2 border-none border-0 cursor-pointer opacity-30 focus:opacity-100 transition-opacity duration-200 ease-in-out leading-none;
 }
 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
     @apply opacity-100;

diff --git a/src/index.tsx b/src/index.tsx
@@ -22,7 +22,7 @@ registerBlockType<Attributes>(blockConfig.name, {
         codeHTML: { type: 'string' },
         language: { type: 'string' },
         theme: { type: 'string' },
-        align: { type: 'string', default: 'none' },
+        align: { type: 'string' },
         bgColor: { type: 'string', default: '#282a37' },
         textColor: { type: 'string', default: '#f8f8f2' },
         lineNumbers: { type: 'boolean' },
@@ -32,6 +32,11 @@ registerBlockType<Attributes>(blockConfig.name, {
         label: { type: 'string', default: '' },
         copyButton: { type: 'boolean' },
     },
+    // Need to add these here to avoid TS type errors
+    supports: {
+        html: false,
+        align: ['wide', 'full'],
+    },
     title: __('Code Pro', 'code-block-pro'),
     edit: ({ attributes, setAttributes }) => (
         <>