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.
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
})();
|
||||||
@@ -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, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''');
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
File diff suppressed because one or more lines are too long
@@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
+8
-10
@@ -51,6 +51,7 @@ require get_template_directory() . '/inc/utilities/toc.php';
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
require get_template_directory() . '/inc/tools/image-optimizer.php';
|
require get_template_directory() . '/inc/tools/image-optimizer.php';
|
||||||
|
require get_template_directory() . '/inc/tools/code-block.php';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -142,8 +143,6 @@ function zeitfresser_setup() {
|
|||||||
register_nav_menus( array(
|
register_nav_menus( array(
|
||||||
'menu-1' => esc_html__( 'Primary', 'zeitfresser' ),
|
'menu-1' => esc_html__( 'Primary', 'zeitfresser' ),
|
||||||
));
|
));
|
||||||
|
|
||||||
add_editor_style( 'editor-style.css' );
|
|
||||||
}
|
}
|
||||||
add_action( 'after_setup_theme', 'zeitfresser_setup' );
|
add_action( 'after_setup_theme', 'zeitfresser_setup' );
|
||||||
|
|
||||||
@@ -248,6 +247,13 @@ function zeitfresser_scripts() {
|
|||||||
}
|
}
|
||||||
add_action( 'wp_enqueue_scripts', 'zeitfresser_scripts', 10 );
|
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
|
* Performance Tweaks
|
||||||
@@ -693,11 +699,3 @@ function zeitfresser_responsive_image_sizes( $sizes, $size ) {
|
|||||||
return $sizes;
|
return $sizes;
|
||||||
}
|
}
|
||||||
add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
|
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;
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -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 );
|
||||||
@@ -224,3 +224,11 @@ if ( ! function_exists( 'zeitfresser_asset' ) ) {
|
|||||||
return get_template_directory_uri() . '/assets/' . ltrim($path, '/');
|
return get_template_directory_uri() . '/assets/' . ltrim($path, '/');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete Cookie Button
|
||||||
|
*/
|
||||||
|
add_filter( 'comment_form_default_fields', function( $fields ) {
|
||||||
|
unset( $fields['cookies'] );
|
||||||
|
return $fields;
|
||||||
|
});
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ Author: Zeitfresser
|
|||||||
Author URI: https://ztfr.eu/
|
Author URI: https://ztfr.eu/
|
||||||
Theme URI: https://ztfr.eu/
|
Theme URI: https://ztfr.eu/
|
||||||
Description: Zeitfresser Wordpress Theme
|
Description: Zeitfresser Wordpress Theme
|
||||||
Version: 2.5
|
Version: 2.6
|
||||||
Tested up to: 6.2
|
Tested up to: 6.2
|
||||||
Requires PHP: 7.0
|
Requires PHP: 7.0
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
|
|||||||
Reference in New Issue
Block a user