shitate pro blocks

It can also be exported as structured data (schema.org FAQPage). Terms will be output as questions and descriptions as answers (Google currently limits the display of FAQ rich results).

Configurable items

• Adding and reordering terms (dt) and descriptions (dd). You can place arbitrary blocks inside the descriptions.
• Whether or not to output structured data (FAQPage)

What is the purpose of this block?

It is suitable for structuring information where items and content are paired, such as dictionary-like glossaries, FAQs (questions and answers), and product specification lists.

This is effective from the perspective of accessibility and SEO, as it correctly conveys the semantic meaning of "being a pair" to browsers and search engines.

dialogue

It looks like a normal button, but when clicked, it can display a different element in a modal popup.

Since smartphone browsing has also been increasing recently, one of the advantages is that users can quickly view details on a small screen.

Clicking it will display the element.

×

Developer

Here, the initial settings are configured in some detail.
You can dismiss it by pressing the button in the top right or by clicking the black background area.

Configurable items

• Button text, style (filled / outlined), size (small / medium / large), alignment, presence of arrow icon
• modal background color (CSS variable --sb-dialog-bg）
• You can put any blocks inside the modal. It closes with the close button, by clicking the background, or by pressing the Esc key.

The arrow icon's SVG can be replaced with a filter.

add_filter( 'sb_modal_arrow_svg', function () {
	return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>';
} );

if

This is a block that allows you to configure PHP if / else if / else statements. It evaluates the branches (conditions) from top to bottom and displays only the first branch that meets the condition. In the editor, a summary of the configured condition is displayed next to the label of each branch.

Things that can be used for conditions

• When / DeviceStart date and end date (if only the date is entered for the end date, the end of that day is included); device (only smartphone / only PC). The server determines this using the user agent of the browser (not the screen width). Sites that use page caching have the initial visitor's determination saved, so if the device, login status, and date conditions are not included in the cache, please do not use the cache or disable it.
• InvertDisplay when conditions are not met (NOT)

Branches with multiple conditions set are displayed when all of them are met. The "else" branch acts as a catch-all when none of the conditions are met.

Only the selected branches are displayed, but the description (meta description) automatically generated from the body of the page may contain text from all the branches. If you are concerned, please manually set the description.

You are looking at this on a PC right now, aren't you?
This is a string of text that cannot be viewed on a smartphone.

scope

Developer

By the way, for the sticky table of contents on PC, I added this block, adjusted the design, and included JavaScript to change the table of contents color depending on the display location.

Configurable items

• Tags: div / section / article / nav / main / aside / hgroup / header / footer (maximum one main per page)
• Color and marginsYou can set the text color and background color in the "Color" section of the sidebar, and the padding in the "Dimensions" section (this is the standard WordPress setting; you can use the theme's palette and presets).
• Wide / Full-width
• Front Editor TabCSS that applies only to this block. Nesting can be used, and declarations without a selector apply to the block itself. It works in both the editor and the front end.
• Front only tabIt is the same CSS scope, but it only works for the front end and is not applied to the editor. Specify here for hover effects, animations, and element hiding, among other things that interfere with editing. Output as the same class rule along with the content of the front-end editor tab.
• Only the editor tabIt’s a CSS effect that only works for the editor preview; it’s not outputted to the front at all. It’s used for specifying things that make it easier to edit, such as borders, placeholders, and extra space during typesetting.
• JS tab: JS executed only once immediately after the block on the front end. When the block element the is passed as. It is not executed within the editor.
• code editorThe CSS / JS input field is a VS Code-style code editor (CodeMirror). In addition to syntax highlighting, it supports indentation with Tab / Shift+Tab, auto-indentation on Enter, auto-closing brackets, comment toggling with Ctrl+/ (⌘+/), searching with Ctrl+F (⌘+F), moving lines with Alt+↑↓, and multi-selecting matching words with Ctrl+D (⌘+D). The editor itself is loaded only when the tab is first opened and is not included in the frontend.

/* Example of code to write in the CSS tab: The background of the block itself and the color of the paragraph inside it */
background: #fffaeb;
padding: 24px;

p {
    color: #c80000;
}

// Example of writing in the JS tab: Add a click handler to the button inside the block
el.querySelector('button')?.addEventListener('click', () => {
	el.classList.toggle('is-open');
});

Because the JS tab can execute arbitrary code, just like the WordPress Custom HTML block unfiltered_html Administrator or editor permissions are required. If a user without permissions saves, the JS will be removed.

Master blocks

The master block is not intended for those without production knowledge, but rather designed to be widely utilized by individuals well-versed in production as a foundation for delivering work to clients.

Basically, it makes no sense on its own, but by combining it with other blocks or PHP customization, advanced customization that cannot be done with no-code tools becomes possible.

However, please handle it with care, as misuse can conversely affect the site's display.

Developer

Of course, it is possible to create a highly designed site without using master blocks.
Blocks in this category are expected to be highly effective for business sites.

action hook

You can create custom action hooks that were once part of classic themes. This allows you to display content created with plugins like WPCode or custom plugins, and enables customizations that cannot be achieved with block themes alone.

I think it will make a significant contribution to product introductions, customer testimonials, and other content where a consistent template needs to be reused, by combining it with field blocks.

Configurable items

• Hook name: lowercase alphanumeric characters and – _ only. The hook that fires is sb_action_{name}
• Mode"Field" outputs the contents of the field block of the same name at this position (can also be processed with PHP). "PHP" displays only the PHP output without using fields.
• Editor's note (will not be displayed on the frontend)

How to use from PHP

Field contents $fieldFour items are passed: block attributes, block body, and target post ID. What is echoed will be output as-is (in field mode, if nothing is echoed, the field content is output as-is).

// フック名「catch」のブロックの位置に出力する
add_action( 'sb_action_catch', function ( $field, $attributes, $block, $post_id ) {
	echo '<div class="catch">'&#x27; . $field . &#x27;'</div>';
}, 10, 4 );

// PHP モードでカスタムフィールドを出す（クエリループ内では各項目の投稿 ID が渡る）
add_action( 'sb_action_price', function ( $field, $attributes, $block, $post_id ) {
	echo esc_html( get_post_meta( $post_id, 'price', true ) );
}, 10, 4 );

// すべてのアクションフックブロックで発火する共通フック
add_action( 'sb_action', function ( $name, $field, $attributes, $block, $post_id ) {
	// $name にフック名が入る
}, 10, 5 );

Please handle the action hook block with care, as misusing it can significantly impact how the page is displayed.

Field

Elements enclosed in field blocks are not displayed on the actual page as they are. By combining them with action hook blocks, you can create a foundation for controlling the content of multiple pages.

Configurable items

• Field nameLowercase alphanumeric characters, hyphens (-), and underscores (_) only. Action hook blocks with the same name will be the output destination. The name is locked to prevent accidental changes, and can be unlocked by clicking "Rename".
• Make it available in the query loopWhen turned on, an action hook with the same name placed in a query loop (including query wraps) for archives or similar will extract this content from each item's post and output it. Fields that are turned off will not appear in the list.
• PHP hook:for that field add_action Display the template and use the "Copy" button to paste it.

Example of use: Place a "catchphrase" field in each article, turn on query loop support, and place an action hook with the hook name "catch" in the article list template to display that article's catchphrase for each card in the list.

Query Wrap

This is a block used within the standard WordPress Query Loop. It turns each item into a card consisting of a "thumbnail, title, category + date, and excerpt," making the entire card clickable. Since there is only one actual link (on the title), screen readers will not repeatedly read the link to the same article, and it does not interfere with text selection or operating buttons inside (accessible card pattern).

Configurable items

• Post title tag (div / H2 / H3 / H4, default is div)
• Date (Publication Date / Update Date (Publication Date if no update) / Publication Date and Update Date / None, default is Update Date. "Publication Date and Update Date" adds "Published" and "Updated" labels before each date, and displays only the publication date if there is no update. Whether an update exists is determined by comparing display formats, so re-editing on the same day is not treated as an update)
• Open in a new tab

Since it is the same card as the adjustable post,sb_card_* or group both cards together with a filter, or sb_card_parts_query_wrap can be recreated block by block (see the section on variable posts). Action hooks placed inside (fields supporting the query loop) are also output based on each item's post.

Text toolbar

A dedicated shitate pro blocks button will be added to the toolbar for paragraphs and headings. To make it easy to distinguish from WordPress's standard formatting options, it has been combined into a single icon.

The same button can be used in the plugin's block-specific text fields, such as speech bubble names, details titles, dl terms, dialog button text, and table of contents titles, not to mention paragraphs, headings, and core tab labels.

• span._op: the selected text <span class="_op"> Enclose with. The appearance can be freely defined using the theme's CSS.
• span.sb-marker：A thin tape-like marker like thisDraw.
• wbr tag: Specifies the positions where line breaks are allowed in the text.Elements containing ］ are word-break: keep-all becomes, Shibuya-ku, TokyoJingumae IchichomeThis prevents Japanese from wrapping at unintended positions, such as in "二番三号".

Span types can be added and changed using filters,] and its CSS can be disabled respectively.

// スパンを追加する（class / ボタン名 / ダッシュアイコン名 / フロントとエディターに出す CSS）
add_filter( 'sb_span_formats', function ( $formats ) {
	$formats['note'] = array(
		'class' => '_note',
		'title' => 'span._note',
		'icon'  => 'editor-textcolor',
		'css'   => 'color:#c80000;font-weight:bold;',
	);
	unset( $formats['marker'] ); // 既存のスパンを外す
	return $formats;
} );

add_filter( 'sb_wbr_enabled', '__return_false' );     //  のボタンとショートコードを無効化
add_filter( 'sb_wbr_css_enabled', '__return_false' ); // keep-all の CSS だけ無効化
add_filter( 'sb_wbr_css_selector', fn() => 'h1, h2, h3, p' ); // CSS を当てる要素を絞る

Text actions

It is a mechanism that registers names to frequently used strings (phone numbers, business hours, campaign text, prices, etc.) and calls them from the editor's text. The information stored in the body is only for reference; changing the settings string will change the usage of the site as a whole. Details about the registration procedure, insertion and editing in the editor, and filtering to supply values from PHP are as follows. How to use text actions (manual) summarizing in

→ This string is inserted from the text action "Manual Demo" (if you change the setting, this location will also change together).

Multilingual support

The editor display and front-end text support Japanese, English, French, Spanish, Italian, Dutch, and Portuguese. They switch automatically according to the site's language settings, and unsupported languages are displayed in English.

Dashboard

Add the following widget to the dashboard in the admin panel (the display can be turned off individually in "Display Options").

• Site information(Administrators only): Displays the WordPress version and locale, the theme (and any child themes), the shitate pro blocks PHP version, the list of plugins currently enabled (including their versions), and the list of plugins that are currently installed. You can copy the entire list as text with the "Copy" button, so please paste it directly into your support request. The content is filtered. sb_site_info You can change it later.
• shitate update notesLatest updates for plugins and themes (3 latest updates and links to archives)
• shitate news：Information from the official website

Developer Reference

Here is a list of CSS variables and filters that creators can adjust from the theme or functions.php. For detailed usage, please refer to the section for each block.

CSS class naming

You can tell the origin of class names by looking at the beginning. Even without knowing naming conventions like BEM, you can write your own CSS just by remembering these three things.

• sb- starting with: shitate pro blocks block body, or shared parts used in multiple blocks (sb-card sb-toggle sb-button). It has a standalone meaning. The name is the block name itself (variable post = sb-post-list, query wrap = sb-query-wrap）。
• - starting with: parts inside the block (-title -body -link etc.). It has no meaning on its own, and the parent's sb-XX used as a set with. A container to hold any block must always -body It is.
• is / has-: state or variant (is open is modified has-bg). Other than that wp-block-* や splide__* and are classes added by WordPress and libraries, and plugin CSS does not depend on them.

The component is within the parent's scope, child selector > Specify using . Same part name (-title etc.) also exist in other blocks, so writing it as a descendant selector will also apply to nested blocks.

/* Components are paired with their parent, traced with > */
.sb-card > .-body > .-title {
	font-size: 1.125rem;
}

/* States use is- / has- */
.sb-details-item.is-open > .-title {
	color: var(--st-color-brand);
}

/* Using @scope allows writing safely without > (supported browsers only) */
@scope (.sb-card) {
	.-title { font-size: 1.125rem; }
}

What are the text decoration classes? sb-marker and, as an exception, short _op are the two.

License (100% GPL)

shitate pro blocks is licensed under the 100% GPL.All files—including PHP, JavaScript, CSS, icons, and translations—are provided under the GPL v2 or later, and the included libraries are also under GPL-compatible licenses (Splide and auto-scroll extensions: MIT; Tabler Icons: MIT; Lucide: ISC).What you are purchasing is the right to automatic updates and support; the blocks will function even without a license key, and you may use them on as many websites as you like under the terms of the GPL.

Use with the Acceleration Plug-in

The page caching and the ability to simply combine and compress CSS are not a problem. However, the ability to rebuild CSS (WP Rocket's "Remove unused CSS", LiteSpeed Cache's UCSS, and Critical CSS) is problematic. @scope Nested CSS may not be interpreted properly, for example, the query wrapper card will appear truncated at 1px. The plugin does not have processing tailored to specific acceleration plugins. Instead, we have prepared the following two hooks, so please combine them with your optimization settings to exclude the plugin's CSS from the scope of targeting.

• sb_style_tag_attributes: The plugin outputs <link> And the scope block <style> Attributes to be attached to (array, default is sb-data-css）。We can add the attributes that the optimization plugin will make into a "non-touchable landmark" here.
• sb_inline_block_styles：false If you return the value, WordPress will block the CSS. <style> Stop inlineizing it,<link> It is left as is (because attributes cannot be attached to inline CSS)

// 1. Do not inline block CSS  Leave it as it is (to assign attributes)
add_filter( 'sb_inline_block_styles', '__return_false' );

2. Add attributes if necessary (by default, data-sb-css is included)
add_filter( 'sb_style_tag_attributes', function ($attributes) {
	$attributes['data-no-optimize'] = '1'; // Example: Attribute that another optimization plugin will see
	return $attributes;
} );

// Example of excluding from WP Rocket's 'Remove unused CSS'
add_filter( 'rocket_rucss_skip_styles_with_attr', function ($attrs) {
	$attrs[] = 'data-sb-css';
	return $attrs;
} );
add_filter( 'rocket_rucss_external_exclusions', function ( $patterns ) {
	$patterns[] = 'data-sb-css';
	return $patterns;
} );
add_filter( 'rocket_rucss_inline_atts_exclusions', function ( $patterns ) {
	$patterns[] = 'data-sb-css';
	return $patterns;
} );

After the settings are made, please delete the generated CSS and page cache from the optimization plugin (in WP Rocket, you can choose "Delete used CSS" or "Delete cache").

Operating environment

WordPress 7.0 and later runs on PHP 7.4 and later (tested up to PHP 8.5). Browsers targeted are the latest versions supported by their respective vendors (Safari 17.4 and later, Chrome / Edge 118 and later, Firefox 128 and later, and their mobile versions). CSS @scope Because it uses relatively new specifications, the layout is preserved in older browsers on OSes that have reached end of support (such as Safari for iOS 16 or earlier, or Chrome 109 for Windows 7/8.1). However, some of the block decoration is not reflected. If you are using a plugin to combine and minify CSS, please use the latest version. For optimizations that rework the CSS (such as Remove Unused CSS and Critical CSS), @scope This can break the plugin. In that case, please exclude the plugin's CSS from the optimization targets (see "Using with Acceleration Plug-ins" below).

CSS variables

Filter action