前言介紹
- 這款 WordPress 外掛「Block Collections」是 2023-12-01 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2025-04-27，距離現在已有 7 天。
- 外掛最低要求 WordPress 6.4 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 8.2.10 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
itmaroon |
外掛標籤
block | Input | design | textbox | gutenberg |
內容簡介
外掛簡介：
- 安裝此外掛後，會註冊以下七個區塊，在區塊編輯器和網站編輯器中都可使用。
- 每個區塊可以配置基本樣式，例如文字顏色、背景色、邊框和間距，並且某些區塊還可以設置陰影和圖示。
- 有些區塊具有簡單的動畫效果。
各區塊介紹：
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
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Block Collections」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.1.0 | 1.1.1 | 1.1.2 | 1.2.0 | 1.3.0 | 1.4.0 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | 1.5.0 | trunk |
延伸相關外掛（你可能也想知道）
International Telephone Input With Flags And Dial Codes 》這個外掛可以將標準的電話輸入欄位轉換為帶有國旗下拉式選單及相應國家撥號代碼的國際電話輸入欄位。, 功能, , 啟用外掛功能的選項, 排除國家的選項, 僅顯示...。
Conditional WooCommerce Checkout Field 》如果您透過 WooCommerce 商店出售產品並需要在客戶完成購買前收集一些額外的資訊，這個外掛正是您所需要的。, 現在有專業版, 升級至專業版 可以獲得更多功能...。
Gift Cards – Coupon Input 》這是一個免費外掛，可以與官方的 WooCommerce 禮品卡 擴充套件一起使用，允許您使用預設的優惠券表單來套用和兌換禮品卡。, 啟用插件後，“有禮品卡嗎？”表單...。
Form Data Collector 》這款外掛是一個開發者工具箱，可用於從您的 WordPress 網站收集表單數據。它提供必要的鉤子和實用工具，讓您管理之後如何存儲和顯示數據。, 開始使用的最好方...。
Input Scanner 》這個 WordPress 外掛包含一個 HTML 輸入元素的網頁條碼和 QR 掃描器。使用預定義的查詢類別和集成自己的查詢類別的選項，可以在管理介面或網站上使用掃描器。...。
Placehold (Gravity Forms) 》這個外掛在您的Gravity Forms輸入欄位中添加了一個佔位符號字段，並將其顯示為一個合適的 HTML5 佔位符號屬性，無需 JavaScript（耶！）, 我從wpbeginner.com...。
Fix Admin Contrast 》從 WordPress 2.7 版本開始，後台的輸入欄位幾乎無法看見。經過一年的修改 CSS 檔案來解決此問題後，Matt 建議我製作一個外掛程式以覆寫核心的 CSS 值。這個...。
Mask Contact Form 》在輸入欄位中，您應該使用以下其中一個類別，例如：, , , 上傳檔案到資料夾 /wp-content/plugins/（保留外掛原始資料夾）, , , 在 WordPress 的「外掛」介面...。
Simple Coherent Form 》概括：SCF是一個能協助開發者在WordPress的外掛或主題裡，創建統一風格的輸入欄位的外掛，兼具效率、可存取性和靈活性，提供眾多選項和多個鉤子，為開發者所...。
Placeholder Text 》這個外掛可以讓不支援 HTML5 的瀏覽器（包括 Internet Explorer 6）使用 placeholder 屬性。這個外掛只需要啟用 James Allardice 的 placeholders.js 腳本。...。
Osmig Signup Plugin 》這個外掛的設計目標是為了在LARP活動網站上更輕鬆地提供註冊表格，並且在處理輸入表單欄位的方式上具靈活性。, 這個外掛的優勢如下：, , 您可以定義所需的表...。
Loderi Virtual Keyboard 》如果您的網站訪客以其母語輸入，而又有可能您的訪客沒有所需的鍵盤佈局 - 這就使用此外掛程式，從Loderi.com整合虛擬鍵盤。當使用我們的鍵盤時，您的訪客可以...。
GF Hebrew Virtual Keyboard Add-On 》這是一個Gravity Forms希伯來文虛擬鍵盤外掛，當特定輸入欄位被點選時，它會在您的專案中新增一個虛擬鍵盤。, 資訊與需求：, * PHP 5 以上版本；, * WordPres...。
Flex Forms 》```html, - ,
- Flex Forms 是一個簡單靈活的 WordPress 表單建立外掛。使用這個外掛，您可以創建具有不同字段的表單，並使用短碼在您的網站...。
SOLASS Personal design of forms 》以下是這篇文章的要點，以 HTML 項目清單格式呈現：, , * 透過這個簡單的外掛，您可以將標準的「select」下拉式表單更改為您自己設計的表單。, * 這個外掛是...。