Create Block Theme

外掛說明

這個外掛能讓使用者完成以下目的:

  • 建立空白佈景主題。
  • 建立目前使用的佈景主題的全新佈景主題。
  • 建立目前使用的上層佈景主題的子佈景主題。
  • 建立全新樣式變化。
  • 匯出佈景主題。
  • 將使用者變更過的範本及樣式儲存至目前使用的佈景主題。

全部全新建立的佈景主題或樣式變化,都會包含在 WordPress 編輯器中進行的變更。

這個外掛可以對佈景主題內容進行以下變更:

  • 將用於範本的全部圖片新增至佈景主題的 assets 資料夾。
  • 確保用於範本及區塊版面配置的區塊標記可順利匯出。
  • 確保用於範本及區塊版面配置的大部分字串可順利進行本地化。

這個外掛僅供開發使用,它不適用於正式環境網站,而是用於建立新的區塊佈景主題的工具。

步驟 1:設定

安裝並啟用 Create Block Theme 外掛。

使用者可以點擊 WordPress 編輯器頂端 [儲存] 按鈕右側的新圖示開啟全新面板。

步驟 2:自訂樣式

使用 [編輯器] 變更網站樣式、字型及範本。

步驟 3:匯出

在 WordPress 編輯器中找到位於頂端的 [建立區塊佈景主題] 選單。

如需在 [編輯器] 中將最新變更儲存至目前使用的佈景主題:

  • 點擊 [儲存設定] 便能將全部變更儲存至目前使用的佈景主題。

如需安裝及解除安裝字型:

  • 使用 WordPress 的 [字型庫] 安裝並啟用來自任何來源的字型。
  • 選取 [將變更儲存至佈景主題],然後選取 [儲存字型] 便能將使用中的全部字型儲存至目前使用的佈景主題。這些字型都可以在佈景主題中啟用,並在系統中停用,並且可以在系統中安全的刪除。
  • 安裝於佈景主題中的全部字型,都能在 WordPress 的 [字型庫] 中停用,並從佈景主題中移除。

或匯出佈景主題:

  • 選取 [匯出 ZIP 檔案] 以將佈景主題匯出為 ZIP 壓縮檔。

如需編輯佈景主題中繼資料:

  • 選取 [編輯佈景主題中繼資料] 以編輯佈景主題的中繼資料。style.css 會使用這些詳細資料。

如需檢查使用中的佈景主題的 theme.json 檔案內容:

  • 選取 [檢查佈景主題的 JSON 檔案]。

如需建立全新空白佈景主題:

  • 選取 [建立空白佈景主題]。
  • 為新佈景主題命名 (選填:其他中繼資料)。
  • 點擊 [建立空白佈景主題]。

如需建立佈景主題變化:

  • 選取 [建立佈景主題變化]。
  • 為新的佈景主題變體命名。
  • 點擊 [建立佈景主題變體]。

如需建立目前使用的佈景主題的全新再製版本,或建立目前使用的佈景主題的子佈景主題:

  • 點擊 [建立佈景主題]。
  • 點擊 [再製佈景主題] 已建立源自網站目前使用、並包含設計變更的佈景主題的全新佈景主題。
  • 點擊 [建立子佈景主題] 便能使用網站目前使用、並包含設計變更的佈景主題做為上層佈景主題以建立子佈景主題。

許多較舊、已淘汰不用的選項,會在 [外觀]→[建立區塊佈景主題] 的 [建立區塊佈景主題] 頁面中提供。

一般疑難排解

如果使用時遇到問題,請檢查以下項目:

  • 確保網站安裝了最新版本的 WordPress 核心程式。
  • 確保網站安裝了最新版本的外掛。
  • 停用全部外掛並查看這項操作是否解決了問題。如果停用全部外掛可以解決問題,請逐一啟用外掛,直至找到造成問題的外掛。
  • 將佈景主題切換至核心程式預設佈景主題,藉以排除任何與佈景主題相關的問題。
  • 查看技術支援論壇是否有類似的問題。

