Creating a Custom Gutenberg Block for an Owl Carousel

In this blog post, we will walk you through the process of creating a custom Gutenberg block for an Owl Carousel using WordPress block development. This block allows users to create dynamic carousels with various configuration options such as autoplay, loop, item count, and more. Additionally, we will explore how to create carousel items as … Continued

Creating a Custom Gutenberg Block for Bootstrap Grid Columns

In this blog post, we will explore how to create a custom Gutenberg block for Bootstrap grid columns. This block allows users to configure various column settings, such as CSS grid, overflow, padding, order, and experimental options, using react-select for a flexible and user-friendly interface. Additionally, users can set the background color and add or … Continued

Creating a Custom Gutenberg Block for Bootstrap CSS Grid

In this blog post, we will explore how to create a custom Gutenberg block for a Bootstrap CSS grid. This block allows users to configure various grid settings, such as gap, column gap, row gap, and alignment, using react-select for a flexible and user-friendly interface. Additionally, users can specify the number of columns and dynamically … Continued

Creating a Custom Gutenberg Block for Bootstrap Rows

In this blog post, we will explore how to create a child Gutenberg block for Bootstrap rows. This block complements the previously created Bootstrap container block by allowing users to add and configure rows within the container. Using react-select for a rich user interface, this block provides flexibility in layout and alignment options. Let’s break … Continued

Creating a Custom Gutenberg Block for Bootstrap Containers

In this post, we will break down the creation of a custom Gutenberg block that integrates Bootstrap 5 container classes using react-select for a rich user interface. The block allows users to select container and padding classes through the block inspector, enhancing the flexibility of content layout in WordPress. Let’s dive into the code step-by-step. … Continued