273 lines
10 KiB
PHP
273 lines
10 KiB
PHP
<?php
|
|
/**
|
|
* Block Patterns Registration
|
|
* Registers reusable block patterns for the GitHub Code Viewer
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('WPINC')) {
|
|
die('Direct access not permitted.');
|
|
}
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
class MCB_Block_Patterns {
|
|
|
|
/**
|
|
* Initialize block patterns
|
|
*/
|
|
public static function init() {
|
|
add_action('init', array(__CLASS__, 'register_pattern_category'));
|
|
add_action('init', array(__CLASS__, 'register_patterns'));
|
|
}
|
|
|
|
/**
|
|
* Register pattern category
|
|
*/
|
|
public static function register_pattern_category() {
|
|
if (function_exists('register_block_pattern_category')) {
|
|
register_block_pattern_category(
|
|
'maple-code-blocks',
|
|
array(
|
|
'label' => __('GitHub Code Viewer', 'maple-code-blocks')
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Register block patterns
|
|
*/
|
|
public static function register_patterns() {
|
|
if (!function_exists('register_block_pattern')) {
|
|
return;
|
|
}
|
|
|
|
// Code with Explanation Pattern
|
|
register_block_pattern(
|
|
'maple-code-blocks/code-with-explanation',
|
|
array(
|
|
'title' => __('Maple: Code with Explanation', 'maple-code-blocks'),
|
|
'description' => __('Display code with explanatory text', 'maple-code-blocks'),
|
|
'categories' => array('maple-code-blocks', 'text'),
|
|
'keywords' => array('code', 'github', 'explanation', 'tutorial'),
|
|
'content' => '<!-- wp:group {"backgroundColor":"white","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
|
|
<div class="wp-block-group has-white-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px">
|
|
<!-- wp:heading {"level":3} -->
|
|
<h3>' . __('Understanding the Code', 'maple-code-blocks') . '</h3>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph -->
|
|
<p>' . __('This example demonstrates a key concept in modern development:', 'maple-code-blocks') . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"400px","showLineNumbers":true} /-->
|
|
|
|
<!-- wp:list -->
|
|
<ul>
|
|
<li>' . __('Line 1-5: Initial setup and configuration', 'maple-code-blocks') . '</li>
|
|
<li>' . __('Line 6-15: Core functionality implementation', 'maple-code-blocks') . '</li>
|
|
<li>' . __('Line 16-20: Error handling and cleanup', 'maple-code-blocks') . '</li>
|
|
</ul>
|
|
<!-- /wp:list -->
|
|
</div>
|
|
<!-- /wp:group -->'
|
|
)
|
|
);
|
|
|
|
// Side-by-side Code Comparison
|
|
register_block_pattern(
|
|
'maple-code-blocks/side-by-side',
|
|
array(
|
|
'title' => __('Maple: Side-by-Side Comparison', 'maple-code-blocks'),
|
|
'description' => __('Compare two code implementations', 'maple-code-blocks'),
|
|
'categories' => array('maple-code-blocks', 'columns'),
|
|
'keywords' => array('compare', 'code', 'github', 'columns'),
|
|
'content' => '<!-- wp:columns {"align":"wide"} -->
|
|
<div class="wp-block-columns alignwide">
|
|
<!-- wp:column -->
|
|
<div class="wp-block-column">
|
|
<!-- wp:heading {"level":4,"style":{"color":{"text":"#0073aa"}}} -->
|
|
<h4 class="has-text-color" style="color:#0073aa">' . __('Method A', 'maple-code-blocks') . '</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
|
|
<!-- wp:column -->
|
|
<div class="wp-block-column">
|
|
<!-- wp:heading {"level":4,"style":{"color":{"text":"#00a32a"}}} -->
|
|
<h4 class="has-text-color" style="color:#00a32a">' . __('Method B', 'maple-code-blocks') . '</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
</div>
|
|
<!-- /wp:columns -->'
|
|
)
|
|
);
|
|
|
|
// Code Gallery Pattern
|
|
register_block_pattern(
|
|
'maple-code-blocks/code-gallery',
|
|
array(
|
|
'title' => __('Maple: Code Gallery', 'maple-code-blocks'),
|
|
'description' => __('Showcase multiple code examples', 'maple-code-blocks'),
|
|
'categories' => array('maple-code-blocks', 'gallery'),
|
|
'keywords' => array('gallery', 'showcase', 'multiple', 'code'),
|
|
'content' => '<!-- wp:heading {"textAlign":"center"} -->
|
|
<h2 class="has-text-align-center">' . __('Code Examples', 'maple-code-blocks') . '</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:spacer {"height":"30px"} -->
|
|
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
|
|
<!-- /wp:spacer -->
|
|
|
|
<!-- wp:columns -->
|
|
<div class="wp-block-columns">
|
|
<!-- wp:column -->
|
|
<div class="wp-block-column">
|
|
<!-- wp:heading {"level":5,"textAlign":"center"} -->
|
|
<h5 class="has-text-align-center">' . __('Example 1', 'maple-code-blocks') . '</h5>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"monokai","height":"250px","showLineNumbers":false} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
|
|
<!-- wp:column -->
|
|
<div class="wp-block-column">
|
|
<!-- wp:heading {"level":5,"textAlign":"center"} -->
|
|
<h5 class="has-text-align-center">' . __('Example 2', 'maple-code-blocks') . '</h5>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"monokai","height":"250px","showLineNumbers":false} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
|
|
<!-- wp:column -->
|
|
<div class="wp-block-column">
|
|
<!-- wp:heading {"level":5,"textAlign":"center"} -->
|
|
<h5 class="has-text-align-center">' . __('Example 3', 'maple-code-blocks') . '</h5>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"monokai","height":"250px","showLineNumbers":false} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
</div>
|
|
<!-- /wp:columns -->'
|
|
)
|
|
);
|
|
|
|
// Featured Code Pattern
|
|
register_block_pattern(
|
|
'maple-code-blocks/featured-code',
|
|
array(
|
|
'title' => __('Maple: Featured Code', 'maple-code-blocks'),
|
|
'description' => __('Highlight important code with context', 'maple-code-blocks'),
|
|
'categories' => array('maple-code-blocks', 'featured'),
|
|
'keywords' => array('featured', 'highlight', 'code', 'important'),
|
|
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"border":{"radius":"8px"}},"backgroundColor":"light-gray"} -->
|
|
<div class="wp-block-group alignwide has-light-gray-background-color has-background" style="border-radius:8px;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
|
|
<!-- wp:columns -->
|
|
<div class="wp-block-columns">
|
|
<!-- wp:column {"width":"40%"} -->
|
|
<div class="wp-block-column" style="flex-basis:40%">
|
|
<!-- wp:heading {"level":3} -->
|
|
<h3>' . __('Featured Implementation', 'maple-code-blocks') . '</h3>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph -->
|
|
<p>' . __('This code demonstrates best practices for this common pattern.', 'maple-code-blocks') . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:buttons -->
|
|
<div class="wp-block-buttons">
|
|
<!-- wp:button -->
|
|
<div class="wp-block-button"><a class="wp-block-button__link">' . __('View on GitHub', 'maple-code-blocks') . '</a></div>
|
|
<!-- /wp:button -->
|
|
</div>
|
|
<!-- /wp:buttons -->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
|
|
<!-- wp:column {"width":"60%"} -->
|
|
<div class="wp-block-column" style="flex-basis:60%">
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"350px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:column -->
|
|
</div>
|
|
<!-- /wp:columns -->
|
|
</div>
|
|
<!-- /wp:group -->'
|
|
)
|
|
);
|
|
|
|
// Tutorial Step Pattern
|
|
register_block_pattern(
|
|
'maple-code-blocks/tutorial-steps',
|
|
array(
|
|
'title' => __('Maple: Tutorial Steps', 'maple-code-blocks'),
|
|
'description' => __('Step-by-step code tutorial', 'maple-code-blocks'),
|
|
'categories' => array('maple-code-blocks', 'text'),
|
|
'keywords' => array('tutorial', 'steps', 'education', 'learn'),
|
|
'content' => '<!-- wp:group -->
|
|
<div class="wp-block-group">
|
|
<!-- wp:heading -->
|
|
<h2>' . __('Building Your First Application', 'maple-code-blocks') . '</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:group {"style":{"spacing":{"margin":{"top":"30px","bottom":"30px"}}}} -->
|
|
<div class="wp-block-group" style="margin-top:30px;margin-bottom:30px">
|
|
<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"20px"}}} -->
|
|
<h3 style="font-size:20px">📝 ' . __('Step 1: Setup', 'maple-code-blocks') . '</h3>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph -->
|
|
<p>' . __('First, we need to set up our development environment:', 'maple-code-blocks') . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"200px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"style":{"spacing":{"margin":{"top":"30px","bottom":"30px"}}}} -->
|
|
<div class="wp-block-group" style="margin-top:30px;margin-bottom:30px">
|
|
<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"20px"}}} -->
|
|
<h3 style="font-size:20px">🔧 ' . __('Step 2: Configuration', 'maple-code-blocks') . '</h3>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph -->
|
|
<p>' . __('Next, configure the application settings:', 'maple-code-blocks') . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"250px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"style":{"spacing":{"margin":{"top":"30px","bottom":"30px"}}}} -->
|
|
<div class="wp-block-group" style="margin-top:30px;margin-bottom:30px">
|
|
<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"20px"}}} -->
|
|
<h3 style="font-size:20px">🚀 ' . __('Step 3: Deploy', 'maple-code-blocks') . '</h3>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph -->
|
|
<p>' . __('Finally, deploy your application:', 'maple-code-blocks') . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"200px","showLineNumbers":true} /-->
|
|
</div>
|
|
<!-- /wp:group -->
|
|
</div>
|
|
<!-- /wp:group -->'
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
// Initialize patterns
|
|
MCB_Block_Patterns::init();
|