匯出佈景主題後得到損毀的 ZIP 檔案

  • 請先依照上述一般疑難排解步驟檢查。
  • 請確認網站的 wp-config.php 檔案中的 WP_DEBUG 常數設定為 false,例如 define( 'WP_DEBUG', false );
  • 如果佈景主題中包含 PHP 檔案,請確認 PHP 檔案的檔案結尾處沒有使用 PHP 結束標籤 ?>。如果有使用,請移除。

螢幕擷圖

  • WordPress 編輯器中的 [建立區塊佈景主題] 面板
  • WordPress 編輯器中的 [建立區塊佈景主題] 儲存面板
  • WordPress 編輯器中的佈景主題中繼資料編輯面板
  • WordPress 編輯器中的 theme.json 偵測器
  • WordPress 編輯器中的 [建立區塊佈景主題] 面板 1
  • WordPress 編輯器中的 [建立區塊佈景主題] 面板 2
  • [外觀]→[建立區塊佈景主題] 頁面

常見問題集

如何取得技術支援?

如果使用上發生問題,請前往外掛的技術支援論壇,技術支援論壇是取得協助的正確位置。

如何回報問題?

如果要回報程式碼錯誤,請在外掛的 GitHub 存放庫提交。提交前請先搜尋是否已有類似問題,避免重複提交相同問題。

使用者評論

2024 年 7 月 16 日
I think I said it all in the title. I couldn’t upload the theme as it was missing a styles.css. I checked the files and can confirm that there isn’t one. I guess I could add a blank one, but then I could just create a child theme myself if I wanted to start creating files. Nice idea, poor execution…a bit like blocks 😉
2024 年 5 月 4 日 1 則留言
I didn’t use this to really customize anything. I just used it to create a child theme of 2024. It worked great. I exported the theme and it automatically downloaded to my computer. I tried it to upload it to add a new theme, BUT it said it would be overwriting my 2024 theme. So, I did have to unzip and rezip to rename the folder, something that SHOULD be part of the export options (maybe in a future release?). However, AFTER doing that. I simply uploaded the zip and my child theme was there!
2024 年 2 月 25 日
Wow, 2 days of work completely gone! In the end I edited the “theme info”, hit “saved changes” and *poof*, all gone.
2024 年 2 月 14 日
One thing that I would improve:When you open the assets/fonts folder of TT3 or TT4 themes, they offer .woff2 but the same doesn’t happen with this plugin. So when you add a Google font it is only adding the .ttf font format, which is a very old format.
2024 年 1 月 12 日
Thanks for this. It works well. It’s exciting that block theme design is low code. This plugin makes it even more low code.
閱讀全部 30 則使用者評論

參與者及開發者

