OST Layout Blocks

Description

OST Layout Blocks adds the layout blocks that come up again and again in production work to the WordPress block editor. Every block renders on the front end from its own render callback, so no markup is stored in post content beyond the block attributes.

Blocks included:

  • Section — a container for heading, sub-heading, text, image, button, media & text and columns child blocks
  • Main visual slider
  • Banner slider
  • Post slider
  • Post index
  • Image and text
  • CTA
  • Important notice
  • Side by side
  • General purpose block

Any block you do not need can be hidden from the inserter on the settings page.

Settings page

The plugin adds a settings page under Settings > OST with a “Blocks” tab, where you can hide unused blocks, pick the fallback “no image” picture, and set the URL and label for the CTA form button.

Shared settings with other Orienst plugins

The Settings > OST page is designed to be shared between Orienst plugins. Each plugin adds its own tab through the orienst_options_tabs filter, and whichever plugin loads first registers the page itself, so no plugin depends on any other being installed.

Options belonging to this plugin are prefixed with ostsb_. Options prefixed with orienst_ hold data shared between Orienst plugins (company and office details). This plugin reads one shared value, orienst_org_telephone, for the phone number shown by the CTA block; the tab that lets you edit company details is provided by a sister plugin such as OST AIO Smart Schema. With only OST Layout Blocks installed, the CTA block’s phone option has no number to display and the button is simply omitted.

Uninstalling removes only the ostsb_ options. The shared orienst_ options are deliberately left in place, because other Orienst plugins read and write the same data and deleting them would take settings away from a plugin that is still active.

External services

This plugin does not connect to any external service. It makes no HTTP requests to third-party servers and sends no data off the site. Every script, stylesheet and font it needs — including the bundled Swiper library — is served from the plugin directory, never from a CDN. The only network requests its admin script makes are to this site’s own REST API (/wp/v2/search and /wp/v2/types), used to look up posts and pages when you pick a link for the CTA form button.

Third-party libraries

  • Swiper 11 (MIT License) — used by the slider blocks. Bundled in assets/vendor/swiper/ and never loaded from a CDN or any other external source. The full license text is in assets/vendor/swiper/LICENSE. https://swiperjs.com/

Build instructions

The JavaScript and CSS under build/ are compiled and minified with webpack via @wordpress/scripts. The unminified sources and every file needed to rebuild them are included in this package. No code is obfuscated.

Included sources:

  • src/ — block sources (JS, SCSS, block.json, render.php)
  • assets/js/, assets/css/ — admin script and stylesheet (not minified)
  • package.json, package-lock.json — dependencies
  • webpack.config.js, postcss.config.js — build configuration
  • scripts/copy-vendor.js — copies the Swiper distribution files into assets/vendor/ (run automatically by prebuild)
  • scripts/build-zip.js — builds the distribution zip

Requirements: Node.js 20 or later, and npm.

Steps:

  1. npm install
  2. npm run build

This regenerates build/ from src/. The build tool is the official @wordpress/scripts package (GPL-2.0-or-later): https://www.npmjs.com/package/@wordpress/scripts

ബ്ലോക്കുകൾ

ഈ പ്ലഗിൻ 23 ബ്ലോക്കുകൾ നൽകുന്നു.

  • メインビジュアル Swiper.jsを用いたメインビジュアルスライダーコンテナ
  • セクション 見出し・テキスト・画像・ボタンなどの子ブロックをまとめるセクションコンテナ
  • 画像とテキストアイテム 画像とテキストの各対スライド・行アイテム
  • サブ見出し セクション内のサブ見出しブロック
  • 画像 セクション内の画像ブロック
  • カラムアイテム カラム内の個別アイテム(画像・見出し・テキスト・ボタン)
  • CTA 電話・フォームボタン・背景画像・スタイルパターン切り替え付きのCTAブロック
  • 左右並びアイテム 左右並びの各アイテム(画像・見出し・テキスト・ボタン、画像位置 left/right 切り替え対応)
  • 汎用ブロック 見出し・本文・画像・ボタン・背景・装飾を持つ汎用レイアウトブロック
  • 重要なお知らせ 重要なお知らせを1件表示するブロック(自動取得または手動入力)
  • ボタン セクション内のボタンブロック
  • テキスト セクション内のテキストブロック(太字・斜体・リンク対応)
  • 画像とテキスト 画像とテキストを交互に配置できるコンテナブロック
  • 画像とテキスト 見出し・サブ見出し・本文+画像とテキストのアイテムを並べるブロック
  • 投稿一覧 投稿タイプ・カテゴリ・表示件数を指定して投稿一覧を表示するブロック
  • バナー バナー画像をスライダー形式で表示するブロック
  • カラム 見出し・サブ見出し・本文+カラムアイテムを横並びに並べるブロック
  • 見出し セクション内の見出しブロック
  • 画像とテキスト アイテム 画像とテキストの1アイテム
  • バナーアイテム バナースライダーの各バナーアイテム(PC/SP画像・リンク対応)
  • メインビジュアルスライドアイテム スライドショーの各個別スライドアイテム(PC/SP画像、テキスト、Wボタン対応)
  • 横並び 画像とテキストを左右に並べるセクションブロック
  • 投稿スライダー 投稿タイプ・カテゴリ・表示件数を指定して投稿カードをスライダー形式で表示するブロック

Installation

  1. Upload the plugin and activate it.
  2. Go to Settings > OST > Blocks to configure the block settings.
  3. In the post or page editor, add blocks from the “Single”, “Pattern” and “Original” categories in the inserter.

FAQ

Can I hide blocks I do not use?

Yes. On Settings > OST > Blocks, tick the blocks you do not want and save. They are then hidden from the editor. Hiding a parent block also hides its child blocks.

Does this plugin work on its own?

Yes. It registers the Settings > OST page itself when no other Orienst plugin has done so, and every block works without any other plugin installed. The one exception is the CTA block’s phone number, which comes from a shared option that a sister plugin provides the editing UI for.

Will company details be duplicated if I also run a sister plugin?

No. Company and office details are stored in shared options prefixed with orienst_, so editing them from either plugin reads and writes the same data, and only one settings page is registered.

Why does uninstalling leave some options behind?

Only options prefixed with orienst_ are left behind. They hold company and office details shared with other Orienst plugins, which would lose their settings if this plugin deleted them. Everything this plugin owns (the ostsb_ options) is removed on uninstall.

Reviews

ഈ പ്ലഗിന് റിവ്യൂകൾ ഒന്നുമില്ല.

Contributors & Developers

“OST Layout Blocks” is open source software. The following people have contributed to this plugin.

Contributors

Translate “OST Layout Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.0

  • Initial release.