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:
2026-05-03 00:22:55 +02:00
parent b51ce9ab3f
commit eda333d17a
4 changed files with 254 additions and 122 deletions
+32
View File
@@ -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' );