〈Create Block Theme〉外掛目前已有 16 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Create Block Theme〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.3.0

  • Persist font settings when cloning a theme (#678)
  • Landing Page: Improve design (#673)
  • Fix small readme typo (#674)
  • A11y: Improve color contrast for help button (#672)
  • Quality: Fix warning error when exporting theme (#671)
  • Remove unused REST API endpoint (#670)
  • Refactor theme fonts class for readability (#661)
  • Check if theme fonts present before removing (#660)
  • Add an about section in the editor (#667)
  • Update escaping function (#665)
  • Make external links translatable (#663)
  • Update url for blueprint (#658)
  • Add image credits edit capabilities to the edit theme modal (#662)
  • Quality: Remove unused PHP classes (#664)

2.2.0

  • Update modal width to 65vw (#638)
  • Fixed font utilities to work with font sources as an (optional) array. (#645)
  • Handle font licenses when editing theme metadata (#649)
  • Adds an endpoints that returns a list of font families used by a theme (#648)
  • Flush cache after creating new themes (#654)
  • Replace/admin interface (#637)
  • Added subfolder to initial theme state to eliminate render error (#652)
  • Fix the jslint warning (or infinate loop error when fixed) from useSelect usage (#651)
  • Enforce specifying which eslint rule is disabled when using eslint disable comments (#650)
  • Handle font credits in the backend (#647)
  • Move lib-font and add GPL license text (#646)

2.1.4

  • Fix template texts localizing/escaping (#641)
  • Use only major.minor version in ‘Tested up to’ field (#635)
  • Don’t Clobber Metadata (#634)
  • Clean and complete the changelog (#636)
  • Add prefix to the names in the PHP global namespace. (#628)
  • Improve tags UI (#630)
  • Refactor Theme_Readme (readme.txt) PHP class (#626)
  • Metadata screenshot (#621)
  • Allow spaces in slugs. Changed logic to correctly replace functions. Updated tests. (#622)
  • Reset changelog and version on clone and theme creation (#623)
  • Use non-default port for wp-env (#611)
  • Update package-lock.json (#620)
  • Tests: use tests-wordpress wp-env for phpunit (#618)
  • Add Repository Management section to contributing docs (#614)
  • Update wp-env version (#619)
  • Update Node version to 20 (#617)
  • ESLint: Add new rules (#616)

2.1.3

  • Editor Sidebar: Persist “Save Changes” panel settings (#607)
  • Fix problem with zip file creation on Windows (#606)
  • Fix custom fonts assets path (#601)
  • Remove unused UpdateThemePanel component (#608)
  • Check ZipArchive class before zip export (#609)
  • Editor Sidebar: Make save panel text translatable (#603)
  • Editor Sidebar: Improve screen title UI (#605)
  • Move files (#598)

2.1.2

  • Document the release process (#594)
  • Make sure code is being deployed to the directory only on Release PR Merge (#593)
  • Remove font management (#595)

2.1.1

  • Process group background image when saving theme (#586)
  • Removed unnecessary filter rejecting unsafe URLs (#588)
  • Fix/cover-block-content-stripped (#587)
  • When there are no fonts to export an error is thrown (null ref). This change checks for fonts to copy to the theme before trying to. (#582)
  • Fix hardcoded wp-admin URLs (#576)
  • Code Quality: Remove no-undef eslint rule (#577)
  • Move screenshot refs to screenshot section (#580)

2.1.0

  • Save only templates that have been changed (#572)
  • I18n: Make modal titles translatable (#575)
  • Update readme with changes from UI changes and updated screenshots (#571)
  • Fix concatenation of translation strings (#554)
  • Include activated Fonts on theme zip export functions (#564)
  • Fix/un transposed patterns (#567)
  • Try/refactor editor UI (#563)
  • Update readme files with editor-specific steps and screenshot references (#555)

2.0.2

  • Update readme, remove test files from release build (#548)

2.0.1

  • Add missing build step to deploy workflow (#546)

2.0.0

  • Remove reviewer addition (#544)
  • Refactor GitHub release workflows (#542)
  • Fix changelog creation script (#541)
  • Add theme json inspector (#520)
  • Add deprecation notice in theme export admin screen (#540)
  • Replace font management with screen pointing to native font library (#539)
  • Added creation of theme validation to site editor interface (#532)
  • Add/child theme creation (#531)
  • Add blueprint.json file to enable plugin previews (#511)
  • Extracted any logic that may need to be tested from the api class (#522)
  • Use CORE for Font Management (#518)
  • Add integration tests (#393)
  • Remove CODE_OF_CONDUCT.md from .distignore. (#515)
  • Remove repo specific CoC. (#514)
  • GitHub Actions: Add JavaScript Unit Test (#508)
  • Add files and directories not needed for release to .distignore (#512)
  • Replace dash icon with SVG icon (#506)
  • Fix browser warning error when clicking the reset button (#505)
  • Add markdown and package.json lint command (#504)
  • Fix react warning error on font upload page (#502)
  • Fix dynamic property deprecation (#501)
  • Add text domain to translation target (#499)

1.13.8

  • Remove the development-only warning

1.13.7

  • docs: Add recent release notes to the changelog

1.13.6

  • Fix manage fonts page

1.13.5

  • Make form files more specific to form page
  • Set page titles that set only within CBT

1.13.4

  • Bump “tested up to” to 6.4
  • Update Google Fonts JSON data from API
  • Update theme form markup and styles
  • Fix/child export
  • Corrects malformed input tag
  • Add quotes to font family names

1.13.3

  • Update “Tested up to” version to 6.3
  • Add .wp-env.override.json to .gitignore
  • Use wp_add_inline_script for createBlockTheme object
  • Update Google Fonts JSON data from API
  • Updated Requires PHP version to 7.4
  • Fix PHP 8.1 errors caused by missing page titles

1.13.2

  • Update Google Fonts JSON data from API
  • Set the initial version to 1.0.0 instead of 0.0.1
  • Fix: react render warning
  • Introduce basic wp-env environment

1.13.1

  • Add default value for recommended plugins section
  • Update Google Fonts JSON data from API

1.13.0

  • Persist copyright info on new theme creation
  • Update Google Fonts JSON data from API
  • Move check for download_url higher up
  • Avoid white spaces or other weird characters on font asset paths.
  • Adding files to zip subfolder called as theme slug
  • Update Google Fonts JSON data from API

1.12.1

  • Fix double replacement in replace_namespace

1.12.0

  • Add image credits input
  • Update theme version logic to use isset()
  • Update Google Fonts JSON data from API

1.11.0

  • Update Google Fonts JSON data from API
  • Add linebreaks before hyphen lists in readme to fix plugin repository display
  • Prevent additional white space in font credits in readme.txt
  • Google fonts: Change onClick handlers to onChange
  • Escape special characters to avoid syntax errors
  • Update required node version and update dependencies

1.10.0

  • Update Google Fonts JSON data from API
  • Adding troubleshooting FAQs
  • Updating “Requires at least” field of generated themes
  • Improve handling of font license errors
  • Fix tabIndex prop
  • Automatically add font license info for local fonts

1.9.0

  • Handle Google Font Credits
  • Update Google Fonts JSON data from API
  • Fix console error in prepareThemeNameValidation function
  • Add FAQ section to readme.txt
  • Automatically add font license info for Google fonts
  • Removing donate link

1.8.2

  • Bump tested version
  • Updating Tested up to: 6.2 WordPress version
  • fix tag duplication in exported theme
  • Fixing error checking
  • Update Google Fonts JSON data from API
  • Refactor react app code for general purpose
  • add build directory to php exclude list
  • Do not call replace_template_namespace when overwrting theme
  • Fix error when switching to template edit mode in the post editor
  • Add useRootPaddingAwareAlignments to blank theme
  • Update Google Fonts JSON data from API
  • Avoid adding Template info to style.css if it’s empty
  • Fix delete font family/face when name is different from family
  • Add theme name validation
  • Fix export theme from Site Editor
  • Strip escaping characters before printing stylesheet
  • Linting unlinted file

1.8.1

  • Add current WordPress version to style.css and readme.txt
  • Add labels around Google font family checkbox controls
  • Fix theme slug, textdomain, and template for cloned, child and sibling themes.
  • Replace theme slug in templates after getting media urls from them

1.8.0

  • Export style variations just with the changes made by the user
  • fix issue where package-lock is not updated on version bump
  • Adding default value to an to avoid error when calling export_theme_data()
  • Fixing image downloading not working in some cases
  • Update Google Fonts JSON data from API
  • Add Export (Clone) to site editor

1.7.1

  • Update screenshots
  • Fix manage fonts UI and backend when no settings are defined in theme.json
  • Variable font weight range

1.7.0

  • Manage fonts minor refactor. Move elements from PHP to react
  • Allow otf font file upload
  • Local fonts section implementation in React
  • Fonts outline sidebar
  • Update Google Fonts JSON data from API

1.6.3

  • (Fix refactor regression) Remove white spaces from theme slug

1.6.2

  • Refactor font-management class
  • Refactor create-block-theme class
  • fix manage theme font menu casing
  • Add phpcs exception to avoid PHP8.0 incompatibility errors
  • Fix blank theme screenshot fatal error
  • Fix lint issues using auto fixer tool
  • Update Google Fonts JSON data from API
  • Fix CSS lint issues
  • Fix PHP lint issues
  • Fix JS lint issues
  • Add lint validation to PR workflows
  • fix package lock sync issue

1.6.1

  • Add: input for theme tags
  • Placeholder URL change to TT3
  • Remove white spaces from theme slugs

1.6.0

  • Update main readme and add supporting docs
  • Fix Depreciation Warning
  • Cleanup Manage Theme Fonts UI
  • Bundle template images into theme assets and make their urls relative
  • Cloned themes: Add original theme name to readme.txt and style.css
  • Font families collapsed by default
  • Fix: Unexpected action when clicking Collapse chevron
  • Lint all CSS files
  • Fix: composer scripts doesn’t work on Windows
  • Use Gutenberg Theme JSON resolver if its available
  • Update Google Fonts JSON data from API
  • Replacing mkdir() calls with WordPress wp_mkdir_p() function

1.5.1

  • check for DISALLOW_FILE_EDIT and simplify permission check logic
  • Load google fonts data from url
  • Separate styles and templates reset
  • Add spinner while google fonts load instead of showing a blank page
  • Add: code linting scripts
  • Update Google Fonts JSON data from API
  • Avoid pre commit verifications on Github actions to prevent action errors caused by linting problems

1.5.0

  • Fix: browser console errors
  • Fix: Adding or removing fonts fails in some Windows environments
  • Add placeholder screenshot to boilerplate theme
  • Refactor: Add Google Fonts section from vanilla JS to React app
  • Adding demo text settings

1.4.0

  • Specify node and npm versions, add nvmrc file
  • Add theme screenshot uploading
  • Manage fonts: Demo text editable
  • Update Google Fonts JSON data from API

1.3.10

  • Remove font face: avoid unwanted removal of fontfamily.
  • Add missing spaces to option labels

1.3.9

  • Updating Tested up to: 6.1
  • I18N: Some new UI strings are not translatable
  • Replace “current theme” with “active theme” (or “currently active theme”)
  • Improve translation process by removing trailing spaces
  • Fonts: remove font files from theme assets folder if the font face/family is removed.
  • Refactor to read raw theme.json data instead of using core methods
  • Update Google Fonts JSON data from API

1.3.8

  • Fixes the spelling of definition
  • Fixing readme contributors
  • Add contributor username to readme
  • Update GitHub action to avoid deprecation warning
  • Update Google Fonts JSON data from API
  • Update Google Fonts JSON data from API
  • Check permission before running functions that need file write permissions
  • Allow previewing system font

1.3.7

  • Moving assets files to be auto updated by the release action

1.3.6

  • Auto update assets using a github action

1.3.5

  • Auto release: commit updated php file with the new version

1.3.4

  • auto update version of php file

1.3.3

  • Automatic release improvements

1.3.2

  • Automatic release improvements

1.3.1

  • Update .distignore

1.3.0

  • Updating google fonts data
  • Force https to load Google fonts preview
  • Add the ability to select/unselect all google font variants
  • Update google fonts JSON data automatically using a repo action
  • Manage theme fonts
  • Automate release: build, version bump, changelog, deploy to wp.org
  • Automate release

1.2.3

  • Add translation domain (#121)
  • Check for nonce index (#120)
  • Validating mime type of font file on server side (#119)

1.2.2

  • Add capabilities and nonce checks (#118)

1.2.1

  • Correcting version number

1.2.0

  • Embed Google fonts and local font files in theme (#113)
  • Change button text (#112)
  • Add check and directory creation for template and parts folders. (#110)
  • Change theme.json schema of blank theme if Gutenberg isn’t installed. (#107)

1.1.3

  • update links, screenshots of the new changes (#97)
  • Add $schema and use Gutenberg classes (#99)
  • Update readme to include latest features (#100)
  • Generate $schema URL in the same way as core. (#105)

1.1.2

  • Save a theme variation (#90)
  • Make UI string ‘Create Block Theme’ can be translatable (#92)

1.0.1

  • Add option to create blank theme. (#70)
  • Improve form instructions (#76)
  • Form cleanup and Theme name check (#77)
  • Get the correct merged theme.json data (#88)

1.0

  • Initial version.