tsumiki

<p>ZenBlocks extends the WordPress block editor (Gutenberg) with custom blocks and advanced styling controls. Design responsive, professional buttons and UI elements — without writing any code.</p>
<p><strong>Button Basic Block</strong></p>
<p>Create fully customizable buttons with granular control over every visual aspect:</p>
<ul>
<li><strong>Colors & Backgrounds</strong> — Solid color, gradient, or image backgrounds with hover state support</li>
<li><strong>Typography</strong> — Font family, size, weight, line height, and letter spacing</li>
<li><strong>Layout</strong> — Width, height, padding, and margin with fine-grained control</li>
<li><strong>Borders</strong> — Width, style, color, and independent corner radius</li>
<li><strong>Icons</strong> — 1,500+ built-in icons with size, color, and position options</li>
<li><strong>Hover Effects</strong> — Separate styling for hover state with smooth transitions</li>
<li><strong>32 Design Presets</strong> — Start from professionally designed templates and customize freely</li>
</ul>
<p><strong>Responsive Design</strong></p>
<p>Every setting supports 4 breakpoints (PC / Tablet L / Tablet / Mobile) so your buttons look great on all devices. Customize values per device or let them cascade automatically.</p>
<p><strong>Performance</strong></p>
<p>ZenBlocks generates optimized CSS per page — only the styles you actually use are loaded on the frontend. No bloated global stylesheets.</p>
<p><strong>Pro Features (Optional)</strong></p>
<p>Additional features such as animations, thumbnails, and background video are available through a separate plugin (ZenBlocks Pro) from <a href="https://zenblockswp.com/" rel="nofollow ugc">zenblockswp.com</a>.</p>
<h3>Source Code</h3>
<p>This plugin includes compiled JavaScript and CSS files in the <code>build/</code> directory. The original uncompiled source code is included in the <code>src/</code> directory of this plugin.</p>
<p>To build from source:</p>
<ol>
<li>Install Node.js (v18 or later)</li>
<li>Run <code>npm install</code> in the plugin root directory</li>
<li>Run <code>npm run build</code> to generate the production files in <code>build/</code></li>
</ol>
<p>The build process uses <code>@wordpress/scripts</code> (webpack-based).</p>
<h3>External services</h3>
<p>This plugin includes an optional media search feature that connects to third-party image and video APIs. These services are only used when the user configures API keys in the plugin settings and actively searches for media within the block editor. No data is sent to these services during normal frontend usage.</p>
<h4>Unsplash</h4>
<p>Used for searching and importing free-to-use images in the block editor.</p>
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for images via the Unsplash media panel in the editor</li>
<li>Service provider: <a href="https://unsplash.com/" rel="nofollow ugc">Unsplash</a></li>
<li>API endpoint: <code>https://api.unsplash.com/</code></li>
<li>Terms of Service: <a href="https://unsplash.com/terms" rel="nofollow ugc">https://unsplash.com/terms</a></li>
<li>Privacy Policy: <a href="https://unsplash.com/privacy" rel="nofollow ugc">https://unsplash.com/privacy</a></li>
<li>API Terms: <a href="https://unsplash.com/api-terms" rel="nofollow ugc">https://unsplash.com/api-terms</a></li>
</ul>
<h4>Pexels</h4>
<p>Used for searching and importing free images and videos in the block editor.</p>
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for media via the Pexels media panel in the editor</li>
<li>Service provider: <a href="https://www.pexels.com/" rel="nofollow ugc">Pexels</a></li>
<li>API endpoint: <code>https://api.pexels.com/</code></li>
<li>Terms of Service: <a href="https://www.pexels.com/terms-of-service/" rel="nofollow ugc">https://www.pexels.com/terms-of-service/</a></li>
<li>Privacy Policy: <a href="https://www.pexels.com/privacy/" rel="nofollow ugc">https://www.pexels.com/privacy/</a></li>
</ul>
<h4>Pixabay</h4>
<p>Used for searching and importing free images and videos in the block editor.</p>
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for media via the Pixabay media panel in the editor</li>
<li>Service provider: <a href="https://pixabay.com/" rel="nofollow ugc">Pixabay</a></li>
<li>API endpoint: <code>https://pixabay.com/api/</code></li>
<li>Terms of Service: <a href="https://pixabay.com/service/terms/" rel="nofollow ugc">https://pixabay.com/service/terms/</a></li>
<li>Privacy Policy: <a href="https://pixabay.com/service/privacy/" rel="nofollow ugc">https://pixabay.com/service/privacy/</a></li>
</ul>
<h4>Openverse</h4>
<p>Used for searching and importing CC0-licensed images in the block editor.</p>
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for images via the Openverse media panel in the editor</li>
<li>Service provider: <a href="https://openverse.org/" rel="nofollow ugc">Openverse</a> (a project by WordPress.org)</li>
<li>API endpoint: <code>https://api.openverse.org/</code></li>
<li>Terms of Service: <a href="https://openverse.org/terms-of-use" rel="nofollow ugc">https://openverse.org/terms-of-use</a></li>
<li>Privacy Policy: <a href="https://openverse.org/privacy" rel="nofollow ugc">https://openverse.org/privacy</a></li>
</ul>
<h4>ZenBlocks Pro Services (zenblockswp.com)</h4>
<p>Used for retrieving Pro upgrade pricing information on the plugin settings page.</p>
<ul>
<li>Data sent: locale (for currency conversion)</li>
<li>When: only when the admin settings page is loaded</li>
<li>Service provider: <a href="https://zenblockswp.com/" rel="nofollow ugc">ZenBlocks</a> (Tsumiki LLC.)</li>
<li>API endpoint: <code>https://zenblockswp.com/wp-json/zenblocks/v1/pricing</code></li>
<li>Terms of Service: <a href="https://zenblockswp.com/terms" rel="nofollow ugc">https://zenblockswp.com/terms</a></li>
<li>Privacy Policy: <a href="https://zenblockswp.com/privacy" rel="nofollow ugc">https://zenblockswp.com/privacy</a></li>
</ul>
<h4>Icon Libraries (bundled, no external requests)</h4>
<p>This plugin bundles SVG icon data from the following open-source icon libraries. All icon data is included locally within the plugin files — <strong>no external HTTP requests are made to any of these services</strong> at any time (neither in the editor nor on the frontend). The URLs listed below are the project homepages and license references for attribution purposes only.</p>
<ul>
<li>
<p><strong>Feather Icons</strong> — MIT License, by Cole Bemis</p>
<ul>
<li>Website: <a href="https://feathericons.com/" rel="nofollow ugc">https://feathericons.com/</a></li>
<li>License: <a href="https://github.com/feathericons/feather/blob/main/LICENSE" rel="nofollow ugc">https://github.com/feathericons/feather/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
<p><strong>Font Awesome Free</strong> — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT, by Fonticons Inc.</p>
<ul>
<li>Website: <a href="https://fontawesome.com/" rel="nofollow ugc">https://fontawesome.com/</a></li>
<li>License: <a href="https://fontawesome.com/license/free" rel="nofollow ugc">https://fontawesome.com/license/free</a></li>
</ul>
</li>
<li>
<p><strong>Tabler Icons</strong> — MIT License, by Paweł Kuna & Tabler Team</p>
<ul>
<li>Website: <a href="https://tabler-icons.io/" rel="nofollow ugc">https://tabler-icons.io/</a></li>
<li>License: <a href="https://github.com/tabler/tabler-icons/blob/main/LICENSE" rel="nofollow ugc">https://github.com/tabler/tabler-icons/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
<p><strong>Heroicons</strong> — MIT License, by Tailwind Labs</p>
<ul>
<li>Website: <a href="https://heroicons.com/" rel="nofollow ugc">https://heroicons.com/</a></li>
<li>License: <a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE" rel="nofollow ugc">https://github.com/tailwindlabs/heroicons/blob/master/LICENSE</a></li>
</ul>
</li>
<li>
<p><strong>Lucide Icons</strong> — ISC License, by Lucide Contributors</p>
<ul>
<li>Website: <a href="https://lucide.dev/" rel="nofollow ugc">https://lucide.dev/</a></li>
<li>License: <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE" rel="nofollow ugc">https://github.com/lucide-icons/lucide/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
<p><strong>Remix Icon</strong> — Apache License 2.0, by Remix Design</p>
<ul>
<li>Website: <a href="https://remixicon.com/" rel="nofollow ugc">https://remixicon.com/</a></li>
<li>License: <a href="https://github.com/Remix-Design/RemixIcon/blob/master/License" rel="nofollow ugc">https://github.com/Remix-Design/RemixIcon/blob/master/License</a></li>
</ul>
</li>
</ul>


