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.

Michael

Creates a simple Swiper slider out of container elements. Flexbox has to be active.
<h3>How to use it</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/s8oyX1u-T6E?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<ul>
<li>create a horizontal container and give it an ID (Advanced – CSS ID)</li>
<li>add multiple sub containers (those are the slides)</li>
<li>add the <code>Slide everything</code> widget somewhere in the page</li>
<li>set the ID of the container in “Slider ID”</li>
<li>change some settings</li>
<li>preview the page</li>
</ul>
Events:
You can listen to the <code>miga_slide_everything_init</code> event to get informed when the slider is ready to use: 
 <code>document.addEventListener("miga_slide_everything_init", function(e) { 
 alert("ready"); 
});</code>
Currently only working with one slider in your page!

Slide everything for Elementor

Creates a simple Swiper slider out of container elements. Flexbox has to be active.

SAAI Blocks vs Slide everything for Elementor