feat: add native code block feature and optimize asset loading

- Implemented custom code block system with Prism.js highlighting (YAML)
- Added Gutenberg block with modal editor for better handling of large code snippets
- Added Classic Editor button with dialog for structured code input
- Implemented copy-to-clipboard functionality with hover-based UI
- Introduced dedicated styling (code.css)

Performance improvements:
- Load Prism.js and code block assets only when a code block is present
- Reduced unnecessary JS and CSS on pages without code snippets
- Improved overall frontend performance and resource efficiency

UI/UX improvements:
- Adapted code block styling to match theme design (rectangular layout, accent border, integrated color scheme)
- Refactored sidebar search styling for consistent appearance
- Removed conflicting wrapper borders causing double border rendering
- Applied single-border input pattern with clean focus state
- Fixed invalid CSS !important syntax issues
- Aligned search input design with comments and code block components

Result:
- Cleaner UI with consistent component styling
- Improved performance through conditional asset loading
- Better authoring experience for structured YAML content

assets/css/code.css

@@ -9,20 +9,32 @@
    Code block wrapper
 ------------------------------------------------------------------------- */
 
+/* -------------------------------------------------------------------------
+   Code block wrapper
+------------------------------------------------------------------------- */
+
 .ztfr-code {
   position: relative;
+
   background-color: var(--footer-color);
   color: var(--light-color);
-  padding: 1.1rem 1.2rem;
+
+  padding: 1rem 1.2rem;
   margin: 1rem 0;
-  border-radius: 6px;
+
+  border-radius: 0;
+  border: 1px solid rgba(248, 248, 242, 0.08);
+  border-left: 4px solid var(--hover-color);
+
   max-width: 100%;
   overflow-x: auto;
+
   font-family: var(--secondary-font);
-  font-size: 0.870rem;
+  font-size: 0.85rem;
   line-height: 1.6;
   font-weight: 400;
-  border: 1px solid rgba(248, 248, 242, 0.08);
+
+  box-shadow: none;
 }
 
 /* -------------------------------------------------------------------------

assets/js/editor.js

@@ -1,6 +1,21 @@
 (function () {
   'use strict';
 
+  /**
+   * Escape HTML before saving it into the code block markup.
+   *
+   * @param {string} text Raw code.
+   * @returns {string} Escaped code.
+   */
+  function escapeHtml(text) {
+    return String(text)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
   /**
    * Gutenberg block
    */
@@ -16,10 +31,114 @@
     const element = window.wp.element;
     const i18n = window.wp.i18n;
     const blockEditor = window.wp.blockEditor;
+    const components = window.wp.components;
 
     const el = element.createElement;
     const __ = i18n.__;
     const PlainText = blockEditor.PlainText;
+    const Button = components.Button;
+    const Modal = components.Modal;
+    const TextareaControl = components.TextareaControl;
+    const useState = element.useState;
+    const useEffect = element.useEffect;
+    const Fragment = element.Fragment;
+
+    function EditCodeBlock(props) {
+      const content = props.attributes.content || '';
+      const setAttributes = props.setAttributes;
+      const state = useState(false);
+      const isDialogOpen = state[0];
+      const setDialogOpen = state[1];
+
+      function updateCode(value) {
+        setAttributes({ content: value });
+      }
+
+      useEffect(function () {
+        if (!isDialogOpen) {
+          return;
+        }
+
+        window.setTimeout(function () {
+          const textarea = document.querySelector('.ztfr-code__modal-textarea textarea');
+
+          if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          }
+        }, 50);
+      }, [isDialogOpen]);
+
+      return el(
+        Fragment,
+        null,
+        el(
+          'div',
+          {
+            className: 'ztfr-code is-editor-preview',
+            'data-language': 'yaml'
+          },
+          el(
+            'div',
+            { className: 'ztfr-code__editor-actions' },
+            el(
+              Button,
+              {
+                variant: 'secondary',
+                onClick: function () {
+                  setDialogOpen(true);
+                }
+              },
+              __('Edit code', 'zeitfresser')
+            )
+          ),
+          el(
+            'pre',
+            { className: 'language-yaml' },
+            el(PlainText, {
+              tagName: 'code',
+              className: 'language-yaml',
+              value: content,
+              placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
+              onChange: updateCode
+            })
+          )
+        ),
+        isDialogOpen &&
+          el(
+            Modal,
+            {
+              title: __('Edit code block', 'zeitfresser'),
+              onRequestClose: function () {
+                setDialogOpen(false);
+              },
+              className: 'ztfr-code__modal'
+            },
+            el(TextareaControl, {
+              label: __('Code', 'zeitfresser'),
+              value: content,
+              onChange: updateCode,
+              help: __('Paste your YAML code here. Indentation and line breaks are preserved.', 'zeitfresser'),
+              rows: 18,
+              className: 'ztfr-code__modal-textarea'
+            }),
+            el(
+              'div',
+              { className: 'ztfr-code__modal-actions' },
+              el(
+                Button,
+                {
+                  variant: 'primary',
+                  onClick: function () {
+                    setDialogOpen(false);
+                  }
+                },
+                __('Done', 'zeitfresser')
+              )
+            )
+          )
+      );
+    }
 
     blocks.registerBlockType('ztfr/code-block', {
       title: __('Code', 'zeitfresser'),
@@ -36,30 +155,7 @@
         }
       },
 
