shohei.tanaka

shinobiashi

SAAI Blocks is a WordPress block editor extension plugin. It provides highly customizable, unique custom blocks to enhance your website building experience.
<h4>Source Code</h4>
The full source code, including all uncompiled JavaScript, SCSS, and build configuration, is publicly available on GitHub: 
https://github.com/shinobiashi/saai-blocks
To rebuild the plugin assets from source:
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code> (this also runs <code>composer install</code> automatically)</li>
<li>Run <code>npm run build</code> to produce the compiled assets in <code>assets/build/</code></li>
</ol>
Build tools required: Node.js 18+, npm, webpack (via @wordpress/scripts)
<h4>External Services</h4>
The 3D Model Viewer block uses Google’s open-source <code>model-viewer</code> web component (https://modelviewer.dev/).
When a visitor views a page containing a 3D model that uses Draco or KTX2 compression, the model-viewer component may load WebAssembly decoder files from Google’s static content CDN (gstatic.com). These decoders are only fetched on demand and are not loaded on every page view. No personal data is transmitted.
<ul>
<li>Draco geometry decoder: <code>https://www.gstatic.com/draco/versioned/decoders/</code></li>
<li>KTX2 texture transcoder: <code>https://www.gstatic.com/basis-universal/versioned/</code></li>
<li>Lottie animation loader (if Lottie textures are used): <code>https://cdn.jsdelivr.net/npm/three/</code></li>
<li>Google’s privacy policy: https://policies.google.com/privacy</li>
<li>jsDelivr’s privacy policy: https://www.jsdelivr.com/privacy-policy-jsdelivr-net</li>
</ul>
If your 3D models do not use Draco compression, KTX2 textures, or Lottie animations (plain GLB files), no external requests are made.
<h4>Key Features</h4>
Currently, the plugin includes the following custom blocks:
1. Breadcrumb Block Pro 
A breadcrumb navigation block that includes SEO-friendly structured data. 
* Feature to toggle the visibility of the home link and current page 
* Customizable separator characters 
* Text and link color settings
2. Image Gallery Swiper (hover-image-switcher) 
A gallery block that allows users to view multiple images by swiping. 
* Adjustable vertical and horizontal positioning of navigation arrows 
* Supports arrows placed outside the image area and hover-triggered image switching

SAAI Blocks

A WordPress block editor extension plugin providing highly customizable, unique custom blocks.

Isamu Takeda

An overview of the features is below. 
– Operate the slider plugins VEGAS2 and SWIPER using the block interface and provide blocks to display on the website. 
– Two blocks are bundled: <code>Fade MainView</code> which operates and displays VEGAS2 settings and <code>Slide MainView</code> which operates and displays SWIPER settings. 
– <code>Fade MainView</code> selects multiple images from the WordPress media library and displays them one by one. At that time, settings can be made by operating blocks to produce a variety of VEGAS2 effects. 
– <code>Slide MainView</code> is set to <code>Design Grorp</code> of <a href="https://ja.wordpress.org/plugins/block-collections/" rel="nofollow ugc">BLOCK COLLECTIONS plugin</a> as the SWIPER slide. Therefore, not only images, but also content such as text and tables can be displayed as SWIPER slides with a variety of effects.
<h3>Related Links</h3>
<ul>
<li><a href="https://github.com/itmaroon/slide-blocks" rel="nofollow ugc">Github</a></li>
<li><a href="https://github.com/itmaroon/slide-blocks/tree/master" rel="nofollow ugc">source code</a></li>
<li><a href="https://github.com/itmaroon/block-class-package" rel="nofollow ugc">block-class-package:GitHub</a> </li>
<li><a href="https://packagist.org/packages/itmar/block-class-package" rel="nofollow ugc">block-class-package:Packagist</a> </li>
<li><a href="https://www.npmjs.com/package/itmar-block-packages" rel="nofollow ugc">itmar-block-packages:npm</a> </li>
<li><a href="https://github.com/itmaroon/itmar-block-packages" rel="nofollow ugc">itmar-block-packages:GitHub</a></li>
</ul>
<h3>Arbitrary section</h3>
<ol>
<li>Style settings that may require responsive support can be set separately for desktop mode (displayed on devices with a width of 768px or more) and mobile mode (displayed on devices with a width of 767px or less). To tell which setting is set, when you switch the display mode in the block editor or site editor, “(Desktop)” and “(Mobile)” will be displayed in the side menu display. 
Please note that responsiveness for tablet display is not supported.</li>
<li>This plugin depends on the <a href="https://ja.wordpress.org/plugins/block-collections/" rel="nofollow ugc">BLOCK COLLECTIONS plugin</a>. This plugin requires installation and activation in order to use it.</li>
<li>Regarding the display of text, etc., settings are made using WordPress’s internationalization function, so it is possible to display text in multiple national languages. Currently, English and Japanese notation is possible.</li>
<li>The Fade MainVeiw block uses VEGAS2. Regarding licenses, etc., please follow the following terms of use. 
<a href="https://github.com/jaysalvat/vegas" rel="nofollow ugc">Vegas – Backgrounds and Slideshows</a> 
As of April 29, 2024, this plugin has been downloaded and used v.2.5.4.</li>
<li>The Slide MainView block uses SWIPER. Terms and conditions are listed on the next page. 
<a href="https://github.com/nolimits4web/swiper" rel="nofollow ugc">Swiper</a> 
As of May 22, 2024, this plugin has been downloaded and is using v.11.1.3.</li>
<li>PHP class management is now done using Composer. 
<a href="https://github.com/itmaroon/block-class-package" rel="nofollow ugc">GitHub</a> 
<a href="https://packagist.org/packages/itmar/block-class-package" rel="nofollow ugc">Packagist</a> 
As of May 22, 2024, this plugin has been downloaded and is using v.1.1.1. </li>
<li>I decided to make functions and components common to other plugins into npm packages, and install and use them from npm. 
<a href="https://www.npmjs.com/package/itmar-block-packages" rel="nofollow ugc">npm</a> 
<a href="https://github.com/itmaroon/itmar-block-packages" rel="nofollow ugc">GitHub</a></li>
</ol>

Slide Blocks

This block allows you to control slide plugins and customize the slider.

SAAI Blocks vs Slide Blocks