Synced with the latest as of 29-Dec-2023

docs/README.md

@@ -182,6 +182,15 @@ This handbook should be considered the canonical resource for all things related
 
 ### 主な変更
 
+2023/12/29
+- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - グループ backgroundSize [#57005](https://github.com/WordPress/gutenberg/pull/57005)
+- [ユーザーインターフェースのカスタマイズ](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/) - 以下のファイルに分割 [#57289](https://github.com/WordPress/gutenberg/pull/57289)
+- [Block Locking API](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/block-locking) - 新規
+- [パターン](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/patterns) - 新規
+- [theme.json](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/theme-json) - 新規
+- [フィルターとフック](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/filters-and-hooks) - 新規
+- [エディター機能の無効化](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/disable-editor-functionality) - 新規
+
 2023/12/24
 - [コードによるコントリビューション入門](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/getting-started-with-code-contribution/) - Node.js v20 と npm v10 [#56331](https://github.com/WordPress/gutenberg/pull/56331)
 - [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - グループ backgroundSize [#57005](https://github.com/WordPress/gutenberg/pull/57005)

docs/explanations/architecture/key-concepts.md

@@ -158,9 +158,9 @@ More on [Site editing templates](/docs/explanations/architecture/full-site-editi
 ## スタイル
 
 <!-- 
-Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/theme-json.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
+Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/global-settings-and-styles.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
  -->
-スタイルは、従来「グローバルスタイル」と呼ばれ、コードの中ではそのように参照されています。エディターを介してユーザーがアクセスする「インターフェース」と、[`theme.json` ファイル](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/) を介して実行される「構成システム」の2つから成ります。`theme.json` ファイルは、通常であればさまざまな `add_theme_support` 呼び出しに散らばる構成要素の大部分を吸収し、エディターとの通信を簡素化します。したがって、グローバルスタイルは以下に挙げるような宣言を改良します。すなわち、どの設定を有効化するか、テーマはどの特定ツールをサポートするか (カスタムカラーパレットなど)、利用可能なデザインツール、そして、WordPress、有効化されたテーマ、ユーザーから来るスタイルを調整するインフラ。
+スタイルは、従来「グローバルスタイル」と呼ばれ、コードの中ではそのように参照されています。エディターを介してユーザーがアクセスする「インターフェース」と、[`theme.json` ファイル](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/global-settings-and-styles/) を介して実行される「構成システム」の2つから成ります。`theme.json` ファイルは、通常であればさまざまな `add_theme_support` 呼び出しに散らばる構成要素の大部分を吸収し、エディターとの通信を簡素化します。したがって、グローバルスタイルは以下に挙げるような宣言を改良します。すなわち、どの設定を有効化するか、テーマはどの特定ツールをサポートするか (カスタムカラーパレットなど)、利用可能なデザインツール、そして、WordPress、有効化されたテーマ、ユーザーから来るスタイルを調整するインフラ。
 
 <!-- 
 Learn more about [Global Styles](/docs/explanations/architecture/styles.md#global-styles).

docs/explanations/architecture/styles.md

@@ -15,7 +15,7 @@ The final HTML document is the result of a few things:
 The stylesheets loaded in the front end include:
 
 -   **Blocks**. The stylesheets that come with the block. In the front end, you can find a single stylesheet with all block styles defined by WordPress (`wp-block-library-*` ) or separate stylesheets per block in use (as in `wp-block-group-*`, `wp-block-columns-*`, etc). See [this note](https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/) for the full details.
--   **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`.
+-   **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`.
 -   **Theme**. Historically, themes have enqueued their own stylesheets, where the id is based on the theme name, as in `twentytwentytwo-style-css`. In addition to having their own stylesheets they can now declare a theme.json file containing styles that will be part of the stylesheet generated by global styles.
 -   **User**. Some of the user actions in the editor will generate style content. This is the case for features such as duotone, layout, or link color.
 -   **Other**. WordPress and plugins can also enqueue stylesheets.
@@ -515,7 +515,7 @@ There are currently four layout types in use:
 -   Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
 -   Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property.
 
-For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it).
+For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/#what-is-blockgap-and-how-can-i-use-it).
 
 ### Targeting layout or container blocks from themes
 

docs/getting-started/glossary.md

@@ -70,7 +70,7 @@ This refers to a collection of features that ultimately allows users to edit the
 
 The CSS styles generated by WordPress and enqueued as an embedded stylesheet in the front end of the site. The stylesheet ID is `global-styles-inline-css`. The contents of this stylesheet come from the default `theme.json` of WordPress, the theme's `theme.json`, and the styles provided by the user via the global styles sidebar in the site editor.
 
-See [theme.json reference docs](/docs/reference-guides/theme-json-reference.md)</a>, the [how to guide](/docs/how-to-guides/themes/theme-json.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md).
+See [theme.json reference docs](/docs/reference-guides/theme-json-reference.md)</a>, the [how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md).
 
 Compare to <a href="#block-styles">block styles</a>.
 

docs/getting-started/tutorial.md

@@ -36,9 +36,9 @@ The first step in creating the Copyright Date Block is to scaffold the initial b
 	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/">Get started with create-block</a> documentation for an introduction to using this package.
 </div>
 
-You can use `create-block` from just about any directory on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated.
+You can use `create-block` from just about any directory (folder) on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated.
 
-Therefore, create a new directory (folder) on your computer called "Block Tutorial". Open your terminal and `cd` to this directory. Then run the following command.
+Therefore, choose a directory to place the block plugin or optionally create a new folder called "Block Tutorial". Open your terminal and `cd` to this directory. Then run the following command.
 
 <div class="callout callout-info">
 	If you are not using <code>wp-env</code>, instead, navigate to the <code>plugins/</code> folder in your local WordPress installation using the terminal and run the following command.
@@ -351,9 +351,10 @@ To enable this starting year functionality, you will need one attribute to store
 
 ### Updating block.json
 
-Block attributes are generally specified in the [`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#data-storage-in-the-block-with-attributes) file. So open up the file and add the following section after the `example` in line 9.
+Block attributes are generally specified in the [`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#data-storage-in-the-block-with-attributes) file. So open up the file and add the following section after the `example` property.
 
 ```json
+"example": {},
 "attributes": {
 	"showStartingYear": {
 		"type": "boolean"
@@ -483,7 +484,7 @@ export default function Edit( { attributes, setAttributes } ) {
 							'Starting year',
 							'copyright-date-block'
 						) }
-						value={ startingYear }
+						value={ startingYear || '' }
 						onChange={ ( value ) =>
 							setAttributes( { startingYear: value } )
 						}
@@ -496,6 +497,10 @@ export default function Edit( { attributes, setAttributes } ) {
 }
 ```
 
+<div class="callout callout-tip">
+	You may have noticed that the <code>value</code> property has a value of <code>startingYear || ''</code>. The symbol <code>||</code> is called the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR</a> (logical disjunction) operator. This prevents warnings in React when the <code>startingYear</code> is empty. See <a href="https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components">Controlled and uncontrolled components</a> for details.
+</div>
+
 Save the file and refresh the Editor. Confirm that a text field now exists in the Settings panel. Add a starting year and confirm that when you update the page, the value is saved.
 
 ![A live look at editing the new Starting Year field in the Settings Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-11.gif)
@@ -522,7 +527,7 @@ export default function Edit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
 					<ToggleControl
-						checked={ showStartingYear }
+						checked={ !! showStartingYear }
 						label={ __(
 							'Show starting year',
 							'copyright-date-block'
@@ -539,7 +544,7 @@ export default function Edit( { attributes, setAttributes } ) {
 								'Starting year',
 								'copyright-date-block'
 							) }
-							value={ startingYear }
+							value={ startingYear || '' }
 							onChange={ ( value ) =>
 								setAttributes( { startingYear: value } )
 							}
@@ -601,7 +606,7 @@ export default function Edit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
 					<ToggleControl
-						checked={ showStartingYear }
+						checked={ !! showStartingYear }
 						label={ __(
 							'Show starting year',
 							'copyright-date-block'
@@ -618,7 +623,7 @@ export default function Edit( { attributes, setAttributes } ) {
 								'Starting year',
 								'copyright-date-block'
 							) }
-							value={ startingYear }
+							value={ startingYear || '' }
 							onChange={ ( value ) =>
 								setAttributes( { startingYear: value } )
 							}
@@ -690,7 +695,9 @@ In the next section, however, you will add static rendering to the block. This e
 
 ## Adding static rendering
 
-A block can be dynamically rendered, statically rendered, or both. The block you have built so far is dynamically rendered. The HTML output of the block is not actually stored in the database, only the block markup and the associated attributes.
+A block can utilize dynamic rendering, static rendering, or both. The block you have built so far is dynamically rendered. Its block markup and associated attributes are stored in the database, but its HTML output is not.
+
+Statically rendered blocks will always store the block markup, attributes, and output in the database. Blocks can also store static output in the database while being further enhanced dynamically on the front end, a combination of both methods.
 
 You will see the following if you switch to the Code editor from within the Editor.