feat: add native code block feature with Prism highlighting and editor integration

- Implemented custom code block system for frontend and editors
- Integrated Prism.js for syntax highlighting (YAML + HTML support)
- Added copy-to-clipboard functionality with hover-based UI
- Introduced custom Gutenberg block for code input
- Added Classic Editor button for quick code insertion
- Implemented server-side rendering via the_content filter
- Added dedicated styling (code.css) with Dracula-inspired theme
- Added editor preview styling (editor.css) for visual consistency
- Ensured accessibility and keyboard support for copy button
- Optimized asset loading and versioning using filemtime()

This feature provides a lightweight, theme-native alternative to external code highlighting plugins.

assets/css/code.css

@@ -0,0 +1,161 @@
+/**
+ * Code block styles
+ *
+ * Frontend and editor preview styles for the Zeitfresser code block feature.
+ * The selectors are scoped to avoid leaking into unrelated blocks or plugins.
+ */
+
+/* -------------------------------------------------------------------------
+   Code block wrapper
+------------------------------------------------------------------------- */
+
+.ztfr-code {
+  position: relative;
+  background-color: var(--footer-color);
+  color: var(--light-color);
+  padding: 1.1rem 1.2rem;
+  margin: 1rem 0;
+  border-radius: 6px;
+  max-width: 100%;
+  overflow-x: auto;
+  font-family: var(--secondary-font);
+  font-size: 0.870rem;
+  line-height: 1.6;
+  font-weight: 400;
+  border: 1px solid rgba(248, 248, 242, 0.08);
+}
+
+/* -------------------------------------------------------------------------
+   Prism overrides
+------------------------------------------------------------------------- */
+
+.ztfr-code pre,
+.ztfr-code code {
+  background: transparent;
+  color: inherit;
+}
+
+.ztfr-code pre[class*="language-"],
+.ztfr-code code[class*="language-"] {
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+.ztfr-code pre[class*="language-"] {
+  overflow-x: visible !important;
+}
+
+.ztfr-code pre code {
+  display: block;
+  padding: 1rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* -------------------------------------------------------------------------
+   Copy button
+------------------------------------------------------------------------- */
+
+.ztfr-code__copy {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background-color: var(--footer-color);
+  color: var(--light-color);
+  border: 1px solid rgba(248, 248, 242, 0.12);
+  border-radius: 4px;
+  font-size: 0.72rem;
+  line-height: 1;
+  padding: 0.45rem 0.65rem;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.ztfr-code:hover .ztfr-code__copy {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ztfr-code__copy:hover {
+  background-color: var(--hover-color);
+  color: #f8f8f2;
+}
+
+.ztfr-code__copy:focus {
+  opacity: 1;
+  pointer-events: auto;
+
+  outline: 2px solid #bd93f9;
+  outline-offset: 2px;
+}
+
+/* -------------------------------------------------------------------------
+   Dracula token colors
+------------------------------------------------------------------------- */
+
+.ztfr-code .token.comment,
+.ztfr-code .token.prolog,
+.ztfr-code .token.doctype,
+.ztfr-code .token.cdata {
+  color: #6272a4;
+}
+
+.ztfr-code .token.punctuation {
+  color: #f8f8f2;
+}
+
+.ztfr-code .token.tag,
+.ztfr-code .token.constant,
+.ztfr-code .token.symbol,
+.ztfr-code .token.deleted {
+  color: #ff79c6;
+}
+
+.ztfr-code .token.attr-name,
+.ztfr-code .token.property,
+.ztfr-code .token.selector,
+.ztfr-code .token.important,
+.ztfr-code .token.atrule {
+  color: #8be9fd;
+}
+
+.ztfr-code .token.attr-value,
+.ztfr-code .token.string,
+.ztfr-code .token.char,
+.ztfr-code .token.inserted {
+  color: #f1fa8c;
+}
+
+.ztfr-code .token.keyword,
+.ztfr-code .token.boolean,
+.ztfr-code .token.number {
+  color: #bd93f9;
+}
+
+.ztfr-code .token.operator,
+.ztfr-code .token.entity,
+.ztfr-code .token.url {
+  color: #f8f8f2;
+}
+
+.ztfr-code .token.function,
+.ztfr-code .token.class-name {
+  color: #50fa7b;
+}
+
+.block-editor-block-list__layout .ztfr-code,
+.editor-styles-wrapper .ztfr-code {
+  margin: 0;
+}

assets/css/editor.css

@@ -0,0 +1,116 @@
+/**
+ * Editor styles
+ *
+ * Scoped styles for Gutenberg and Classic Editor.
+ */
+
+/* -------------------------------------------------------------------------
+   Editor base
+------------------------------------------------------------------------- */
+
+.editor-styles-wrapper,
+.mce-content-body {
+  font-family: var(--secondary-font);
+  line-height: 1.7;
+}
+
+/* -------------------------------------------------------------------------
+   Shared code block preview
+------------------------------------------------------------------------- */
+
+.editor-styles-wrapper .ztfr-code,
+.editor-styles-wrapper pre.language-yaml,
+.mce-content-body pre.language-yaml {
+  position: relative;
+  background-color: #282a36;
+  color: #f8f8f2;
+  border: 1px solid rgba(248, 248, 242, 0.08);
+  border-radius: 6px;
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+  max-width: 100%;
+  overflow-x: auto;
+  font-family: var(--secondary-font);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  box-sizing: border-box;
+}
+
+/* -------------------------------------------------------------------------
+   Gutenberg preview
+------------------------------------------------------------------------- */
+
+.editor-styles-wrapper .ztfr-code pre,
+.editor-styles-wrapper .ztfr-code code {
+  background: transparent;
+  color: inherit;
+}
+
+.editor-styles-wrapper .ztfr-code pre.language-yaml,
+.editor-styles-wrapper .ztfr-code code.language-yaml {
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+.editor-styles-wrapper .ztfr-code pre code {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* -------------------------------------------------------------------------
+   Classic Editor preview
+------------------------------------------------------------------------- */
+
+.mce-content-body pre.language-yaml {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.mce-content-body pre.language-yaml code.language-yaml {
+  display: block;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* -------------------------------------------------------------------------
+   Editor label
+------------------------------------------------------------------------- */
+
+.editor-styles-wrapper .ztfr-code.is-editor-preview::before,
+.mce-content-body pre.language-yaml::before {
+  content: "YAML";
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  padding: 0.2rem 0.45rem;
+  border-radius: 4px;
+  background: #44475a;
+  color: #f8f8f2;
+  font-size: 0.72rem;
+  line-height: 1;
+  letter-spacing: 0.03em;
+}
+
+/* -------------------------------------------------------------------------
+   Lists
+------------------------------------------------------------------------- */
+
+.editor-styles-wrapper ul,
+.editor-styles-wrapper ol,
+.mce-content-body ul,
+.mce-content-body ol {
+  margin-left: 0;
+  padding-left: 1.25em;
+  list-style-position: outside;
+}

assets/js/code-block.js

@@ -0,0 +1,94 @@
+/**
+ * Code Block UI Enhancements
+ *
+ * Handles:
+ * - Copy button
+ * - Prism highlight trigger
+ */
+
+(function () {
+  'use strict';
+
+  function copyText(text, onSuccess, onError) {
+    if (!text) {
+      return;
+    }
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(text).then(onSuccess).catch(onError);
+      return;
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'readonly');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    textarea.style.pointerEvents = 'none';
+
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+
+    try {
+      document.execCommand('copy');
+      onSuccess();
+    } catch (error) {
+      onError();
+    }
+
+    document.body.removeChild(textarea);
+  }
+
+  function initCodeUI() {
+    const wrappers = document.querySelectorAll('.ztfr-code');
+
+    if (!wrappers.length) {
+      return;
+    }
+
+    wrappers.forEach(function (wrapper) {
+      const code = wrapper.querySelector('code');
+
+      if (!code) {
+        return;
+      }
+
+      if (!wrapper.querySelector('.ztfr-code__copy')) {
+        const button = document.createElement('button');
+        button.className = 'ztfr-code__copy';
+        button.type = 'button';
+        button.setAttribute('aria-label', 'Copy code');
+        button.textContent = 'Copy';
+
+        button.addEventListener('click', function () {
+          const text = code.textContent;
+
+          copyText(
+            text,
+            function () {
+              button.textContent = 'Copied';
+              window.setTimeout(function () {
+                button.textContent = 'Copy';
+              }, 2000);
+            },
+            function () {
+              button.textContent = 'Error';
+              window.setTimeout(function () {
+                button.textContent = 'Copy';
+              }, 2000);
+            }
+          );
+        });
+
+        wrapper.appendChild(button);
+      }
+    });
+
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll();
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', initCodeUI);
+})();

assets/js/editor.js

@@ -0,0 +1,113 @@
+(function () {
+  'use strict';
+
+  /**
+   * Gutenberg block
+   */
+  if (
+    window.wp &&
+    window.wp.blocks &&
+    window.wp.element &&
+    window.wp.i18n &&
+    window.wp.components &&
+    window.wp.blockEditor
+  ) {
+    const blocks = window.wp.blocks;
+    const element = window.wp.element;
+    const i18n = window.wp.i18n;
+    const blockEditor = window.wp.blockEditor;
+
+    const el = element.createElement;
+    const __ = i18n.__;
+    const PlainText = blockEditor.PlainText;
+
+    blocks.registerBlockType('ztfr/code-block', {
+      title: __('Code', 'zeitfresser'),
+      icon: 'editor-code',
+      category: 'formatting',
+      description: __('Insert a styled YAML code block.', 'zeitfresser'),
+      supports: {
+        html: false
+      },
+      attributes: {
+        content: {
+          type: 'string',
+          default: ''
+        }
+      },
+
+      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 });
+              }
+            })
+          )
+        );
+      },
+
+      save: function (props) {
+        const content = props.attributes.content || '';
+
+        return el(
+          'pre',
+          { className: 'language-yaml' },
+          el(
+            'code',
+            { className: 'language-yaml' },
+            content
+          )
+        );
+      }
+    });
+  }
+
+  /**
+   * Classic Editor TinyMCE button
+   */
+  if (window.tinymce && window.tinymce.PluginManager) {
+    function escapeHtml(text) {
+      return String(text)
+        .replace(/&/g, '&')
+        .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);
+
+        editor.insertContent(
+          '<pre class="language-yaml"><code class="language-yaml">' +
+          safeCode +
+          '</code></pre><p></p>'
+        );
+      }
+
+      editor.addButton('ztfr_code_block', {
+        text: 'Code',
+        icon: false,
+        onclick: insertCodeBlock
+      });
+    });
+  }
+})();

