內容簡介
外掛簡介：
- 安裝此外掛後，會註冊以下七個區塊，在區塊編輯器和網站編輯器中都可使用。
- 每個區塊可以配置基本樣式，例如文字顏色、背景色、邊框和間距，並且某些區塊還可以設置陰影和圖示。
- 有些區塊具有簡單的動畫效果。
各區塊介紹：
1. Design Title
- 可以樣式化 HTML 標題標籤的區塊。
- 除了常規樣式外，還準備了一種可插入圓形標記的類型，以及一種可添加子標題和圖示的類型。
2. Design Text Control
- 可以樣式化 HTML 輸入元素的文字控制和文字區域控制的區塊。
- 提供了常規方塊和線形方塊兩種類型。
- 現在可以顯示必填輸入，可作為即將發布的Guest Contact Block內部區塊進行驗證檢查。
3. Design CheckBox
- 可以樣式化 HTML 輸入元素的勾選框的區塊。
- 勾選動畫效果。
- 目前只有一種類型可用，但未來計劃逐漸提供其他變化。
4. Design Select
- 可以樣式化 HTML SELECT 元素的區塊。
- 擁有帶有些許特效移動的選擇元素。
- 支援單選和多選。
5. Design Process
- 用於顯示表單輸入的處理過程的區塊。
- 假設將作為即將發布的Guest Contact Block的內部區塊使用，此區塊無法獨立使用。
6. Code HighLight
- 允許在編輯模式下在文本區塊中輸入代碼並在前端進行高亮顯示的區塊。
- 此區塊使用 Google Code Prettify 庫進行程式碼高亮顯示。
7. Draggable Box
- 與其他區塊不同，通過設置內部區塊來使用。
- 可以通過拖動更改設定區塊的位置。
- 通過插入圖像區塊等，可以創建移位排列的樣式。
相關連結：
- Github
外掛標籤
開發者團隊
原文外掛簡介
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.
core/paragraph
– 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.
Related Links
block-collections:Github
block-class-package:GitHub
block-class-package:Packagist
itmar-block-packages:npm
itmar-block-packages:GitHub
Google Cloud Console
This plugin uses the API of “Google Cloud Translation API”.
Get the project ID and API key obtained by creating a project and enabling the Cloud Translation API from the Google Cloud Platform dashboard.
You can register the authentication information from the setting screen.
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
To set holidays for Design Calendar, you need to obtain an API key for the Google Calendar API.
Google Cloud Console
