About the shitate Specifications

1. Position

WordPress block theme (Full Site Editing only). Free distribution.Official WordPress.org Directory100% GPL, currently featured on [...].

The free side of the commercial freemium model. Paired with the paid plugin "shitate pro blocks," the theme is exclusively for design (design system + templates). It does not include any blocks at all (blocks are the responsibility of the plugin).

By: weblley inc / Theme URI: https://shitate.weblley.co.jp/

2. Basic Information

Item	値
slug / text domain	shitate
Version	1.0.3 (Official directory release version. Simultaneously updates style.css, readme.txt, and SHITATE_VERSION using release.sh)
Requires at least	7.0
Tested up to	7.1
Requires PHP	7.4
License	GPL v2 or later
theme.json	version 3
repository	weblley/shitate (GitHub, Public)
Official directory	https://ja.wordpress.org/themes/shitate/
Tag	blog, portfolio, block-patterns, full-site-editing, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

3. File structure

shitate/
├ style.css              Theme header + mobile menu close button positioning (actual styles in theme.json / tokens.css)
├ theme.json             v3. Source of truth for palette, typography, spacing, shadows, and layout
├ functions.php          363 lines. Setup, spacing filters, customizer, enqueue, automatic migration of legacy st_ settings
├ readme.txt             For .org (includes Resources section)
├ screenshot.png         1200×900
├ inc/
│  └ colors.php          Automatic tracking of derived colors (base-2 / line / contrast-2 / neutral / primary-hover)
├ assets/
│  ├ css/tokens.css      --st-* token definitions + vertical rhythm rules (115 lines)
│  ├ css/utilities.css   Spacing utilities (169 lines, !important layer)
│  ├ css/editor.css      Almost empty (intentionally minimal)
│  ├ js/customize-preview.js    Customizer live preview
│  ├ js/utilities-toolbar.js    Editor toolbar "Spacing" dropdown
│  └ js/navigation-toggle.js    Follows hamburger position for mobile menu close button
├ templates/  404 / archive / index / page / page-full-width / search / single
├ parts/      header.html / footer.html
├ patterns/   hero / columns-3 / columns-4 / cta-two-buttons (plus hidden 404-content / footer-credit)
├ styles/     cream.json / dark.json / mist.json / mono.json (style variations)
└ languages/  shitate.pot / shitate-ja.po / ja.mo / shitate-ja-shitate-utilities-toolbar.json

4. Naming Convention

