added additional plugins
This commit is contained in:
parent
c85895d306
commit
00e60ec1b7
132 changed files with 27514 additions and 0 deletions
225
native/wordpress/maple-code-blocks/assets/js/block-variations.js
Normal file
225
native/wordpress/maple-code-blocks/assets/js/block-variations.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
/**
|
||||
* GitHub Code Viewer Block Variations
|
||||
* Provides pre-configured block patterns for common use cases
|
||||
*/
|
||||
|
||||
(function(blocks, domReady) {
|
||||
'use strict';
|
||||
|
||||
domReady(function() {
|
||||
// Register block variations
|
||||
blocks.registerBlockVariation('maple-code-blocks/code-block', {
|
||||
name: 'react-component',
|
||||
title: 'Maple: React Component',
|
||||
description: 'Display a React component from GitHub',
|
||||
icon: 'editor-code',
|
||||
attributes: {
|
||||
repository: 'facebook/react',
|
||||
theme: 'dark',
|
||||
height: '500px',
|
||||
showLineNumbers: true,
|
||||
initialFile: 'packages/react/src/React.js'
|
||||
},
|
||||
scope: ['inserter']
|
||||
});
|
||||
|
||||
blocks.registerBlockVariation('maple-code-blocks/code-block', {
|
||||
name: 'documentation-viewer',
|
||||
title: 'Maple: Documentation Viewer',
|
||||
description: 'Display README or documentation files',
|
||||
icon: 'media-document',
|
||||
attributes: {
|
||||
repository: '',
|
||||
theme: 'light',
|
||||
height: '400px',
|
||||
showLineNumbers: false,
|
||||
initialFile: 'README.md'
|
||||
},
|
||||
scope: ['inserter']
|
||||
});
|
||||
|
||||
blocks.registerBlockVariation('maple-code-blocks/code-block', {
|
||||
name: 'full-repository',
|
||||
title: 'Maple: Full Repository Browser',
|
||||
description: 'Browse entire repository with file tree',
|
||||
icon: 'category',
|
||||
attributes: {
|
||||
repository: '',
|
||||
theme: 'dark',
|
||||
height: '700px',
|
||||
showLineNumbers: true,
|
||||
initialFile: ''
|
||||
},
|
||||
scope: ['inserter']
|
||||
});
|
||||
|
||||
blocks.registerBlockVariation('maple-code-blocks/code-block', {
|
||||
name: 'code-snippet',
|
||||
title: 'Maple: Code Snippet',
|
||||
description: 'Display a specific code file',
|
||||
icon: 'editor-code',
|
||||
attributes: {
|
||||
repository: '',
|
||||
theme: 'monokai',
|
||||
height: '300px',
|
||||
showLineNumbers: true,
|
||||
initialFile: ''
|
||||
},
|
||||
scope: ['inserter']
|
||||
});
|
||||
|
||||
blocks.registerBlockVariation('maple-code-blocks/code-block', {
|
||||
name: 'tutorial-code',
|
||||
title: 'Maple: Tutorial Code',
|
||||
description: 'Perfect for coding tutorials and education',
|
||||
icon: 'welcome-learn-more',
|
||||
attributes: {
|
||||
repository: '',
|
||||
theme: 'solarized',
|
||||
height: '450px',
|
||||
showLineNumbers: true,
|
||||
title: 'Example Code'
|
||||
},
|
||||
scope: ['inserter']
|
||||
});
|
||||
|
||||
// Register block styles (additional styling options)
|
||||
blocks.registerBlockStyle('maple-code-blocks/code-block', {
|
||||
name: 'default',
|
||||
label: 'Default',
|
||||
isDefault: true
|
||||
});
|
||||
|
||||
blocks.registerBlockStyle('maple-code-blocks/code-block', {
|
||||
name: 'minimal',
|
||||
label: 'Minimal',
|
||||
className: 'is-style-minimal'
|
||||
});
|
||||
|
||||
blocks.registerBlockStyle('maple-code-blocks/code-block', {
|
||||
name: 'rounded',
|
||||
label: 'Rounded',
|
||||
className: 'is-style-rounded'
|
||||
});
|
||||
|
||||
blocks.registerBlockStyle('maple-code-blocks/code-block', {
|
||||
name: 'shadowed',
|
||||
label: 'Shadowed',
|
||||
className: 'is-style-shadowed'
|
||||
});
|
||||
|
||||
// Register block patterns for complete layouts
|
||||
if (wp.blockEditor && wp.blockEditor.registerBlockPattern) {
|
||||
// Code Comparison Pattern
|
||||
wp.blockEditor.registerBlockPattern('maple-code-blocks/code-comparison', {
|
||||
title: 'Maple: Code Comparison',
|
||||
description: 'Compare code from two different repositories',
|
||||
categories: ['maple-code-blocks'],
|
||||
content: `
|
||||
<!-- wp:columns -->
|
||||
<div class="wp-block-columns">
|
||||
<!-- wp:column -->
|
||||
<div class="wp-block-column">
|
||||
<!-- wp:heading {"level":3} -->
|
||||
<h3>Original Implementation</h3>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"facebook/react","theme":"dark","height":"400px"} /-->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
<!-- wp:column -->
|
||||
<div class="wp-block-column">
|
||||
<!-- wp:heading {"level":3} -->
|
||||
<h3>Alternative Implementation</h3>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"vuejs/vue","theme":"dark","height":"400px"} /-->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
</div>
|
||||
<!-- /wp:columns -->`
|
||||
});
|
||||
|
||||
// Tutorial Pattern
|
||||
wp.blockEditor.registerBlockPattern('maple-code-blocks/tutorial-layout', {
|
||||
title: 'Maple: Tutorial Layout',
|
||||
description: 'Code tutorial with explanation',
|
||||
categories: ['maple-code-blocks'],
|
||||
content: `
|
||||
<!-- wp:group {"backgroundColor":"light-gray","padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}} -->
|
||||
<div class="wp-block-group has-light-gray-background-color has-background" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
|
||||
<!-- wp:heading -->
|
||||
<h2>Code Tutorial</h2>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:paragraph -->
|
||||
<p>Here's an example of how to implement this feature:</p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true,"title":"Step 1: Basic Setup"} /-->
|
||||
<!-- wp:paragraph -->
|
||||
<p>Now let's add some advanced functionality:</p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true,"title":"Step 2: Advanced Features"} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->`
|
||||
});
|
||||
|
||||
// Documentation Pattern
|
||||
wp.blockEditor.registerBlockPattern('maple-code-blocks/documentation', {
|
||||
title: 'Maple: Documentation Section',
|
||||
description: 'Documentation with embedded code',
|
||||
categories: ['maple-code-blocks'],
|
||||
content: `
|
||||
<!-- wp:heading -->
|
||||
<h2>API Documentation</h2>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:paragraph -->
|
||||
<p>This library provides a simple interface for working with the API.</p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:heading {"level":3} -->
|
||||
<h3>Installation</h3>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:code -->
|
||||
<pre class="wp-block-code"><code>npm install example-library</code></pre>
|
||||
<!-- /wp:code -->
|
||||
<!-- wp:heading {"level":3} -->
|
||||
<h3>Source Code</h3>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"500px","showLineNumbers":true} /-->
|
||||
<!-- wp:heading {"level":3} -->
|
||||
<h3>Examples</h3>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"300px","showLineNumbers":false,"initialFile":"examples/basic.js"} /-->`
|
||||
});
|
||||
|
||||
// Showcase Pattern
|
||||
wp.blockEditor.registerBlockPattern('maple-code-blocks/showcase', {
|
||||
title: 'Maple: Project Showcase',
|
||||
description: 'Showcase a GitHub project',
|
||||
categories: ['maple-code-blocks'],
|
||||
content: `
|
||||
<!-- wp:cover {"url":"","dimRatio":50,"align":"full"} -->
|
||||
<div class="wp-block-cover alignfull">
|
||||
<div class="wp-block-cover__inner-container">
|
||||
<!-- wp:heading {"textAlign":"center","level":1} -->
|
||||
<h1 class="has-text-align-center">Project Name</h1>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:paragraph {"align":"center"} -->
|
||||
<p class="has-text-align-center">A brief description of your amazing project</p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
|
||||
<div class="wp-block-buttons">
|
||||
<!-- wp:button -->
|
||||
<div class="wp-block-button"><a class="wp-block-button__link">View on GitHub</a></div>
|
||||
<!-- /wp:button -->
|
||||
</div>
|
||||
<!-- /wp:buttons -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /wp:cover -->
|
||||
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"600px","showLineNumbers":true,"align":"full"} /-->`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})(
|
||||
window.wp.blocks,
|
||||
window.wp.domReady
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue