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/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) {
-        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 });
-              }
-            })
-          )
-        );
-      },
+      edit: EditCodeBlock,
 
       save: function (props) {
         const content = props.attributes.content || '';
@@ -81,32 +177,42 @@
    * 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() {
-        const selectedText = editor.selection.getContent({ format: 'text' });
-        const code = selectedText || 'your_key: your_value';
-        const safeCode = escapeHtml(code);
+      function insertCodeBlockFromDialog() {
+        editor.windowManager.open({
+          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(
-          '<pre class="language-yaml"><code class="language-yaml">' +
-          safeCode +
-          '</code></pre><p></p>'
-        );
+            editor.insertContent(
+              '<pre class="language-yaml"><code class="language-yaml">' +
+              safeCode +
+              '</code></pre><p></p>'
+            );
+
+            editor.focus();
+
+            return true;
+          }
+        });
       }
 
       editor.addButton('ztfr_code_block', {
         text: 'Code',
         icon: false,
-        onclick: insertCodeBlock
+        onclick: insertCodeBlockFromDialog
       });
     });
   }