Design Blocks – Gutenberg Blocks collection vs Bootstrap Blocks

Get ready to supercharge your Gutenberg editor with Design Blocks, unleashing a collection of versatile and robust blocks. This opens up an exciting opportunity for you to craft sophisticated websites effortlessly within WordPress. With all their previous experiences, the DevsCred team has seamlessly translated their experience from Exclusive Addons to craft well-optimized and lightweight plugins like Design Blocks, ShopCred, ShopCred Pro for WooCommerce as well as ShopCred Addons. The latest update of WordPress indicates that block editor is going to be the future of WordPress site editing. Keeping that in mind, the Design Blocks Gutenberg plugin is developed to serve you the ultimate experience with Gutenberg WordPress blocks. It gives you the flexibility to personalize websites to match your preferences. It serves the vast WordPress community by adding functionality, improving flexibility, and providing a variety of solutions. List of Design Blocks for WordPress: The Design Blocks includes the following blocks for the Gutenberg WordPress block editor: [Accordion] – A stylish expandable accordion block makes the web design look clean and minimalistic while containing ample information in it. [Button] – Create user engaging button on WordPress block editor in the easiest way. The Button block can help you get a higher conversion on your website. [Grid] – Customize the column layout to your convenience. Use the Grid block to customize column attributes like width and position to create a column-based grid layout. [Heading] – The first element to grab user attention. Create attractive and explicit heading styles with the Heading blocks and grab attention at first sight. [Image Slider] – Design trendy websites with the image slider. Image in a slider gives your website a modern look and also makes it interactive for users. [Info Box] – Create versatile styles with a sophisticated info box. The block gives a creative way to highlight information on your website. [Post Grid] – Show the posts on your website in an organized way using the Grid block. Posts in a grid view are easy to navigate, which improves the user experience. [Tabs] – Tab block makes your web design minimal and efficient. You can put content into different tabs and the tabs are only visible when visitors open them. More advanced blocks are in the making to give you an exciting WordPress site-building experience. Privacy Policy Design Blocks uses Appsero SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements. Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. We collect the data to ensure a great user experience for all our users. Integrating Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case. Learn more about how Appsero collects and uses this data.

Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks. Features Supports Bootstrap v5 and v4 Support for CSS grid (experimental) Fully customizable with filters Configuration via option page or programmatically with constants Block templates can be overwritten in your theme The full documentation of this plugin can be found on GitHub: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme Available Blocks Container Options: Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport. Fluid Breakpoint: Used to enable responsive containers. This feature only works with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints. Margin After: Define a margin which should be added after the container. Row Options: Template: Choose from a predefined template for the inner column blocks. No Gutters: Disable gutters between columns. Alignment: Horizontal alignment of inner column blocks. Vertical Alignment: Vertical alignment of inner column blocks. Editor stack columns: Displays stacked columns in the editor to enhance readability of block content. Horizontal Gutters: Size of horizontal gutters. Vertical Gutters: Size of vertical gutters. CSS Grid Gutters: Size of gutters when CSS grid is used. Column Options: Sizes for all breakpoints (xxl, xl, lg, md, sm, xs): How much space the column should use for the given breakpoint. Equal width for all breakpoints (xxl, xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns. Background Color: Set background color to column. Content vertical alignment: Align content vertically in column. This option is only needed if a background color is set. Otherwise use the Alignment option of the outer row block. Padding: Define padding inside the column. Button Options: Style: Choose the styling of the button. Open in new tab: Choose if link should be opened in a new tab. Rel: Set rel attribute of the link. Alignment: Horizontal alignment of the button. Supported Bootstrap versions This plugin supports Bootstrap v4 and v5. The version can be selected in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION constant in the wp-config.php file: Bootstrap 4: define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' ); Bootstrap 5 (default): define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' ); Possible values right now are '4' or '5'. By default Bootstrap version 5 is selected. CSS Grid The CSS grid (supported with Bootstrap >= 5.1.0) can be enabled in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID constant in the wp-config.php file: eg. define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true ); When the CSS grid is enabled the row and the column blocks will use custom templates for the rendering process: Row: row-css.grid.php Column: column-css-grid.php The support is still experimental since it’s also marked as experimental in the Bootstarp library. Please read the official Bootstrap documentation to get more information on how to use it. Bootstrap library Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it. You’ll find an example how to include it in your theme’s functions.php in the documentation. Templates All blocks are implemented as dynamic blocks. This makes it possible to overwrite the template of a block in your theme. To overwrite a block template create a folder called wp-bootstrap-blocks/ in your theme directory. You can copy the original template from wp-bootstrap-blocks/src/templates/ .php as a starting point and adjust it to your needs. Requirements WordPress >= 5.0 PHP >= 5.6 Further Information Documentation: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme WordPress Plugin: https://wordpress.org/plugins/wp-bootstrap-blocks GitHub Repository: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin Changelog: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/releases Issue tracker: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/issues