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
This commit is contained in:
+16
-4
@@ -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;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
|
||||
+149
-43
@@ -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, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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, '&')
|
||||
.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);
|
||||
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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
*
|
||||
@@ -40,6 +68,10 @@ function ztfr_enqueue_code_assets() {
|
||||
if ( is_admin() ) {
|
||||
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' );
|
||||
|
||||
@@ -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__inside-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.widget_search .wp-block-search__inside-wrapper {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_search input[type="search"] {
|
||||
.widget_search .wp-block-search__input,
|
||||
.sidebar .wp-block-search__input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
|
||||
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%;
|
||||
padding: 1rem 2rem;
|
||||
height: 36px;
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user