{"id":23889,"date":"2023-12-02T08:00:00","date_gmt":"2023-12-02T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/2024\/02\/22\/block-collections\/"},"modified":"2025-06-10T18:11:00","modified_gmt":"2025-06-10T18:11:00","slug":"block-collections","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/block-collections\/","title":{"rendered":"Block Collections"},"content":{"rendered":"

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.
\nBelow is a brief explanation of each block.
\n1 Design Title
\nA 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.
\n2 Design Text Control
\nThis 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.
\n3 Design CheckBox
\nThis 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.
\n4 Design Select
\nA 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.
\n5 Design Process
\nA 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.
\n6 Code HighLight
\nThis 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.
\n7. Design Table
\nDisplays the contents of a form object placed on a web page as a data source.
\nIt is intended to be installed in the input confirmation form as an inner block of Form Send Blocks, which will be released soon.
\n8. Design Button
\nYou 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.
\n9. Design Group
\n\u2013 Its main function is to store blocks and set their arrangement.
\nThe 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.
\n\u2013 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.
\n\u2013 By setting it to \u201cMake it a menu\u201d, 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.
\n\u2013 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).
\n\u2013 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.
\n10. Design Radio
\nThis 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.
\n11. Design Calender
\n\u2013 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.
\n\u2013 You can also set the display of holidays. To set holidays, you need to obtain an API key for the Google Calendar API.<\/p>\n

This plugin contains the ability to extend the core blocks: core\/paragraph, core\/image, core\/table, core\/list, and core\/quote.
\nThe extended core blocks act as inner blocks of the blocks specified by the plugin, so they cannot function independently outside of the plugin.<\/p>\n

    \n
  1. core\/paragraph<\/li>\n<\/ol>\n

    \u2013 Added ability to set margins and padding.
    \n\u2013 Added the ability to set line height.
    \n\u2013 A function has been added that allows you to set a maximum height, and if the height exceeds that, a \u201cSee more\u201d button will be displayed and displayed using that button.
    \n2. core\/list
    \n\u2013 Added ability to set margins and padding.
    \n\u2013 Added the ability to set line height.
    \n\u2013 Added the ability to set borderlines and rounded corners.
    \n3. core\/quote
    \n\u2013 Added ability to set margins and padding.
    \n\u2013 Added the ability to set borderlines and rounded corners.
    \n\u2013 Added the ability to set line height.
    \n4. core\/table
    \n\u2013 Added ability to set margins and padding.
    \n\u2013 Added the ability to set borderlines and rounded corners.
    \n5. core\/image
    \n\u2013 Added the ability to choose whether to fit the size to the parent element.
    \n\u2013 Added ability to set margins and padding.
    \n\u2013 Added the ability to set the image size.<\/p>\n

    Related Links<\/h3>\n