-      edit: function (props) {
+      edit: EditCodeBlock,
-        const content = props.attributes.content || '';
-
-        return el(
-          'div',
-          {
-            className: 'ztfr-code is-editor-preview',
-            'data-language': 'yaml'
-          },
-          el(
-            'pre',
-            { className: 'language-yaml' },
-            el(PlainText, {
-              tagName: 'code',
-              className: 'language-yaml',
-              value: content,
-              placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
-              onChange: function (value) {
-                props.setAttributes({ content: value });
-              }
-            })
-          )
-        );
-      },
 
       save: function (props) {
         const content = props.attributes.content || '';
@@ -81,19 +177,23 @@
    * Classic Editor TinyMCE button
    */
   if (window.tinymce && window.tinymce.PluginManager) {
-    function escapeHtml(text) {
-      return String(text)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#039;');
-    }
-
     window.tinymce.PluginManager.add('ztfr_code_block', function (editor) {
-      function insertCodeBlock() {
+      function insertCodeBlockFromDialog() {
-        const selectedText = editor.selection.getContent({ format: 'text' });
+        editor.windowManager.open({
-        const code = selectedText || 'your_key: your_value';
+          title: 'Insert code block',
+          body: [
+            {
+              type: 'textbox',
+              name: 'code',
+              label: 'Code',
+              multiline: true,
+              minWidth: 700,
+              minHeight: 350,
+              value: ''
+            }
+          ],
+          onsubmit: function (event) {
+            const code = event.data.code || 'your_key: your_value';
             const safeCode = escapeHtml(code);
 
             editor.insertContent(
@@ -101,12 +201,18 @@
               safeCode +
               '</code></pre><p></p>'
             );
+
+            editor.focus();
+
+            return true;
+          }
+        });
       }
 
       editor.addButton('ztfr_code_block', {
         text: 'Code',
         icon: false,
-        onclick: insertCodeBlock
+        onclick: insertCodeBlockFromDialog
       });
     });
   }

inc/tools/code-block.php

@@ -16,6 +16,34 @@ if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
+/**
+ * Check if current post content contains code blocks.
+ *
+ * @return bool
+ */
+function ztfr_has_code_block() {
+
+	if ( is_admin() ) {
+		return false;
+	}
+
+	if ( ! is_singular() ) {
+		return false;
+	}
+
+	global $post;
+
+	if ( ! isset( $post ) || empty( $post->post_content ) ) {
+		return false;
+	}
+
+	if ( has_block( 'ztfr/code-block', $post ) ) {
+		return true;
+	}
+
+	return false !== strpos( $post->post_content, '<pre' );
+}
+
 /**
  * Get asset version from file modification time.
  *
@@ -41,6 +69,10 @@ function ztfr_enqueue_code_assets() {
 		return;
 	}
 	
+	if ( ! ztfr_has_code_block() ) {
+		return;
+	}
+
 	$code_css_version = ztfr_code_asset_version( '/assets/css/code.css' );
 	$prism_version    = ztfr_code_asset_version( '/assets/js/prism.js' );
 	$code_js_version  = ztfr_code_asset_version( '/assets/js/code-block.js' );

style.css

@@ -315,6 +315,9 @@ textarea {
   background-color: var(--footer-color);
   color: var(--light-color);
 
+  border-radius: 0;
+  border: 1px solid rgba(248, 248, 242, 0.08);
+
   padding: 1rem;
   margin-bottom: 2rem;
 }
@@ -1170,33 +1173,62 @@ header.site-header .social-links svg:hover {
 
 .widget_search .wp-block-search__inside-wrapper {
   display: grid;
-  grid-template-columns: 4fr 1fr;
+  grid-template-columns: 1fr auto;
   gap: 0;
+  background: transparent;
+  border: none;
+  overflow: hidden;
 }
 
-@media (max-width: 1200px) {
+.widget_search .wp-block-search__input,
-  .widget_search .wp-block-search__inside-wrapper {
+.sidebar .wp-block-search__input {
-    display: block;
-  }
-}
-
-@media (max-width: 900px) {
-  .widget_search .wp-block-search__inside-wrapper {
-    display: grid;
-  }
-}
-
-.widget_search input[type="search"] {
   width: 100%;
-  height: 100%;
+  height: 36px;
-  padding: 1rem 1.5rem;
+  padding: 0 12px;
-  border-radius: 0;
+
+  background-color: rgba(255,255,255,0.04) !important;
+  color: var(--light-color);
+
+  border: 1px solid rgba(255,255,255,0.1) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+
+  appearance: none;
+}
+
+.widget_search .wp-block-search__input:focus,
+.sidebar .wp-block-search__input:focus {
+  border-color: var(--hover-color) !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.widget_search .wp-block-search__input::placeholder,
+.sidebar .wp-block-search__input::placeholder {
+  color: rgba(248,248,242,0.5);
 }
 
-.widget_search input[type="submit"],
 .widget_search .wp-block-search__button {
-  width: 100%;
+  height: 36px;
-  padding: 1rem 2rem;
+  padding: 0 14px;
+
+  border: none;
+  border-radius: 0;
+
+  background-color: var(--footer-color);
+  color: var(--light-color);
+
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.widget_search .wp-block-search__button:hover {
+  background-color: var(--hover-color);
+  color: var(--dark-color);
 }
 
 /* Empty State (404 + Search) */
@@ -1215,9 +1247,12 @@ header.site-header .social-links svg:hover {
 .error-404 .page-content,
 .search-no-results .page-content {
   background-color: var(--footer-color);
+  
+  border-radius: 0;
+  border: 1px solid rgba(248, 248, 242, 0.08);
+  
   padding: 2rem;
   margin: 1.5rem auto 0;
-  border-radius: 6px;
   max-width: 500px;
   width: 100%;
   box-sizing: border-box;
@@ -1285,44 +1320,6 @@ header.site-header .social-links svg:hover {
   }
 }
 
-/* Sidebar Search */
-
-.widget_search form {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  border: 1px solid #4a4d61;
-  border-radius: 4px;
-  background-color: #383a4a;
-  overflow: hidden;
-}
-
-.widget_search input[type="search"] {
-  flex: 1;
-  padding: 0 10px;
-  background: transparent;
-  border: none;
-  color: var(--light-color);
-}
-
-.widget_search button[type="submit"] {
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  height: 100%;
-  border: none;
-  background-color: var(--hover-color);
-  color: var(--dark-color);
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.widget_search form:focus-within {
-  border-color: var(--hover-color);
-}
-
 /* Posts and Pages */
 
 .sticky {
@@ -1661,21 +1658,6 @@ header.page-header h1 {
   color: var(--light-color);
 }
 
-/* Readmore KANN WEG? */
-
-.readmore {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-
-  font-family: var(--primary-font);
-}
-
-.readmore svg {
-  height: 1.2em;
-  fill: currentColor; 
-}
-
 /* Header / Footer Meta */
 
 .info.ihead,
@@ -1831,7 +1813,7 @@ header.page-header h1 {
 }
 
 .site-footer a {
-  color: inherit; /* inherits light-color */
+  color: inherit;
   border-bottom: 1px solid rgba(255,255,255,0.2);
 }