• The prefix for the public identifier is shitate(4 characters or more per WordPress.org regulations): PHP functions tailoring, constant SHITATE_, script/style handles tailoring-, Customizer settings tailoring, pattern shitate(Category shitate）。
• At least CSS variables --st-* to maintain. Custom properties are not subject to the prefix rule, and the plugin var(--st-*, …) Prioritizing fallback and compatibility with saved content.
• SB = shitate block (plugin side). The theme is --sb-* Do not define.
• Identifying variables: --st-* = Theme Definition (Use this in Custom CSS) / --wp--* Generated by WordPress.
• 旧 st_* Customizer settings are loaded upon the first load after a theme update shitate_* automatically migrate to.

5. Design System (Core of Design)

5.1 Token Placement

All assets/css/tokens.css の --st-* Consolidated into theme.json. custom Not used. tokens.css is the front (handle shitate tokens) and editor (add_editor_style) to both.

5.2 Color

The palette (actual values) in theme.json is the single source of truth. It can be edited directly in Site Editor → Styles → Colors, and style variations are also natively swapped.--st-color-* is an alias to a preset (var(--wp--preset--color--primary, #2952cc) format), and it will automatically follow when the palette is changed.

Default palette (9 colors). It is divided into 4 source colors (base / contrast / primary / accent) and 5 derived colors (base-2 / line / contrast-2 / neutral / primary-hover):

slug	色	Name	Category
base	#ffffff	Base	源
binary	#f4f6fc	Base / Two	derivative
contrast	#171f33	Contrast	源
contrast-2	#515766	Contrast / Two	derivative
neutral	#5c6b90	Neutral	derivative
line	#e4e9f7	Border (Display Name)	derivative
primary	#2952cc	Primary (Brand Color)	源
primary-hover	#20409f	Primary / Hover	derivative
accent	#0fae8e	Accent	源

• Derived colors automatically follow（inc/colors.php): When you change the source color in the Site Editor, the derived colors are recalculated upon loading as long as they remain at their default values (base-2 = base mixed with primary by 5%; line = mixed with 13%; contrast-2 = a mix of contrast and base; neutral = a mix of contrast andprimary, and base; primary-hover = primary darkened by 22% / lightened by 25% on a dark background). If you set derived colors manually, those settings always take precedence. Since saved data is not overwritten, this process is reversible.
• Core default palettes, gradients, and duotones are all false.
• Important Prohibitionsto the palette slug border / background and do not use names that conflict with structural classes. In the past border The slug is of core generation .has-border-color{color:…!important} creates and has the actual harm of hijacking the text color of border blocks line renamed to (the display name remains "Border").

5.3 Typography (Modular Scale)

• typescale.com method. Baseline --st-text-m(Default 16px = 1rem) and ratio --st-ratiofrom (default 1.25) calc(prev × ratio) Generates the upper tier with a chain of.
• Paragraph: --st-text-xxs / xs / s / m / l / xl / xxl / xxxl。
• The 3 tiers under m are fixed values.s = 0.95rem, xs = 0.8rem, xxs = 0.75rem. Dividing by the ratio makes them too small to read, so they are not affected by the ratio or rounding mode.
• fontSizes in theme.json are references to each step (slug: xx-small to xx-large, display).defaultFontSizes: false。
• Heading mapping: h1=xxxl / h2=xxl / h3=xl / h4=l / h5=m / h6=s, weight 700, line-height 1.3. Body text line-height 1.75.
• Font: sans (Japanese UI font priority stack) / serif (Mincho) / mono. Web fonts are not bundled.
• Rounding/Fluid modeshitate_round_scale) defaults to ON: l to xxxl round(nearest, …, 2px) Snap to even pixels and fluidize between the derived mobile ratio (1+ratio)/2 and the selected ratio using clamp.

5.4 Margins (8 tiers named the same as characters)

• 8 names with the same size as the text: --st-space-xxs / xs / s / m / l / xl / xxl / xxxl. Number-named tokens (--st-space-1 to 15) is deprecated and no longer exists.
• The standard is m = --st-text-m(Body size). The upper uses increments of the square (l = m×r², xl = m×r⁴, xxl = m×r⁶, xxxl = m×r⁸), the lower uses s = m÷r, xs = m÷r³, xxs = m÷r⁶. Ratio --st-ratio And changing the base size makes all stages follow.
• With the default ratio of 1.25, it is approximately 4 / 8 / 13 / 16 / 25 / 39 / 61 / 95px (xxs → xxxl).
• It is by design that the whole is compressed at a small ratio and enlarged at a large ratio.(Correct behavior of proportional scaling.)
• L to XXXL are fluid: clamp(min, min + N vw, max)On a narrow screen, the overall rhythm automatically tightens =Responsive margins without media queriesSince the difference from xxs to m is small, it is static.
• When you need a middle size calc(var(--st-space-m) * var(--st-ratio)) created by multiplying by the ratio like this (without increasing the number of new tokens).
• Expose the same 8 steps to the editor's margin picker(The slug remains a number for compatibility, and the display name is XXS to XXXL):

slug	Name	reality
10	XXS	--st-space-xxs
20	XS	--st-space-xs
25	S	--st-space-s
30	M	--st-space-m
40	L	--st-space-l
50	XL	--st-space-xl
60	XXL	--st-space-xxl
70	XXXL	--st-space-xxxl

• defaultSpacingSizes: false と spacingScale.steps: 0 both are requiredOmitting the former results in a mix of the 7 default core steps (2X-Small / Small / Medium / Large...), while omitting the latter causes the core to automatically generate steps on the theme side as well.
• Do not use numbers in preset names.(The name in theme.json appears directly in the UI.)

5.5 Vertical Rhythm (margin-top method)

• Base gap = blockGap (= spacing 40 = --st-space-l) WordPress margin-block-start Applied as.
• The heading should have more space above. However, instead of a fixed tier, it is linked to the local gap: h1 / h2 = --wp--style--block-gap × 1.75, h3 / h4 = × 1.25.
• Selector: :root :where(.is-layout-flow, .is-layout-constrained) > hN:not(:first-child)（:root to increase specificity !important avoid)
• Inside cards with a narrow gap, the space before headings is also automatically tightened. Explicit specifications such as utilities take priority.
• All core blocks top margin only: register_block_type_args Filter (shitate_top_margin_only_supports) for core/* supports.spacing.margin を top Limited to.
• Do not use em (since it deviates from the token's fixed value).

5.6 Layout & Other Tokens

• Content width 64rem (1024px) / Wide 78.75rem (1260px).--st-width-text / --st-width-max Synchronized. Converted to rem = line length follows browser font size settings and zoom.
• root padding left and right = spacing 30useRootPaddingAwareAlignments: true）。
• Rounded corners are: --st-radius-s 0.375rem (button/chip) /-m 0.625rem (card/image) /-l 0.75rem (feature card). Do not hardcode px, including patterns and templates. var() Reference.
• 2 shadow presets: soft / card (core default is off).
• --st-border-card: 1px solid var(--st-color-border)、--st-radius-card: var(--st-radius-m)。

5.7 CSS Rules

• No media queries(Resolved with clamp / grid / auto-fit / intrinsic sizing). The only exception is device-specific branching.
• However, theme.json settings.viewport(mobile 768px / tablet 1024px, WP 7.1 features) are already declared. This is the boundary when the user uses the editor's responsive styles, and it is unified to 768 / 1024, the same as details / sb/if on the plugin side.
• !important ProhibitedThe only exception is utilities.css (utility layer).
• Only one JS for the frontend, navigation-toggle.js (places the mobile menu close button in the same position as the header hamburger; uses the core default position when JS is disabled).

6. Style Variations

4 types in styles/. All are palette overrides only (no structural changes).

Variations	base	contrast	accent
(Default)	#ffffff	#171f33	#0fae8e
Dark	#14171c	#f2f4f8	#37c8a4 (hover changes to #5d80e0)
Cream	#fbf8f1	#2c2517	#c07a2e
Mist	#ffffff	#1d2523	#2f8f68
Mono	#ffffff	#1a1a1a	#1a1a1a

"primary" is fixed at #2952cc for all variations (to ensure brand consistency). The automatic color adaptation (5.2) continues to function as usual even after variations are applied.

7. Customizer "Typography Scale"

Section shitate_typography(Priority 40). 3 Settings.

Settings	Category	Default	reflect
shitate_ratio	Select (1.067 / 1.125 / 1.2 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618)	1.25	postMessage (live)
shitate_text_m	number 12 to 24px	16	postMessage (live)
shitate_round_scale	checkbox (even px snap + fluid heading)	ON	refresh

• What is the ratio? shitate_sanitize_ratio() with whitelist validation (outliers fall back to 1.25).
• Generated CSS shitate_scale_inline_css()The front desk shitate tokens immediately after wp_add_inline_style And inject, the editor block_editor_settings_all で settings['styles'] to (to ensure tokens.css is overwritten within the iframe canvas).
• Changing the ratio changes both the text and the margins at the same time (the margin basis is m = --st-text-m for). This is the most distinctive feature in the design of this theme.

8. Margin Utilities

• Class naming: -prop: m = margin / p = padding. sides: t r b l / x (left/right) / y (top/bottom) / none (all directions). step: 0 xxs xs s m l xl xxl xxxl.
• Example: mt-0 mb-l px-m py-xxl p-sIn addition mx-auto。
• The utility layer is intentionally !important(for the explicit override layer).
• Editor toolbar "Margin" dropdown (assets/js/utilities-toolbar.js): Added to the toolbar of all blocks, allowing you to add and remove mt / mb / pt / pb / px + mx-auto without manually typing classes. This method rewrites the className attribute.
• When adding a paragraph, first in tokens.css --st-space- Define it, then add a line to utilities.css.

9. Templates / Parts / Patterns

Template (7)

File	content
index.html	Blog list. Query (3-column grid) + featured image 3:2 + date + title + excerpt + pagination
single.html	Post. Breadcrumbs → Title → Published date / Updated date → Eyecatch → Body → Category → Comments
page.html	Static page. Featured image 21:9 (rounded corners) --st-radius-m) + title + text + comments
page-full-width.html	Custom template "Full Width". Full width with default layout
archive.html	Archive. query-title + term-description + list
search.html	search results: query title + search form + list
404.html	Large 404 + description + home button (pattern) shitate/404-content, content width 560px)

• We do not have front-page.html. The front page is composed of the static page's body content (page.html) and built using patterns.
• Common structure: header part → 
  (top margin 0 / bottom spacing 60, only 404 is 70) → footer part. The margin directly below the header should be handled by the pattern or block side.

Template part (2)

• header.html: Base background. Logo + site title on the left, navigation on the right (flex space-between). On mobile, the navigation becomes an overlay, and the close button appears in the same position as the hamburger menu.
• footer.html: Contrast background / base text. Logo + vertical nav, © line at the bottom (pattern) shitate/footer-credit: Year + site name, editable in the site editor as the site owner notation).

Pattern (4 + hidden 2, all shitate/*, category shitate)

slug	content	Category
shitate/hero	Full-width hero (heading + text + 2 CTA buttons, top/bottom spacing 70)	shitate, banner, call-to-action
shitate/columns-3	Image cards, 3 columns (center heading + image + description + button)	shitate, columns
shitate/columns-4	4-column grid (portrait image + heading + body text)	shitate, columns
shitate/cta-two-buttons	Message + 2 half-width buttons (stacked vertically on narrow screens)	shitate, call-to-action
shitate/404-content	404 Article (Hidden)	—
shitate/footer-credit	Footer © line (hidden)	—

• The image block is empty and included (no images included). The wording is esc_html_e( '…', 'shitate' )Japanese translations are in languages/ and automatically follow the site language.
• sb/* Patterns that use blocks should not be placed in the theme (on the plugin side, register_block_pattern）。

10. Implementation details of functions.php

• SHITATE_VERSION Definition (Asset cache buster. Updated simultaneously by release.sh)
• shitate_migrate_theme_mods() - Old st_* the customizer value shitate_* migrate only once
• shitate_setup() — wp-block-styles / editor-styles / responsive-embeds / custom-logo / html5,set_post_thumbnail_size(1568, 9999)(Countermeasures for the eye-catching image blur issue / proportional / no crop),add_editor_style([tokens, utilities, editor])、load_theme_textdomain
• shitate_register_pattern_categories() Register pattern category shitate
• shitate_patterns_admin_menu() — "Appearance -> Patterns" menu (direct link to site-editor.php?p=/pattern)
• shitate_top_margin_only_supports() — Restrict margins of all core blocks to top margin only
• shitate_sanitize_ratio() / shitate_sanitize_checkbox() / shitate_customize_register() / shitate_scale_inline_css() / shitate_scale_editor_settings() — Complete typography scale
• shitate_customize_preview_js() — Live Preview
• shitate_utilities_toolbar_script() - Editor Toolbar (wp_set_script_translations Explicit path
• shitate_enqueue_styles() - Loading order is important: shitate-tokens -> (inline scale override) -> shitate-utilities -> shitate-style
• shitate_enqueue_navigation_toggle() — Front-end JS (defer)
• inc/colors.php — wp_theme_json_data_user Recalculate derived colors with filter (5.2)

11. i18n (Translation)

• Theme wording consists of an English source + Japanese translation (.pot / .mo files in languages/). On the Japanese site, patterns, 404, and footers are displayed in Japanese as-is.
• JS translation JSON handle naming: shitate-ja-shitate-utilities-toolbar.json(Since WP 7.0 or later, search by handle name instead of md5).
• The translation dictionary and extraction script are centrally managed on the plugin side.

12. Build and Release

• Distribution ZIP: bin/build-zip.sh → dist/shitate.zip. Only include style.css, theme.json, functions.php, readme.txt, screenshot.png, templates, parts, patterns, styles, assets, inc, and languages.
• Release: Move [Unreleased] in CHANGELOG.md to "## [X.Y.Z] – YYYY-MM-DD" andbin/release.sh X.Y.Z Bulk update the version (Version in style.css / Stable tag in readme.txt / SHITATE_VERSION) -> commit -> tag -> zip -> push -> GitHub Release.
• Updates to the official directory are made by uploading the same zip file through the wordpress.org upload page. Once reflected, it will be delivered to installed sites as a regular WordPress update.

13. WordPress.org listing

• Approved and published in September 2026 (initial release v0.4.0, current v1.0.3). Mandatory compliance items for review: expand the prefix to 4 or more characters, add a Resources section to the readme, remove the theme author's © from the frontend, remove promotional elements from the initial content, address comments, and make 404 links portable.
• Automatic updates via GitHub were removed in v0.3.0. They will not be reintroduced because .org prohibits both Update URIs and external communication.
• The distribution zip has passed Theme Check. No fonts, images, or JS libraries are included. screenshot.png is the specified 1200x900.
• Review recommendation: Remove plugin references from the description (addressed, to be reflected in the next update), CSS variables -shitate-* (Postponed for compatibility).

14. WP 7.1 compatibility status

• Tested up to 7.1, passed all items.
• Complete iframe transition for the editor → Block API v3 is required (not applicable to the theme side; all plugins are already updated to block.json v3).
• settings.viewport Done.
• Since core/tabs and core/icon were added to the core in 7.1, duplicate blocks on the plugin side (sb/tab and sb/icon) have already been deprecated.