diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml
index 22cb81618a1efb..fccce2e4e93bcf 100644
--- a/.github/setup-node/action.yml
+++ b/.github/setup-node/action.yml
@@ -14,6 +14,7 @@ runs:
with:
node-version-file: '.nvmrc'
node-version: ${{ inputs.node-version }}
+ check-latest: true
cache: npm
- name: Get Node.js and npm version
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index f0c704e10456c7..a2628bf7af6160 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -174,6 +174,7 @@ jobs:
uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
with:
node-version-file: '.nvmrc'
+ check-latest: true
cache: npm
- name: Build Gutenberg plugin ZIP file
@@ -182,7 +183,7 @@ jobs:
NO_CHECKS: 'true'
- name: Upload artifact
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
with:
name: gutenberg-plugin
path: ./gutenberg.zip
@@ -205,7 +206,7 @@ jobs:
- name: Upload release notes artifact
if: ${{ needs.bump-version.outputs.new_version }}
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
with:
name: release-notes
path: ./release-notes.txt
@@ -269,12 +270,12 @@ jobs:
run: echo "version=$(echo $VERSION | cut -d / -f 3 | sed 's/-rc./ RC/' )" >> $GITHUB_OUTPUT
- name: Download Plugin Zip Artifact
- uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+ uses: actions/download-artifact@7a1cd3216ca9260cd8022db641d960b1db4d1be4 # v4.0.0
with:
name: gutenberg-plugin
- name: Download Release Notes Artifact
- uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+ uses: actions/download-artifact@7a1cd3216ca9260cd8022db641d960b1db4d1be4 # v4.0.0
with:
name: release-notes
@@ -336,6 +337,7 @@ jobs:
with:
node-version-file: 'main/.nvmrc'
registry-url: 'https://registry.npmjs.org'
+ check-latest: true
- name: Publish packages to npm ("latest" dist-tag)
run: |
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 93d0bdf6f1d564..61cb9829422f23 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -89,6 +89,7 @@ jobs:
uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
with:
node-version-file: '.nvmrc'
+ check-latest: true
cache: npm
- uses: preactjs/compressed-size-action@8119d3d31b6e57b167e09c81dfa877eada3bcb35 # v2.5.0
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 0e4325b53f69da..d817ac1e0be976 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -14,14 +14,14 @@ concurrency:
jobs:
checks:
- name: Checks
+ name: Checks w/Node.js ${{ matrix.node }} on ${{ matrix.os }}
runs-on: ${{ matrix.os }}
if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
strategy:
fail-fast: false
matrix:
- node: ['16']
- os: [macos-latest, ubuntu-latest, windows-latest]
+ node: ['20', '21']
+ os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index dd8ae391dcf8f7..b026b9eb3d0762 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -29,8 +29,6 @@ jobs:
#
=======
if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
- strategy:
- fail-fast: false
>>>>>>> upstream/trunk
steps:
@@ -109,7 +107,7 @@ jobs:
npx wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache"
- name: Archive debug artifacts (screenshots, HTML snapshots)
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: failures-artifacts
@@ -123,7 +121,7 @@ jobs:
>>>>>>> upstream/trunk
- name: Archive flaky tests report
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: flaky-tests-report
@@ -169,7 +167,7 @@ jobs:
xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright -- --shard=${{ matrix.part }}/${{ matrix.totalParts }}
- name: Archive debug artifacts (screenshots, traces)
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: failures-artifacts
@@ -177,7 +175,7 @@ jobs:
if-no-files-found: ignore
- name: Archive flaky tests report
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: flaky-tests-report
@@ -197,7 +195,7 @@ jobs:
ref: trunk
show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
- - uses: actions/download-artifact@v3
+ - uses: actions/download-artifact@v4
id: download_artifact
# Don't fail the job if there isn't any flaky tests report.
continue-on-error: true
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 517febe9774a99..12063c0eb7d496 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -86,7 +86,7 @@ jobs:
- name: Archive performance results
if: success()
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
with:
name: performance-results
path: ${{ env.WP_ARTIFACTS_PATH }}/*.performance-results*.json
@@ -100,7 +100,7 @@ jobs:
./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA b61dde2e5ec29d98801e623de968bfb286c5be3f $COMMITTED_AT
- name: Archive debug artifacts (screenshots, HTML snapshots)
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: failure()
with:
name: failures-artifacts
diff --git a/.github/workflows/php-changes-detection.yml b/.github/workflows/php-changes-detection.yml
index 7e80157d0caf7c..cd3c2664548fd4 100644
--- a/.github/workflows/php-changes-detection.yml
+++ b/.github/workflows/php-changes-detection.yml
@@ -17,7 +17,7 @@ jobs:
- name: Get changed PHP files
id: changed-files-php
- uses: tj-actions/changed-files@25ef3926d147cd02fc7e931c1ef50772bbb0d25d # v40.1.1
+ uses: tj-actions/changed-files@94549999469dbfa032becf298d95c87a14c34394 # v40.2.2
with:
files: |
*.{php}
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 18bdb63a6c3770..163012451d6002 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -71,6 +71,7 @@ jobs:
with:
node-version-file: 'cli/.nvmrc'
registry-url: 'https://registry.npmjs.org'
+ check-latest: true
- name: Setup Node.js (for WP major version)
if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
@@ -78,6 +79,7 @@ jobs:
with:
node-version-file: 'publish/.nvmrc'
registry-url: 'https://registry.npmjs.org'
+ check-latest: true
- name: Publish development packages to npm ("next" dist-tag)
if: ${{ github.event.inputs.release_type == 'development' }}
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index 3d1dca3e757753..ab69f152b8d1d2 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -8,9 +8,6 @@ jobs:
pull-request-automation:
runs-on: ubuntu-latest
if: ${{ github.repository == 'WordPress/gutenberg' }}
- strategy:
- matrix:
- node: ['16']
steps:
<<<<<<< HEAD
@@ -54,7 +51,8 @@ jobs:
- name: Use desired version of Node.js
uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
with:
- node-version: ${{ matrix.node }}
+ node-version-file: '.nvmrc'
+ check-latest: true
- name: Cache NPM packages
uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 63908e949ab965..f2523e91ab1457 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -119,13 +119,13 @@ jobs:
profile: Nexus 6
script: npm run native test:e2e:android:local ${{ matrix.native-test-name }}
- - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ - uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: android-screen-recordings
path: packages/react-native-editor/android-screen-recordings
- - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ - uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: appium-logs
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 5f284fd13eed43..35ad3ae7ab31e0 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -174,13 +174,13 @@ jobs:
rm packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle
rm -rf packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/assets
- - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ - uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: ios-screen-recordings
path: packages/react-native-editor/ios-screen-recordings
- - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ - uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
if: always()
with:
name: appium-logs
diff --git a/.github/workflows/stale-issue-gardening.yml b/.github/workflows/stale-issue-gardening.yml
index cbeb04ead53214..c73fe7a19b24b3 100644
--- a/.github/workflows/stale-issue-gardening.yml
+++ b/.github/workflows/stale-issue-gardening.yml
@@ -36,7 +36,7 @@ jobs:
steps:
- name: Update issues
- uses: actions/stale@1160a2240286f5da8ec72b1c0816ce2481aabf84 # v8.0.0
+ uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: ${{ matrix.message }}
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 9a49b4864dd4a7..dc383573487f39 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -84,6 +84,7 @@ jobs:
uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
with:
node-version-file: '.nvmrc'
+ check-latest: true
cache: npm
- name: Npm install
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 61153b214bf427..1efb3a64670a84 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -21,14 +21,13 @@ concurrency:
jobs:
unit-js:
- name: JavaScript
+ name: JavaScript (Node.js ${{ matrix.node }})
runs-on: ubuntu-latest
if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
-
strategy:
fail-fast: false
matrix:
- node: ['16']
+ node: ['20', '21']
steps:
<<<<<<< HEAD
@@ -148,7 +147,7 @@ jobs:
with:
node-version: ${{ matrix.node }}
- - name: Npm build
+ - name: npm build
# It's not necessary to run the full build, since Jest can interpret
# source files with `babel-jest`. Some packages have their own custom
# build tasks, however. These must be run.
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index c10020be057bcb..02ba0e8cd50ff0 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -147,7 +147,7 @@ jobs:
fi
- name: Upload Changelog artifact
- uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+ uses: actions/upload-artifact@c7d193f32edcb7bfad88892161225aeda64e9392 # v4.0.0
with:
name: changelog ${{ matrix.label }}
path: ./changelog.txt
@@ -189,7 +189,7 @@ jobs:
sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" ./trunk/readme.txt
- name: Download Changelog Artifact
- uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+ uses: actions/download-artifact@7a1cd3216ca9260cd8022db641d960b1db4d1be4 # v4.0.0
with:
name: changelog trunk
path: trunk
@@ -247,7 +247,7 @@ jobs:
sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" "$VERSION/readme.txt"
- name: Download Changelog Artifact
- uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+ uses: actions/download-artifact@7a1cd3216ca9260cd8022db641d960b1db4d1be4 # v4.0.0
with:
name: changelog trunk
path: ${{ github.event.release.name }}
diff --git a/.nvmrc b/.nvmrc
index b6a7d89c68e0ca..209e3ef4b6247c 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16
+20
diff --git a/changelog.txt b/changelog.txt
index b8946492403702..0b70b68c9377ee 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,1039 @@
== Changelog ==
+= 17.3.0 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+- (edit-site)(use-init-edited-entity-from-url) Safely access `toString()` on `siteData`'s `page_on_front`. ([57035](https://github.com/WordPress/gutenberg/pull/57035))
+
+#### Components
+- Fix form token field suggestion list reopening after blurring the input. ([57002](https://github.com/WordPress/gutenberg/pull/57002))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine @talldan
+
+= 17.3.0-rc.1 =
+
+
+## Changelog
+
+### Enhancements
+
+- Components: Replace `TabPanel` with `Tabs` in the editor's `ColorPanel`. ([56878](https://github.com/WordPress/gutenberg/pull/56878))
+- Editor: Move the edit template blocks notification to editor package. ([56901](https://github.com/WordPress/gutenberg/pull/56901))
+- Editor: Unify the preview dropdown between post and site editors. ([56921](https://github.com/WordPress/gutenberg/pull/56921))
+- Editor: Use the same PostTemplatePanel between post and site editors. ([56817](https://github.com/WordPress/gutenberg/pull/56817))
+- Tabs: Replace `id` with new `tabId` prop. ([56883](https://github.com/WordPress/gutenberg/pull/56883))
+- Update main toolbar buttons to all be compact. ([56635](https://github.com/WordPress/gutenberg/pull/56635), [56729](https://github.com/WordPress/gutenberg/pull/56729))
+- Update preferences organization. ([56481](https://github.com/WordPress/gutenberg/pull/56481))
+
+#### Components
+- FocalPointPicker with __next40pxDefaultSize. ([56021](https://github.com/WordPress/gutenberg/pull/56021))
+- Font Library: Improve usability of font variant selection. ([56158](https://github.com/WordPress/gutenberg/pull/56158))
+- Tabs: Sync browser focus to selected tab in controlled mode. ([56658](https://github.com/WordPress/gutenberg/pull/56658))
+- Use consistent styling for duotone panels. ([56801](https://github.com/WordPress/gutenberg/pull/56801))
+- `BorderControl`: Fix button styles. ([56730](https://github.com/WordPress/gutenberg/pull/56730))
+- `DimensionControl`: Add __next40pxDefaultSize prop. ([56805](https://github.com/WordPress/gutenberg/pull/56805))
+- `FontSizePicker`: Add opt-in prop for 40px default size. ([56804](https://github.com/WordPress/gutenberg/pull/56804))
+- `QueryControls`: Add opt-in prop for 40px default size. ([56576](https://github.com/WordPress/gutenberg/pull/56576))
+
+#### Block Library
+- Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874))
+- Consistent default typography controls across blocks. ([55208](https://github.com/WordPress/gutenberg/pull/55208))
+- Social Icons: Add Gravatar service. ([56544](https://github.com/WordPress/gutenberg/pull/56544))
+- Tweak table block placeholder with __next40pxDefaultSize props. ([56935](https://github.com/WordPress/gutenberg/pull/56935))
+
+#### Site Editor
+- Merge the post only mode and the post editor. ([56671](https://github.com/WordPress/gutenberg/pull/56671))
+- Site Editor Sidebar: Add "Areas" details panel to all templates and update icon. ([55677](https://github.com/WordPress/gutenberg/pull/55677))
+
+#### Block Editor
+- Allow dragging between adjacent container blocks based on a threshold. ([56466](https://github.com/WordPress/gutenberg/pull/56466))
+- Components: Replace `TabPanel` with `Tabs` in the editor's `ColorGradientControl`. ([56351](https://github.com/WordPress/gutenberg/pull/56351))
+
+#### Data Views
+- Update data view layout. ([56786](https://github.com/WordPress/gutenberg/pull/56786))
+
+#### Layout
+- Match the front end layout classname in the editor. ([56774](https://github.com/WordPress/gutenberg/pull/56774))
+
+#### Global Styles
+- Global style revisions: Show change summary on selected item. ([56577](https://github.com/WordPress/gutenberg/pull/56577))
+
+#### Icons
+- Another round of HiDPI icon tweaks. ([56532](https://github.com/WordPress/gutenberg/pull/56532))
+
+#### Media
+- Update external images panel in post publish sidebar. ([55524](https://github.com/WordPress/gutenberg/pull/55524))
+
+#### Post Editor
+- Implement `Tabs` in editor settings. ([55360](https://github.com/WordPress/gutenberg/pull/55360))
+
+
+### Bug Fixes
+
+- Create-block-interactive-template: Add all files to the generated plugin zip. ([56943](https://github.com/WordPress/gutenberg/pull/56943))
+- Create-block-interactive-template: Prevent crash when Gutenberg plugin is not installed. ([56941](https://github.com/WordPress/gutenberg/pull/56941))
+- Fix end-to-end test: Update how we find the template title to match markup changes. ([56992](https://github.com/WordPress/gutenberg/pull/56992))
+- Fix: Fatal php error if a template was created by an author that was deleted. ([56990](https://github.com/WordPress/gutenberg/pull/56990))
+- Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171))
+- Fix: Use span on template list titles. ([56955](https://github.com/WordPress/gutenberg/pull/56955))
+- Font Library: Add font family and font face preview keys to schema. ([56793](https://github.com/WordPress/gutenberg/pull/56793))
+- Remove unnecessary CSS for shrinking central header area. ([56220](https://github.com/WordPress/gutenberg/pull/56220))
+- Revert format types hook refactor. ([56859](https://github.com/WordPress/gutenberg/pull/56859))
+- Show template center UI when no block is selected. ([56217](https://github.com/WordPress/gutenberg/pull/56217))
+- setImmutably: Don't clone all objects. ([56612](https://github.com/WordPress/gutenberg/pull/56612))
+
+#### Block Library
+- Fix error when using a navigation block that returns an empty fallback result. ([56629](https://github.com/WordPress/gutenberg/pull/56629))
+- Fixture Tests: Correctly generate fixture files for form-related blocks. ([56719](https://github.com/WordPress/gutenberg/pull/56719))
+- Image: Fix resetting behaviour for alt image text. ([56809](https://github.com/WordPress/gutenberg/pull/56809))
+- Social Links Block: Prevent Theme Styles Distorting Size. ([56301](https://github.com/WordPress/gutenberg/pull/56301))
+- Update image block save to only save align none class. ([56449](https://github.com/WordPress/gutenberg/pull/56449))
+
+#### Components
+- DropdownMenuV2Ariakit: Prevent prefix collapsing if all radios or checkboxes are unselected. ([56720](https://github.com/WordPress/gutenberg/pull/56720))
+- FormToggle: Do not use "/" math operator. ([56672](https://github.com/WordPress/gutenberg/pull/56672))
+- PaletteEdit: Temporary custom gradient not saving. ([56896](https://github.com/WordPress/gutenberg/pull/56896))
+- `ToggleGroupControl`: React correctly to external controlled updates. ([56678](https://github.com/WordPress/gutenberg/pull/56678))
+
+#### Block Editor
+- Apply __next40pxDefaultSize to TextControl and Button component in renaming UIs. ([56933](https://github.com/WordPress/gutenberg/pull/56933))
+- Pattern inserter: Fix Broken preview layout. ([56814](https://github.com/WordPress/gutenberg/pull/56814))
+- Patterns: Keep synced pattern when added via drag and drop. ([56924](https://github.com/WordPress/gutenberg/pull/56924))
+
+#### Design Tools
+- Background image support: Fix duplicate output of styling rules. ([56997](https://github.com/WordPress/gutenberg/pull/56997))
+- Fix sticky position in classic themes with appearance tools support. ([56743](https://github.com/WordPress/gutenberg/pull/56743))
+
+#### Post Editor
+- Editor Canvas: Fix animation when device type changes. ([56970](https://github.com/WordPress/gutenberg/pull/56970))
+- Editor: Fix display of edit template blocks notification. ([56978](https://github.com/WordPress/gutenberg/pull/56978))
+
+#### Site Editor
+- Fix active edited post. ([56863](https://github.com/WordPress/gutenberg/pull/56863))
+- Show back button when editing navigation and template area in-place with no URL params. ([56741](https://github.com/WordPress/gutenberg/pull/56741))
+
+#### Typography
+- Fix order of typography sizes and families. ([56659](https://github.com/WordPress/gutenberg/pull/56659))
+- Font Library: Fix font uninstallation. ([56762](https://github.com/WordPress/gutenberg/pull/56762))
+
+#### Navigation in Site View
+- Navigation editor: Fix content mode. ([56856](https://github.com/WordPress/gutenberg/pull/56856))
+
+#### Patterns
+- Fix top position and height of Pattern Modal Sidebar. ([56787](https://github.com/WordPress/gutenberg/pull/56787))
+
+#### Interactivity API
+- Start using modules in the interactive create-block template. ([56694](https://github.com/WordPress/gutenberg/pull/56694))
+
+#### Layout
+- Fix input not showing when switching to "Fixed" width. ([56660](https://github.com/WordPress/gutenberg/pull/56660))
+
+#### Data Views
+- Align data view icon usage. ([56602](https://github.com/WordPress/gutenberg/pull/56602))
+
+#### Block Styles
+- Consolidate and resolve display issues between InserterPreviewPanel and BlockStylesPreviewPanel. ([56011](https://github.com/WordPress/gutenberg/pull/56011))
+
+#### Inspector Controls
+- Decode some characters if used in taxonomy name so it's displayed correctly in Query Loop filters. ([50376](https://github.com/WordPress/gutenberg/pull/50376))
+
+
+### Accessibility
+
+#### Data Views
+- Add scroll padding to dataviews container. ([56946](https://github.com/WordPress/gutenberg/pull/56946))
+- Adding `aria-sort` to table view headers. ([56860](https://github.com/WordPress/gutenberg/pull/56860))
+- Fix: Use span instead of heading for the template titles. ([56785](https://github.com/WordPress/gutenberg/pull/56785))
+
+#### Post Editor
+- Avoid to show unnecessary Tooltip for the Post Schedule button. ([56759](https://github.com/WordPress/gutenberg/pull/56759))
+
+#### Block Editor
+- Increase right padding of URL field to take the Submit button into account. ([56685](https://github.com/WordPress/gutenberg/pull/56685))
+
+#### Site Editor
+- Shorter screen reader announcement after changing pages. ([56339](https://github.com/WordPress/gutenberg/pull/56339))
+
+#### Components
+- Use tooltip for the Timezone only when necessary. ([56214](https://github.com/WordPress/gutenberg/pull/56214))
+
+
+### Performance
+
+- Block editor: Make all BlockEdit hooks pure. ([56813](https://github.com/WordPress/gutenberg/pull/56813))
+- Block editor: Remove 4 useSelect in favour of context. ([56915](https://github.com/WordPress/gutenberg/pull/56915))
+- Block editor: hooks: Avoid BlockEdit filter for content locking UI. ([56957](https://github.com/WordPress/gutenberg/pull/56957))
+- Block editor: hooks: Share block settings. ([56852](https://github.com/WordPress/gutenberg/pull/56852))
+- Keycodes: Avoid regex for capital case. ([56822](https://github.com/WordPress/gutenberg/pull/56822))
+- Measure typing without inspector. ([56753](https://github.com/WordPress/gutenberg/pull/56753))
+- Media upload component: Lazy mount. ([56958](https://github.com/WordPress/gutenberg/pull/56958))
+- Paragraph: Store subscription for selected block only. ([56967](https://github.com/WordPress/gutenberg/pull/56967))
+- Perf: Reopen inspector for remaining tests. ([56780](https://github.com/WordPress/gutenberg/pull/56780))
+- useBlockProps: Combine store subscriptions. ([56847](https://github.com/WordPress/gutenberg/pull/56847))
+
+#### Block Editor
+- Improve opening inserter in post editor. ([57006](https://github.com/WordPress/gutenberg/pull/57006))
+- hooks: Subscribe only to relevant attributes. ([56783](https://github.com/WordPress/gutenberg/pull/56783))
+
+#### Site Editor
+- Fix typing performance by not rendering sidebar. ([56927](https://github.com/WordPress/gutenberg/pull/56927))
+
+#### Components
+- ToolsPanel: Fix deregister/register on type. ([56770](https://github.com/WordPress/gutenberg/pull/56770))
+
+#### Modules API
+- Load the import map polyfill only when there is an import map. ([56699](https://github.com/WordPress/gutenberg/pull/56699))
+
+#### Post Editor
+- Editor: Avoid double parsing content in 'getSuggestedPostFormat' selelector. ([56679](https://github.com/WordPress/gutenberg/pull/56679))
+
+
+### Experiments
+
+#### Data Views
+- DataViews: Add story. ([56761](https://github.com/WordPress/gutenberg/pull/56761))
+- DataViews: Add support for `NOT IN` operator in filter. ([56479](https://github.com/WordPress/gutenberg/pull/56479))
+- DataViews: Centralize the view definition and rename `list` to `table`. ([56693](https://github.com/WordPress/gutenberg/pull/56693))
+- DataViews: Do not export strings constants. ([56754](https://github.com/WordPress/gutenberg/pull/56754))
+- DataViews: Export the view components as defaults. ([56677](https://github.com/WordPress/gutenberg/pull/56677))
+- DataViews: Fix dropdown menu actions with modal. ([56760](https://github.com/WordPress/gutenberg/pull/56760))
+- DataViews: Hide pagination if we have only one page. ([56948](https://github.com/WordPress/gutenberg/pull/56948))
+- DataViews: Implement `NOT IN` operator for author filter in templates. ([56777](https://github.com/WordPress/gutenberg/pull/56777))
+- DataViews: Iterate on list view. ([56746](https://github.com/WordPress/gutenberg/pull/56746))
+- DataViews: Make `Actions` styles the same as any other column header. ([56654](https://github.com/WordPress/gutenberg/pull/56654))
+- DataViews: Make `mediaField` not hidable. ([56643](https://github.com/WordPress/gutenberg/pull/56643))
+- DataViews: Rename view components. ([56709](https://github.com/WordPress/gutenberg/pull/56709))
+- DataViews: Render data async conditionally. ([56851](https://github.com/WordPress/gutenberg/pull/56851))
+- DataViews: Set proper role for AddFilter's items. ([56714](https://github.com/WordPress/gutenberg/pull/56714))
+- DataViews: Set proper semantics for dropdown items. ([56676](https://github.com/WordPress/gutenberg/pull/56676))
+- DataViews: Update sorting semantics. ([56717](https://github.com/WordPress/gutenberg/pull/56717))
+- Dataviews: Extract to dedicated bundled package. ([56721](https://github.com/WordPress/gutenberg/pull/56721))
+
+#### Block Validation/Deprecation
+- Input Field Block: Use `useblockProps` hook in save function. ([56507](https://github.com/WordPress/gutenberg/pull/56507))
+
+#### Patterns
+- Implement partially synced patterns behind an experimental flag. ([56235](https://github.com/WordPress/gutenberg/pull/56235))
+
+
+### Documentation
+
+- Add the nested blocks chapter to the platform documentation. ([56689](https://github.com/WordPress/gutenberg/pull/56689))
+- Components: Update CHANGELOG.md. ([56960](https://github.com/WordPress/gutenberg/pull/56960))
+- Doc: Search Control - add Storybook link. ([56815](https://github.com/WordPress/gutenberg/pull/56815))
+- Doc: Spinner - add Storybook link. ([56818](https://github.com/WordPress/gutenberg/pull/56818))
+- Docs: Add storybook link for spinner component. ([56953](https://github.com/WordPress/gutenberg/pull/56953))
+- Docs: Fix {% end %} tab position to show the text. ([56735](https://github.com/WordPress/gutenberg/pull/56735))
+- Docs: Fundamentals of Block Development - Minor fixes - registration-of-a-block. ([56731](https://github.com/WordPress/gutenberg/pull/56731))
+- Docs: Fundamentals of Block Development - add links. ([56700](https://github.com/WordPress/gutenberg/pull/56700))
+- Docs: Fundamentals of Block Development ---- Small fixes for "Block wrapper". ([56651](https://github.com/WordPress/gutenberg/pull/56651))
+- Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872))
+- Platform Docs: Add trusted by section. ([56749](https://github.com/WordPress/gutenberg/pull/56749))
+- Revert "Doc: Spinner - add Storybook link". ([56913](https://github.com/WordPress/gutenberg/pull/56913))
+- Update Getting Started Guide for Gutenberg 17.2. ([56674](https://github.com/WordPress/gutenberg/pull/56674))
+- Update InnerBlocks defaultblock doc usage. ([56728](https://github.com/WordPress/gutenberg/pull/56728))
+- Update formatting and fix grammar in the Block Editor Handbook readme. ([56798](https://github.com/WordPress/gutenberg/pull/56798))
+
+
+### Code Quality
+
+- Block editor: hooks: Avoid getEditWrapperProps. ([56912](https://github.com/WordPress/gutenberg/pull/56912))
+- Block lib: Use RichText.isEmpty where forgotten. ([56726](https://github.com/WordPress/gutenberg/pull/56726))
+- Block library: Reusable caption component util. ([56606](https://github.com/WordPress/gutenberg/pull/56606))
+- Core data revisions: Remove hardcoded supports constant. ([56701](https://github.com/WordPress/gutenberg/pull/56701))
+- Editor: Cleanup default editor mode handling. ([56819](https://github.com/WordPress/gutenberg/pull/56819))
+- Editor: Move the BlockCanvas component within the EditorCanvas component. ([56850](https://github.com/WordPress/gutenberg/pull/56850))
+- Editor: Move the device type state to the editor package. ([56866](https://github.com/WordPress/gutenberg/pull/56866))
+- Editor: Unify device preview styles. ([56904](https://github.com/WordPress/gutenberg/pull/56904))
+- Fix PHP linter failing. ([56905](https://github.com/WordPress/gutenberg/pull/56905))
+- Framework: Bundle the BlockTools component within BlockCanvas. ([56996](https://github.com/WordPress/gutenberg/pull/56996))
+- Move `useDebouncedInput` hook to @wordpress/compose package. ([56744](https://github.com/WordPress/gutenberg/pull/56744))
+- Post Editor: Rely on the editor store for the template mode state. ([56716](https://github.com/WordPress/gutenberg/pull/56716))
+- Refactor
\`\`\`
code block to
*/
````
-### Documenting React Components
+### Documenting React components
When possible, all components should be implemented as [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components), using [hooks](https://reactjs.org/docs/hooks-intro.html) for managing component lifecycle and state.
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index bebdbeb13228d1..7d0b5e045e519b 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -15,28 +15,32 @@ The following guide is for setting up your local environment to contribute to th
-- Node.js:
- Gutenbergは JavaScript のプロジェクトで、[Node.js](https://nodejs.org/) を必要とします。Gutenberg プロジェクトは、Node.js v16 と npm v8 を使用して構築されています。詳細は [LTS release schedule](https://github.com/nodejs/Release#release-schedule) を参照してください。
+
+- Node.js
+ Gutenberg は JavaScript のプロジェクトで、[Node.js](https://nodejs.org/) を必要とします。Gutenberg プロジェクトは現在、Node.js v20 と npm v10 を使用してビルドされています。Node.js の Active LTS バージョンを使用するよう最善の努力を払っていますが、常にそうとは限りません。詳細は [Node.js リリーススケジュール](https://github.com/nodejs/Release#release-schedule)を参照してください。
-[Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) を使用してください。nvm は、macOS、Linux、WSL2 を使用した Windows 10 において最も簡単に node をインストール、管理できます。追加のインストール方法については、[このハンドブックの開発ツールガイド](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/#development-tools)、またはNodejs のサイトを参照してください。
+[Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) を使用してください。nvm は、macOS、Linux、WSL2 を使用した Windows 10 において最も簡単に node をインストール、管理できます。追加のインストール方法については、[このハンドブックの開発ツールガイド](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/#development-tools)、または Nodejs のサイトを参照してください。
-- Git:
- Gutenberg はソースコントロールに git を使用しています。コンピュータに最新版の git がインストールされていること、GitHub のアカウントを持っていることを確認してください。Gutenberg での git と GitHub の使用については、[Git ワークフロー](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/git-workflow)を参照してください。
+- Git
+ Gutenberg はソースコントロールに git を使用しています。コンピュータに最新版の git がインストールされていること、GitHub のアカウントを持っていることを確認してください。Gutenberg での git と GitHub の使用については、[Git ワークフロー](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/git-workflow)を参照してください。
-- [推奨] Docker Desktop:
- ローカルでの WordPress 環境の設定には、[wp-env パッケージ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/)の使用を推奨します。「wp-env」を使用するには、Docker のインストールが必要です。詳細については [開発環境チュートリアル](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/) を参照してください。@wordpress/block-editor
also provide the tools to create and use standalone block editors.
+block.json
の内容 (またはその他の .json
ファイルの内容) は、`wp-scripts` などのビルドプロセスを使用するとき、JavaScript ファイル内に直接インポートできます。
2番目のパラメータとして渡されるクライアント側のブロック設定オブジェクトには、特に関連性の高い2つのプロパティが含まれます。
@@ -197,10 +197,11 @@ _[例](https://github.com/WordPress/block-development-examples/tree/trunk/plugin
- [`register_block_type` PHP function](https://developer.wordpress.org/reference/functions/register_block_type/)
- [`registerBlockType` JS function](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype)
- [Why a block needs to be registered in both the server and the client?](https://github.com/WordPress/gutenberg/discussions/55884) | GitHub Discussion
+- [Block Registration diagram](https://excalidraw.com/#json=PUQu7jpvbKsUHYfpHWn7s,61QnhpZtjykp3s44lbUN_g)
-->
- [`register_block_type` PHP 関数](https://developer.wordpress.org/reference/functions/register_block_type/)
- [`registerBlockType` JS 関数](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype)
- [Why a block needs to be registered in both the server and the client?](https://github.com/WordPress/gutenberg/discussions/55884)(なぜブロックはサーバーとクライアントの両方に登録する必要があるのか ?) | GitHub での議論
+- [ブロック登録の図解](https://excalidraw.com/#json=PUQu7jpvbKsUHYfpHWn7s,61QnhpZtjykp3s44lbUN_g)
-
-[原文]()
\ No newline at end of file
+[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/registration-of-a-block.md)
\ No newline at end of file
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
new file mode 100644
index 00000000000000..e70b4aba9234eb
--- /dev/null
+++ b/docs/getting-started/tutorial.md
@@ -0,0 +1,1003 @@
+# Tutorial: Build your first block
+
+In this tutorial, you will build a "Copyright Date Block"—a basic yet practical block that displays the copyright symbol (©), the current year, and an optional starting year. This type of content is commonly used in website footers.
+
+The tutorial will guide you through the complete process, from scaffolding the block plugin using the [`create-block`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/) package to modifying each file. While previous WordPress development experience is beneficial, it's not a prerequisite for this tutorial.
+
+By the end of this guide, you will have a clear understanding of block development fundamentals and the necessary skills to create your own WordPress blocks.
+
+## What you're going to build
+
+Here's a quick look at what you're going to build.
+
+![What you're going to build](https://developer.wordpress.org/files/2023/12/block-tutorial-1.png)
+
+You can also interact with the finished project in [WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/copyright-date-block-09aac3/_playground/blueprint.json) or use the [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/) to install the complete block plugin in your local WordPress environment.
+
+## Prerequisites
+
+To complete this tutorial, you will need:
+
+1. Code editor
+2. Node.js development tools
+3. Local WordPress environment
+
+If you don't have one or more of these items, the [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) documentation will help you get started. Come back here once you are all set up.
+
+wp-env
to create a local WordPress development environment. However, feel free to use alternate local development tools if you already have one that you prefer.
+wp-env
, instead, navigate to the plugins/
folder in your local WordPress installation using the terminal and run the following command.
+--variant=dynamic
flag. This tells create-block
you want to scaffold a dynamically rendered block. Later in this tutorial, you will learn about dynamic and static rendering and add static rendering to this block.
+save.js
file. Later in the tutorial, you will add this file to the plugin to enable static rendering, so stay tuned.
+viewBox
parameter above.
++ { __( + 'Copyright Date Block – hello from the editor!', + 'copyright-date-block-demo' + ) } +
+ ); +} +``` + +It looks a bit more complicated than it is. + +- [`useBlockProps()`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props) outputs all the necessary CSS classes and styles in the [block's wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-edit-components-markup) needed by the Editor, which includes the style provided by the block supports you added earlier +- [`__()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/) is used for the internationalization of text strings + +© { currentYear }
+ ); +} +``` + +Save the `edit.js` file and refresh the Editor. You will now see the copyright symbol (©) followed by the current year. + +![The block in the Editor displays the correct content](https://developer.wordpress.org/files/2023/12/block-tutorial-8.png) + +### Updating render.php + +While the block is working properly in the Editor, the default block message is still being displayed on the front end. To fix this, open the [`render.php`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#render-php) file, and you will see the following. + +```php + +> + +
+ +``` + +Similar to the `useBlockProps()` function in the Editor, [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) outputs all the necessary CSS classes and styles in the [block's wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-server-side-render-markup). Only the content needs to be updated. + +You can use `date( "Y" )` to get the current year in PHP, and your `render.php` should look like this. + +```php + +>©
+``` + +Save the file and confirm that the block appears correctly in the Editor and on the front end. + +### Cleaning up + +When you use the `create-block` package to scaffold a block, it might include files that you don't need. In the case of this tutorial, the block doesn't use stylesheets or font end JavaScipt. Clean up the plugin's `src/` folder with the following actions. + +1. In the `edit.js` file, remove the lines that import `editor.scss` +2. In the `index.js` file, remove the lines that import `style.scss` +3. Delete the editor.scss, style.scss, and view.js files + +Finally, make sure that there are no unsaved changes and then terminate the `npm run start` command. Run `npm run build` to optimize your code and make it production-ready. + +You have built a fully functional WordPress block, but let's not stop here. In the next sections, we'll add functionality and enable static rendering. + +## Adding block attributes + +The Copyright Date Block you have built shows the current year, but what if you wanted to display a starting year as well? + +![What you're going to build](https://developer.wordpress.org/files/2023/12/block-tutorial-1.png) + +This functionality would require users to enter their starting year somewhere on the block. They should also have the ability to toggle it on or off. + +You could implement this in different ways, but all would require [block attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/). Attributes allow you to store custom data for the block that can then be used to modify the block's markup. + +To enable this starting year functionality, you will need one attribute to store the starting year and another that will be used to tell WordPress whether the starting year should be displayed or not. + +### 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. + +```json +"attributes": { + "showStartingYear": { + "type": "boolean" + }, + "startingYear": { + "type": "string" + } +}, +``` + +You must indicate the `type` when defining attributes. In this case, the `showStartingYear` should be true or false, so it's set to `boolean`. The `startingYear` is just a string. + +Save the file, and you can now move on to the Editor. + +### Updating edit.js + +Open the `edit.js` file. You will need to accomplish two tasks. + +Add a user interface that allows the user to enter a starting year, toggle the functionality on or off, and store these settings as attributes +Update the block to display the correct content depending on the defined attributes + +#### Adding the user interface + +Earlier in this tutorial, you added block supports that automatically created Color and Typography panels in the Settings Sidebar of the block. You can create your own custom panels using the `InspectorControls` component. + +##### Inspector controls + +The `InspectorControls` belongs to the [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/) package, so you can import it into the `edit.js` file by adding the component name on line 14. The result should look like this. + +```js +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +``` + +Next, update the Edit function to return the current block content and an `InspectorControls` component that includes the text "Testing." You can wrap everything in a [Fragment](https://react.dev/reference/react/Fragment) (`<>>`) to ensure proper JSX syntax. The result should look like this. + +```js +export default function Edit() { +const currentYear = new Date().getFullYear().toString(); + + return ( + <> +© { currentYear }
+ > + ); +} +``` +Save the file and refresh the Editor. When selecting the block, you should see the "Testing" message in the Settings Sidebar. + +![The Setting Sidebar now displays the message](https://developer.wordpress.org/files/2023/12/block-tutorial-9.png) + +##### Components and panels + +Now, let's use a few more Core components to add a custom panel and the user interface for the starting year functionality. You will want to import [`PanelBody`](https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody), [`TextControl`](https://developer.wordpress.org/block-editor/reference-guides/components/text-control/), and [`ToggleControl`](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/) from the [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) package. + +Add the following line below the other imports in the `edit.js` file. + +```js +import { PanelBody, TextControl, ToggleControl } from '@wordpress/components'; +``` + +Then wrap the "Testing" message in the `PanelBody` component and set the `title` parameter to "Settings". Refer to the [component documentation](https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody) for additional parameter options. + +```js +export default function Edit() { +const currentYear = new Date().getFullYear().toString(); + + return ( + <> +© { currentYear }
+ > + ); +} +``` + +Save the file and refresh the Editor. You should now see the new Settings panel. + +![The Setting Sidebar now displays a custom panel](https://developer.wordpress.org/files/2023/12/block-tutorial-10.png) + +##### Text control + +The next step is to replace the "Testing" message with a `TextControl` component that allows the user to set the `startingYear` attribute. However, you must include two parameters in the `Edit()` function before doing so. + +- `attributes` is an object that contains all the attributes for the block +- `setAttributes` is a function that allows you to update the value of an attribute + +With these parameters included, you can fetch the `showStartingYear` and `startingYear` attributes. + +Update the top of the `Edit()` function to look like this. + +```js +export default function Edit( { attributes, setAttributes } ) { + const { showStartingYear, startingYear } = attributes; + ... +``` + +console.log( attributes );
at the top of the Edit()
function. This can be useful when building and testing a custom block.
+© { currentYear }
+ > + ); +} +``` + +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) + +##### Toggle control + +Next, let's add a toggle that will turn the starting year functionality on or off. You can do this with a `ToggleControl` component that sets the `showStartingYear` attribute. It should include: + +1. A `label` property set to "Show starting year" +2. A `checked` property set to the attribute `showStartingYear` +3. An `onChange` property that updates the `showStartingYear` attribute whenever the toggle is checked or unchecked + +You can also update the "Starting year" text input so it's only displayed when `showStartingYear` is `true`, which can be done using the `&&` logical operator. + +The `Edit()` function should look like the following. + +```js +export default function Edit( { attributes, setAttributes } ) { + const { showStartingYear, startingYear } = attributes; + const currentYear = new Date().getFullYear().toString(); + + return ( + <> +© { currentYear }
+ > + ); +} +``` + +Save the file and refresh the Editor. Confirm that clicking the toggle displays the text input, and when you update the page, the toggle remains active. + +![A live look at editing the new Show Starting Year toggle in the Settings Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-12.gif) + +#### Updating the block content + +So far, you have created the user interface for adding a starting year and updating the associated block attributes. Now you need to actually update the block content in the Editor. + +Let's create a new variable called `displayDate`. When `showStartingYear` is `true` and the user has provided a `startingYear`, the `displayDate` should include the `startingYear` and the `currentYear` separated by an em dash. Otherwise, just display the `currentYear`. + +The code should look something like this. + +```js +let displayDate; + +if ( showStartingYear && startingYear ) { + displayDate = startingYear + '–' + currentYear; +} else { + displayDate = currentYear; +} +``` + +let
, it means that the variable may be reassigned later. Declaring a variable with const
means that the variable will never change. You could rewrite this code using const
. It's just a matter of personal preference.
+© { displayDate }
+ > + ); +} +``` + +Save the file and refresh the Editor. Confirm that the block content updates correctly when you make changes in the Settings panel. + +![A live look at the block content being updated by the new fields in the Setting Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-13.gif) + +### Updating render.php + +While the Editor looks great, the starting year functionality has yet to be added to the front end. Let's fix that by updating the `render.php` file. + +Start by adding a variable called `$display_date` and replicate what you did in the `Edit()` function above. + +This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` is the `showStartingYear` attribute is `false`. + +Three variables are exposed in the render.php
, which you can use to customize the block's output:
$attributes
(array): The block attributes.$content
(string): The block default content.$block
(WP_Block): The block instance.> + © +
+``` + +Save the file and confirm that the correct block content is now appearing on the front end of your site. + +You have now successfully built a dynamically rendered custom block that utilizes block supports, core WordPress components, and custom attributes. In many situations, this is as far as you would need to go for a block displaying the copyright date with some additional functionality. + +In the next section, however, you will add static rendering to the block. This exercise will illustrate how block data is stored in WordPress and provide a fallback should this plugin ever be inadvertently disabled. + +## 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. + +You will see the following if you switch to the Code editor from within the Editor. + +```html + +``` + +Compare this to a statically rendered block like the Paragraph block. + +```html + +This is a test.
+ +``` + +The HTML of the paragraph is stored in post content and saved in the database. + +You can learn more about dynamic and static rendering in the [Fundamentals documentation](https://developer.wordpress.org/block-editor/getting-started/fundamentals/). While most blocks are either dynamically or statically rendered, you can build a block that utilizes both methods. + +### Why add static rendering? + +When you add static rendering to a dynamically rendered block, the `render.php` file will still control the output on the front end, but the block's HTML content will be saved in the database. This means that the content will remain if the plugin is ever removed from the site. In the case of this Copyright Date Block, the content will revert to a Custom HTML block that you can easily convert to a Paragraph block. + +![An error message in the Editor when a block type no longer exists](https://developer.wordpress.org/files/2023/12/block-tutorial-14.png) + +While not necessary in all situations, adding static rendering to a dynamically rendered block can provide a helpful fallback should the plugin ever be disabled unintentionally. + +Also, consider a situation where the block markup is included in a block pattern or theme template. If a user installs that theme or uses the pattern without the Copyright Date Block installed, they will get a notice that the block is not available, but the content will still be displayed. + +Adding static rendering is also a good exploration of how block content is stored and rendered in WordPress. + +### Adding a save function + +Start by adding a new file named `save.js` to the `src/` folder. In this file, add the following. + +```js +import { useBlockProps } from '@wordpress/block-editor'; + +export default function save() { + return ( ++ { 'Copyright Date Block – hello from the saved content!' } +
+ ); +} +``` + +This should look similar to the original `edit.js` file, and you can refer to the [block wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-save-components-markup) documentation for additional information. + +Next, in the `index.js` file, import this `save()` function and add a save property to the `registerBlockType()` function. Here's a simplified view of the updated file. + +```js +import save from './save'; + +... + +registerBlockType( metadata.name, { + icon: calendarIcon, + edit: Edit, + save +} ); +``` + +save
instead of save: save
.
+Copyright Date Block – hello from the saved content!
+ +``` + +You will often encounter block validation errors when building a block with static rendering, and that's ok. The output of the `save()` function must match the HTML in the post content exactly, which may end up out of sync as you add functionality. So long as there are no validation errors when you're completely finished building the block, you will be all set. + +### Updating save.js + +Next, let's update the output of the `save()` function to display the correct content. Start by copying the same approach used in `edit.js`. + +1. Add the `attributes` parameter to the function +2. Define the `showStartingYear` and `startingYear` variables +3. Define a `currentYear` variable +4. Define a `displayDate` variable depending on the values of `currentYear`, `showStartingYear`, and `startingYear` + +The result should look like this. + +```js +export default function save( { attributes } ) { + const { showStartingYear, startingYear } = attributes; + const currentYear = new Date().getFullYear().toString(); + + let displayDate; + + if ( showStartingYear && startingYear ) { + displayDate = startingYear + '–' + currentYear; + } else { + displayDate = currentYear; + } + + return ( +© { displayDate }
+ ); +} +``` + +Save the file and refresh the Editor. Click "Attempt Block Recovery" and update the page. Check the Code editor, and the block markup should now look something like this. + +```html + +© 2017–2023
+ +``` + +At this point, it might look like you're done. The block content is now saved as HTML in the database and the output on the front end is dynamically rendered. However, there are still a few things that need to be addressed. + +Consider the situation where the user added the block to a page in 2023 and then went back to edit the page in 2024. The front end will update as expected, but in the Editor, there will be a block validation error. The `save()` function knows that it's 2024, but the block content saved in the database still says 2023. + +Let's fix this in the next section. + +### Handling dynamic content in statically rendered blocks + +Generally, you want to avoid dynamic content in statically rendered blocks. This is part of the reason why the term "dynamic" is used when referring to dynamic rendering. + +That said, in this tutorial, you are combining both rendering methods, and you just need a bit more code to avoid any block validation errors when the year changes. + +The root of the issue is that the `currentYear` variable is set dynamically in the `save()` function. Instead, this should be a static variable within the function, which can be solved with an additional attribute. + +#### Adding a new attribute + +Open the `block.json` file and add a new attribute called `fallbackCurrentYear` with the type `string`. The `attributes` section of the file should now look like this. + +```json +"attributes": { + "fallbackCurrentYear": { + "type": "string" + }, + "showStartingYear": { + "type": "boolean" + }, + "startingYear": { + "type": "string" + } +}, +``` + +Next, open the `save.js` file and use the new `fallbackCurrentYear` attribute in place of `currentYear`. Your updated `save()` function should look like this. + +```js +export default function save( { attributes } ) { + const { fallbackCurrentYear, showStartingYear, startingYear } = attributes; + + let displayDate; + + if ( showStartingYear && startingYear ) { + displayDate = startingYear + '–' + fallbackCurrentYear; + } else { + displayDate = fallbackCurrentYear; + } + + return ( +© { displayDate }
+ ); +} +``` + +Now, what happens if the `fallbackCurrentYear` is undefined? + +Before the `currentYear` was defined within the function, so the `save()` function always had content to return, even if `showStartingYear` and `startingYear` were undefined. + +Instead of returning just the copyright symbol, let's add a condition that if `fallbackCurrentYear` is not set, return `null`. It's generally better to save no HTML in the database than incomplete data. + +The final `save()` function should look like this. + +```js +export default function save( { attributes } ) { + const { fallbackCurrentYear, showStartingYear, startingYear } = attributes; + + if ( ! fallbackCurrentYear ) { + return null; + } + + let displayDate; + + if ( showStartingYear && startingYear ) { + displayDate = startingYear + '–' + fallbackCurrentYear; + } else { + displayDate = fallbackCurrentYear; + } + + return ( +© { displayDate }
+ ); +} +``` + +Save both the `block.json` and `save.js` files; you won't need to make any more changes. + +#### Setting the attribute in edit.js + +The `save()` function now uses the new `fallbackCurrentYear`, so it needs to be set somewhere. Let's use the `Edit()` function. + +Open the `edit.js` file and start by defining the `fallbackCurrentYear` variable at the top of the `Edit()` functional alongside the other attributes. Next, review what's happening in the function. + +When the block loads in the Editor, the `currentYear` variable is defined. The function then uses this variable to set the content of the block. + +Now, let's set the `fallbackCurrentYear` attribute to the `currentYear` when the block loads if the attribute is not already set. + +```js +if ( currentYear !== fallbackCurrentYear ) { + setAttributes( { fallbackCurrentYear: currentYear } ); +} +``` + +This will work but can be improved by ensuring this code only runs once when the block is initialized. To do so, you can use the [`useEffect`](https://react.dev/reference/react/useEffect) React hook. Refer to the React documentation for more information about how to use this hook. + +First, import `useEffect` with the following code. + +```js +import { useEffect } from 'react'; +``` + +Then wrap the `setAttribute()` code above in a `useEffect` and place this code after the `currentYear` definition in the `Edit()` function. The result should look like this. + +```js +export default function Edit( { attributes, setAttributes } ) { + const { fallbackCurrentYear, showStartingYear, startingYear } = attributes; + + // Get the current year and make sure it's a string. + const currentYear = new Date().getFullYear().toString(); + + // When the block loads, set the fallbackCurrentYear attribute to the + // current year if it's not already set. + useEffect( () => { + if ( currentYear !== fallbackCurrentYear ) { + setAttributes( { fallbackCurrentYear: currentYear } ); + } + }, [ currentYear, fallbackCurrentYear, setAttributes ] ); + + ... +``` + +When the block is initialized in the Editor, the `fallbackCurrentYear` attribute will be immediately set. This value will then be available to the `save()` function, and the correct block content will be displayed without block validation errors. + +The one caveat is when the year changes. If a Copyright Date Block was added to a page in 2023 and then edited in 2024, the `fallbackCurrentYear` attribute will no longer equal the `currentYear`, and the attribute will be automatically updated to `2024`. This will update the HTML returned by the `save()` function. + +You will not get any block validation errors, but the Editor will detect that changes have been made to the page and prompt you to update. + +#### Optimizing render.php + +The final step is to optimize the `render.php` file. If the `currentYear` and the `fallbackCurrentYear` attribute are the same, then there is no need to dynamically create the block content. It is already saved in the database and is available in the `render.php` file via the `$block_content` variable. + +Therefore, update the file to render the `$block_content` if `currentYear` and `fallbackCurrentYear` match. + +```php +$current_year = date( "Y" ); + +// Determine which content to display. +if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) { + + // The current year is the same as the fallback, so use the block content saved in the database (by the save.js function). + $block_content = $content; +} else { + + // The current year is different from the fallback, so render the updated block content. + if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) { + $display_date = $attributes['startingYear'] . '–' . $current_year; + } else { + $display_date = $current_year; + } + + $block_content = '© ' . esc_html( $display_date ) . '
'; +} + +echo wp_kses_post( $block_content ); +``` + +That's it! You now have a block that utilizes both dynamic and static rendering. + +## Wrapping up + +Congratulations on completing this tutorial and building your very own Copyright Date Block. Throughout this journey, you have gained a solid foundation in WordPress block development and are now ready to start building your own blocks. + +For final reference, the complete code for this tutorial is available in the [Block Development Examples](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/copyright-date-block-09aac3) repository on GitHub. + +Now, whether you're now looking to refine your skills, tackle more advanced projects, or stay updated with the latest WordPress trends, the following resources will help you improve your block development skills: + +- [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) +- [Fundamentals of Block Development](https://developer.wordpress.org/block-editor/getting-started/fundamentals/) +- [WordPress Developer Blog](https://developer.wordpress.org/news/) +- [Block Development Examples](https://github.com/WordPress/block-development-examples) | GitHub repository + +Remember, every expert was once a beginner. Keep learning, experimenting, and, most importantly, have fun building with WordPress. diff --git a/docs/how-to-guides/README.md b/docs/how-to-guides/README.md index 2b5db7796436cc..30f2f1995f0908 100644 --- a/docs/how-to-guides/README.md +++ b/docs/how-to-guides/README.md @@ -9,7 +9,7 @@ The new editor is highly flexible, like most of WordPress. You can build custom 新しいエディターは WordPress と同様に、非常にフレキシブルです。カスタムブロックを作成したり、エディターの外観を変更したり、特別なプラグインを追加することができます。 @@ -66,7 +66,7 @@ Porting PHP meta boxes to blocks or sidebar plugins is highly encouraged, learn PHP メタボックスからブロックやサイドバープラグインへのポーティングは強く奨励されます。詳細については [メタボックス](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/metabox/) および [プラグイン用サイドバー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/plugin-sidebar-0/) を参照してください。 ## ランドマークリージョン diff --git a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md index b5e42702f24b9e..04f2592f709c78 100644 --- a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md +++ b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md @@ -46,7 +46,7 @@ registerBlockType( 'gutenberg-examples/example-06', { ``` ## 許可されるブロック @@ -79,7 +79,7 @@ Specifying this prop does not affect the layout of the inner blocks, but results このプロパティを指定しても、内側のブロックのレイアウトには影響しませんが、子ブロックのブロック移動アイコンが水平に表示され、また、ドラッグアンドドロップが正しく動作するようになります。 ## デフォルトブロック @@ -131,7 +131,7 @@ Use the `templateLock` property to lock down the template. Using `all` locks the `templateLock` プロパティを使用するとテンプレートをロックできます。テンプレートを完全にロックするには `all` を使用します。`insert` は追加ブロックのインサートを禁止しますが、既存のブロックは並べ替えられます。詳細については [templateLock のドキュメント](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inner-blocks/README.md#templatelock)を参照してください。 ## ブロックでの parent 関係と ancestor 関係の使用 @@ -176,7 +176,7 @@ The key difference between `parent` and `ancestor` is `parent` has finer specifi `parent` と `ancestor` の主な違いとして、`parent` はより細かな特異性を持ち、`ancestor`はそのネスト階層においてより大きな柔軟性を持ちます。 ### parent ブロック関係の定義 @@ -200,7 +200,7 @@ When defining a direct descendent block, use the `parent` block setting to defin ``` ### ancestor ブロック関係の定義 @@ -229,7 +229,7 @@ When defining a descendent block, use the `ancestor` block setting. This prevent ``` ## React フックの使用 diff --git a/docs/how-to-guides/feature-flags.md b/docs/how-to-guides/feature-flags.md index 135c1b3af3b63d..888ef7dbd02515 100644 --- a/docs/how-to-guides/feature-flags.md +++ b/docs/how-to-guides/feature-flags.md @@ -55,7 +55,7 @@ When the codebase is built for the plugin, this variable will be set to `true`. プラグイン用にコードベースがビルドされると、この変数は `true` に設定されます。WordPress コア用にビルドする場合は、`false` または `undefined` に設定されます。 @@ -75,6 +75,7 @@ A plugin-only function or constant should be exported using the following ternar --> プラグイン専用の関数や定数は、次の三項構文を使用してエクスポートしてください。 + +```js +function myPluginOnlyFeature() { + // ここに実装 +} + +export const pluginOnlyFeature = + process.env.IS_GUTENBERG_PLUGIN ? myPluginOnlyFeature : undefined; +``` + + – 変数 `process.env.IS_GUTENBERG_PLUGIN` は、プラグインのビルドでのみ、ブール値 `true` で置き換えられます。 + +```js +if ( true ) { // wepack が process.env.IS_GUTENBERG_PLUGIN を true に置換した + pluginOnlyFeature(); +} +``` + + +```js +if ( undefined ) { // wepack が process.env.IS_GUTENBERG_PLUGIN を undefined に置換した + pluginOnlyFeature(); +} +``` + @@ -198,7 +227,7 @@ if ( undefined ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `undefined` は `false` と評価されるため、プラグインのみの機能は実行されません。 条件は常に `true` と評価されるため、webpack は if 文を削除し、次のコードだけが残ります。 + +```js +pluginOnlyFeature(); // if 条件ブロックが削除され、本体だけが残った ``` + + +## よくある質問 + + +#### なぜ IS_GUTENBERG_PLUGIN 関連の評価結果を変数に割り当てるべきではないのですか ? たとえば const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === 2 ではいけないのですか ? + -#### なぜ IS_GUTENBERG_PLUGIN 関連の評価結果を変数に割り当てるべきではないのですか ? たとえば const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === true ではいけないのですか ? - webpack のミニファイが呼ばれないコードを削除できるよう、コードに複雑性を持ち込まないようにするためです。詳細については上の「呼ばれないコードの削除」セクションを参照してください。 複雑にすると、webpack のミニファイアが呼ばれないコードを識別できず、また削除できなくなる可能性があるためです。そのため、このドキュメントにある例を使用して、フィーチャーフラグが意図したとおりに機能することを確認してください。詳細については上の「呼ばれないコードの削除」セクションを参照してください。 diff --git a/docs/how-to-guides/format-api.md b/docs/how-to-guides/format-api.md index 963bef9f5a70d6..2cb00590245544 100644 --- a/docs/how-to-guides/format-api.md +++ b/docs/how-to-guides/format-api.md @@ -272,7 +272,7 @@ registerFormatType( 'my-custom-format/sample-output', { ``` ### ステップ5: ドロップダウンの外側にボタンを追加する (オプション) @@ -337,9 +337,9 @@ If you run into errors: - コンソールにエラーメッセージが出ていないか確認してください。 -## 追加リソース +## その他の情報 # 国際化 ## 国際化とは何か ? @@ -169,7 +169,7 @@ You can create and ship your own translations with your plugin, if you have suff プラグイン作者が対象の言語に対して十分なスキルをもつ場合には、自身で翻訳を作成し、リリースすることも可能です。 @@ -428,7 +428,7 @@ WordPress は指定されたパスで `${domain}-${locale}-${handle}.json` 形 `make-json` を使用すると自動的にファイルを md5 ハッシュで名前付けするため、そのままで準備が終わります。ファイルの名前を変更して代わりにハンドルを使うこともできます。この場合ファイル名は `myguten-ja-myguten-script.json` となります。 ### 翻訳のフィルタリング + diff --git a/docs/how-to-guides/metabox.md b/docs/how-to-guides/metabox.md index d8271ccf4b87d0..31eb54fd4a16f6 100644 --- a/docs/how-to-guides/metabox.md +++ b/docs/how-to-guides/metabox.md @@ -24,7 +24,7 @@ If you are interested in working with the post meta outside the editor, check ou エディターの外部で投稿メタを操作したい場合は、[サイドバーチュートリアル](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/plugin-sidebar-0/)を参照してください。 ## ブロックを使用したメタ情報の保存 @@ -89,7 +89,7 @@ A [complete meta-block example](https://github.com/WordPress/block-development-e 4. 最後の仕上げ ### ステップ 1: メタフィールドの登録 @@ -141,7 +141,7 @@ add_action( 'init', 'myguten_register_post_meta' ); ``` ### ステップ 2: メタブロックの追加 @@ -260,7 +260,7 @@ You could also confirm the data is saved by checking the database table `wp_post **トラブルシューティング**: 変更の合間に忘れずにコードをビルドしてください。ステップ 1から PHP コードを更新し、JavaScript ファイルをエンキューしています。ビルドの出力と開発者コンソールのエラーを確認してください。 ### ステップ 3: 投稿メタデータの使用 @@ -270,7 +270,7 @@ You can use the post meta data stored in the last step in multiple ways. 前のステップで保存した投稿メタデータはいくつかの方法で使用できます。 #### PHP での投稿メタの使用 @@ -292,7 +292,7 @@ add_filter( 'the_content', 'myguten_content_filter' ); ``` #### ブロックでの投稿メタデータの使用 @@ -342,7 +342,7 @@ register_block_type( 'core/paragraph', array( ``` ### ステップ 4: ブロックテンプレートの使用 (オプション) @@ -387,12 +387,12 @@ This guide showed how using blocks you can read and write to post meta. See the このガイドでは、ブロックを使って投稿メタの読み書きを行う方法を紹介しました。既存のメタボックスとの後方互換性については、以下のセクションを参照してください。 ## 後方互換性 ### 既存のメタボックスのテスト、変換、メンテナンス @@ -440,7 +440,7 @@ When the block editor is used, this meta box will no longer be displayed in the このメタボックスは後方互換性のためにのみ存在するため、ブロックエディターではメタボックス領域に表示されません。クラシックエディターでは、従来どおり表示されます。 ### メタボックスデータコレクション @@ -475,7 +475,7 @@ Ideally, this could be done at instantiation of the editor and help simplify thi 理想的には、この処理をエディターのインスタンス化時に行うことで、フローを簡素化できます。しかし、`initializeEditor()` 呼び出し時の、 `admin_enqueue_scripts` より前に、メタボックスの状態を知ることはできません。フッターや `admin_head` より後に `initializeEditor()` を実行しない限り、現在の方法で対応するしかありません。ただし、最近のエディターのブートストラップに関する変更で、可能になったかもしれません。念のため、ACFでテストしてみてください。 ### Redux と React のメタボックス管理 @@ -492,7 +492,7 @@ _Redux store は、デフォルトですべてのメタボックスを非アク `INITIALIZE_META_BOX_STATE` が来ると、store は、任意のアクティブなメタボックス領域を更新し、`isActive` フラグを `true` にセットします。これが起きると、React は、`MetaBox` コンポーネントの Redux から送られた、新しい props をチェックします。その `MetaBox` がアクティブなら、null をレンダリングする代わりに、`MetaBoxArea` コンポーネントがレンダーされます。`MetaBox` コンポーネントはコンテナコンポーネントで、 `MetaBoxArea` と Redux Sotre の間を仲立ちします。_アクティブなメタボックスがなければ、何も起きません。すべてのコアのメタボックスは除外されているため、これがデフォルトの動作です。_ #### MetaBoxArea コンポーネント @@ -532,7 +532,7 @@ This page mimics the `post.php` post form, so when it is submitted it will fire このページは `post.php` の投稿フォームを真似ており、送信されると通常のフックとアクションをすべて起動し、既存のコードを変更しなくても、任意の PHP メタボックスのあれこれを正しく起動する、適切なグローバル state を持ちます。送信が成功すると、React は `handleMetaBoxReload` をシグナルして、更新中のオーバーレイを削除します。 ### 一般的な互換性の問題 diff --git a/docs/how-to-guides/notices/README.md b/docs/how-to-guides/notices/README.md index e24ce4e7912fa6..0983890923a472 100644 --- a/docs/how-to-guides/notices/README.md +++ b/docs/how-to-guides/notices/README.md @@ -156,7 +156,7 @@ JavaScript アプリケーションコード内から通知を生成する場合 ブロックエディターにカスタム JavaScript をロードする方法が分からない場合は、[_JavaScript のロード_](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/javascript/loading-javascript/) チュートリアルを参照してください。 ## UI コンポーネント @@ -47,7 +47,7 @@ Many components include CSS to add style, you will need to include for the compo 多くのコンポーネントはスタイルの追加のために CSS を含むため、コンポーネントを正しく表示するには追加が必要です。コンポーネントのスタイルシートは `node_modules/@wordpress/components/build-style/style.css` にあります。直接リンクするか、プロジェクトにコピーして include してください。 ## 開発スクリプト diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md index a7560b81eed409..b1a694bf76b0b8 100644 --- a/docs/how-to-guides/platform/custom-block-editor.md +++ b/docs/how-to-guides/platform/custom-block-editor.md @@ -27,38 +27,6 @@ This guide covers the basics of creating your first custom block editor. このガイドでは、はじめてのカスタムブロックエディターを作成するための、基礎を紹介します。 - -## 目次 - - -- [はじめに](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB) -- [コード構文](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%82%B3%E3%83%BC%E3%83%89%E6%A7%8B%E6%96%87) -- [何を構築するのか](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E4%BD%95%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B) -- [プラグインのセットアップと構造](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E6%A7%8B%E9%80%A0) -- [エディターの「コア」](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC%E3%81%AE%E3%80%8C%E3%82%B3%E3%82%A2%E3%80%8D) -- [カスタムページ「ブロックエディター」の作成](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%8C%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC%E3%80%8D%E3%81%AE%E4%BD%9C%E6%88%90) -- [カスタムブロックエディターの登録とレンダー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/tutorial/#%3Ceditor%3E-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC) -- [`