WordPress plugin that adds fully-responsive Gutenberg blocks to your WordPress instance.
All blocks are static blocks to ensure optimal performance.
Implements a range of heading sizes, precise margin and padding adjustments, and customizable text appearance - including font styles, colors, and alignment option. Provides an alternative to the core heading block.
Customize text styles to match your design preferences with font sizes, various appearance options and one-click letter case styles. Provides an alternative to the core paragraph block.
Create primary, outline or link style buttons with a variety of options to control the target action. Provides an alternative to the core buttons block.
Fully-responsive images. Show different images - or hide entirely - for different screen sizes.
Layout block that uses a 12-point grid system to create fully responsive designs based on rows and columns.
Advanced block for creating virtually any type of flex layout. Offers all the control of native CSS.
Turn any collection of blocks into a single link.
Structures your information into tabs, providing a clean and organized layout for your users. Creators can manage tabbed container, heading and content sections separately to align and adjust the content.
Conditionally show or hide one of a collection of blocks based on an event. Choose from either a flip or slide transition.
In addition, each block allows developers and advanced users to specify custom CSS scoped only to that particular block instance using persistent block ids.
Create a form element containing other blocks. The form can be submitted to any form handler you choose.
Forms are usually used in conjunction with the field
and submit
blocks.
A block containing an input, optional label and error message. When a field is contained inside a form
block,
styles are added on the containing form
.
Some block communicate with one another via Javascript events internally. If you are a developer and wish to extend listen to one of these events to extend the base functionality, here's how they work.
Form elements generate a 'submit' event when that form is submitted.
Fields listen to the 'submit' event of parent form and validate themselves as needed.
If the field is invalid, notes the error on the event. The form then cancels the submission.
You can create your own responsive blocks for the Gutenberg block editor just like you do regular custom blocks.
npx @wordpress/create-block --template @mindspun/create-block example
cd example
npm run postinstall
npm run build
npm run plugin-zip
This package adds a set of fully responsive block controls that can be used like core block controls in your custom block.
See the Storybook for a complete list of available controls.