ZenBlocks

Custom blocks for the WordPress block editor with responsive controls and advanced button styling.

YellowPencil

<p><strong>Style your WordPress site visually.</strong> Discover the most popular front-end design plugin! <a href="http://yellowpencil.waspthemes.com/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Try live demo</a>.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/TDOgAf6R1Ik?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></span>
<h3>Visual CSS Editor</h3>
<p>The plugin allows you to <strong>customize any page and theme without coding</strong>. Click on an element and start visual editing. Adjust <strong>colors</strong>, <strong>fonts</strong>, <strong>sizes</strong>, <strong>positions</strong> and a lot more. Take full control over your website’s design with more than 60 style properties.</p>
<h3>Key Features</h3>
<ul>
<li>Customize any page, any element</li>
<li>Customize WordPress login page</li>
<li>Automatic CSS selectors</li>
<li>60+ CSS properties</li>
<li>Visual Drag & Drop</li>
<li>Visual Margin & Padding editing</li>
<li>Live CSS editor</li>
<li>Live preview</li>
<li>Manage the changes</li>
<li>Undo / Redo history</li>
<li>Export stylesheet file</li>
</ul>
<h3>Design Tools</h3>
<p>The plugin provides you advanced tools and ready-to-use libraries for styling your website effortlessly.</p>
<ul>
<li>Flexible element inspector</li>
<li>Single element inspector</li>
<li>Responsive tool</li>
<li>Element search tool</li>
<li>Measuring tool</li>
<li>Wireframe view</li>
<li>Design information tool</li>
<li>Gradient generator <em>(pro version)</em></li>
<li>Animation manager <em>(pro version)</em></li>
<li>Animation generator <em>(pro version)</em></li>
</ul>
<h3>Design Assets</h3>
<p>Reach many design assets with one click. Customize your website’s design to fit your needs!</p>
<ul>
<li>900+ Google fonts <em>(pro version)</em></li>
<li>300+ Background patterns <em>(pro version)</em></li>
<li>Unsplash background stock images <em>(pro version)</em></li>
<li>Material and flat color palettes <em>(pro version)</em></li>
<li>50+ Animations <em>(pro version)</em></li>
</ul>
<h3>CSS Properties: Text</h3>
<ul>
<li>Font Family <em>(pro version)</em></li>
<li>Font Weight</li>
<li>Color <em>(pro version)</em></li>
<li>Text Shadow</li>
<li>Font Size</li>
<li>Line Height</li>
<li>Font Style</li>
<li>Text Align</li>
<li>Text Transform</li>
<li>Letter Spacing</li>
<li>Word Spacing</li>
<li>Text Decoration</li>
<li>Text Indent</li>
<li>Word Wrap</li>
</ul>
<h3>CSS Properties: Background</h3>
<ul>
<li>Background Color <em>(pro version)</em></li>
<li>Background Image <em>(pro version)</em></li>
<li>Background Clip</li>
<li>Background Blend Mode</li>
<li>Background Position</li>
<li>Background Size</li>
<li>Background Repeat</li>
<li>Background Attachment</li>
</ul>
<h3>Other CSS Properties</h3>
<ul>
<li>Margin</li>
<li>Padding</li>
<li>Border</li>
<li>Border Radius</li>
<li>Position</li>
<li>Width <em>(pro version)</em></li>
<li>Height <em>(pro version)</em></li>
<li>Lists</li>
<li>Flexbox</li>
<li>Animation</li>
<li>Box Shadow</li>
<li>Transition</li>
<li>Filter</li>
<li>Transform</li>
<li>Opacity</li>
<li>Display</li>
<li>Cursor</li>
<li>Float</li>
<li>Clear</li>
<li>Visibility</li>
<li>Pointer Events</li>
<li>Overflow</li>
</ul>
<h3>Compatible with any theme & plugin</h3>
<p>This works seamlessly with almost any WordPress theme and plugin. You can use it for editing the pages that you created with the page builders.</p>
<h3>Compatible with All Page Builders</h3>
<p>The plugin allows you to customize the pages created with Gutenberg block editor, Elementor, or another page builder. Re-design your website today.</p>
<h3>How does this work?</h3>
<p>The plugin generates CSS codes like a professional web developer in the background while you are editing the web page visually.</p>
<p>The plugin doesn’t modify any theme file, instead of it loads the generated CSS codes to the website in a dynamic way so that you can manage the changes anytime.</p>
<h3>Premium features</h3>
<p>The following properties are available only in paid version;</p>
<ul>
<li>Font Families (Google fonts)</li>
<li>Font Color</li>
<li>Background Color</li>
<li>Background Image</li>
<li>Width & Height</li>
<li>Animations</li>
</ul>
<p><a href="http://waspthemes.com/yellow-pencil/buy/" rel="nofollow ugc">Purchase pro version</a> now to unlock all features.</p>
<h3>Documentation and Support</h3>
<ul>
<li>For documentation and tutorials go to our <a href="https://yellowpencil.waspthemes.com/documentation/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Documentation</a>.</li>
<li>We provide very limited support on the <a href="https://wordpress.org/support/plugin/yellow-pencil-visual-theme-customizer/" rel="ugc">WordPress.org forums</a>. Please feel free to post questions or bug reports, but for timely support, we recommend purchasing a YellowPencil Pro license.</li>
<li>For more information, check out our website at <a href="https://yellowpencil.waspthemes.com/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">YellowPencil Visual CSS Style Editor</a>.</li>
</ul>
<h3>Community</h3>
<ul>
<li>Join our <a href="https://www.facebook.com/groups/YellowPencils/" rel="nofollow ugc">Facebook Group</a>.</li>
<li>Rate us on <a href="https://wordpress.org/support/plugin/yellow-pencil-visual-theme-customizer/reviews/#new-post" rel="ugc">WordPress</a>.</li>
</ul>


Visual CSS Style Editor

Style your WordPress site visually. Discover the most popular front-end design plugin! Try live demo.

ZenBlocks vs Visual CSS Style Editor