Description
When this plugin is installed, the following 9 blocks are registered and can be used not only in the block editor but also in the site editor (tested on WordPress 6.4.2). In principle, each block can be configured with basic styles such as text color, background color, border, and white space, and in some cases it is also possible to set shadows and icons. There are also some that have simple animations set.
Below is a brief explanation of each block.
1 Design Title
A block that allows you to style HTML heading tags. In addition to the normal style, we have prepared a type that allows you to insert a circular marker, and a type that allows you to add sub copies and icons.
2 Design Text Control
This is a block that allows you to style text controls and text area controls for HTML input elements. This time, we have prepared a normal box type and a line type. It is now possible to display required inputs, and it is a block that can be used for validation checks as an inner block of the Guest Contact Block, which will be released soon.
3 Design CheckBox
This is a block that allows you to style checkboxes in HTML input elements. Check animation. At the moment, we only have one type available, but we plan to gradually offer other variations in the future.
4 Design Select
A block that allows you to style HTML SELECT elements. It boasts that the selection element moves with a slightly fancy animation. Supports single selection and multiple selection.
5 Design Process
A block for displaying the input process of form input. It is assumed that it will be used as an inner block for the Guest Contact Block, which will be released soon, and this block will not work on its own.
6 Code HighLight
This block allows you to enter code in the text area in edit mode and highlight it on the front end. This block uses the Google Code Prettify library for highlighting.
7. Design Table
Displays the contents of a form object placed on a web page as a data source.
It is intended to be installed in the input confirmation form as an inner block of Form Send Blocks, which will be released soon.
8. Design Button
You can choose between regular buttons and submit buttons inside form elements. When you select the regular button, you can select a link to a fixed page and transition to that page.
9. Design Group
– Its main function is to store blocks and set their arrangement.
The placement can be selected according to the CSS display property block, flex(row), flex(column), or grid. If you select grid, you can set various grid styles.
– Compatible with block themes, you can select contentSize and wideSize in the layout clause of theme.json, and you can also set the width to match the content width or freely set the width.
– By setting it to “Make it a menu”, it will become a hamburger button in mobile mode (displayed on devices with a width of 767px or less), and when you click it, it will stick out from the left.
– These settings can be set separately for desktop mode (displayed on devices with a width of 768px or more) and mobile mode (displayed on devices with a width of 767px or less).
– By setting it to be movable, you can adjust the placement by dragging. With this feature installed, the old version of Draggble Box has been discontinued.
Related Links
block-collections:Github
block-class-package:GitHub
block-class-package:Packagist
itmar-block-packages:npm
itmar-block-packages:GitHub
Arbitrary section
In this version, style settings that may require responsiveness can be set separately in desktop mode (displayed on devices with a width of 768px or more) and mobile mode (displayed on devices with a width of 767px or less). It becomes. To tell which setting is set, when you switch the display mode in the block editor or site editor, “(Desktop)” and “(Mobile)” will be displayed in the side menu display.
Please note that responsiveness for tablet display is not supported.
This plugin has a dependency on the upcoming Form Send Blocks. This plugin requires installation and activation in order to use it.
Regarding the display of text, etc., settings are made using WordPress’s internationalization function, so it is possible to display text in multiple national languages. Currently, English and Japanese notation is possible.
PHP class management is now done using Composer.
GitHub
Packagist
I decided to make functions and components common to other plugins into npm packages, and install and use them from npm.
npm
GitHub