editor-style.css

@@ -1,7 +0,0 @@
-/* Align lists in the Classic Editor */
-ul, ol {
-  margin-left: 0 !important;
-  padding-left: 1.0em !important;
-  list-style-position: inside !important;
-}
-

functions.php

@@ -24,38 +24,34 @@ if ( ! defined( 'ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION' ) ) {
 
 /**
  * ------------------------------------------------------------------------
- * Core Modules
+ * Customizer
  * ------------------------------------------------------------------------
  */
-
+require get_template_directory() . '/inc/customizer/core-settings.php';
-// Helpers (foundation)
+require get_template_directory() . '/inc/customizer/general-settings.php';
-require get_template_directory() . '/inc/helpers/zeitfresser-helpers.php';
+require get_template_directory() . '/inc/customizer/layout-settings.php';
-
+require get_template_directory() . '/inc/customizer/toc-settings.php';
-// Theme logic
+require get_template_directory() . '/inc/customizer/social-settings.php';
-require get_template_directory() . '/inc/zeitfresser-toc.php';
+require get_template_directory() . '/inc/customizer/image-optimizer-settings.php';
-
-// Performance layer
-require get_template_directory() . '/inc/performance/performance-tools.php';
 
 /**
  * ------------------------------------------------------------------------
- * Customizer (modular)
+ * Utilities
  * ------------------------------------------------------------------------
  */
-require get_template_directory() . '/inc/customizer/core.php';
+require get_template_directory() . '/inc/utilities/helpers.php';
-require get_template_directory() . '/inc/customizer/general.php';
+require get_template_directory() . '/inc/utilities/template-tags.php';
-require get_template_directory() . '/inc/customizer/layout.php';
+require get_template_directory() . '/inc/utilities/template-functions.php';
-require get_template_directory() . '/inc/customizer/toc.php';
+require get_template_directory() . '/inc/utilities/pagination.php';
-require get_template_directory() . '/inc/customizer/social.php';
+require get_template_directory() . '/inc/utilities/toc.php';
 
 /**
  * ------------------------------------------------------------------------
- * Theme Utilities
+ * Tools
  * ------------------------------------------------------------------------
  */
-require get_template_directory() . '/inc/template-tags.php';
+require get_template_directory() . '/inc/tools/image-optimizer.php';
-require get_template_directory() . '/inc/template-functions.php';
+require get_template_directory() . '/inc/tools/code-block.php';
-require get_template_directory() . '/inc/pagination.php';
 
 /**
  * ------------------------------------------------------------------------
@@ -147,8 +143,6 @@ function zeitfresser_setup() {
     register_nav_menus( array(
         'menu-1' => esc_html__( 'Primary', 'zeitfresser' ),
     ));
-
-    add_editor_style( 'editor-style.css' );
 }
 add_action( 'after_setup_theme', 'zeitfresser_setup' );
 
@@ -253,6 +247,13 @@ function zeitfresser_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'zeitfresser_scripts', 10 );
 
+// Editor Styles
+function zeitfresser_editor_styles_setup() {
+    add_theme_support( 'editor-styles' );
+    add_editor_style( 'assets/css/editor.css' );
+}
+add_action( 'after_setup_theme', 'zeitfresser_editor_styles_setup' );
+
 /**
  * ------------------------------------------------------------------------
  * Performance Tweaks
@@ -698,11 +699,3 @@ function zeitfresser_responsive_image_sizes( $sizes, $size ) {
     return $sizes;
 }
 add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
-
-/**
- * Delete Cookie Button
- */
- add_filter( 'comment_form_default_fields', function( $fields ) {
-    unset( $fields['cookies'] );
-    return $fields;
-});

inc/customizer/core-settings.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Theme Customizer Core
+ *
+ * @package zeitfresser
+ */
+
+function zeitfresser_customize_register( $wp_customize ) {
+
+	// Live Preview support
+	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
+	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
+	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
+
+	if ( isset( $wp_customize->selective_refresh ) ) {
+		$wp_customize->selective_refresh->add_partial(
+			'blogname',
+			array(
+				'selector'        => '.site-title a',
+				'render_callback' => 'zeitfresser_customize_partial_blogname',
+			)
+		);
+
+		$wp_customize->selective_refresh->add_partial(
+			'blogdescription',
+			array(
+				'selector'        => '.site-description',
+				'render_callback' => 'zeitfresser_customize_partial_blogdescription',
+			)
+		);
+	}
+}
+add_action( 'customize_register', 'zeitfresser_customize_register' );
+
+/**
+ * Partial refresh helpers
+ */
+function zeitfresser_customize_partial_blogname() {
+	bloginfo( 'name' );
+}
+
+function zeitfresser_customize_partial_blogdescription() {
+	bloginfo( 'description' );
+}
+
+/**
+ * Live preview JS
+ */
+function zeitfresser_customize_preview_js() {
+	wp_enqueue_script(
+		'zeitfresser-customizer',
+		get_template_directory_uri() . '/js/customizer.js',
+		array( 'customize-preview' ),
+		ZEITFRESSER_VERSION,
+		true
+	);
+}
+add_action( 'customize_preview_init', 'zeitfresser_customize_preview_js' );

inc/customizer/image-optimizer-settings.php

@@ -1,42 +1,24 @@
 <?php
 /**
- * Theme Customizer Core
+ * Image Optimizer (Settings + UI)
  *
  * @package zeitfresser
  */
 
-function zeitfresser_customize_register( $wp_customize ) {
+/**
-
+ * ------------------------------------------------------------------------
-	// Live Preview support
+ * Settings
-	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
+ * ------------------------------------------------------------------------
-	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
+ */
-	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
+function zeitfresser_customize_image_optimizer_settings( $wp_customize ) {
-
-	if ( isset( $wp_customize->selective_refresh ) ) {
-		$wp_customize->selective_refresh->add_partial(
-			'blogname',
-			array(
-				'selector'        => '.site-title a',
-				'render_callback' => 'zeitfresser_customize_partial_blogname',
-			)
-		);
-
-		$wp_customize->selective_refresh->add_partial(
-			'blogdescription',
-			array(
-				'selector'        => '.site-description',
-				'render_callback' => 'zeitfresser_customize_partial_blogdescription',
-			)
-		);
-	}
 
 	/**
-	 * Performance Tools Section
+	 * Image Optimizer Section
 	 */
 	$wp_customize->add_section(
-		'ztfr_performance_tools',
+		'ztfr_image_optimizer',
 		array(
-			'title'    => 'Performance Tools Settings',
+			'title'    => 'Image Optimizer',
 			'priority' => 160,
 		)
 	);
@@ -56,7 +38,7 @@ function zeitfresser_customize_register( $wp_customize ) {
 		'ztfr_auto_optimize',
 		array(
 			'type'        => 'checkbox',
-			'section'     => 'ztfr_performance_tools',
+			'section'     => 'ztfr_image_optimizer',
 			'label'       => 'Auto Optimize Pictures on Upload',
 			'description' => 'Automatically converts images to AVIF/WebP.',
 		)
@@ -77,43 +59,21 @@ function zeitfresser_customize_register( $wp_customize ) {
 		'ztfr_auto_delete',
 		array(
 			'type'        => 'checkbox',
-			'section'     => 'ztfr_performance_tools',
+			'section'     => 'ztfr_image_optimizer',
 			'label'       => 'Auto Delete Original Pictures',
 			'description' => 'Deletes originals after optimization.',
 		)
 	);
 }
-add_action( 'customize_register', 'zeitfresser_customize_register' );
+add_action( 'customize_register', 'zeitfresser_customize_image_optimizer_settings' );
+
 
 /**
- * Partial refresh helpers
+ * ------------------------------------------------------------------------
+ * UI Logic (JS)
+ * ------------------------------------------------------------------------
  */
-function zeitfresser_customize_partial_blogname() {
+function zeitfresser_customize_image_optimizer_ui() {
-	bloginfo( 'name' );
-}
-
-function zeitfresser_customize_partial_blogdescription() {
-	bloginfo( 'description' );
-}
-
-/**
- * Live preview JS
- */
-function zeitfresser_customize_preview_js() {
-	wp_enqueue_script(
-		'zeitfresser-customizer',
-		get_template_directory_uri() . '/js/customizer.js',
-		array( 'customize-preview' ),
-		ZEITFRESSER_VERSION,
-		true
-	);
-}
-add_action( 'customize_preview_init', 'zeitfresser_customize_preview_js' );
-
-/**
- * Dependency UI logic
- */
-function zeitfresser_customize_controls_dependency_js() {
 	?>
 	<script>
 	(function() {
@@ -193,7 +153,6 @@ function zeitfresser_customize_controls_dependency_js() {
 			        return;
 		        }
 
-		        // Retry max 10x
 		        if (attempts < 10) {
 			        attempts++;
 			        setTimeout(tryInit, 200);
@@ -225,12 +184,15 @@ function zeitfresser_customize_controls_dependency_js() {
 	</script>
 	<?php
 }
-add_action( 'customize_controls_enqueue_scripts', 'zeitfresser_customize_controls_dependency_js' );
+add_action( 'customize_controls_enqueue_scripts', 'zeitfresser_customize_image_optimizer_ui' );
+
 
 /**
- * Small UI polish
+ * ------------------------------------------------------------------------
+ * UI Styles
+ * ------------------------------------------------------------------------
  */
-add_action( 'customize_controls_enqueue_scripts', function() {
+function zeitfresser_customize_image_optimizer_ui_styles() {
 	?>
 	<style>
 	#customize-control-ztfr_auto_optimize > label,
@@ -241,4 +203,8 @@ add_action( 'customize_controls_enqueue_scripts', function() {
 	}
 	</style>
 	<?php
-});
+}
+add_action(
+	'customize_controls_enqueue_scripts',
+	'zeitfresser_customize_image_optimizer_ui_styles'
+);

inc/tools/code-block.php

@@ -0,0 +1,211 @@
+<?php
+/**
+ * Simplified Code Block Feature
+ *
+ * Handles:
+ * - Frontend assets
+ * - Editor assets
+ * - Classic Editor button
+ * - Gutenberg block
+ * - Server-side wrapping for code blocks
+ *
+ * @package Zeitfresser
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Get asset version from file modification time.
+ *
+ * @param string $relative_path Relative path inside the theme directory.
+ * @return string
+ */
+function ztfr_code_asset_version( $relative_path ) {
+	$file_path = get_template_directory() . $relative_path;
+
+	if ( file_exists( $file_path ) ) {
+		return (string) filemtime( $file_path );
+	}
+
+	return (string) ZEITFRESSER_VERSION;
+}
+
+/**
+ * Enqueue frontend assets.
+ */
+function ztfr_enqueue_code_assets() {
+
+	if ( is_admin() ) {
+		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' );
+
+	wp_enqueue_style(
+		'ztfr-code',
+		get_template_directory_uri() . '/assets/css/code.css',
+		[],
+		$code_css_version
+	);
+
+	wp_enqueue_script(
+		'ztfr-prism',
+		get_template_directory_uri() . '/assets/js/prism.js',
+		[],
+		$prism_version,
+		true
+	);
+
+	/**
+	 * Disable Prism auto-highlighting.
+	 *
+	 * Prism auto-runs on DOM ready unless Prism.manual is set before the core
+	 * script executes. We disable auto-run so highlighting happens only once
+	 * in our custom script after the DOM is ready.
+	 */
+	wp_add_inline_script(
+		'ztfr-prism',
+		'window.Prism = window.Prism || {}; window.Prism.manual = true;',
+		'before'
+	);
+
+	wp_enqueue_script(
+		'ztfr-code-block',
+		get_template_directory_uri() . '/assets/js/code-block.js',
+		[ 'ztfr-prism' ],
+		$code_js_version,
+		true
+	);
+}
+add_action( 'wp_enqueue_scripts', 'ztfr_enqueue_code_assets' );
+
+/**
+ * Enqueue block editor assets.
+ */
+function ztfr_enqueue_code_block_editor_assets() {
+	$editor_js_version  = ztfr_code_asset_version( '/assets/js/editor.js' );
+	$code_css_version   = ztfr_code_asset_version( '/assets/css/code.css' );
+	$editor_css_version = ztfr_code_asset_version( '/assets/css/editor.css' );
+
+	wp_enqueue_script(
+		'ztfr-code-editor',
+		get_template_directory_uri() . '/assets/js/editor.js',
+		[
+			'wp-blocks',
+			'wp-element',
+			'wp-i18n',
+			'wp-components',
+			'wp-block-editor',
+		],
+		$editor_js_version,
+		true
+	);
+
+	wp_enqueue_style(
+		'ztfr-code-editor-preview',
+		get_template_directory_uri() . '/assets/css/code.css',
+		[],
+		$code_css_version
+	);
+
+	wp_enqueue_style(
+		'ztfr-editor',
+		get_template_directory_uri() . '/assets/css/editor.css',
+		[],
+		$editor_css_version
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'ztfr_enqueue_code_block_editor_assets' );
+
+/**
+ * Register Classic Editor button only for users who can edit and use rich text.
+ */
+function ztfr_register_classic_code_button() {
+
+	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
+		return;
+	}
+
+	if ( 'true' !== get_user_option( 'rich_editing' ) ) {
+		return;
+	}
+
+	add_filter( 'mce_external_plugins', 'ztfr_add_classic_code_plugin' );
+	add_filter( 'mce_buttons', 'ztfr_add_classic_code_button' );
+}
+add_action( 'admin_init', 'ztfr_register_classic_code_button' );
+
+/**
+ * Add TinyMCE plugin script.
+ *
+ * @param array $plugins TinyMCE plugins.
+ * @return array
+ */
+function ztfr_add_classic_code_plugin( $plugins ) {
+	$plugins['ztfr_code_block'] = get_template_directory_uri() . '/assets/js/editor.js';
+	return $plugins;
+}
+
+/**
+ * Add TinyMCE toolbar button.
+ *
+ * @param array $buttons TinyMCE buttons.
+ * @return array
+ */
+function ztfr_add_classic_code_button( $buttons ) {
+	$buttons[] = 'ztfr_code_block';
+	return $buttons;
+}
+
+/**
+ * Wrap code blocks server-side.
+ *
+ * This keeps Classic Editor, Gutenberg and pasted raw code blocks
+ * compatible with the frontend styling without runtime DOM manipulation.
+ *
+ * @param string $content Post content.
+ * @return string
+ */
+function ztfr_wrap_code_blocks( $content ) {
+
+	if ( is_admin() ) {
+		return $content;
+	}
+
+	if ( false === strpos( $content, '<pre' ) ) {
+		return $content;
+	}
+
+	$content = preg_replace_callback(
+		'/<pre([^>]*)><code([^>]*)>(.*?)<\/code><\/pre>/s',
+		function ( $matches ) {
+
+			$pre_attrs  = $matches[1];
+			$code_attrs = $matches[2];
+			$code       = $matches[3];
+
+			if ( false === strpos( $pre_attrs, 'language-' ) ) {
+				$pre_attrs .= ' class="language-yaml"';
+			}
+
+			if ( false === strpos( $code_attrs, 'language-' ) ) {
+				$code_attrs .= ' class="language-yaml"';
+			}
+
+			return sprintf(
+				'<div class="ztfr-code"><pre%s><code%s>%s</code></pre></div>',
+				$pre_attrs,
+				$code_attrs,
+				$code
+			);
+		},
+		$content
+	);
+
+	return $content;
+}
+add_filter( 'the_content', 'ztfr_wrap_code_blocks', 20 );

inc/tools/image-optimizer.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Performance tools for existing media.
+ * Image Optimizer
  *
  * @package zeitfresser
  */
@@ -12,16 +12,16 @@ if ( ! defined( 'ABSPATH' ) ) {
 /**
  * Register admin page
  */
-function zeitfresser_register_performance_tools_page() {
+function zeitfresser_register_image_optimizer_page() {
     add_theme_page(
-        'Performance Tools',
+        'Image Optimizer',
-        'Performance Tools',
+        'Image Optimizer',
         'manage_options',
-        'zeitfresser-performance-tools',
+        'zeitfresser-image-optimizer',
-        'zeitfresser_render_performance_tools_page'
+        'zeitfresser_render_image_optimizer_page'
     );
 }
-add_action( 'admin_menu', 'zeitfresser_register_performance_tools_page' );
+add_action( 'admin_menu', 'zeitfresser_register_image_optimizer_page' );
 
 /**
  * Count pending images
@@ -427,7 +427,7 @@ function zeitfresser_ajax_optimize_images() {
         wp_send_json_error();
     }
 
-    check_ajax_referer( 'zeitfresser_performance_tools', 'nonce' );
+    check_ajax_referer( 'zeitfresser_image_optimizer', 'nonce' );
 
     $results = zeitfresser_process_legacy_images_batch( 25 );
 
@@ -465,7 +465,7 @@ function zeitfresser_ajax_delete_originals() {
         wp_send_json_error();
     }
 
-    check_ajax_referer( 'zeitfresser_performance_tools', 'nonce' );
+    check_ajax_referer( 'zeitfresser_image_optimizer', 'nonce' );
 
     $deleted       = zeitfresser_delete_originals_batch( 10 );
     $total         = zeitfresser_get_total_originals_count();
@@ -486,7 +486,7 @@ add_action( 'wp_ajax_zeitfresser_delete_originals', 'zeitfresser_ajax_delete_ori
 /**
  * Render UI
  */
-function zeitfresser_render_performance_tools_page() {
+function zeitfresser_render_image_optimizer_page() {
 
     if ( ! current_user_can( 'manage_options' ) ) {
         return;
@@ -519,7 +519,7 @@ function zeitfresser_render_performance_tools_page() {
 ?>
 
 <div class="wrap">
-    <h1>Zeitfresser Performance Tools</h1>
+    <h1>Zeitfresser Image Optimizer</h1>
     
     <div class="notice notice-info" style="max-width:800px;margin-top:20px;">
         <p>
@@ -532,7 +532,7 @@ function zeitfresser_render_performance_tools_page() {
             • Once optimized, original images can be deleted to save disk space.<br><br>
 
             <strong>Automation:</strong><br>
-            • You can enable automatic optimization on upload in the Customizer under <em>Performance Tools Settings</em>.<br>
+            • You can enable automatic optimization on upload in the Customizer under <em>Image Optimizer Settings</em>.<br>
             • Optionally, original images can also be deleted automatically after successful optimization.<br><br>
 
             <strong>Safety:</strong><br>
@@ -653,7 +653,7 @@ function deleteBatch() {
         headers: {'Content-Type': 'application/x-www-form-urlencoded'},
         body: new URLSearchParams({
             action: 'zeitfresser_delete_originals',
-            nonce: '<?php echo wp_create_nonce('zeitfresser_performance_tools'); ?>'
+            nonce: '<?php echo wp_create_nonce('zeitfresser_image_optimizer'); ?>'
         })
     })
     .then(res => res.json())
@@ -732,7 +732,7 @@ function processBatch() {
         headers: {'Content-Type': 'application/x-www-form-urlencoded'},
         body: new URLSearchParams({
             action: 'zeitfresser_optimize_images',
-            nonce: '<?php echo wp_create_nonce('zeitfresser_performance_tools'); ?>'
+            nonce: '<?php echo wp_create_nonce('zeitfresser_image_optimizer'); ?>'
         })
     })
     .then(res => res.json())

inc/utilities/helpers.php

@@ -224,3 +224,11 @@ if ( ! function_exists( 'zeitfresser_asset' ) ) {
         return get_template_directory_uri() . '/assets/' . ltrim($path, '/');
     }
 }
+
+/**
+ * Delete Cookie Button
+ */
+ add_filter( 'comment_form_default_fields', function( $fields ) {
+    unset( $fields['cookies'] );
+    return $fields;
+});

style.css

@@ -5,7 +5,7 @@ Author: Zeitfresser
 Author URI: https://ztfr.eu/
 Theme URI: https://ztfr.eu/
 Description: Zeitfresser Wordpress Theme
-Version: 2.5
+Version: 2.6
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later
@@ -247,6 +247,16 @@ textarea {
   margin: 0;
 }
 
+/* Article Justifiy */
+
+.entry-content p,
+.post-content p {
+    text-align: justify;
+    hyphens: auto;
+    word-break: normal;
+    overflow-wrap: break-word;
+}
+
 /* Header Wrapper */
 
 .header-wrapper {
@@ -997,7 +1007,7 @@ header.site-header .social-links svg:hover {
 }
 
 .site-header .search-field::placeholder {
-  color: var(--light-color) !important;
+  color: var(--dark-color)) !important;
   font-weight: 300;
 }
 
@@ -1275,33 +1285,6 @@ header.site-header .social-links svg:hover {
   }
 }
 
-/* Search Widget */
-
-.site-header .search-field:focus {
-  width: 320px;
-
-  background-color: rgba(255,255,255,0.85);
-  background-image: url(images/search-b.svg);
-
-  cursor: text;
-  outline: none;
-}
-
-@media (max-width: 500px) {
-  .site-header .search-field:focus {
-    width: 100%;
-  }
-}
-
-.site-header .search-field::placeholder {
-  color: var(--dark-color);
-  font-weight: 300;
-}
-
-.site-header .search-submit {
-  display: none;
-}
-
 /* Sidebar Search */
 
 .widget_search form {
@@ -1366,12 +1349,6 @@ header.site-header .social-links svg:hover {
   margin-bottom: var(--space-md);
 }
 
-.entry-content,
-.post-content,
-.inner-article-content {
-  max-width: 100%;
-}
-
 .single-post .entry-content > * + * {
   margin-top: var(--space-md);
 }
@@ -1582,7 +1559,6 @@ header.page-header h1 {
   display: flex;
   align-items: center;
   gap: 0.3rem;
-
   font-family: var(--primary-font);
   margin: 0.5rem 0;
 }
@@ -1590,7 +1566,7 @@ header.page-header h1 {
 .comments a {
   background: none;
   color: inherit;
-  transform: translateY(-1px);
+  transform: translateY(-0.5px);
 }
 
 .comments svg {