Birk Thestrup Blauner

A Full width Section block with background color or image.
With image background can paralax effect enables and overlay enables for easier text read.

BTB Full Width Section

Isamu Takeda

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 Form Send Block. 
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. 
10. Design Radio 
This block allows you to set styles for HTML radio button input elements. This time, we have prepared a normal radio button type and a button type. It is possible to add a button to deselect the element. 
11. Design Calender 
– This block allows you to select and enter a date from a calendar. You can choose the start day of the week to be Sunday or Monday. 
– You can also set the display of holidays. To set holidays, you need to obtain an API key for the Google Calendar API.
This plugin contains the ability to extend the core blocks: core/paragraph, core/image, core/table, core/list, and core/quote. 
The extended core blocks act as inner blocks of the blocks specified by the plugin, so they cannot function independently outside of the plugin.
<ol>
<li>core/paragraph</li>
</ol>
– Added ability to set margins and padding. 
– Added the ability to set line height. 
– A function has been added that allows you to set a maximum height, and if the height exceeds that, a “See more” button will be displayed and displayed using that button. 
2. core/list 
– Added ability to set margins and padding. 
– Added the ability to set line height. 
– Added the ability to set borderlines and rounded corners. 
3. core/quote 
– Added ability to set margins and padding. 
– Added the ability to set borderlines and rounded corners. 
– Added the ability to set line height. 
4. core/table 
– Added ability to set margins and padding. 
– Added the ability to set borderlines and rounded corners. 
5. core/image 
– Added the ability to choose whether to fit the size to the parent element. 
– Added ability to set margins and padding. 
– Added the ability to set the image size.
<h3>Related Links</h3>
<ul>
<li><a href="https://github.com/itmaroon/block-collections" rel="nofollow ugc">block-collections:Github</a></li>
<li><a href="https://github.com/itmaroon/block-class-package" rel="nofollow ugc">block-class-package:GitHub</a> </li>
<li><a href="https://packagist.org/packages/itmar/block-class-package" rel="nofollow ugc">block-class-package:Packagist</a> </li>
<li><a href="https://www.npmjs.com/package/itmar-block-packages" rel="nofollow ugc">itmar-block-packages:npm</a> </li>
<li><a href="https://github.com/itmaroon/itmar-block-packages" rel="nofollow ugc">itmar-block-packages:GitHub</a></li>
<li><a href="https://console.cloud.google.com/welcome" rel="nofollow ugc">Google Cloud Console</a></li>
<li>This plugin uses the API of “Google Cloud Translation API”.
<ul>
<li>Get the project ID and API key obtained by creating a project and enabling the Cloud Translation API from the <a href="https://console.cloud.google.com/home/dashboard" rel="nofollow ugc">Google Cloud Platform dashboard</a>.</li>
<li>You can register the authentication information from the setting screen.</li>
</ul>
</li>
</ul>
<h3>Arbitrary section</h3>
<ol>
<li>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.</li>
<li>This plugin has a dependency on the upcoming Form Send Blocks. This plugin requires installation and activation in order to use it.</li>
<li>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.</li>
<li>PHP class management is now done using Composer. 
<a href="https://github.com/itmaroon/block-class-package" rel="nofollow ugc">GitHub</a> 
<a href="https://packagist.org/packages/itmar/block-class-package" rel="nofollow ugc">Packagist</a> </li>
<li>I decided to make functions and components common to other plugins into npm packages, and install and use them from npm. 
<a href="https://www.npmjs.com/package/itmar-block-packages" rel="nofollow ugc">npm</a> 
<a href="https://github.com/itmaroon/itmar-block-packages" rel="nofollow ugc">GitHub</a></li>
<li>To set holidays for Design Calendar, you need to obtain an API key for the Google Calendar API. 
<a href="https://console.cloud.google.com/welcome" rel="nofollow ugc">Google Cloud Console</a></li>
</ol>

Block Collections

It is a plug-in that collects small scale blocks.

BTB Full Width Section vs Block Collections