菜单
Guide to Gutenberg block markup for Klytos CMS — CRITICAL for page creation via MCP. All HTML content MUST use Gutenberg block comment delimiters so the visual editor can parse blocks correctly. Use when creating or updating pages with content.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Guide for developing and maintaining Klytos CMS core. Use when modifying core files, adding MCP tools, fixing bugs, extending the core architecture, changing the build engine, modifying the installer, implementing hooks, or working with storage backends. Covers foundational principles (AI-first, privacy by design, security by default), architecture, boot sequence, manager pattern, MCP tool registration, and security checklist.
Complete guide for developing Klytos CMS plugins including structure, entry points, MCP tools, admin pages, hooks, routes, and best practices. Use when creating, modifying, extending Klytos functionality, adding MCP tools, admin pages, hooks, filters, or debugging plugins.
Complete reference of CSS design tokens, component classes, utility classes, and frontend styling in Klytos CMS. Use when building content, plugins, or admin templates that need consistent styling without hardcoding colors or writing custom CSS.
Guide for creating custom page templates, template parts, hook points, reusable blocks, and page template recipes in Klytos CMS. Use when creating new page layout templates, customizing template parts, adding frontend hook points, defining reusable blocks with slots, or building page template recipes combining multiple blocks.
Complete reference of all hooks (actions and filters) available in Klytos CMS for intercepting and extending functionality. Use when hooking into Klytos events, modifying behavior through filters, adding custom behavior at lifecycle points, or understanding the hook system and priorities.
Reference of all global helper functions available in Klytos CMS. Use when developing plugins, extending the CMS, accessing core services, checking permissions, generating URLs, logging messages, or calling any klytos_* global function from PHP code.
| name | Klytos Gutenberg Blocks |
| description | Guide to Gutenberg block markup for Klytos CMS — CRITICAL for page creation via MCP. All HTML content MUST use Gutenberg block comment delimiters so the visual editor can parse blocks correctly. Use when creating or updating pages with content. |
When creating or updating pages in Klytos via MCP (klytos_create_page, klytos_update_page), the content_html field MUST use Gutenberg block comment delimiters. Without them, the visual editor (Gutenberg) cannot parse the content back into editable blocks.
WRONG (plain HTML — editor cannot parse it):
<h2>About Us</h2>
<p>We are a company...</p>
CORRECT (Gutenberg block markup — editor works perfectly):
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">About Us</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>We are a company...</p>
<!-- /wp:paragraph -->
<!-- wp:blockname --> or <!-- wp:blockname {"attr":"value"} --><!-- /wp:blockname --><!-- wp:blockname {"attr":"value"} /--><!-- wp:paragraph -->
<p>Your text here.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">H2 Heading</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">H1 Heading</h1>
<!-- /wp:heading -->
Levels: 1, 2, 3, 4, 5, 6. Default is 2.
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>First item</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Second item</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
Ordered list:
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list">
<!-- wp:list-item -->
<li>Step one</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Step two</li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="/assets/images/photo.jpg" alt="Description of the image" />
</figure>
<!-- /wp:image -->
<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped">
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="/assets/images/photo1.jpg" alt="Photo 1" />
</figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="/assets/images/photo2.jpg" alt="Photo 2" />
</figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="/assets/images/photo3.jpg" alt="Photo 3" />
</figure>
<!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
<!-- wp:video -->
<figure class="wp-block-video">
<video controls src="/assets/video/demo.mp4"></video>
<figcaption class="wp-element-caption">Product demo video.</figcaption>
</figure>
<!-- /wp:video -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Left Column</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Content for the left column.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Right Column</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Content for the right column.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:group {"style":{"color":{"background":"#f1f5f9"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#f1f5f9">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Section Title</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Section description goes here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity" />
<!-- /wp:separator -->
<!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- 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 wp-element-button" href="/contact/">Get Started</a>
</div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline">
<a class="wp-block-button__link wp-element-button" href="/demo/">Request Demo</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:table -->
<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Feature</th>
<th>Free</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pages</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Support</td>
<td>Community</td>
<td>Priority</td>
</tr>
</tbody>
</table>
<figcaption class="wp-element-caption">Feature comparison.</figcaption>
</figure>
<!-- /wp:table -->
wp:heading for headings, wp:paragraph for paragraphs — not raw <h2> or <p> tags.class="wp-block-heading" on all headings. This is required for the editor to recognize them.class="wp-block-list" on <ul> and <ol> elements.class="wp-block-image" on the <figure> wrapper.wp:buttons parent wrapping wp:button children./--> instead of having a closing comment./assets/images/ paths (the public assets directory).<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Welcome to Our Site</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Build amazing things with AI and static HTML.</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 wp-element-button" href="/get-started/">Get Started</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
admin/page-editor.phpFor the complete block reference with all block types, style attributes, and embed examples, see the references/complete-blocks.md file.