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 . ([56335](https://github.com/WordPress/gutenberg/pull/56335)) +- Remove Block Tools BackCompat. ([56874](https://github.com/WordPress/gutenberg/pull/56874)) +- Site and Post Editor: Unify the DocumentBar component. ([56778](https://github.com/WordPress/gutenberg/pull/56778)) +- getValueFromObjectPath: Remove memize. ([56711](https://github.com/WordPress/gutenberg/pull/56711)) + +#### Block Editor +- Don't render undefined classname in useBlockProps hook. ([56923](https://github.com/WordPress/gutenberg/pull/56923)) +- One hook to rule them all: Preparation for a block supports API. ([56862](https://github.com/WordPress/gutenberg/pull/56862)) +- RichText: Pass value to store. ([43204](https://github.com/WordPress/gutenberg/pull/43204)) +- hooks: Manage BlockListBlock filters in one place. ([56875](https://github.com/WordPress/gutenberg/pull/56875)) + +#### Global Styles +- Command Palette: Use getRevisions instead of deprecated selector. ([56738](https://github.com/WordPress/gutenberg/pull/56738)) +- Global styles revisions: Remove PHP unit tests that are running in Core. ([56492](https://github.com/WordPress/gutenberg/pull/56492)) + +#### Components +- Site editor: Do not use navigator's internal classname. ([56911](https://github.com/WordPress/gutenberg/pull/56911)) + +#### Data Views +- DataViews: Remove TanStack. ([56873](https://github.com/WordPress/gutenberg/pull/56873)) + + +### Tools + +- Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339)) +- Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516)) +- wp-env: Make env-cwd option work on Windows. ([56265](https://github.com/WordPress/gutenberg/pull/56265)) + +#### Testing +- Migrate 'editor multi entity saving' end-to-end tests to Playwright. ([56670](https://github.com/WordPress/gutenberg/pull/56670)) +- Migrate 'inner-blocks-locking-all-embed' end-to-end tests to Playwright. ([56673](https://github.com/WordPress/gutenberg/pull/56673)) +- Migrate 'site editor export' end-to-end tests to Playwright. ([56675](https://github.com/WordPress/gutenberg/pull/56675)) +- RN: Add watch mode for native tests. ([56788](https://github.com/WordPress/gutenberg/pull/56788)) +- Scripts: Enable skipping Playwright browser installation. ([56594](https://github.com/WordPress/gutenberg/pull/56594)) +- Tabs: Implement `ariakit/test` in unit tests. ([56835](https://github.com/WordPress/gutenberg/pull/56835)) +- `CustomSelectControl`: Add additional unit tests. ([56575](https://github.com/WordPress/gutenberg/pull/56575)) + + +### Copy + +- Copy/fix capitalization of WordPress. ([56834](https://github.com/WordPress/gutenberg/pull/56834)) + +#### Site Editor +- Improve text and design of the block removal warnings. ([56869](https://github.com/WordPress/gutenberg/pull/56869)) + +#### Global Styles +- Global styles welcome guide: Add a space between translated strings. ([56839](https://github.com/WordPress/gutenberg/pull/56839)) + +#### Block Library +- Simplify page list edit warning. ([56829](https://github.com/WordPress/gutenberg/pull/56829)) + +#### Patterns +- End pattern page descriptions with a period. ([56828](https://github.com/WordPress/gutenberg/pull/56828)) + + +## First time contributors + +The following PRs were merged by first time contributors: + +- @benoitchantre: Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516)) +- @kmanijak: 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)) +- @lithrel: Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339)) +- @nk-o: Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171)) +- @taylorgorman: Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872)) +- @valerogarte: #55702 - Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874)) + + +## Contributors + +The following contributors merged PRs in this release: + +@afercia @ajlende @alexstine @andrewhayward @andrewserong @apeatling @atachibana @Aurorum @benoitchantre @bph @brookewp @chad1008 @ciampo @colorful-tones @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @jameskoster @jasmussen @jeherve @jeryj @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @kmanijak @lithrel @luisherranz @Mamaduka @matiasbenedetto @mikachan @miminari @mtias @ndiego @nk-o @ntsekouras @oandregal @ramonjd @richtabor @scruffian @SiobhyB @t-hamano @talldan @taylorgorman @tellthemachines @tyxla @valerogarte @WunderBart @youknowriad + + + + += 17.2.3 = + +## Changelog + +### Bug Fixes + +#### Components +- `FormTokenField`: Fix a regression where the suggestion list would re-open after clicking away from the input ([#57002](https://github.com/WordPress/gutenberg/pull/57002)). + +## Contributors + +The following contributors merged PRs in this release: + +@talldan + + += 17.2.2 = + +This patch release fixes a WSOD which could occur in the site editor. See https://github.com/WordPress/gutenberg/pull/57035. + + += 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 . ([56335](https://github.com/WordPress/gutenberg/pull/56335)) +- Remove Block Tools BackCompat. ([56874](https://github.com/WordPress/gutenberg/pull/56874)) +- Site and Post Editor: Unify the DocumentBar component. ([56778](https://github.com/WordPress/gutenberg/pull/56778)) +- getValueFromObjectPath: Remove memize. ([56711](https://github.com/WordPress/gutenberg/pull/56711)) + +#### Block Editor +- Don't render undefined classname in useBlockProps hook. ([56923](https://github.com/WordPress/gutenberg/pull/56923)) +- One hook to rule them all: Preparation for a block supports API. ([56862](https://github.com/WordPress/gutenberg/pull/56862)) +- RichText: Pass value to store. ([43204](https://github.com/WordPress/gutenberg/pull/43204)) +- hooks: Manage BlockListBlock filters in one place. ([56875](https://github.com/WordPress/gutenberg/pull/56875)) + +#### Global Styles +- Command Palette: Use getRevisions instead of deprecated selector. ([56738](https://github.com/WordPress/gutenberg/pull/56738)) +- Global styles revisions: Remove PHP unit tests that are running in Core. ([56492](https://github.com/WordPress/gutenberg/pull/56492)) + +#### Components +- Site editor: Do not use navigator's internal classname. ([56911](https://github.com/WordPress/gutenberg/pull/56911)) + +#### Data Views +- DataViews: Remove TanStack. ([56873](https://github.com/WordPress/gutenberg/pull/56873)) + + +### Tools + +- Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339)) +- Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516)) +- wp-env: Make env-cwd option work on Windows. ([56265](https://github.com/WordPress/gutenberg/pull/56265)) + +#### Testing +- Migrate 'editor multi entity saving' end-to-end tests to Playwright. ([56670](https://github.com/WordPress/gutenberg/pull/56670)) +- Migrate 'inner-blocks-locking-all-embed' end-to-end tests to Playwright. ([56673](https://github.com/WordPress/gutenberg/pull/56673)) +- Migrate 'site editor export' end-to-end tests to Playwright. ([56675](https://github.com/WordPress/gutenberg/pull/56675)) +- RN: Add watch mode for native tests. ([56788](https://github.com/WordPress/gutenberg/pull/56788)) +- Scripts: Enable skipping Playwright browser installation. ([56594](https://github.com/WordPress/gutenberg/pull/56594)) +- Tabs: Implement `ariakit/test` in unit tests. ([56835](https://github.com/WordPress/gutenberg/pull/56835)) +- `CustomSelectControl`: Add additional unit tests. ([56575](https://github.com/WordPress/gutenberg/pull/56575)) + + +### Various + +- Copy/fix capitalization of WordPress. ([56834](https://github.com/WordPress/gutenberg/pull/56834)) + +#### Site Editor +- Improve text and design of the block removal warnings. ([56869](https://github.com/WordPress/gutenberg/pull/56869)) + +#### Global Styles +- Global styles welcome guide: Add a space between translated strings. ([56839](https://github.com/WordPress/gutenberg/pull/56839)) + +#### Block Library +- Simplify page list edit warning. ([56829](https://github.com/WordPress/gutenberg/pull/56829)) + +#### Patterns +- End pattern page descriptions with a period. ([56828](https://github.com/WordPress/gutenberg/pull/56828)) + + +## First time contributors + +The following PRs were merged by first time contributors: + +- @benoitchantre: Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516)) +- @kmanijak: 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)) +- @lithrel: Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339)) +- @nk-o: Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171)) +- @taylorgorman: Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872)) +- @valerogarte: #55702 - Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874)) + + +## Contributors + +The following contributors merged PRs in this release: + +@afercia @ajlende @alexstine @andrewhayward @andrewserong @apeatling @atachibana @Aurorum @benoitchantre @bph @brookewp @chad1008 @ciampo @colorful-tones @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @jameskoster @jasmussen @jeherve @jeryj @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @kmanijak @lithrel @luisherranz @Mamaduka @matiasbenedetto @mikachan @miminari @mtias @ndiego @nk-o @ntsekouras @oandregal @ramonjd @richtabor @scruffian @SiobhyB @t-hamano @talldan @taylorgorman @tellthemachines @tyxla @valerogarte @WunderBart @youknowriad + + += 17.2.1 = + +## Changelog + +### Bug Fixes + +- Fix: Fatal php error if a template was created by an author that was deleted ([56990](https://github.com/WordPress/gutenberg/pull/56990)) + +## Contributors + +The following contributors merged PRs in this release: + +@jorgefilipecosta + + += 17.2.0 = + + + +## Changelog + +### Bug Fixes + +#### Post Editor +- Editor: Fix issue where createBlock in block template caused list view collapse. ([56666](https://github.com/WordPress/gutenberg/pull/56666)) + +#### Modules API +- Modules: Fix import map polyfill not being copied on the generated plugin ZIP. ([56655](https://github.com/WordPress/gutenberg/pull/56655)) + + +### Documentation + +- Interactivity API: New store() API documentation. ([56764](https://github.com/WordPress/gutenberg/pull/56764)) +- Interactivity API: Update TS/JSDocs after migrating to the new `store()` API. ([56748](https://github.com/WordPress/gutenberg/pull/56748)) + + +### Tools + +#### Build Tooling +- Add missing labels to changelog script, and enhance mapping function. ([55066](https://github.com/WordPress/gutenberg/pull/55066)) + + + + +## Contributors + +The following contributors merged PRs in this release: + +@andrewserong @DAreRodz @luisherranz @vcanales += 17.2.0-rc.1 = + + + +## Changelog + +### Features + +#### Modules API +- Interactivity API: Use modules instead of scripts in the frontend. ([56143](https://github.com/WordPress/gutenberg/pull/56143)) + + +### Enhancements + +- Add translator comments for strings containing date formats. ([56531](https://github.com/WordPress/gutenberg/pull/56531)) +- Block Settings: Only display parent block selector on small screens. ([56431](https://github.com/WordPress/gutenberg/pull/56431)) +- Block Theme Preview: Display the theme name on the activate button. ([55752](https://github.com/WordPress/gutenberg/pull/55752)) +- Core data revisions: Extend support to other post types. ([56353](https://github.com/WordPress/gutenberg/pull/56353)) +- Improve tooltip for parent blocks on the block toolbar. ([56146](https://github.com/WordPress/gutenberg/pull/56146)) +- Simplify template author token. ([56566](https://github.com/WordPress/gutenberg/pull/56566)) +- Style engine: Allow CSS var output for fontSize and fontFamily and update documentation. ([56528](https://github.com/WordPress/gutenberg/pull/56528)) +- Try: Change "Detach pattern" to "Detach". ([56323](https://github.com/WordPress/gutenberg/pull/56323)) +- useEntityRecord: Improve unit tests. ([56415](https://github.com/WordPress/gutenberg/pull/56415)) + +#### Components +- Add focus rings to focusable disabled buttons. ([56383](https://github.com/WordPress/gutenberg/pull/56383)) +- DropdownMenu V2 tweaks. ([56041](https://github.com/WordPress/gutenberg/pull/56041)) +- DropdownMenu V2: Add support for rendering in legacy popover slot. ([56342](https://github.com/WordPress/gutenberg/pull/56342)) +- FormToggle: Refine animation. ([56515](https://github.com/WordPress/gutenberg/pull/56515)) +- Slot: Add styles prop to bubblesVirtually version. ([56428](https://github.com/WordPress/gutenberg/pull/56428)) +- Tabs: Cleanup and improvements. ([56224](https://github.com/WordPress/gutenberg/pull/56224)) +- Try Ariakit Select for new CustomSelectControl component. ([55790](https://github.com/WordPress/gutenberg/pull/55790)) + +#### Data Views +- Data list view: Make filter row, table header, and pagination sticky. ([56157](https://github.com/WordPress/gutenberg/pull/56157)) +- Simplify dataviews view button. ([56485](https://github.com/WordPress/gutenberg/pull/56485)) +- Update data view menu item actions. ([56398](https://github.com/WordPress/gutenberg/pull/56398)) + +#### Global Styles +- Global style revisions: Redesign style revision items. ([55913](https://github.com/WordPress/gutenberg/pull/55913)) +- Global styles revisions: Migrate API call to getRevisions(). ([56349](https://github.com/WordPress/gutenberg/pull/56349)) +- Style Revisions: Remove style revisions dropdown menu. ([56454](https://github.com/WordPress/gutenberg/pull/56454)) + +#### Site Editor +- Add 'View site' action to 'Site updated' snackbar. ([52693](https://github.com/WordPress/gutenberg/pull/52693)) +- Add the Post Author component to the Page sidebar. ([56368](https://github.com/WordPress/gutenberg/pull/56368)) +- Redirect to main page menu if page record not found. ([56177](https://github.com/WordPress/gutenberg/pull/56177)) + +#### Block Editor +- Drag and drop: Allow dragging to the beginning and end of a document. ([56070](https://github.com/WordPress/gutenberg/pull/56070)) +- List View: Expand state if a block is dragged to within a collapsed block in the editor canvas. ([56493](https://github.com/WordPress/gutenberg/pull/56493)) + +#### Layout +- Add layout classes to legacy Group inner container. ([56130](https://github.com/WordPress/gutenberg/pull/56130)) +- Add setting to disable custom content size controls. ([56236](https://github.com/WordPress/gutenberg/pull/56236)) + +#### Patterns +- Small tweaks to CreatePatternModal. ([56016](https://github.com/WordPress/gutenberg/pull/56016)) +- Update Labels in Block Inserter (block patterns tab). ([55986](https://github.com/WordPress/gutenberg/pull/55986)) + +#### Icons +- Update trash icon. ([56569](https://github.com/WordPress/gutenberg/pull/56569)) + +#### Block Library +- Disable block renaming support for Nav Link block. ([56425](https://github.com/WordPress/gutenberg/pull/56425)) + +#### Distraction Free +- Add top toolbar to distraction free mode. ([56295](https://github.com/WordPress/gutenberg/pull/56295)) + +#### CSS & Styling +- Gallery Block: Use styled scrollbars for image captions. ([56252](https://github.com/WordPress/gutenberg/pull/56252)) + +#### Typography +- Font Library: Remove insecure properties. ([56230](https://github.com/WordPress/gutenberg/pull/56230)) + + +### New APIs + +- Revisions: Add new selectors to fetch entity revisions. ([54046](https://github.com/WordPress/gutenberg/pull/54046)) + +#### Interactivity API +- Migration to the new `store()` API. ([55459](https://github.com/WordPress/gutenberg/pull/55459)) + + +### Bug Fixes + +- Block Editor: Undeprecate the '__experimentalImageSizeControl' component. ([56414](https://github.com/WordPress/gutenberg/pull/56414)) +- Core data: Harmonize getRevision selector and resolver function signatures. ([56416](https://github.com/WordPress/gutenberg/pull/56416)) +- Editor styles: Scope without adding specificity. ([56564](https://github.com/WordPress/gutenberg/pull/56564)) +- Fix Restore Post title placeholder. ([56580](https://github.com/WordPress/gutenberg/pull/56580)) +- Post Schedule Panel: Remove text overflow ellipsis. ([56319](https://github.com/WordPress/gutenberg/pull/56319)) +- PostCSS style transformation: Fail gracefully instead of throwing an error. ([56093](https://github.com/WordPress/gutenberg/pull/56093)) +- Rich text: Pad multiple spaces through en/em replacement. ([56341](https://github.com/WordPress/gutenberg/pull/56341)) +- Site Editor Sidebar: Fix actions vertical alignment. ([56218](https://github.com/WordPress/gutenberg/pull/56218)) +- Site Editor: Add a fallback template showing the title and content for the post only mode. ([56509](https://github.com/WordPress/gutenberg/pull/56509)) +- useEntityRecord: Do not trigger REST API requests when disabled. ([56108](https://github.com/WordPress/gutenberg/pull/56108)) + +#### Block Library +- File block: Remove anchor tag when copy pasting to file name. ([56508](https://github.com/WordPress/gutenberg/pull/56508)) +- Fix label of columns inspector panel. ([56647](https://github.com/WordPress/gutenberg/pull/56647)) +- Post Template: Fix incorrect offset query. ([56440](https://github.com/WordPress/gutenberg/pull/56440)) + +#### Block Editor +- (RichText)(Workaround)(17.1.x) Fallback to a string arg in `collapseWhiteSpace()` if `value` is not a string. ([56570](https://github.com/WordPress/gutenberg/pull/56570)) +- Cover block: Pass dropZoneElement reference to fix dragging within cover block area. ([56312](https://github.com/WordPress/gutenberg/pull/56312)) +- useMovingAnimation: Clear translate3d rule when animation is finished. ([56410](https://github.com/WordPress/gutenberg/pull/56410)) + +#### Components +- Design Tools: Fix last ToolsPanelItem styling. ([56536](https://github.com/WordPress/gutenberg/pull/56536)) +- Fix FormTokenField suggestions broken scrollbar when `__experimentalExpandOnFocus` is defined. ([56426](https://github.com/WordPress/gutenberg/pull/56426)) +- Tabs: Fix flaky unit tests. ([55950](https://github.com/WordPress/gutenberg/pull/55950)) + +#### Global Styles +- Additional CSS: Fix on change validation. ([56434](https://github.com/WordPress/gutenberg/pull/56434)) +- Global styles revisions: Update isResolving flag. ([56491](https://github.com/WordPress/gutenberg/pull/56491)) +- Spacing: Fix block error if spacing unit array empty in theme.json. ([56306](https://github.com/WordPress/gutenberg/pull/56306)) + +#### CSS & Styling +- Reduce specificity of default Cover text color styles. ([56411](https://github.com/WordPress/gutenberg/pull/56411)) +- Restore Post Title visual styles in Code View mode. ([56582](https://github.com/WordPress/gutenberg/pull/56582)) + +#### Saving +- Editor: Reinstate anonymous callback for saved post state. ([56529](https://github.com/WordPress/gutenberg/pull/56529)) + +#### Post Editor +- Save post button: Avoid extra re-renders when enablng/disabling tooltip. ([56502](https://github.com/WordPress/gutenberg/pull/56502)) + +#### Plugin +- Update Readme.txt tested up to 6.4. ([56427](https://github.com/WordPress/gutenberg/pull/56427)) + +#### Site Editor +- Fix template resolution for templates assigned as home page. ([56418](https://github.com/WordPress/gutenberg/pull/56418)) + +#### Patterns +- Fix issue with template in replace template screen. ([56407](https://github.com/WordPress/gutenberg/pull/56407)) + +#### Layout +- Fix issue where layout classnames are injected for blocks without layout support. ([56187](https://github.com/WordPress/gutenberg/pull/56187)) + +#### Typography +- Font Library: Fix fonts not displaying correctly. ([55393](https://github.com/WordPress/gutenberg/pull/55393)) + +#### Colors +- Duotone: Backport from Core to fix filters in classic themes. ([54778](https://github.com/WordPress/gutenberg/pull/54778)) + + +### Accessibility + +- Migrating `StyleBook` to use updated `Composite` implementation. ([55344](https://github.com/WordPress/gutenberg/pull/55344)) + +#### Data Views +- DataViews: Make disabled pagination buttons focusable. ([56422](https://github.com/WordPress/gutenberg/pull/56422)) + +#### Block Library +- Image Block: Enable image block to be selected correctly when clicked. ([56043](https://github.com/WordPress/gutenberg/pull/56043)) + +#### Post Editor +- Tooltip: Don't render buttons tooltip when show button text labels is enabled. ([55842](https://github.com/WordPress/gutenberg/pull/55842)) + +#### Components +- Improve `Button` saving state accessibility. ([55547](https://github.com/WordPress/gutenberg/pull/55547)) + +#### Patterns +- Fix focus loss after converting to a synced pattern. ([55473](https://github.com/WordPress/gutenberg/pull/55473)) + + +### Performance + +- Avoid calling postcss when not needed. ([56601](https://github.com/WordPress/gutenberg/pull/56601)) +- Block Editor: Optimize 'Connections' inspector controls. ([56443](https://github.com/WordPress/gutenberg/pull/56443)) + +#### Global Styles +- Make search more responsive for block type list. ([56139](https://github.com/WordPress/gutenberg/pull/56139)) + + +### Experiments + +#### Data Views +- DataViews: Document `view.layout`. ([56637](https://github.com/WordPress/gutenberg/pull/56637)) +- DataViews: Extract common constants to file. ([56251](https://github.com/WordPress/gutenberg/pull/56251)) +- DataViews: Rename `InFilter` component to `FilterSummary`. ([56506](https://github.com/WordPress/gutenberg/pull/56506)) +- DataViews: Scope names of V2 UI components. ([56503](https://github.com/WordPress/gutenberg/pull/56503)) +- DataViews: Update field API to generate filters based on type. ([55996](https://github.com/WordPress/gutenberg/pull/55996)) +- DataViews: Update filter component. ([56110](https://github.com/WordPress/gutenberg/pull/56110)) +- Dataviews: Add confirmation step before deleting a page. ([56504](https://github.com/WordPress/gutenberg/pull/56504)) +- Dataviews: Add preview and grid view in templates list. ([56382](https://github.com/WordPress/gutenberg/pull/56382)) +- Dataviews: Grid layout refinements. ([56441](https://github.com/WordPress/gutenberg/pull/56441)) +- Dataviews: Remove link from author. ([56467](https://github.com/WordPress/gutenberg/pull/56467)) +- Dataviews: Update item actions in grid view. ([56501](https://github.com/WordPress/gutenberg/pull/56501)) +- Fix data view menu item radius. ([56395](https://github.com/WordPress/gutenberg/pull/56395)) + +#### Post Editor +- Render html in post titles in visual mode and edit HTML in post title in code view. ([54718](https://github.com/WordPress/gutenberg/pull/54718)) + + +### Documentation + +- Add the attributes definition page to the create block tutorial of the platform documentation. ([56429](https://github.com/WordPress/gutenberg/pull/56429)) +- Add the transforms page to the create block tutorial of the platform documentation. ([56559](https://github.com/WordPress/gutenberg/pull/56559)) +- Add thee block supports page to the create block tutorial of the framework docs. ([56483](https://github.com/WordPress/gutenberg/pull/56483)) +- Added clarifications and examples to "Get started with wp-scripts". ([56298](https://github.com/WordPress/gutenberg/pull/56298)) +- Block Editor: Fix typo in `URLInput`'s `onKeyDown` prop documentation. ([56322](https://github.com/WordPress/gutenberg/pull/56322)) +- Bring back non-JS tabs in block editor handbook. ([56561](https://github.com/WordPress/gutenberg/pull/56561)) +- Docs: Fix incorrect build script description in script package. ([56332](https://github.com/WordPress/gutenberg/pull/56332)) +- Docs: Fundamentals of Block Development - File structure of a block. ([56551](https://github.com/WordPress/gutenberg/pull/56551)) +- Docs: Fundamentals of Block Development - Registration of a block. ([56334](https://github.com/WordPress/gutenberg/pull/56334)) +- Docs: Fundamentals of Block Development - The block wrapper. ([56596](https://github.com/WordPress/gutenberg/pull/56596)) +- Docs: Fundamentals of Block Development - Working with Javascript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553)) +- Docs: Fundamentals of Block Development - block.json. ([56435](https://github.com/WordPress/gutenberg/pull/56435)) +- Docs: Improve downloadBlob example. ([56225](https://github.com/WordPress/gutenberg/pull/56225)) +- Documentation - Block Editor Handbook - Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. ([49854](https://github.com/WordPress/gutenberg/pull/49854)) +- Fix overly complex code example in ComboboxControl readme. ([56365](https://github.com/WordPress/gutenberg/pull/56365)) +- Fix version in useSetting deprecation notice. ([56377](https://github.com/WordPress/gutenberg/pull/56377)) +- Fundamentals block development - landing and first pages. ([56584](https://github.com/WordPress/gutenberg/pull/56584)) +- Fundamentals of Block Development - fix save definition. ([56605](https://github.com/WordPress/gutenberg/pull/56605)) +- Link preview image to live example using WordPress Playground. ([56292](https://github.com/WordPress/gutenberg/pull/56292)) +- NavigableContainers: Fix doc typo in onKeyDown prop. ([56352](https://github.com/WordPress/gutenberg/pull/56352)) +- Release docs: Add new section about troubleshooting the release. ([56436](https://github.com/WordPress/gutenberg/pull/56436)) +- Remove all {% codetabs %} instances and any vanilla JS references. ([56121](https://github.com/WordPress/gutenberg/pull/56121)) +- Simplify code example in ToggleControl component readme. ([56389](https://github.com/WordPress/gutenberg/pull/56389)) +- Text and Heading: Improve documentation around default values and truncation logic. ([56518](https://github.com/WordPress/gutenberg/pull/56518)) +- Theme JSON schema: Add heading/button key to color definition. ([55674](https://github.com/WordPress/gutenberg/pull/55674)) +- Update for 6.4.1 for versions in WP. ([56216](https://github.com/WordPress/gutenberg/pull/56216)) +- Update references to the gutenberg-examples repo to the new block-development-examples. ([56119](https://github.com/WordPress/gutenberg/pull/56119)) +- Update template name in `create-block` command. ([56281](https://github.com/WordPress/gutenberg/pull/56281)) +- Update webpack options for wp-scripts in README.md. ([56314](https://github.com/WordPress/gutenberg/pull/56314)) +- `BoxControl`: Update story and refactor to Typescript. ([56462](https://github.com/WordPress/gutenberg/pull/56462)) + + +### Code Quality + +- Blocks pkg: Remove 'browser' dependencies. ([56433](https://github.com/WordPress/gutenberg/pull/56433)) +- DataViews: Code Quality remove some unused props from action. ([56477](https://github.com/WordPress/gutenberg/pull/56477)) +- Editor: Move the template focus modes to the editor store. ([56472](https://github.com/WordPress/gutenberg/pull/56472)) +- Extract a PostPanelRow component from the different sidebar panels. ([56238](https://github.com/WordPress/gutenberg/pull/56238)) +- Interactivity API: Add missing changelog entry for the new `store()` API. ([56611](https://github.com/WordPress/gutenberg/pull/56611)) +- Migrating block editor `BlockPatternsList` component. ([56210](https://github.com/WordPress/gutenberg/pull/56210)) +- Move the DisableNonContentBlocks component to the editor package. ([56423](https://github.com/WordPress/gutenberg/pull/56423)) +- Post Schedule Panel: Fix Sass deprecation warning for division. ([56412](https://github.com/WordPress/gutenberg/pull/56412)) +- Remove compatibility layer for WP 6.2. ([56464](https://github.com/WordPress/gutenberg/pull/56464)) +- Unify the PostSchedule component between site and post editors. ([56196](https://github.com/WordPress/gutenberg/pull/56196)) +- Update: Refactor useAddedBy to use authorText and originalSource fields. ([56568](https://github.com/WordPress/gutenberg/pull/56568)) + +#### Block Library +- Add align support to the image block - alternative. ([55954](https://github.com/WordPress/gutenberg/pull/55954)) +- Backmerge block renaming fixes/refactors from 6.4 branch into Gutenberg trunk. ([56386](https://github.com/WordPress/gutenberg/pull/56386)) +- Pattern placeholder: Remove duplicate 'useDispatch' hook. ([56397](https://github.com/WordPress/gutenberg/pull/56397)) + +#### Components +- Remove incorrect version from deprecated `__nextHasNoMarginBottom` prop of `AnglePickerControl` Component. ([56336](https://github.com/WordPress/gutenberg/pull/56336)) +- Revert "DropdownMenu V2: Add support for rendering in legacy popover slot". ([56484](https://github.com/WordPress/gutenberg/pull/56484)) + +#### Data Views +- Dataviews: Ensure items and fields are using a unique id. ([56366](https://github.com/WordPress/gutenberg/pull/56366)) + +#### Block Editor +- useInnerBlocksProps: Stabilise dropZoneElement prop. ([56313](https://github.com/WordPress/gutenberg/pull/56313)) + +#### Design Tools +- Fix: Theme.json font settings in unit test. ([56309](https://github.com/WordPress/gutenberg/pull/56309)) + + +### Tools + +- Workflows: Update 'days-before-stale' for flaky test report issues. ([56585](https://github.com/WordPress/gutenberg/pull/56585)) +- scripts: Update `jest-dev-server` to v9. ([56552](https://github.com/WordPress/gutenberg/pull/56552)) + +#### Testing +- Dataviews: Add first end-to-end tests. ([56634](https://github.com/WordPress/gutenberg/pull/56634)) +- Migrate 'align hook' end-to-end tests to Playwright. ([56480](https://github.com/WordPress/gutenberg/pull/56480)) +- Migrate 'block directory' end-to-end tests to Playwright. ([56593](https://github.com/WordPress/gutenberg/pull/56593)) +- Migrate 'block icons' end-to-end tests to Playwright. ([56610](https://github.com/WordPress/gutenberg/pull/56610)) +- Migrate 'custom taxonomies' end-to-end test to Playwright. ([56486](https://github.com/WordPress/gutenberg/pull/56486)) +- Migrate 'sidebar permalink' end-to-end tests to Playwright. ([56253](https://github.com/WordPress/gutenberg/pull/56253)) +- Migrate Is Typing Test to Playwright. ([56616](https://github.com/WordPress/gutenberg/pull/56616)) +- Page spec: Merging create page and toggle preview tests. ([56129](https://github.com/WordPress/gutenberg/pull/56129)) +- Playwright Utils: Fix the method of getting post ID in 'publishPost'. ([56421](https://github.com/WordPress/gutenberg/pull/56421)) +- end-to-end tests: Merge Puppeteer into single job, split Playwright further. ([56363](https://github.com/WordPress/gutenberg/pull/56363)) + +#### Build Tooling +- Create block: Update `interactive-template` to the new `store()` API. ([56613](https://github.com/WordPress/gutenberg/pull/56613)) + + +### Security + +- WP_Theme_JSON_Gutenberg: Add nested indexed array schema sanitization. ([56447](https://github.com/WordPress/gutenberg/pull/56447)) + + +### Various + +- Add: Author text and original source to wp_template_part. ([56567](https://github.com/WordPress/gutenberg/pull/56567)) +- Migrating `BlockPatternSetup` to use updated `Composite` implementation. ([55425](https://github.com/WordPress/gutenberg/pull/55425)) +- Migrating `InserterListbox` to use updated Composite implementation. ([56246](https://github.com/WordPress/gutenberg/pull/56246)) + +#### Data Views +- Dataviews: All Templates: Add filters to template author. ([56338](https://github.com/WordPress/gutenberg/pull/56338)) +- Dataviews: All templates: Add: Sorting to template author and add author_text to the rest API. ([56333](https://github.com/WordPress/gutenberg/pull/56333)) + +#### HTML API +- Backport updates from Core. ([56578](https://github.com/WordPress/gutenberg/pull/56578)) + + + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @afercia @andrewhayward @andrewserong @annezazu @apeatling @arthur791004 @bph @brookewp @chad1008 @chiilog @ciampo @DAreRodz @dmsnell @draganescu @ellatrix @fabiankaegy @flootr @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @megane9988 @NekoJonez @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @SavPhill @Soean @t-hamano @talldan @tellthemachines @youknowriad @zaguiini + + + + = 17.1.4 = ## Changelog diff --git a/docs/README.md b/docs/README.md index 56ebd555aa1f09..e328807ba5f8b3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,76 +3,23 @@ --> # ブロックエディターハンドブック -_日本語版の情報については末尾を参照してください。_ +_日本語翻訳に関する情報については後半を参照してください。_ - - - -こんにちは 👋 ブロックエディターハンドブックへようこそ。 +👋 ブロックエディターハンドブックへようこそ。 -[**ブロックエディター**](https://wordpress.org/gutenberg/)は、WordPress のサイト構築と公開のためのモダンな最新パラダイムです。コンテンツの構成とフォーマットに**ブロック**によるモジュラーシステムを採用し、ウェブサイトやデジタル製品用のリッチでフレキシブルなレイアウトを作成できるようにデザインしました。 +[**ブロックエディター**](https://wordpress.org/gutenberg/)は、WordPress のサイト構築と公開のためのモダンな最新のパラダイムです。コンテンツの構成とフォーマットに、「**ブロック**」によるモジュラーシステムを採用し、ウェブサイトやデジタル製品用の、リッチでフレキシブルなレイアウト作成を念頭に設計されています。 エディターは下図に示すいくつかの主要な要素で構成されています。 - - - - - - - - - - - - - @@ -86,31 +33,31 @@ The elements highlighted in the figure are: 1. **インサーター**: コンテンツキャンバス内にブロックを挿入するためのパネル 2. **コンテンツキャンバス**: コンテンツエディター。ブロックで作成されたコンテンツを保持 3. **設定サイドバー**: ブロックの設定を構成するサイドバーパネルなど ブロックエディターではブロックを使用して、モジュール的にコンテンツを作成します。すぐに使用できる多くの[コアブロック](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/)があり、自分でも[オリジナルのブロックを作成](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/)できます。 -[ブロック](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/key-concepts/#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)は、段落、見出し、メディア要素、埋め込みなどの個別の要素です。各ブロックは独立した要素として扱われ、個別の編集や書式の制御が可能です。これらの要素をすべてつなぎ合わせてコンテンツとなり、[WordPress のデータベースに保存されます](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/#serialization-and-parsing)。 +[ブロック](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/key-concepts/#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)は、段落、見出し、メディア、埋め込みなどの個別の要素です。各ブロックは独立した要素として扱われ、個別の編集や書式の制御が可能です。これらの要素をすべてつなぎ合わせてコンテンツとなり、[WordPress のデータベースに保存されます](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/#serialization-and-parsing)。 ブロックエディターは、WordPress の編集体験に革命を起こすことを目的とした [**Gutenberg プロジェクト**で行われた作業](https://ja.wordpress.org/team/handbook/block-editor/getting-started/faq/#gutenberg-%e3%82%b0%e3%83%bc%e3%83%86%e3%83%b3%e3%83%99%e3%83%ab%e3%82%af-%e3%81%a8%e3%81%af)の成果です。 -ブロックエディターはビジュアルコンテンツ作成ツールを介して、[拡張された編集体験](https://wordpress.org/gutenberg/)を提供するだけでなく、[豊富な API 機能セット](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/)によって、さまざまな方法で操作、拡張できる強力な開発者プラットフォームです。 +ブロックエディターはビジュアルコンテンツ作成ツールを介して、[拡張された編集体験](https://wordpress.org/gutenberg/)を提供するだけでなく、[豊富な API 機能セット](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/)によって、多くの異なる方法で操作、拡張できる強力な開発者プラットフォームです。 このハンドブックはブロック開発に焦点を当てています。5つのセクションに分かれていて、それぞれに異なる目的があります。 - -**[はじめに](https://ja.wordpress.org/team/handbook/block-editor/getting-started/)** -これからブロック開発を始める方はこのセクションで[開発環境](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/)をセットアップし、[ブロック開発の基礎](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/)を学習できます。また、[用語集](https://ja.wordpress.org/team/handbook/block-editor/getting-started/glossary/)や [よくある質問](https://ja.wordpress.org/team/handbook/block-editor/getting-started/faq/)では、頻出の質問に対する答えを得られます。 +- [**はじめに**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/) - これからブロック開発を始める方はこのセクションで[開発環境](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/)をセットアップし、[ブロック開発の基本原理](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/) を学習できます。[クイックスタートガイド](https://ja.wordpress.org/team/handbook/block-editor/getting-started/quick-start-guide/)、および[チュートリアル: はじめてのブロック作成](https://ja.wordpress.org/team/handbook/block-editor/getting-started/tutorial/)は、ブロック開発の学習を始めるにあたって最良のスタート地点でしょう。 -**[開発ガイド](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/)** - -「はじめに」のセクションで学んだことをベースに、開発中に出会うさまざまな問題の解決方法を学びます。またチュートリアルや再利用可能なサンプルコードも取得できます。例えば、[フル機能のブロックの作成](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/)、[WordPress のデータの操作](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/)など。さらに、[ブロックエディターでJavaScriptを使用する方法](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/javascript/)も学べます。 +- [**開発ガイド**](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/) - 「はじめに」のセクションで学んだことをベースに、開発中に出会うさまざまな問題の解決方法を学びます。またチュートリアルや再利用可能なサンプルコードも取得できます。例えば、[WordPress のデータの操作](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/) や [ユーザーインターフェースの制限](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/) など。 -**[リファレンスガイド](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/)** - -このセクションがこのハンドブックの心臓部です。作業中あるいは調査中に細かな部分まで調べたり、特定の API の詳細を調べる際に利用できます。[ブロック API リファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/) は、ブロックで実行したいほぼすべてのトピックをカバーしています。また、各 [コンポーネント](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/components/) と [パッケージ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/) もここでドキュメント化されています。_なおコンポーネントは、[Storybook](https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page)経由でもドキュメント化されています。_ +- [**リファレンスガイド**](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/) - このセクションがこのハンドブックの心臓部です。作業中あるいは調査中に細かな部分まで調べたり、特定の API の詳細を調べる際に利用できます。[ブロック API リファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/) は、ブロックで実行したいほぼすべてのトピックをカバーしています。また、各 [コンポーネント](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/components/) と [パッケージ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/) もここでドキュメント化されています。_なおコンポーネントは、[Storybook](https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page) 経由でもドキュメント化されています。_ -**[概説](https://ja.wordpress.org/team/handbook/block-editor/explanations/)** +- [**概説**](https://ja.wordpress.org/team/handbook/block-editor/explanations/) - このセクションではさらに深く、ブロックエディター[アーキテクチャ](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/)の理論的な理解により、実践的な知識を強化できます。 -このセクションではさらに深く、ブロックエディター[アーキテクチャ](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/)の理論的な理解により、実践的な知識を強化できます。 - - -**[コントリビュータガイド](https://ja.wordpress.org/team/handbook/block-editor/contributors/)** - -Gutenbergはオープンソースソフトウェアであり、誰でもこのプロジェクトに貢献できます。このセクションでは、どの領域に貢献するかを選択できるよう、[コード](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/)、[デザイン](https://ja.wordpress.org/team/handbook/block-editor/contributors/design/)、[ドキュメント](https://ja.wordpress.org/team/handbook/block-editor/contributors/documentation/)、その他の貢献方法を詳しく説明します。 +- [**コントリビュータガイド**](https://ja.wordpress.org/team/handbook/block-editor/contributors/) - Gutenbergはオープンソースソフトウェアであり、誰でもこのプロジェクトに貢献できます。このセクションでは、どの領域に貢献するかを選択できるよう、[コード](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/)、[デザイン](https://ja.wordpress.org/team/handbook/block-editor/contributors/design/)、[ドキュメント](https://ja.wordpress.org/team/handbook/block-editor/contributors/documentation/)、その他の貢献方法を詳しく説明します。 -## その他のリソース +## その他の情報 このハンドブックは、ブロック開発に関連するすべての情報の正規のリソースです。しかし、他にも参考になる資料があります。 - [**WordPress 開発者ブログ**](https://developer.wordpress.org/news/) - ここにはブロック開発に関連する特定のトピックやさまざまなユースケースをカバーする技術記事が日々アップされています。また [WordPress の最新動向を知る](https://developer.wordpress.org/news/tag/roundup/)ための優れたリソースでもあります。 - [**Learn WordPress**](https://learn.wordpress.org/?locale=ja) - 学習リソースのための WordPress ハブです。コースには「[Introduction to Block Development: Build your first custom block (ブロック開発入門: 最初のカスタムブロックを構築する)](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/)」、「[Converting a Shortcode to a Block (ショートコードをブロックに変換する)](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/)」、「[Using the WordPress Data Layer (WordPress データレイヤーの使用)](https://learn.wordpress.org/course/using-the-wordpress-data-layer/)」など。 -- [**WordPress.tv**](https://wordpress.tv/) - WordPress.org コミュニティが監修した WordPress 関連動画のハブです。WordCamp でのセッションからオンラインワークショップの録画まで。[ブロック開発](https://wordpress.tv/?s=block%20development&sort=newest)や[ブロック編集](https://wordpress.tv/?s=block%20editor&sort=relevance)の学習に役立つ情報も見つかるはず。 -- [**Gutenberg リポジトリ**](https://github.com/WordPress/gutenberg/) - ブロックエディタープロジェクトの開発は、このGitHubリポジトリで行われています。このリポジトリには [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (コアブロック) や [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (共通 UI 要素) などの興味深いパッケージのコードが含まれています。_[gutenberg-examples](https://github.com/WordPress/gutenberg-examples) リポジトリも有用なリファレンスです。_ +- [**WordPress.tv**](https://wordpress.tv/) - WordPress.org コミュニティが監修した WordPress 関連動画のハブです。WordCamp でのセッションからオンラインワークショップの録画まで。[ブロック開発](https://wordpress.tv/?s=block%20development&sort=newest)や[ブロックエディター](https://wordpress.tv/?s=block%20editor&sort=relevance)の学習に役立つ情報も見つかるはずです。 +- [**Gutenberg リポジトリ**](https://github.com/WordPress/gutenberg/) - ブロックエディタープロジェクトの開発は、このGitHubリポジトリで行われています。このリポジトリには [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (コアブロック) や [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (共通 UI 要素) などの興味深いパッケージのコードが含まれています。_[block-development-examples](https://github.com/WordPress/block-development-examples) リポジトリも有用なリファレンスです。_ - [**エンドユーザードキュメント**](https://wordpress.org/documentation/) - エンドユーザー (開発者でなく) をターゲットとしたドキュメントサイト。ここには[ブロックエディター](https://wordpress.org/documentation/category/block-editor/)や[ブロックの操作](https://wordpress.org/documentation/article/work-with-blocks/)に関するドキュメントがあります。 -## 正しいハンドブックを観ていますか ? +## 正しいハンドブックを見ていますか ? - - - - - - - - - - - - - - - -


@@ -314,6 +182,19 @@ Everything you need to know to [start contributing to the block editor](/docs/co ### 主な変更 +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) +- [The block in the Editor](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/) - 新規 +- [Markup representation of a block](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/markup-representation-block/) - 新規 +- [Tutorial: Build your first block](https://ja.wordpress.org/team/handbook/block-editor/getting-started/tutorial/) - 新規 +- [ブロックの作成 チュートリアル](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/) - ディレクトリ以下削除 [#56931](https://github.com/WordPress/gutenberg/pull/56931) +- [属性と編集可能フィールド](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/) - 削除 [#57120](https://github.com/WordPress/gutenberg/pull/57120) +- [ブロックサポート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-supports-in-static-blocks/) - 削除 [#57120](https://github.com/WordPress/gutenberg/pull/57120) +- [ダイナミックブロック内のブロックサポート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks/) - 削除 [#57120](https://github.com/WordPress/gutenberg/pull/57120) +- [WP-CLI を使用したブロックの生成](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/generate-blocks-with-wp-cli/) - 削除 [#57120](https://github.com/WordPress/gutenberg/pull/57120) +- [ブロックエディターでの JavaScript の使用方法](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/javascript/) - ディレクトリ以下削除 [#57166](https://github.com/WordPress/gutenberg/pull/57166) + 2023/12/22 - [ユーザーインターフェースの制限](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/) - 翻訳 - [エディターでのアセットのエンキュー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/enqueueing-assets-in-the-editor/) - 翻訳 @@ -424,84 +305,6 @@ Everything you need to know to [start contributing to the block editor](/docs/co - [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - タームの説明 fse [#51053](https://github.com/WordPress/gutenberg/pull/51053)、多数 color - heading [#49131](https://github.com/WordPress/gutenberg/pull/49131)、脚注 inserter [#52445](https://github.com/WordPress/gutenberg/pull/52445)、パターン reusable block -> pattern [#52010](https://github.com/WordPress/gutenberg/pull/52010)、整形済みテキスト spacing [#45196](https://github.com/WordPress/gutenberg/pull/45196) - [theme.json バージョン2](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/theme-json-reference/theme-json-living/) - typography writingMode [#50822](https://github.com/WordPress/gutenberg/pull/50822)、behaviors [#51156](https://github.com/WordPress/gutenberg/pull/51156) -2023/6/24 -- [パターン](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-patterns/) - source 追加 [#51672](https://github.com/WordPress/gutenberg/pull/51672) -- [サポート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/) - anchor ダイナミックブロックでは未サポート [#51288](https://github.com/WordPress/gutenberg/pull/51288) -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - 投稿の抜粋 -> 抜粋 [#50167](https://github.com/WordPress/gutenberg/pull/50167)、画像 lightbox [#51232](https://github.com/WordPress/gutenberg/pull/51232)、多数 anchor 削除 [#51288](https://github.com/WordPress/gutenberg/pull/51288)、多数 layout 追加 [#51434](https://github.com/WordPress/gutenberg/pull/51434)、再利用ブロック -> パターン、パターン -> パターンプレースホルダー [#51144](https://github.com/WordPress/gutenberg/pull/51144)、パターンプレースホルダー syncStatus 削除 [#51719](https://github.com/WordPress/gutenberg/pull/51719)、画像 aspectRatio、scale 追加 [#51545](https://github.com/WordPress/gutenberg/pull/51545)、脚注 追加 [#51201](https://github.com/WordPress/gutenberg/pull/51201) -- [Coding Guidelines](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/coding-guidelines/) - lock-unlock [#51322](https://github.com/WordPress/gutenberg/pull/51322) -- [React Native Integration Test Guide](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/react-native/integration-test-guide/) - waitfor -> findxxx [#46735](https://github.com/WordPress/gutenberg/pull/46735) - -2023/6/4 -- 多数 - apiVersion: 3 [#48286](https://github.com/WordPress/gutenberg/pull/48286) -- Block Grammer - 削除 -- Upcoming Projects & Roadmap - 削除 -- [Entities and Undo/Redo.](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/entities/) - 新規 -- [スタイルとスタイルシートの利用](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/applying-styles-with-stylesheets/) - iframe の注意 [#50091](https://github.com/WordPress/gutenberg/pull/50091)、iframe [#48286](https://github.com/WordPress/gutenberg/pull/48286) -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - カラム design に [#46048](https://github.com/WordPress/gutenberg/pull/46048)、parent、experimental 追加 [#48269](https://github.com/WordPress/gutenberg/pull/48269)、画像 behaviors [#49972](https://github.com/WordPress/gutenberg/pull/49972)、詳細 experimental 削除 [#50997](https://github.com/WordPress/gutenberg/pull/50997)、ページネーション showLabel [#50779](https://github.com/WordPress/gutenberg/pull/50779)、タイトル [#50147](https://github.com/WordPress/gutenberg/pull/50147)、投稿テンプレート blockGap、クエリーループ displayLayout 削除 [#49050](https://github.com/WordPress/gutenberg/pull/49050)、検索 buttonBehavior、isSearchFieldHidden [#50487](https://github.com/WordPress/gutenberg/pull/50487) -- [@wordpress/env](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/) - ライフサイクルスクリプト [#50570](https://github.com/WordPress/gutenberg/pull/50570)、run の整理 [#50559](https://github.com/WordPress/gutenberg/pull/50559)、ローカルパッケージの使用 [#50980](https://github.com/WordPress/gutenberg/pull/50980) - - -2023/05/23 -- [変換](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-transforms/) - ungroup 追加 [#50385](https://github.com/WordPress/gutenberg/pull/50385) -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - ログイン / ログアウト typography [#49160](https://github.com/WordPress/gutenberg/pull/49160)、パターン syncStatus [#50533](https://github.com/WordPress/gutenberg/pull/50533)、コード align (wide) [#50710](https://github.com/WordPress/gutenberg/pull/50710) -- [@wordpress/env](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/) - composer、phpunit、wp-cli、.htaccess [#50490](https://github.com/WordPress/gutenberg/pull/50490) - -2023/05/03 -- [トップ](https://ja.wordpress.org/team/handbook/block-editor/) - 全面改訂 -- [キーコンセプト](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/key-concepts/) - 全面改訂 [#49184](https://github.com/WordPress/gutenberg/pull/49184) -- [プラグイン用サイドバー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/plugin-sidebar-0/) - カスタムフィールド表示時の注意 [#49622](https://github.com/WordPress/gutenberg/pull/49622) -- [theme.json](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/) - variations 追加 [#49826](https://github.com/WordPress/gutenberg/pull/49826) -- [block.json のメタデータ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/) - editorStyle 削除 [#49393](https://github.com/WordPress/gutenberg/pull/49393) -- [サポート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/) - color.__experimentalDuotone -> filter.duotone [#49423](https://github.com/WordPress/gutenberg/pull/49423) -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - 所要時間 multiple: false の削除 [#49253](https://github.com/WordPress/gutenberg/pull/49253)、spacing 追加 [#49392](https://github.com/WordPress/gutenberg/pull/49392)、color 追加 [#49496](https://github.com/WordPress/gutenberg/pull/49496)、引用 html 削除 [#49426](https://github.com/WordPress/gutenberg/pull/49426)、投稿テンプレート full、wide 追加 [#49411](https://github.com/WordPress/gutenberg/pull/49411)、画像 duotone [#49423](https://github.com/WordPress/gutenberg/pull/49423)、詳細、詳細コンテンツ、詳細要約追加 [#45055](https://github.com/WordPress/gutenberg/pull/45055)、埋め込み spacing 追加 [#39384](https://github.com/WordPress/gutenberg/pull/39384)、グループ allowedBlocks 追加 [#49128](https://github.com/WordPress/gutenberg/pull/49128)、メディアとテキスト allowedBlocks 追加 [#49981](https://github.com/WordPress/gutenberg/pull/49981) - - [バージョン 2 (現在のリファレンス)](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/theme-json-reference/theme-json-living/) - customTemplates、templateParts、Pattern 追加 [#48250](https://github.com/WordPress/gutenberg/pull/48250) -- [@wordpress/env](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/) - --env-cwd 追加 [#49908](https://github.com/WordPress/gutenberg/pull/49908)、afterSetup 追加 [#50196](https://github.com/WordPress/gutenberg/pull/50196)、パーマリンクの変更 [#50251](https://github.com/WordPress/gutenberg/pull/50251) - -2023/03/25 -- [Gutenberg Release Process](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/release/) - NPMへの発行 [#46555](https://github.com/WordPress/gutenberg/pull/46555)、RCパッチ作成 [#47372](https://github.com/WordPress/gutenberg/pull/47372) -- [End-to-End Testing](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/testing-overview/e2e/) - 新規 -- [Migration guide](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/testing-overview/e2e/migration/) - 新規 -- [Overusing snapshots](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/testing-overview/e2e/overusing-snapshots/) - 新規 -- [よくある質問](https://ja.wordpress.org/team/handbook/block-editor/explanations/faq/) - IE削除 [#46296](https://github.com/WordPress/gutenberg/pull/46296)、複数選択削除のショートカット追加 [#44968](https://github.com/WordPress/gutenberg/pull/44968) -- [スタイルとスタイルシートの利用](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/applying-styles-with-stylesheets/) - 依存関係を追加 [#45604](https://github.com/WordPress/gutenberg/pull/45604) -- [ネストしたブロック: InnerBlocks の使用](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/) - react フックの使用 [#46407](https://github.com/WordPress/gutenberg/pull/46407) -- [theme.json](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/) - typography に fluid 追加 [#45705](https://github.com/WordPress/gutenberg/pull/45705)、dimensions.minHeight 追加 [#47475](https://github.com/WordPress/gutenberg/pull/47475)、typography に textColumns 追加 [#33587](https://github.com/WordPress/gutenberg/pull/33587)、appearanceTools に position 追加 [#48763](https://github.com/WordPress/gutenberg/pull/48763)、pseudo-selectors に :active、:link、:any-link 追加 [#49202](https://github.com/WordPress/gutenberg/pull/49202) -- [非推奨プロセス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-deprecation/) - omit 削除 [#46674](https://github.com/WordPress/gutenberg/pull/46674)、isEligible に追加 [#48815](https://github.com/WordPress/gutenberg/pull/48815) -- [block.json のメタデータ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/) - Selectors、Editor Selectors 追加 [#46496](https://github.com/WordPress/gutenberg/pull/46496) -- [登録](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-registration/) - ancestor 追加 [#45832](https://github.com/WordPress/gutenberg/pull/45832) -- [サポート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/) - リンクの色の修正 [#46405](https://github.com/WordPress/gutenberg/pull/46405)、dimensions、position [#48057](https://github.com/WordPress/gutenberg/pull/48057) -- [パターン](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-patterns/) - templateType 追加 [#45814](https://github.com/WordPress/gutenberg/pull/45814) -- [Selectors](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-selectors/) - 新規 -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - 複数ブロック anchor 追加 [#44771](https://github.com/WordPress/gutenberg/pull/44771)、ボタン align 削除 [#45663](https://github.com/WordPress/gutenberg/pull/45663)、shadow 追加 [#46502]、html 削除 [#49097](https://github.com/WordPress/gutenberg/pull/49097)、(https://github.com/WordPress/gutenberg/pull/46502)、最近の投稿 color 追加 [#41874](https://github.com/WordPress/gutenberg/pull/41874)、固定ページリスト parentPageID 追加 [#45967](https://github.com/WordPress/gutenberg/pull/45967)、typography 追加 [#43316](https://github.com/WordPress/gutenberg/pull/43316)、isNested 追加 [#46414](https://github.com/WordPress/gutenberg/pull/46414)、ページリスト項目 追加 [#45776](https://github.com/WordPress/gutenberg/pull/45776)、投稿テンプレート color 追加 [#46147](https://github.com/WordPress/gutenberg/pull/46147)、クエリーループ color 削除 [#46147](https://github.com/WordPress/gutenberg/pull/46147)、グループ position 追加 [#46142](https://github.com/WordPress/gutenberg/pull/46142)、カバー tagName 追加 [#46969]、blockGap 追加 [#47952](https://github.com/WordPress/gutenberg/pull/47952)、text color 追加 [#41572](https://github.com/WordPress/gutenberg/pull/41572)、(https://github.com/WordPress/gutenberg/pull/46969)、ファイル color 追加 [#41870](https://github.com/WordPress/gutenberg/pull/41870)、投稿の抜粋 excerptLength 追加 [#44964](https://github.com/WordPress/gutenberg/pull/44964)、投稿のアイキャッチ画像 aspectRatio 追加 [#47854](https://github.com/WordPress/gutenberg/pull/47854)、最新のコメント typography 追加 [#43310](https://github.com/WordPress/gutenberg/pull/43310)、所要時間 追加 [#43403](https://github.com/WordPress/gutenberg/pull/43403)、typography 追加 [#49257](https://github.com/WordPress/gutenberg/pull/49257)、カラム templateLock 追加 [#49132](https://github.com/WordPress/gutenberg/pull/49132)、 -- [Available Styles Options](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/theme-json-reference/styles-versions/) - 新規 -- [バージョン 2 (現在のリファレンス)](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/theme-json-reference/theme-json-living/) - CSS 追加 [#46255](https://github.com/WordPress/gutenberg/pull/46255)、fluid undefined/false [#42489](https://github.com/WordPress/gutenberg/pull/42489)、border radius [#46375](https://github.com/WordPress/gutenberg/pull/46375)、Object タイプ [#45897](https://github.com/WordPress/gutenberg/pull/45897)、shadow 追加 [#46813](https://github.com/WordPress/gutenberg/pull/46813)、[#47272](https://github.com/WordPress/gutenberg/pull/47272)、[#49204](https://github.com/WordPress/gutenberg/pull/49204)、dimensions 追加 [#47475](https://github.com/WordPress/gutenberg/pull/47475)、position 追加 [#48057](https://github.com/WordPress/gutenberg/pull/48057)、textColumns 追加 [#33587](https://github.com/WordPress/gutenberg/pull/33587)、position と dimensions 追加 [#48948] -- [@wordpress/create-block](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-create-block/) - 使用可能なコマンドの整理 [#45636](https://github.com/WordPress/gutenberg/pull/45636)、全体的な更新 [#45676](https://github.com/WordPress/gutenberg/pull/45676) -- [@wordpress/env](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/) - データベース認証情報 [#47940](https://github.com/WordPress/gutenberg/pull/47940) - -2022/11/4 -- [ページリストの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/2-building-a-list-of-pages/) - サンプルの修正 [#43633](https://github.com/WordPress/gutenberg/pull/43633) -- [書式ツールバー API](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/format-api/) - ステップ5 ドロップダウン外へのボタンの追加 [#43581](https://github.com/WordPress/gutenberg/pull/43581) -- [theme.json](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/) - spacing プリセット [#43349](https://github.com/WordPress/gutenberg/pull/43349)、appearance-tools [#43337](https://github.com/WordPress/gutenberg/pull/43337) -- [テーマサポート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-support/) - 外観ツール [#43337](https://github.com/WordPress/gutenberg/pull/43337)、ブロックテンプレートパーツ [#44009](https://github.com/WordPress/gutenberg/pull/44009) -- [block.json のメタデータ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/) - render の追加 [#42430](https://github.com/WordPress/gutenberg/pull/42430)、複数スクリプトのサポート [#44155](https://github.com/WordPress/gutenberg/pull/44155)、アセットに渡せるものの説明の追加 [#44199](https://github.com/WordPress/gutenberg/pull/44199) -- [コアブロックリファレンス](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/core-blocks/) - カラム typography 追加 [#43253](https://github.com/WordPress/gutenberg/pull/43253)、[#43252](https://github.com/WordPress/gutenberg/pull/43252)、カテゴリー一覧 typography 追加 [#43254](https://github.com/WordPress/gutenberg/pull/43254)、アーカイブ spacing、typography 追加 [#43350](https://github.com/WordPress/gutenberg/pull/43350)、[#43935](https://github.com/WordPress/gutenberg/pull/43935)、音声 spacing 追加 [#43351](https://github.com/WordPress/gutenberg/pull/43351)、ページ番号 typography 追加 [#43289](https://github.com/WordPress/gutenberg/pull/43289)、ページネーション typography 追加 [#43287](https://github.com/WordPress/gutenberg/pull/43287)、[#43552](https://github.com/WordPress/gutenberg/pull/43552)、カバー typography 追加 [#43298](https://github.com/WordPress/gutenberg/pull/43298)、コメントテンプレート typography、spacing 追加 [#43266](https://github.com/WordPress/gutenberg/pull/43266)、[#45101](https://github.com/WordPress/gutenberg/pull/45101)、ギャラリー color、margin、padding 追加 [#43294](https://github.com/WordPress/gutenberg/pull/43294)、[#43965](https://github.com/WordPress/gutenberg/pull/43965)、目次 color、spacing、typography 追加 [#43363](https://github.com/WordPress/gutenberg/pull/43363)、[#43368](https://github.com/WordPress/gutenberg/pull/43368)、[#43509](https://github.com/WordPress/gutenberg/pull/43509)、スペーサー spacing 追加 [#43366](https://github.com/WordPress/gutenberg/pull/43366)、クエリータイトル showPrefix、padding 追加 [#42594](https://github.com/WordPress/gutenberg/pull/42594)、[#43458](https://github.com/WordPress/gutenberg/pull/43458)、コメント typography、spacing 追加 [#43286](https://github.com/WordPress/gutenberg/pull/43286)、[#45102](https://github.com/WordPress/gutenberg/pull/45102)、投稿テンプレート typography 追加 [#43342](https://github.com/WordPress/gutenberg/pull/43342)、テーブル spacing 追加 [#43370](https://github.com/WordPress/gutenberg/pull/43370)、タームの説明 spacing 追加 [#43372](https://github.com/WordPress/gutenberg/pull/43372)、タグクラウド spacing、typography 追加 [#43367](https://github.com/WordPress/gutenberg/pull/43367)、[#43452](https://github.com/WordPress/gutenberg/pull/43452)、メディアとテキスト typography、spacing 追加 [#43314](https://github.com/WordPress/gutenberg/pull/43314)、 [#43456](https://github.com/WordPress/gutenberg/pull/43456)、段落 spacing 追加 [#43455](https://github.com/WordPress/gutenberg/pull/43455)、見出し padding 追加 [#43454]、(https://github.com/WordPress/gutenberg/pull/43454)、 投稿日 spacing 追加 [#43406](https://github.com/WordPress/gutenberg/pull/43406)、動画 spacing 追加 [#43365](https://github.com/WordPress/gutenberg/pull/43365)、詩 margin 追加 [#43461](https://github.com/WordPress/gutenberg/pull/43461)、区切り enableContrastChecker 無効 [#43357](https://github.com/WordPress/gutenberg/pull/43357)、投稿タイトル padding 追加 [#43457](https://github.com/WordPress/gutenberg/pull/43457)、ソーシャルアイコン color、padding、rel 追加 [#43293](https://github.com/WordPress/gutenberg/pull/43293)、[#43885](https://github.com/WordPress/gutenberg/pull/43885)、[#45469](https://github.com/WordPress/gutenberg/pull/45469)、リスト spacing 追加 [#43402](https://github.com/WordPress/gutenberg/pull/43402)、結果なし typography 追加 [#43551](https://github.com/WordPress/gutenberg/pull/43551)、ホームへのリンク typography 追加 [#43307](https://github.com/WordPress/gutenberg/pull/43307)、最新の投稿 typography、spacing 追加 [#43540](https://github.com/WordPress/gutenberg/pull/43540)、[#45110](https://github.com/WordPress/gutenberg/pull/45110)、ペジネーション typography 追加 [#43552](https://github.com/WordPress/gutenberg/pull/43552)、コメント返信リンク spacing 追加 [#43658](https://github.com/WordPress/gutenberg/pull/43658)、コメント日付 spacing 追加 [#43656](https://github.com/WordPress/gutenberg/pull/43656)、コメント編集リンク spacing 追加 [#43657](https://github.com/WordPress/gutenberg/pull/43657)、ナビゲーション icon、templateLock 追加、anchor 削除 [#43654](https://github.com/WordPress/gutenberg/pull/43654)、 [#44739](https://github.com/WordPress/gutenberg/pull/44739)、[#44721](https://github.com/WordPress/gutenberg/pull/44721)、投稿コンテンツ typography、dimensions 追加 [#43339](https://github.com/WordPress/gutenberg/pull/43339)、[#45300](https://github.com/WordPress/gutenberg/pull/45300)、アバター padding 追加 [#43519](https://github.com/WordPress/gutenberg/pull/43519)、カテゴリー spacing 追加 [#43647](https://github.com/WordPress/gutenberg/pull/43647)、サイトロゴ spacing 追加 [#43520](https://github.com/WordPress/gutenberg/pull/43520)、ボタン typography 追加 [#43934](https://github.com/WordPress/gutenberg/pull/43934)、カレンダー typography、color 追加 [#43969](https://github.com/WordPress/gutenberg/pull/43969)、[#42029](https://github.com/WordPress/gutenberg/pull/42029)、検索 typography 追加 [#43499](https://github.com/WordPress/gutenberg/pull/43499)、カスタムリンク typography 追加 [#44005](https://github.com/WordPress/gutenberg/pull/44005)、投稿のアイキャッチ画像 gradient overlay 等追加 [#43838](https://github.com/WordPress/gutenberg/pull/43838)、クエリーループ namespace 追加 [#43632](https://github.com/WordPress/gutenberg/pull/43632)、投稿ナビゲーションリンク arrow 追加 [#40684](https://github.com/WordPress/gutenberg/pull/40684)、コメントの前ページ、ページ番号、次ページの名前変更 [#44287](https://github.com/WordPress/gutenberg/pull/44287)、コメントのページ番号 color、spacing 追加 [#43902](https://github.com/WordPress/gutenberg/pull/43902)、[#45150](https://github.com/WordPress/gutenberg/pull/45150)、投稿タグ spacing 追加 [#43646](https://github.com/WordPress/gutenberg/pull/43646)、投稿者 isLink, linkTarget 追加 [#42670](https://github.com/WordPress/gutenberg/pull/42670)、固定ページリスト __unstableMaxPages 削除 [#44415](https://github.com/WordPress/gutenberg/pull/44415)、リスト項目 typography 追加 [#43312](https://github.com/WordPress/gutenberg/pull/43312)、投稿コメントリンク spacing 追加 [#45184](https://github.com/WordPress/gutenberg/pull/45184)、投稿コメントフォーム spacing 追加 [#45091](https://github.com/WordPress/gutenberg/pull/45091)、最新のコメント spacing 追加 [#45110](https://github.com/WordPress/gutenberg/pull/45110)、グループ dimensions 追加 [#45300](https://github.com/WordPress/gutenberg/pull/45300) -- [theme.json](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/) - fluid 追加 [#39529](https://github.com/WordPress/gutenberg/pull/39529)、useRootPaddingAwareAlignments 追加 [#43463](https://github.com/WordPress/gutenberg/pull/43463)、shadow 追加 [#41972](https://github.com/WordPress/gutenberg/pull/41972)、outline 追加 [#43526](https://github.com/WordPress/gutenberg/pull/43526)、border 変更 [#44252](https://github.com/WordPress/gutenberg/pull/44252) -- [@wordpress/create-block](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-create-block/) - --no-plugin 追加 [#41642](https://github.com/WordPress/gutenberg/pull/41642)、--variant 追加 [#41289](https://github.com/WordPress/gutenberg/pull/41289) -- [外部プロジェクトテンプレート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-create-block/packages-create-block-external-template/) - 新規作成 -[React Native Integration Test Guide](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/react-native/integration-test-guide/) - getByA11yLabel -> getByA11yText [#45454](https://github.com/WordPress/gutenberg/pull/45454) -- [Testing Overview](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/testing-overview/) - .firstChild 削除 [#45419](https://github.com/WordPress/gutenberg/pull/45419) -[Documentation Contributions](https://ja.wordpress.org/team/handbook/block-editor/contributors/document/) - Documenting Packages 追加 [#43750](https://github.com/WordPress/gutenberg/pull/43750) -[Styles](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/styles/) - Layout 追加 [#42619](https://github.com/WordPress/gutenberg/pull/42619) -- [執筆エクスペリエンス](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/author-experience/) - useBlockProps 追加 [#44607](https://github.com/WordPress/gutenberg/pull/44607) -- [ブロックコントロール: ブロックツールバーと設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/) - source: 'children' -> 'html' [#44265](https://github.com/WordPress/gutenberg/pull/44265) -- [ブロックサポート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-supports-in-static-blocks/) - source: 'children' -> 'html' [#44265](https://github.com/WordPress/gutenberg/pull/44265) -- [Extending the Query Loop Block](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/) - 新規 -- [属性と編集可能フィールド](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/) - source: 'children' -> 'html' [#44265](https://github.com/WordPress/gutenberg/pull/44265) -- [Curating the Editor Experience](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/) - コンテンツのみ編集 [#44908](https://github.com/WordPress/gutenberg/pull/44908) -- [Propagating updates for block types](https://developer.wordpress.org/block-editor/how-to-guides/propagating-updates/) - 新規 -- [サポート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/) - ariaLabel 追加 [#45006](https://github.com/WordPress/gutenberg/pull/45006) -- [ブロックテンプレート](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-templates/) - template_lock=contentOnly 追加 [#43977](https://github.com/WordPress/gutenberg/pull/43977)、[#44131](https://github.com/WordPress/gutenberg/pull/44131) - [以前の変更履歴](https://ja.wordpress.org/team/handbook/block-editor/handbook/block-editor-changelog/) [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/README.md) diff --git a/docs/contributors/README.md b/docs/contributors/README.md index 3131d32dc961b0..50310ca3d3b8e2 100644 --- a/docs/contributors/README.md +++ b/docs/contributors/README.md @@ -44,7 +44,7 @@ Find the section below based on what you are looking to contribute: - **国際化 ?** [ローカライズと翻訳セクション](https://developer.wordpress.org/block-editor/contributors/localizing/) へ ### リポジトリー管理 diff --git a/docs/contributors/accessibility-testing.md b/docs/contributors/accessibility-testing.md index b7c6466ddbd87b..271b89ba5e23d0 100644 --- a/docs/contributors/accessibility-testing.md +++ b/docs/contributors/accessibility-testing.md @@ -2,11 +2,11 @@ This is a guide on how to test accessibility on Gutenberg. This is a living document that can be improved over time with new approaches and techniques. -## Getting Started +## Getting started Make sure you have set up your local environment following the instructions on [Getting Started](/docs/contributors/code/getting-started-with-code-contribution.md). -## Keyboard Testing +## Keyboard testing In addition to mouse, make sure the interface is fully accessible for keyboard-only users. Try to interact with your changes using only the keyboard: @@ -18,7 +18,7 @@ If the elements can be focused using arrow keys, but not Tab or If the interaction is complex or confusing to you, consider that it's also going to impact keyboard-only users. -## Screen Reader Testing +## Screen reader testing According to the [WebAIM: Screen Reader User Survey #8 Results](https://webaim.org/projects/screenreadersurvey8/#usage), these are the most common screen reader and browser combinations: diff --git a/docs/contributors/code/README.md b/docs/contributors/code/README.md index 05a702670eebba..7f065169211d35 100644 --- a/docs/contributors/code/README.md +++ b/docs/contributors/code/README.md @@ -39,7 +39,7 @@ Browse [the issues list](https://github.com/wordpress/gutenberg/issues) to find [issue リスト](https://github.com/wordpress/gutenberg/issues)を検索して、取りかかれそうな issue を探してください。[Good first issue](https://github.com/wordpress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22) ラベルや [Good first review](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+label%3A%22Good+First+Review%22) ラベルが良い出発点になるでしょう。 ## コントリビューターリソース diff --git a/docs/contributors/code/backward-compatibility.md b/docs/contributors/code/backward-compatibility.md index 827db739b0a100..9dbb045d10eba2 100644 --- a/docs/contributors/code/backward-compatibility.md +++ b/docs/contributors/code/backward-compatibility.md @@ -132,9 +132,9 @@ deprecated( 'wp.components.ClipboardButton', { ``` -## Dev Notes (開発ノート) +## Dev notes (開発ノート) -### Dev Notes ワークフロー +### Dev note ワークフロー Note the use of quotes when defining a set of string literals. As in the [JavaScript Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/), single quotes should be used when assigning a string literal either as the type or as a [default function parameter](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/coding-guidelines/#nullable-undefined-and-void-types), or when [specifying the path](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/coding-guidelines/#importing-and-exporting-types) of an imported type. -### Importing and Exporting Types +### Importing and exporting types Use the [TypeScript `import` function](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#import-types) to import type declarations from other files or third-party dependencies. @@ -602,7 +602,7 @@ When considering which types should be made available from a WordPress package, In this snippet, the `@typedef` will support the usage of the previous example's `import('@wordpress/data')`. -#### External Dependencies +#### External dependencies Many third-party dependencies will distribute their own TypeScript typings. For these, the `import` semantics should "just work". @@ -612,7 +612,7 @@ If you use a [TypeScript integration](https://github.com/Microsoft/TypeScript/wi For packages which do not distribute their own TypeScript types, you are welcomed to install and use the [DefinitelyTyped](http://definitelytyped.org/) community-maintained types definitions, if one exists. -### Generic Types +### Generic types When documenting a generic type such as `Object`, `Function`, `Promise`, etc., always include details about the expected record types. @@ -662,7 +662,7 @@ Similar to the "Custom Types" advice concerning type unions and with literal val const BREAKPOINTS = { huge: 1440 /* , ... */ }; ``` -### Nullable, Undefined, and Void Types +### Nullable, undefined, and void types You can express a nullable type using a leading `?`. Use the nullable form of a type only if you're describing either the type or an explicit `null` value. Do not use the nullable form as an indicator of an optional parameter. @@ -734,7 +734,7 @@ When documenting a [function type](https://github.com/WordPress/gutenberg/blob/a */ ``` -### Documenting Examples +### Documenting examples Because the documentation generated using the `@wordpress/docgen` tool will include `@example` tags if they are defined, it is considered a best practice to include usage examples for functions and components. This is especially important for documented members of a package's public API. @@ -759,7 +759,7 @@ When documenting an example, use the markdown \`\`\` 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/) を参照してください。
+- [推奨] 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/) を参照してください。
**注意**: Windows 10 Home Edition に Docker をインストールするには、[install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/) に従ってください。 - - GitHub CLI: - 必須ではありませんが、[GitHub CLI](https://cli.github.com/) はローカルにプルリクエストをチェックアウトする際に非常に便利です。Gutenberg リポジトリからも、フォークされたリポジトリからも同様です。プルリクエストのコードレビューやテストに要する時間を大幅に短縮できます。 +- GitHub CLI + 必須ではありませんが、[GitHub CLI](https://cli.github.com/) はローカルにプルリクエストをチェックアウトする際に非常に便利です。Gutenberg リポジトリからも、フォークされたリポジトリからも同様です。プルリクエストのコードレビューやテストに要する時間を大幅に短縮できます。 -### Docker と wp-env +### Docker と wp-env の利用 -### Local または MAMP +### Local または MAMP の利用 -#### WP-CLI の使用 +#### WP-CLI の利用 -### リモートサーバー +### リモートサーバー上にて ## 開発者向けのツール diff --git a/docs/contributors/code/git-workflow.md b/docs/contributors/code/git-workflow.md index 1ae082aeb0ad3c..66340991fa1ef0 100644 --- a/docs/contributors/code/git-workflow.md +++ b/docs/contributors/code/git-workflow.md @@ -160,7 +160,7 @@ That’s it! Once approved and merged, your change will be incorporated into the これで完了です。承認されてマージされると、変更がメインのリポジトリに組み込まれます。 🎉 ## ブランチの名前付け @@ -193,7 +193,7 @@ For example, `add/gallery-block` means you're working on adding a new gallery bl 例えば、`add/gallery-block` は、新しいギャラリーブロックの追加を意味します。 ## ブランチを最新に保つ @@ -229,7 +229,7 @@ git push --force-with-lease origin your-branch-name ``` ## フォークを最新に保つ @@ -283,7 +283,7 @@ The above commands will update your `trunk` branch from _upstream_. To update an ## その他 ### Git 考古学 diff --git a/docs/contributors/code/react-native/getting-started-react-native.md b/docs/contributors/code/react-native/getting-started-react-native.md index 18553d560debd1..f3113159397e7e 100644 --- a/docs/contributors/code/react-native/getting-started-react-native.md +++ b/docs/contributors/code/react-native/getting-started-react-native.md @@ -55,7 +55,7 @@ npm run native ios which will attempt to open your app in the iOS Simulator if you're on a Mac and have it installed. -### Running on Other iOS Device Simulators +### Running on other iOS device simulators To compile and run the app using a different device simulator, use the following, noting the double sets of `--` to pass the simulator option down to the `react-native` CLI. @@ -71,7 +71,7 @@ npm run native ios -- -- --simulator="iPhone Xs Max" To see a list of all of your available iOS devices, use `xcrun simctl list devices`. -### Customizing the Demo Editor +### Customizing the demo Editor By default, the Demo editor renders most of the supported core blocks. This is helpful to showcase the editor's capabilities, but can be distracting when focusing on a specific block or feature. One can customize the editor's initial state by leveraging the `native.block_editor_props` hook in a `packages/react-native-editor/src/setup-local.js` file. @@ -119,7 +119,7 @@ When you first open the project in Visual Studio, you will be prompted to instal One of the extensions we are using is the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native). This allows you to run the packager from VSCode or launch the application on iOS or Android. It also adds some debug configurations so you can set breakpoints and debug the application directly from VSCode. Take a look at the [extension documentation](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native) for more details. -## Unit Tests +## Unit tests Use the following command to run the test suite: @@ -137,11 +137,11 @@ npm run test:native:debug Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "Remote Target" section). While testing/developing, feel free to sprinkle `debugger` statements anywhere in the code that you'd like the debugger to break. -## Writing and Running Unit Tests +## Writing and running unit tests This project is set up to use [jest](https://jestjs.io/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/src/test/api-fetch-setup.test.js). The [jest documentation](https://jestjs.io/docs/getting-started) is also a wonderful resource, as is the [React Native testing tutorial](https://jestjs.io/docs/tutorial-react-native). -## End-to-End Tests +## End-to-end tests In addition to unit tests, the Mobile Gutenberg (MG) project relies upon end-to-end (E2E) tests to automate testing critical flows in an environment similar to that of an end user. We generally prefer unit tests due to their speed and ease of maintenance. However, assertions that require OS-level features (e.g. complex gestures, text selection) or visual regression testing (e.g. dark mode, contrast levels) we use E2E tests. diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index ae9f5f926e4731..747bef190a2e12 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -10,37 +10,6 @@ Before you begin, there are some requirements that must be met in order to succe Similar requirements apply to releasing WordPress's [npm packages](https://developer.wordpress.org/block-editor/contributors/code/release/#packages-releases-to-npm-and-wordpress-core-updates). -**Table of contents** - -- **[Gutenberg plugin releases](#gutenberg-plugin-releases)** - - [Release schedule](#release-schedule) - - [Release management](#release-management) - - [Preparing a release](#preparing-a-release) - - [Organizing and labeling milestone PRs](#organizing-and-labeling-milestone-prs) - - [Running the release workflow](#running-the-release-workflow) - - [Publishing the @wordpress packages to NPM](#publishing-the-wordpress-packages-to-npm) - - [Viewing the release draft](#viewing-the-release-draft) - - [Curating the release changelog](#curating-the-release-changelog) - - [Creating release candidate patches (cherry-picking)](#creating-release-candidate-patches-cherry-picking) - - [Automated cherry-picking](#automated-cherry-picking) - - [Manual cherry-picking](#manual-cherry-picking) - - [Publishing the release](#publishing-the-release) - - [Troubleshooting the release](#troubleshooting-the-release) - - [Documenting the release](#documenting-the-release) - - [Selecting the release highlights](#selecting-the-release-highlights) - - [Requesting release assets](#requesting-release-assets) - - [Drafting the release post](#drafting-the-release-post) - - [Publishing the release post](#publishing-the-release-post) - - [Creating minor releases](#creating-minor-releases) - - [Updating the release branch](#updating-the-release-branch) - - [Running the minor release](#running-the-minor-release) - - [Creating a minor release for previous stable releases](#creating-a-minor-release-for-previous-stable-releases) - - [Troubleshooting](#troubleshooting) -- [Packages releases to NPM and WordPress Core updates](#packages-releases-to-npm-and-wordpress-core-updates) - - [Synchronizing the Gutenberg plugin](#synchronizing-the-gutenberg-plugin) - - [WordPress releases](#wordpress-releases) - - [Development releases](#development-releases) - ## Gutenberg plugin releases The first step in releasing a stable version of the Gutenberg plugin is to [create an issue](https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&projects=&template=New_release.md) in the Gutenberg repository. The issue template is called "Gutenberg Release," and it contains a checklist for the complete release process, from release candidate to changelog curation to cherry-picking, stable release, and release post. The issue for [Gutenberg 15.7](https://github.com/WordPress/gutenberg/issues/50092) is a good example. diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md index f48d4ad5f84246..cbabd1d5541e28 100644 --- a/docs/contributors/code/testing-overview.md +++ b/docs/contributors/code/testing-overview.md @@ -17,7 +17,7 @@ When writing tests consider the following: - Does the test test what we think it is testing? Or are we introducing false positives/negatives? - Is it readable? Will other contributors be able to understand how our code behaves by looking at its corresponding test? -## JavaScript Testing +## JavaScript testing Tests for JavaScript use [Jest](https://jestjs.io/) as the test runner and its API for [globals](https://jestjs.io/docs/en/api.html) (`describe`, `test`, `beforeEach` and so on) [assertions](https://jestjs.io/docs/en/expect.html), [mocks](https://jestjs.io/docs/en/mock-functions.html), [spies](https://jestjs.io/docs/en/jest-object.html#jestspyonobject-methodname) and [mock functions](https://jestjs.io/docs/en/mock-function-api.html). If needed, you can also use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for React component testing. @@ -90,7 +90,7 @@ describe( 'CheckboxWithLabel', () => { } ); ``` -### Setup and Teardown methods +### Setup and teardown methods The Jest API includes some nifty [setup and teardown methods](https://jestjs.io/docs/en/setup-teardown.html) that allow you to perform tasks _before_ and _after_ each or all of your tests, or tests within a specific `describe` block. @@ -507,7 +507,7 @@ Contributors to Gutenberg will note that PRs include continuous integration E2E There is an ongoing effort to add integration tests to the native mobile project using the [`react-native-testing-library`](https://testing-library.com/docs/react-native-testing-library/intro/) library. A guide to writing integration tests can be found [here](/docs/contributors/code/react-native/integration-test-guide.md). -## End-to-end Testing +## End-to-end testing Most existing End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner. @@ -559,7 +559,7 @@ Then to run the tests, specify the base URL, username, and passwords for your si WP_BASE_URL=http://wp.test npm run test:e2e -- --wordpress-username=admin --wordpress-password=password ``` -### Scenario Testing +### Scenario testing If you find that end-to-end tests pass when run locally, but fail in GitHub Actions, you may be able to isolate a CPU- or network-bound race condition by simulating a slow CPU or network: @@ -587,15 +587,15 @@ OFFLINE=true npm run test:e2e See [Chrome docs: emulateNetworkConditions](https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions) -### Core Block Testing +### Core block testing Every core block is required to have at least one set of fixture files for its main save function and one for each deprecation. These fixtures test the parsing and serialization of the block. See [the integration tests fixtures readme](https://github.com/wordpress/gutenberg/blob/HEAD/test/integration/fixtures/blocks/README.md) for more information and instructions. -### Flaky Tests +### Flaky tests A test is considered to be **flaky** when it can pass and fail across multiple retry attempts without any code changes. We auto retry failed tests at most **twice** on CI to detect and report them to GitHub issues automatically under the [`[Type] Flaky Test`](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22%5BType%5D+Flaky+Test%22) label via [`report-flaky-tests`](https://github.com/WordPress/gutenberg/tree/trunk/packages/report-flaky-tests) GitHub action. Note that a test that failed three times in a row is not counted as a flaky test and will not be reported to an issue. -## PHP Testing +## PHP testing Tests for PHP use [PHPUnit](https://phpunit.de/) as the testing framework. If you're using the built-in [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment), you can run the PHP tests locally using this command: @@ -620,7 +620,7 @@ To run unit tests only, without the linter, use `npm run test:unit:php` instead. [snapshot testing]: https://jestjs.io/docs/en/snapshot-testing.html [update snapshots]: https://jestjs.io/docs/en/snapshot-testing.html#updating-snapshots -## Performance Testing +## Performance testing To ensure that the editor stays performant as we add features, we monitor the impact pull requests and releases can have on some key metrics: diff --git a/docs/contributors/design/README.md b/docs/contributors/design/README.md index 5e36283065216e..5c812fb5395a09 100644 --- a/docs/contributors/design/README.md +++ b/docs/contributors/design/README.md @@ -24,7 +24,7 @@ WordPress デザインチームからのアナウンス、製品ゴール、議 --> ## どうやってデザイナーがコントリビューションできるか? diff --git a/docs/contributors/design/the-block.md b/docs/contributors/design/the-block.md index c3fe3c3945f8f4..d5ef094a75007f 100644 --- a/docs/contributors/design/the-block.md +++ b/docs/contributors/design/the-block.md @@ -11,7 +11,7 @@ So, for example, a user can add an image, write its caption, change its width an - Users only need to learn one interface — the block — to add and edit everything on their site. Users shouldn’t have to write shortcodes, custom HTML, or understand hidden mechanisms to embed content. - Gutenberg makes core features more discoverable, reducing hard-to-find “Mystery meat.” WordPress supports a large number of blocks and 30+ embeds. Let’s increase their visibility. -## Building Blocks +## Building blocks What does this mean for designers and developers? The block structure plus the principle of direct manipulation mean thinking differently about how to design and develop WordPress components. Let’s take another look at the architecture of a block: diff --git a/docs/contributors/documentation/README.md b/docs/contributors/documentation/README.md index 17b91b14376b75..aaef64aa5e1a97 100644 --- a/docs/contributors/documentation/README.md +++ b/docs/contributors/documentation/README.md @@ -64,7 +64,7 @@ To add a new document requires a working JavaScript development environment to b If you forget to run, `npm run docs:build` your PR will fail the static analysis check, since the `manifest.json` file is an uncommitted local change that must be committed. -### Documenting Packages +### Documenting packages Package documentation is generated automatically by the documentation tool by pulling the contents of the README.md file located in the root of the package. Sometimes however, it is preferable to split the contents of the README out into smaller, easier to read portions. diff --git a/docs/contributors/repository-management.md b/docs/contributors/repository-management.md index 585661a27844c5..52e2d0810e26c7 100644 --- a/docs/contributors/repository-management.md +++ b/docs/contributors/repository-management.md @@ -67,7 +67,7 @@ Here are some milestones you might see: - [X.Y (Gutenberg)](https://github.com/WordPress/gutenberg/milestone/85): PRs targeted for the Gutenberg Plugin X.Y release. - [Future](https://github.com/WordPress/gutenberg/milestone/35): this is something that is confirmed by everyone as a good thing but doesn’t fall into other criteria. -### Triaging Issues +### Triaging issues To keep the issue list healthy, it needs to be triaged regularly. _Triage_ is the practice of reviewing existing issues to make sure they’re relevant, actionable, and have all the information they need. @@ -75,7 +75,7 @@ Anyone can help triage, although you’ll need contributor permission on the Gut See the [Triage Contributors guide](/docs/contributors/triage.md) for details. -## Pull Requests +## Pull requests Gutenberg follows a feature branch pull request workflow for all code and documentation changes. At a high-level, the process looks like this: @@ -98,7 +98,7 @@ Along with this process, there are a few important points to mention: - To make it far easier to merge your code, each pull request should only contain one conceptual change. Keeping contributions atomic keeps the pull request discussion focused on one topic and makes it possible to approve changes on a case-by-case basis. - Separate pull requests can address different items or todos from their linked issue, there’s no need for a single pull request to cover a single issue if the issue is non-trivial. -### Code Review +### Code review Every pull request goes through a manual code review, in addition to automated tests. The objectives for the code review are best thought of as: @@ -118,7 +118,7 @@ If you are not yet comfortable leaving a full review, try commenting on a PR. Qu If you struggle with getting a review, see: [How To Get Your Pull Request Reviewed?](/docs/contributors/code/how-to-get-your-pull-request-reviewed.md) -### Design Review +### Design review If your pull request impacts the design/UI, you need to label appropriately to alert design. To request a design review, add the [Needs Design Feedback](https://github.com/WordPress/gutenberg/labels/Needs%20Design%20Feedback) label to your PR. If there are any PRs that require an update to the design/UI, please use the [Figma Library Update](https://github.com/WordPress/gutenberg/labels/Figma%20Library%20Update) label. @@ -128,7 +128,7 @@ As a guide, changes that should be reviewed: - Anything that changes something visually. - If you just want design feedback on an idea or exploration. -### Merging Pull Requests +### Merging pull requests A pull request can generally be merged once it is: @@ -146,7 +146,7 @@ All members of the WordPress organization on GitHub have the ability to review a Most pull requests will be automatically assigned a release milestone, but please make sure your merged pull request was assigned one. Doing so creates the historical legacy of what code landed when, and makes it possible for all project contributors (even non-technical ones) to access this information. -### Closing Pull Requests +### Closing pull requests Sometimes, a pull request may not be mergeable, no matter how much additional effort is applied to it (e.g. out of scope). In these cases, it’s best to communicate with the contributor graciously while describing why the pull request was closed, this encourages productive future involvement. diff --git a/docs/contributors/triage.md b/docs/contributors/triage.md index d4acbc3983deaa..7ffc444ab4eaa5 100644 --- a/docs/contributors/triage.md +++ b/docs/contributors/triage.md @@ -48,7 +48,7 @@ When triaging, either one of the lists above or issues in general, work through - Check if the issue is missing some detail and see if you can fill in those details. For instance, if a bug report is missing visual detail, it’s helpful to reproduce the issue locally and upload a screenshot or GIF. - Consider adding the Good First Issue label if you believe this is a relatively easy issue for a first-time contributor to try to solve. -**Commonly Used Labels** +**Commonly used labels** Generally speaking, the following labels are very useful for triaging issues and will likely be the ones you use the most consistently. You can view all possible labels [here](https://github.com/WordPress/gutenberg/labels). @@ -61,7 +61,7 @@ Generally speaking, the following labels are very useful for triaging issues and | `Needs More Info` | When it’s not clear what the issue is or it would help to provide additional details. | | `Needs Testing` | When a new issue needs to be confirmed or old bugs seem like they are no longer relevant. | -**Determining Priority Labels** +**Determining priority labels** If you have enough knowledge about the report at hand and feel confident in doing so, you can consider adding priority. Note that it’s on purpose that no priority label infers a normal level. @@ -81,7 +81,7 @@ Issues are closed for the following reasons: - An issue that needs more information that the author of the issue hasn't responded to for 2+ weeks. - An item that is determined as unable to be fixed or is working as intended. -## Specific Triages +## Specific triages ### Release specific triage diff --git a/docs/explanations/architecture/README.md b/docs/explanations/architecture/README.md index 92314022f73ab3..e9637ade8402a2 100644 --- a/docs/explanations/architecture/README.md +++ b/docs/explanations/architecture/README.md @@ -51,7 +51,7 @@ Let’s look at the big picture and the architectural and UX principles of the b - [パフォーマンス](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/performance) ## Gutenberg リポジトリ diff --git a/docs/explanations/architecture/data-flow.md b/docs/explanations/architecture/data-flow.md index 78896d75ba4e05..2d265275967bf8 100644 --- a/docs/explanations/architecture/data-flow.md +++ b/docs/explanations/architecture/data-flow.md @@ -119,7 +119,7 @@ const columnsBlock = { ``` ## シリアライゼーションとパース @@ -154,7 +154,7 @@ They just happen, incidentally, to be stored inside of `post_content` in a way i ちなみに、これは偶然ですが `post_content` には、レガシーなシステムでも一切の変換無しで読み出し可能な形式で保存されています。確かに、保存された HTML を対応する仕組みなしでロードすればエクスペリエンスは下がりますし、コンテンツの動的ブロックの動的要素はロードされません。サーバー生成コンテンツは表示されず、インタラクティブなコンテンツも動きません。しかし、少なくとも、ブロックを知らないテーマやインストールでも「ブロックエディターの投稿」を表示でき、コンテンツに最もアクセスしやすい方法を提供します。言い換えるなら、保存されたHTMLがそのままレンダーされても、投稿はほぼ表示されます。 ### デリミタと解析表現文法 @@ -189,7 +189,7 @@ _N.B.:_ The defining aspects of blocks are their semantics and the isolation mec _注意:_ ブロックの定義を考えてみると、それはブロックのセマンティクスであり、提供される隔離の仕組みであり、つまりは、ブロックのアイデンティティとなります。一方、ブロックのデータがどこの保存されるかという点になると、もう少し自由になります。ブロックは、静的なローカルデータだけではない、HTML コメントやブロックの HTML 内の JSON リテラルを介した、より多くの保存場所と、より多くのメカニズム (_例_ グローバルブロック、または、そうでなければ補完的な `WP_Post` オブジェクト内の領域) をサポートすることが期待されます。詳細については[属性](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-attributes/)を参照してください。 ### シリアライズされたブロックの詳細 @@ -214,7 +214,7 @@ A purely dynamic block that is to be server-rendered before display could look l ``` ## データのライフサイクル diff --git a/docs/explanations/architecture/key-concepts.md b/docs/explanations/architecture/key-concepts.md index 8756bc8c44bfb5..d8106a00f1fb3d 100644 --- a/docs/explanations/architecture/key-concepts.md +++ b/docs/explanations/architecture/key-concepts.md @@ -34,7 +34,7 @@ Blocks are meant to be combined in different ways. Blocks are hierarchical in th ブロックは異なる方法で組み合わされます。ブロックは階層構造を取り、別のブロックをネストできます。ネストしたブロック、およびそのコンテナはそれぞれ、「子」、「親」と呼ばれます。たとえば「カラム」ブロックは、各カラム内に複数の子ブロックを持つ親ブロックになります。`InnerBlocks` API は子ブロックの使用を統制します。 ### データと属性 @@ -61,7 +61,7 @@ Each block contains Attributes or configuration settings, which can be sourced f 詳細については、[データフォーマットとデータフロー](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/data-flow/)を参照してください。 ### ブロックの変換 @@ -71,7 +71,7 @@ Blocks have the ability to be transformed into other block types. This allows ba ブロックは、他のブロックタイプに変換できます。この働きにより、段落ブロックを見出しブロックに変換するような簡単な操作から、複数の画像ブロックをギャラリーブロックに変換するような複雑な操作まで可能になります。ブロックの変換は単一のブロックに対しても、複数のブロックに対しても働きます。また内部のブロックバリエーションも変換の対象になります。 ### ブロックのバリエーション @@ -81,7 +81,7 @@ Given a block type, a block variation is a predefined set of its initial attribu ブロックの種類によってブロックバリエーションは、事前定義済みの初期属性セットになります。この API を使用して、複数の構成から単一のブロックを作成できます。バリエーションは異なる可能なインターフェースを提供し、例えばライブラリ内での完全に新しいブロック、あるいは新しいブロックを挿入した際のプリセットとして表示できます。詳細については [API ドキュメント](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#variations-optional) を参照してください。 **ブロックの追加情報** @@ -93,7 +93,7 @@ Given a block type, a block variation is a predefined set of its initial attribu - **[チュートリアル: カスタムブロックの作成](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/)** ## 再利用可能ブロック diff --git a/docs/explanations/architecture/modularity.md b/docs/explanations/architecture/modularity.md index 740d398d1d7e0a..6452cfe3a52178 100644 --- a/docs/explanations/architecture/modularity.md +++ b/docs/explanations/architecture/modularity.md @@ -6,12 +6,12 @@ -WordPress ブロックエディターの背景のアイデアは、独立したブロックの組み合わせによる記事の執筆やページの構築です。ブロックは、互いに使用したり交信でき、可搬性や柔軟性に優れます。 +WordPress ブロックエディターの背景にあるアイデアは、独立したブロックの組み合わせによる記事の執筆やページの構築です。ブロックは、互いに使用したり交信でき、可搬性や柔軟性に優れます。 -ただし、ブロックエディターは、動作や出力のみにモジュール性を取り入れるわけではありません。Gutenberg リポジトリもまた、再利用可能で独立したいくつかのモジュールやパッケージとしてゼロから構築されていて、モジュールやパッケージの組み合わせでアプリケーションやインターフェースが作成されています。これらのモジュールは [WordPress パッケージ](https://www.npmjs.com/org/wordpress)と呼ばれ、npm パッケージリポジトリで定期的に公開、更新されています。 +ただし、ブロックエディターは、動作や出力のみにモジュール性を取り入れたわけではありません。Gutenberg リポジトリもまた、再利用可能で独立したいくつかのモジュールやパッケージとしてゼロから構成され、アプリケーションやインターフェースは、モジュールやパッケージの組み合わせで構築されています。これらのモジュールは [WordPress パッケージ](https://www.npmjs.com/org/wordpress)と呼ばれ、npm パッケージリポジトリで定期的に公開、更新されています。 -モジューラーアーキテクチャは、関与するすべての人に利点があります。 +モジューラーアーキテクチャは、関係するすべての人に利点があります。 -- 各パッケージは独立した単位であり、明確に定義された公開 API を持ちます。API を使用してパッケージは、他のパッケージやサードパーティのコードと交信でき、**コアコントリビューター** もコードベースを推測しやすくなります。コアコントリビューターは一度に1つのパッケージに集中して理解すればよく、その変更がパッケージに依存する他のすべての部分に与える影響を正確に理解しながら、更新できます。 +- 各パッケージは独立した単位であり、明確に定義された公開 API を持ちます。API を使用してパッケージは、他のパッケージやサードパーティのコードと交信でき、**コアコントリビューター** もコードベースを推測しやすくなります。コアコントリビューターは、一度に1つのパッケージに集中して理解すればよく、その変更がパッケージに依存する他のすべての部分に与える影響を正確に理解しながら、更新できます。 - またモジュールによるアプローチは、**エンドユーザー** にも利点があります。バンドルするサイズを抑えながら、異なる WordPress 管理画面に選択したスクリプトをロードできます。たとえば、プラグイン設定画面の実装に components パッケージを使用すれば、同じ画面で block-editor パッケージをロードする必要はありません。 -- **サードパーティ開発者** もまたこのアーキテクチャにより、 WordPress コンテキストの内、または外でパッケージを再利用できます。パッケージは npm として、あるいは WordPress スクリプト依存で使用できます。 +- **サードパーティ開発者** もまたこのアーキテクチャにより、 WordPress コンテキストの中、または外でパッケージを再利用できます。パッケージは npm として、あるいは WordPress スクリプト依存で使用できます。 -WordPress 製品パッケージには、ステート管理のためにデータストアを定義するものもあります。このデータストアは、サードパーティのプラグインやテーマもデータの取得や操作に使用できます。このデータストアの名前もまた `core/package-name` の形で正規化されます。例えば `@wordpress/block-editor` パッケージは `core/block-editor` データストアを定義し、使用します。 +WordPress 製品パッケージには、ステート管理のためにデータストアを定義するものもあります。サードパーティのプラグインやテーマも、データの取得や操作にこれを使用できます。このデータストアの名前もまた `core/package-name` の形で正規化されます。例えば `@wordpress/block-editor` パッケージは `core/block-editor` データストアを定義し、使用します。 -プラグインからこれらのデータストアを使用して Wordpress データにアクセスし、操作する場合は、正しく動作するために、スクリプトの依存に忘れずに対応する WordPress スクリプトを追加してください。例えば、`core/block-editor` からデータを取得するには、上での説明と同様にスクリプトの依存に `wp-block-editor` パッケージを追加してください。 +プラグインからこれらのデータストアを使用して、Wordpress データにアクセスし操作する場合は、正しい動作のため、スクリプト依存に対応する WordPress スクリプトを追加してください。例えば、`core/block-editor` からデータを取得するには、上の説明と同様にスクリプト依存に `wp-block-editor` パッケージを追加します。 ## editor パッケージ @@ -190,7 +190,7 @@ It's often surprising to new contributors to discover that the post editor is co -上の「なぜ ?」節でもある程度のコンテキストが示されたように、個々のパッケージは特定の要求を満たすことを目的とします。それはこの3つのパッケージも当てはまります。 +上の「なぜ ?」節でもある程度のコンテキストが示されたように、個々のパッケージは特定の要求を満たすことを目的とします。それはこの3つのパッケージにも当てはまります。 -エディターアプリケーションにとってパフォーマンスはキーとなる機能です。ブロックエディターも例外ではありません。 +エディターアプリケーションにとってパフォーマンスはキーとなる要素です。ブロックエディターも例外ではありません。 - **ロード時間:** エディターページの読み込み時間。これには、サーバーが応答するまでの時間、最初の描画までの時間 (FP)、最初の DOM コンテンツの描画 (FCP)、DOMコンテンツのロード完了、ロード完了、最初のブロックレンダリングが含まれます。 - **タイプ時間:** エディター上で文字を入力した際にブラウザが応答するまでの時間 -- **ブロックの選択時間:**ユーザーがブロックを選択してから、ブラウザが反応するまでの時間。ちなみに、ブロックの挿入はブロックの選択と同等のため、ブロックの選択時間を監視することで、両方の指標をカバーできます。 +- **ブロックの選択時間:** ユーザーがブロックを選択してから、ブラウザが反応するまでの時間。ちなみに、ブロックの挿入はブロックの選択と同等のため、ブロックの選択時間を監視することで、両方の指標をカバーできます。 ## キーパフォーマンスの決定とソリューション @@ -41,27 +41,27 @@ To ensure the block editor stays performant across releases and development, we -WordPress パッケージのデータモジュールとブロックエディターは Reduxをベースとしています。したがって、state (状態) はグローバルに保持され、変更があるたびに、state に依存するコンポーネント (UI) が更新される可能性があります。 +WordPress パッケージのデータモジュールとブロックエディターは Redux をベースとしています。したがって、ステートはグローバルに保持され、変更があるたびに、ステートに依存するコンポーネント (UI) が更新される可能性があります。 -長い投稿記事のように、レンダーされるコンポーネントの数が増えると、グローバル state がすべてのコンポーネントへのイベントディスパッチャとして機能するため、パフォーマンスが低下します。これは Redux アプリケーションではよくある落とし穴で、Gutenberg ではデータモジュールの非同期モードを使用することで、この問題を解決しています。 +長い投稿記事のように、レンダーされるコンポーネントの数が増えると、グローバルステートがすべてのコンポーネントへのイベントディスパッチャとして機能するため、パフォーマンスが低下します。これは Redux アプリケーションではよくある落とし穴で、Gutenberg ではデータモジュールの非同期モードを使用することで、この問題を解決しています。 -非同期モードでは、React コンポーネントツリーの一部の更新や再レンダーを同期的に実行するか、非同期的に実行するかを決定できます。 +非同期モードでは、React コンポーネントツリーの一部の更新や再レンダーを、同期的に実行するか、非同期的に実行するかを決定できます。 -ここでいう非同期レンダリングとは、グローバル state で変化が起きたた際、サブスクライバー(コンポーネント)が同期的に呼び出されるのではなく、ブラウザがアイドル状態になるのを待って、React ツリーの更新を実行することを意味します。 +ここでいう非同期レンダリングとは、グローバルステートで変化が起きたた際、サブスクライバー(コンポーネント)が同期的に呼び出されるのではなく、ブラウザがアイドル状態になるのを待って、React ツリーの更新を実行することを意味します。 -「**あるブロックを編集している場合、そのブロックの更新が、コンテンツの他の部分に影響を与えることは非常にまれである**」という考えに基づき、ブロックエディターキャンバスは、選択したブロックのみを同期モードでレンダリングし、残りのブロックはすべて非同期でレンダリングします。これにより、投稿記事が長くなってもエディタの応答パフォーマンスは保たれます。 +「**あるブロックを編集している場合、そのブロックの更新が、コンテンツの他の部分に影響を与えることは非常にまれである**」という考えに基づき、ブロックエディターキャンバスは、選択したブロックのみを同期モードでレンダリングし、残りのブロックはすべて非同期でレンダリングします。これにより、投稿記事が長くなってもエディターの応答パフォーマンスは保たれます。 -複数のブランチ、タグ、コミット間のパフォーマンスを比較するツールが提供されています。以下のようにローカルで実行できます: `./bin/plugin/cli.js perf [branches]`。たとえば、 +複数のブランチ、タグ、コミット間のパフォーマンスを比較するツールが提供されています。これは以下のようにローカルで実行できます: `./bin/plugin/cli.js perf [branches]`。たとえば、 ``` ./bin/plugin/cli.js perf trunk v8.1.0 v8.0.0 @@ -79,7 +79,7 @@ A tool to compare performance across multiple branches/tags/commits is provided. -最も正確な結果を得るには、テストを実行する際に、全く同じバージョンのテストとテーマなどの環境を使用することが重要です。ブランチ間で異なるのは、Gutenberg プラグインのバージョン (または、プラグインのビルドに使用するブランチ) だけであるべきです。 +最も正確な結果を得るには、テストを実行する際に、まったく同じバージョンのテストとテーマなどの環境を使用することが重要です。ブランチ間で異なるのは、Gutenberg プラグインのバージョン (または、プラグインのビルドに使用するブランチ) だけであるべきです。 -上のディレクトリ構造ができたら、performance コマンドは、パフォーマンステストスイート(投稿エディターとサイトエディター)をループし、以下を実行します。 +上のディレクトリ構造ができたら、パフォーマンス測定用のコマンドは、パフォーマンステストスイート(投稿エディターとサイトエディター)をループし、以下を実行します。 - - -1. HTML and CSS -2. Block styles - -- From UI controls to HTML markup -- Block Supports API -- Current limitations of the Block Supports API - -3. Global styles - -- Gather data -- Consolidate data -- From data to styles -- Current limitations of the Global Styles API - -4. Layout styles - -- Base layout styles -- Individual layout styles -- Available layout types -- Targeting layout or container blocks from themes -- Opting out of generated layout styles - -### HTML and CSS +## HTML and CSS By creating a post in the block editor the user is creating a number of artifacts: a HTML document plus a number of CSS stylesheets, either embedded in the document or external. @@ -84,7 +20,7 @@ The stylesheets loaded in the front end include: - **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. -### Block styles +## Block styles Since the introduction of the block editor in WordPress 5.0, there were tools for the users to "add styles" to specific blocks. By using these tools, the user would attach new classes or inline styles to the blocks, modifying their visual aspect. @@ -109,7 +45,7 @@ This is what we refer to as "user-provided block styles", also know as "local st The ability to modify a block state coupled with the fact that a block can live within any other block (think of a paragraph within a group), creates a vast amount of potential states and style possibilities. -#### From UI controls to HTML markup +### From UI controls to HTML markup If you follow the [block tutorial](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/) you can learn up about the different parts of the [block API](https://developer.wordpress.org/block-editor/reference-guides/block-api/) presented here in more detail and also build your own block. This is an introduction to the general concepts of how a block can let users edit its state. @@ -122,7 +58,7 @@ To build an experience like the one described above a block author needs a few p In essence, these are the essential mechanics a block author needs to care about for their block to be able to be styled by the user. While this can be done completely manually, there's an API that automates this process for common style needs: block supports. -#### Block Supports API +### Block Supports API [Block Supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) is an API that allows a block to declare what features it supports. By adding some info to their [block.json file](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/), the block tells the system what kind of actions a user can do to it. @@ -150,7 +86,7 @@ Besides the benefit of having to do less work to achieve the same results, there - the block will use the UI controls other blocks use for the same styles, creating a more coherent user experience - the UI controls in use by the block will be automatically updated as they are improved, without the block author having to do anything -#### Current limitations of the Block Supports API +### Current limitations of the Block Supports API While the Block Supports API provides value, it also comes with some limitations a block author needs to be aware of. To better visualize what they are, let's run with the following example of a table block: @@ -224,7 +160,7 @@ To enable for a _single_ property only, you may use an array to declare which pr Support for this feature was [added in this PR](https://github.com/WordPress/gutenberg/pull/36293). -### Global styles +## Global styles Global Styles refers to a mechanism that generates site-wide styles. Unlike the block styles described in the previous section, these are not serialized into the post content and are not attached to the block HTML. Instead, the output of this system is a new stylesheet with id `global-styles-inline-css`. @@ -240,19 +176,19 @@ The process of generating the stylesheet has, in essence, three steps: 2. Consolidate data: the structured information from different origins -WordPress defaults, theme, and user- is normalized and merged into a single structure. 3. Convert data into a stylesheet: convert the internal representation into CSS style rules and enqueue them as a stylesheet. -#### Gather data +### Gather data The data can come from three different origins: WordPress defaults, the active theme, or the user. All three of them use the same [`theme.json` format](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/). Data from WordPress and the active theme is retrieved from the corresponding `theme.json` file. Data from the user is pulled from the database, where it's stored after the user saves the changes they did via the global styles sidebar in the site editor. -#### Consolidate data +### Consolidate data The goal of this phase is to build a consolidated structure. There are two important processes going on in this phase. First, the system needs to normalize all the incoming data, as different origins may be using different versions of the `theme.json` format. For example, a theme may be using [v1](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-v1/) while the WordPress base is using [the latest version](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/). Second, the system needs to decide how to merge the input into a single structure. This will be the focus of the following sections. -##### Styles +#### Styles Different parts of the incoming `theme.json` structure are treated differently. The data present in the `styles` section is blended together following this logic: user data overrides theme data, and theme data overrides WordPress data. @@ -308,7 +244,7 @@ The result after the consolidation would be: } ``` -##### Settings +#### Settings The `settings` section works differently than styles. Most of the settings are only used to configure the editor and have no effect on the global styles. Only a few of them are part of the resulting stylesheet: the presets. @@ -374,11 +310,11 @@ The result after the consolidation would be: } ``` -#### From data to styles +### From data to styles The last phase of generating the stylesheet is converting the consolidated data into CSS style rules. -##### Styles to CSS rules +#### Styles to CSS rules The `styles` section can be thought of as a structured representation of CSS rules, each chunk representing a CSS rule: @@ -447,7 +383,7 @@ p { } ``` -##### Settings to CSS rules +#### Settings to CSS rules From the `settings` section, all the values of any given presets will be converted to a CSS Custom Property that follows this naming structure: `--wp--preset---`. The selectors follow the same rules described in the styles section above. @@ -525,29 +461,29 @@ In addition to the CSS Custom Properties, all presets but duotone generate CSS c .wp-block-site-title .has-foreground-border-color { border-color: var(--wp--preset--color--foreground) !important; } ``` -#### Current limitations of the Global Styles API +### Current limitations of the Global Styles API -##### 1. **Setting a different CSS selector for blocks requires server-registration** +#### 1. **Setting a different CSS selector for blocks requires server-registration** By default, the selector assigned to a block is `.wp-block-`. However, blocks can change this should they need. They can provide a CSS selector via the `__experimentalSelector` property in its `block.json`. If blocks do this, they need to be registered in the server using the `block.json`, otherwise, the global styles code doesn't have access to that information and will use the default CSS selector for the block. -##### 2. **Can't target different HTML nodes for different styles** +#### 2. **Can't target different HTML nodes for different styles** Every chunk of styles can only use a single selector. This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more. -##### 3. **Only a single property per block** +#### 3. **Only a single property per block** Similarly to block supports, there can be only one instance of any style in use by the block. For example, the block can only have a single font size. See related "Current limitations of block supports". -##### 4. **Only blocks using block supports are shown in the Global Styles UI** +#### 4. **Only blocks using block supports are shown in the Global Styles UI** The global styles UI in the site editor has a screen for per-block styles. The list of blocks is generated dynamically using the block supports from the `block.json` of blocks. If a block wants to be listed there, it needs to use the block supports mechanism. -### Layout styles +## Layout styles In addition to styles at the individual block level and in global styles, there is the concept of layout styles that are output for both blocks-based and classic themes. @@ -555,7 +491,7 @@ The layout block support outputs common layout styles that are shared between bl There are two primary places where Layout styles are output: -#### Base layout styles +### Base layout styles Base layout styles are those styles that are common to all blocks that opt in to a particular layout type. Examples of common base layout styling include setting `display: flex` for blocks that use the Flex layout type (such as Buttons and Social Icons), and providing default max-width for constrained layouts. @@ -563,14 +499,14 @@ Base layout styles are output from within [the main PHP class](https://github.co Common layout definitions are stored in [the core layout block support file](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php). -#### Individual layout styles +### Individual layout styles When a block that opts in to layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php): - Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification. - Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/). -#### Available layout types +### Available layout types There are currently four layout types in use: @@ -581,7 +517,7 @@ There are currently four layout types in use: 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). -#### Targeting layout or container blocks from themes +### Targeting layout or container blocks from themes The layout block support is designed to enable control over layout features from within the block and site editors. Where possible, try to use the features of the blocks to determine particular layout requirements rather than relying upon additional stylesheets. @@ -589,7 +525,7 @@ For themes that wish to target container blocks in order to add or adjust partic For targeting a block that uses a particular layout type, avoid targeting `wp-container-` as container classes may not always be present in the rendered markup. -##### Semantic class names +#### Semantic class names Work is currently underway to expand stable semantic classnames in Layout block support output. The task is being discussed in [this issue](https://github.com/WordPress/gutenberg/issues/38719). @@ -608,6 +544,6 @@ The current semantic class names that can be output by the Layout block support - `is-content-justification-space-between`: When a block explicitly sets `justifyContent` to `space-between`. - `is-nowrap`: When a block explicitly sets `flexWrap` to `nowrap`. -#### Opting out of generated layout styles +### Opting out of generated layout styles Layout styles output is switched on by default because the styles are required by core structural blocks. However, themes can opt out of generated block layout styles while retaining semantic class name output by using the `disable-layout-styles` block support. Such themes will be responsible for providing all their own layout styles. See [the entry under Theme Support](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#disabling-base-layout-styles). diff --git a/docs/explanations/user-interface/block-design.md b/docs/explanations/user-interface/block-design.md index 5d211a979c8d77..56d622210c366f 100644 --- a/docs/explanations/user-interface/block-design.md +++ b/docs/explanations/user-interface/block-design.md @@ -6,7 +6,7 @@ -この記事では新しいブロックをデザインする際のベストプラクティスを紹介します。既存のブロックの詳細な説明とお勧め、ブロックを作成する際の私たちのアプローチを示します。 +この記事では新しいブロックをデザインする際のベストプラクティスを紹介します。既存のブロックの詳細な説明と推奨、ブロックを作成する際の私たちのアプローチを示します。 -常にプレースホルダー / コンテンツ UI のコンテキストが基本のブロック設定で有効とは限りません。ブロックの機能に対して2番目に重要と思われるオプションは、ブロックツールバーに配置してください。ブロックツールバーもまた非常にコンテキスト指向であり、すべての画像サイズで表示されます。1点、ブロックツールバーで注意すべき制約はアイコンベースの UI であることです。ブロックツールバーに挿入するコントロールは、アイコンやアイコングループを通して効果的にコミュニケーションする必要があります。 +基本のブロック設定が、プレースホルダーやコンテンツ UI のコンテキストで常に有効とは限りません。ブロックの機能に対して2番目に重要と思うオプションは、ブロックツールバーに配置してください。ブロックツールバーもまた非常にコンテキスト指向であり、すべての画面サイズで表示されます。1点、ブロックツールバーで注意すべき制約はアイコンベースの UI であることです。ブロックツールバーに挿入するコントロールは、アイコンやアイコングループを通して効果的にコミュニケーションする必要があります。 -### ブロックツールバーの制御を関連する要素でグループ化 +### ブロックツールバーのコントロールを関連する要素でグループ化 -ブロックツールバーは階層的に区分してグループ化しています。最初の区分はブロックの変換といったブロックタイプの制御や、ドラッグなどの動きの制御がまとめられています。第2グループには、ブロック全体に影響を与える共通のブロックツールと特定のブロックツールがあり、続いてインラインフォーマット、「その他」メニューがあります。オプションで「Meta」または「Other」グループは、いくつかのツールを独自のセグメントに分けることができます。 +ブロックツールバーはコントロールを階層的に、セグメントに分けてグループ化します。最初のセグメントにはブロックタイプのコントロールが含まれ、ブロックの変換やドラッグハンドル、移動コントロールなどがあります。第2グループには、ブロック全体に影響を与える共通のブロックツールと特定のブロックツールがあり、続いてインラインフォーマット、「その他」メニューがあります。オプションで「Meta」または「Other」グループは、いくつかのツールを自身のセグメントに分けられます。 -ツールバーの制御を論理的な区分にまとめてください。それぞれに区分を追加しないでください。 +ツールバーのコントロールを論理的なセグメントにまとめてください。それぞれにセグメントを追加しないでください。 ### ブロックの識別 @@ -210,7 +210,7 @@ Avoid long, multi-line block names. 長く、複数行に渡るブロック名は避けてください。 ### ブロックの説明 @@ -292,10 +292,12 @@ Provide an instructive placeholder state. Avoid branding and relying on the title alone to convey instructions. --> ブランドを宣伝したり、手順の説明をタイトルだけに頼るのは避けてください。 + ### 選択済みの状態と、未選択の状態 + @@ -329,14 +331,14 @@ Do not put controls that are essential to the block in the sidebar, otherwise th サイドバーにブロックの必須のコントロールを配置しないでください。モバイルユーザーや、サイドバーを折りたたんだデスクトップユーザーには、ブロックに必須の機能がないまま表示されます。 ### 高度なブロック設定 -設定サイドバーの「ブロック」タブには、追加のオプションや構成を配置できます。ただしユーザーはこのサイドバーを折り畳めること、そして決して使わないことを覚えておいてください。重要なオプションはサイドバーに配置すべきではありません。 +設定サイドバーの「ブロック」タブには、追加のオプションや構成を配置できます。ただしユーザーはこのサイドバーを折り畳んで、使わなくできることを覚えておいてください。サイドバーに重要なオプションを配置すべきではありません。 -### プレースホルダー: +#### プレースホルダー -### 選択した状態: +#### 選択した状態 ### 画像 + @@ -430,19 +433,20 @@ Basic image block. ![Image block placeholder](https://cldup.com/w6FNywNsj1-3000x3000.png) --> ![画像ブロックのプレースホルダー](https://cldup.com/w6FNywNsj1-3000x3000.png) + -### プレースホルダー: +#### プレースホルダー - 汎用的な灰色のプレースホルダーブロック。オプションには動画のアップロード、この領域への直接のドラッグアンドドロップ、メディアライブラリからの選択があります。 -### 選択した状態: +#### 選択した状態 -### ブロック設定 +#### ブロック設定 ![最新の投稿ブロック](https://cldup.com/8lyAByDpy_-3000x3000.png) + -### プレースホルダー +#### プレースホルダー + 挿入と同時に動作するためプレースホルダーはありません。デフォルトの挿入状態では最新の5つの投稿が表示されます。 +#### 選択した状態 -### 選択した状態: -### ブロック設定 +#### ブロック設定 -ようこそ ! さっそくブロックを作っていきましょう。ブロックは、WordPress 拡張の中核です。カスタムブロックや独自のブロックパターンを作成したり、ブロックを組み合わせてブロックテーマを構築できます。ブロックの作成にはいくつかの方法がありますが、まずは以下に目を通してください。 +ようこそ ! さっそくブロックを作っていきましょう。ブロックは、WordPress の拡張における中核です。カスタムブロックや独自のブロックパターンを作成したり、ブロックを組み合わせてブロックテーマを構築できます。 + + +## この章について + + +ブロック開発を始める人にとって、このセクションは完璧なスタート地点です。ここにはカスタムブロック作成に必要な知識が詰まっています。 + + +- [**ブロック開発環境**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/) - ブロックを作成するための適切な開発環境を設定し、ブロック開発のための基本的なツール、[`wp-env`](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-wp-env/)、[`create-block`](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-create-block//)、[`wp-scripts`](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-wp-scripts/) などを紹介します。 +- [**クイックスタートガイド**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/quick-start-guide/) - ブロックを立ち上げて実行します、1分以内で。 +- [**チュートリアル: はじめてのブロック作成**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/tutorial/) - このチュートリアルでは、完全に機能するカスタムブロック作成のための完全なプロセスをステップバイステップで説明します。 +- [**ブロック開発の基本原理**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/) - このセクションでは、ブロック開発に最も関連性の高い概念について紹介します。 +- [**用語集**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/glossary/) - ブロックエディターとフルサイト編集に関する用語集 +- [**よくある質問**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/faq/) - ここ数年の Gutenberg 開発で出てきた質問とその回答 + + +## WordPress プロジェクトと Gutenberg を始める + + +旅を始める最初のステップをいくつか紹介します。詳細を知るには更に読み進めてください。 -## チュートリアル +### 最新情報を得るには -[開発環境](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/) - JavaScript 開発用のローカル環境セットアップガイドです。プラグイン、テーマ、WordPressの拡張に必要なツールの作成やブロックエディタへの貢献に使用します。 +Gutenberg プロジェクトが継続する中、常に新機能や変更点を入手することは重要です。しかし、このような規模のプロジェクトを追いかけるにも、人それぞれのニーズがあります。以下は、継続的に最新情報を得るための方法を、推奨と言うよりもカタログ的に挙げたものです。 -[ブロックの作成チュートリアル](https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/) - WordPress ブロックエディターで使用可能な初めてのブロックを作成する方法を紹介します。 +- [Keeping up with Gutenberg](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/) - Gutenberg 関連チームの投稿を集めたもの。Core、Core-Editor、Core-js、Core-css、Design、Meta、Themes など。 +- [“What’s New In Gutenberg?” リリース記事](https://make.wordpress.org/core/tag/gutenberg-new/) - この記事はコアエディターチームによって管理され、隔週でリリースされる Gutenberg の新版にフォーカスします。記事にはリリースの中で最も顕著な機能や、完全な変更履歴が含まれます。 +- [コアエディターミーティング](https://make.wordpress.org/core/tag/core-editor-summary/) - #core-editor Slackチャンネルのボランティアメンバーが運営しています。[アジェンダ](https://make.wordpress.org/core/tag/core-editor-summary/) と [サマリー](https://make.wordpress.org/core/tag/core-editor-summary/) は、[Make Core ブログ](https://make.wordpress.org/core/) で共有されます。タスクの調整や Gutenberg のリリースに関連した議論が中心となります。各チャットには、議論するトピックを提案できる「オープンフロア」の時間があります。 +- GitHub 上の [issue](https://github.com/WordPress/gutenberg/issues) と [PR](https://github.com/WordPress/gutenberg/pulls) をチェックしてください。開発者やデザイナーが何に取り組んでいるかをほぼリアルタイムで把握できます。 - - - - - - - +## その他の情報 -## Learn WordPress のコース +[block-development-examples](https://github.com/wptrainingteam/block-development-examples) リポジトリは、このハンドブックで参照されるブロック開発のサンプルプログラムの中心的なハブです。 [Learn WordPress](https://learn.wordpress.org/) には、ブロックエディター開発学習用の[チュートリアル](https://learn.wordpress.org/tutorials/)、[コース](https://learn.wordpress.org/courses/)、[オンラインワークショップ](https://learn.wordpress.org/online-workshops/) があります。現在のコースからいくつかを選びました。 @@ -88,95 +109,5 @@ At [Learn WordPress](https://learn.wordpress.org/), you can find [tutorials](htt - [Intro to Gutenberg Block Development (Gutenberg ブロック開発入門)](https://learn.wordpress.org/workshop/intro-to-gutenberg-block-development/) - [Intro to Publishing with the Block Editor (ブロックエディターでの公開入門)](https://learn.wordpress.org/workshop/intro-to-publishing-with-the-block-editor/) - -## 最新情報を得るには - - -Gutenberg プロジェクトの新機能や変更点を常に把握することは重要です。しかし、このような大規模なプロジェクトでは、最新情報の把握にも人それぞれ固有のニーズがあります。以下に最新情報を得るための方法を、カタログ的に挙げます。ただし、これを推奨するものではありません。 - - -**年単位:** - - -[WordPress.org ロードマップ](https://wordpress.org/about/roadmap/) と、プロジェクトのリーダーが更新する Gutenberg の4つのフェーズ。WordPress に実装予定の変更に関する、もっとも上位レベルの概要です。 - - -**四半期単位:** - - -[四半期更新](https://make.wordpress.org/updates/tag/quarterly-updates/) - コントリビューションチームからの四半期ごとの更新には、各チームの状況、問題点、参加の方法が説明されています。 - - -**月単位:** - - -[“What’s Next In Gutenberg?” (Gutenberg の次の機能の紹介)](https://make.wordpress.org/core/tag/gutenberg-next/) - この投稿は、コアエディターチームによって管理されていて、Gutenberg のロードマップに沿った作業領域を強調し、コントリビュータの支援や参加方法などを紹介します。 - - -[ブロックベーステーマのミーティング](https://make.wordpress.org/themes/tags/block-based-meeting/) - 現在、#themereview Slack チャンネルで行われており、テーマに特に影響を与えるFSE の変更点の共有に特化しています。アジェンダとサマリーは [Make Themes ブログ](https://make.wordpress.org/themes/) で共有されています。 - - -**隔週単位:** - - -[“What’s New In Gutenberg?” リリース記事](https://make.wordpress.org/core/tag/gutenberg-new/) - この記事は、コアエディタチームによって管理されていて、隔週の Gutenberg リリースで、何がリリースされたかに焦点を当てます。記事には、リリースの中で最も関連する機能や、完全な変更履歴が含まれます。 - - -**週単位:** - - -[コアエディターミーティング](https://make.wordpress.org/core/tag/core-editor-summary/) - #core-editor Slackチャンネルのボランティアメンバーが運営しています。[アジェンダ](https://make.wordpress.org/core/tag/core-editor-summary/) と [サマリー](https://make.wordpress.org/core/tag/core-editor-summary/) は、[Make Core ブログ](https://make.wordpress.org/core/) で共有されます。タスクの調整や Gutenberg のリリースに関連した議論が中心となります。各チャットには、議論するトピックを提案できる「オープンフロア」の時間があります。 - - -[週次の Gutenberg のテーマ関連の更新](https://make.wordpress.org/themes/tags/gutenberg-themes-roundup/) - この記事では、テーマに焦点を当て、現在の議論や最近の変更点、テーマ作成者に役立つリソースなどを紹介しています。 - - -**毎日:** - - -GitHub 上の [issue](https://github.com/WordPress/gutenberg/issues) と [PR](https://github.com/WordPress/gutenberg/pulls) をチェックしてください。開発者やデザイナーが何に取り組んでいるかをほぼリアルタイムで把握できます。 - - -- [用語集](https://ja.wordpress.org/team/handbook/block-editor/getting-started/glossary/) -- [よくある質問](https://ja.wordpress.org/team/handbook/block-editor/getting-started/faq/) -- [プロジェクトの歴史](https://ja.wordpress.org/team/handbook/block-editor/explanations/history/) -- [Gutenberg 関連の Make posts](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/) [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/README.md) diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md index 9db8c711222380..64885c54ee86cb 100644 --- a/docs/getting-started/devenv/README.md +++ b/docs/getting-started/devenv/README.md @@ -9,7 +9,7 @@ This guide will help you set up the right development environment to create bloc このガイドでは WordPress のブロックエディターを拡張、変更する、ブロックや他のプラグインの作成に必要な開発環境のセットアップ方法を紹介します。 Gutenberg プロジェクト自体に貢献するには、[コードによるコントリビューション入門](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/getting-started-with-code-contribution/) の中の追加ドキュメントを参照してください。 @@ -38,7 +38,7 @@ A code editor is used to write code, and you can use whichever editor you're mos コードの記述にはコードエディターを使用します。使い慣れたどのエディターでも使用できます。機能としてテキストファイルを開き、編集し、保存する手段があれば十分です。 好みのコードエディターがなければ、[Visual Studio Code](https://code.visualstudio.com/) (VS Code) は、JavaScript で開発するコアコントリビューターの中で人気のある選択肢です。3つの主要なプラットフォーム (Windows、Linux、Mac) で動作し、オープンソースで、Microsoft によって活発にメンテナンスされています。VS Code にはまた、プラグインや拡張機能 (その中には多数の WordPress 開発用のものも含まれます) を提供する活気あるコミュニティがあります。 @@ -76,12 +76,12 @@ The list goes on. While modern JavaScript development can be challenging, WordPr まだまだ続きます。最新の JavaScript 開発は難しいかもしれませんが、WordPress では [`wp-scripts`](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-wp-scripts/) や [`create-block`](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-create-block/)のような、プロセスを効率化するツールを提供しています。そしてこれらも Node.js 開発ツールで作成されています。 **ブロック開発に推奨される Node.js のバージョンは、[Active LTS](https://nodejs.dev/en/about/releases/) (Long Term Support)** です。しかし、異なるバージョンが必要な場合もあります。このため、`nvm` のような Node.js バージョン管理ツールの使用を強く推奨します。Node Package Manager (`npm`) と Node Package eXecute (`npx`) も WordPress パッケージの利用では必要です。どちらも自動的に Node.js と一緒にインストールされます。 ブロック開発に Node.js ツールと [WordPress が提供するパッケージ](https://github.com/WordPress/gutenberg/tree/trunk/packages)を使用するには、コンピュータに適切な Node.js 実行環境を設定する必要があります。この方法については、以下のリンクを参照してください。 @@ -103,7 +103,7 @@ A local WordPress environment (site) provides a controlled, efficient, and secur WordPress のローカル環境 (サイト) を準備すると、制御され、効率的で、安全な開発スペースを入手でき、本番サイトにデプロイする前にコードをビルドし、テストできます。WordPress と[同じ要件](https://en-gb.wordpress.org/about/requirements/)がローカルサイトにも適用されます。 WordPress コミュニティでは、ローカルに WordPress 環境を構築するツールが数多く提供されています。ブロックエディターハンドブックでは、オープンソースで WordPress プロジェクト自身が保守している `wp-env` を取り上げます。これはまた Gutenberg 開発における推奨ツールです。 diff --git a/docs/getting-started/devenv/get-started-with-create-block.md b/docs/getting-started/devenv/get-started-with-create-block.md index d5d6e159922d52..b3b096da115366 100644 --- a/docs/getting-started/devenv/get-started-with-create-block.md +++ b/docs/getting-started/devenv/get-started-with-create-block.md @@ -14,7 +14,7 @@ The package is designed to help developers quickly set up a block development en このパッケージは開発者が、WordPress のベストプラクティスに従ってブロック開発環境を素早くセットアップできるように設計されています。 ## クイックスタート diff --git a/docs/getting-started/devenv/get-started-with-wp-scripts.md b/docs/getting-started/devenv/get-started-with-wp-scripts.md index 8e91694a0d2dd0..9dc6b5e3ededaa 100644 --- a/docs/getting-started/devenv/get-started-with-wp-scripts.md +++ b/docs/getting-started/devenv/get-started-with-wp-scripts.md @@ -242,7 +242,7 @@ Regularly linting and formatting your code ensures it's functional, clear, and m 定期的にコードを lint し、フォーマットすることで、自分自身や他の開発者にとって機能的でわかりやすく、保守しやすいコードになります。 ### テストの実行 diff --git a/docs/getting-started/fundamentals/README.md b/docs/getting-started/fundamentals/README.md index 69dbff25d8e551..af4312e3cd5d54 100644 --- a/docs/getting-started/fundamentals/README.md +++ b/docs/getting-started/fundamentals/README.md @@ -15,15 +15,21 @@ In this section, you will learn: 1. [**ブロックのファイル構造**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/file-structure-of-a-block) - ブロックで利用可能な各ファイルタイプの目的、各ファイル間の関係、ブロックの出力における役割。 -1. [**block.json**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-json) - `block.json` メタデータを使用したブロックの定義方法と、このファイルに関連するいくつかのプロパティ。 +1. [**block.json**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-json) - `block.json` メタデータを使用したブロックの定義方法と、このファイルに関連するいくつかのプロパティ (例: `attributes` や `supports`)。 1. [**ブロックの登録**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/registration-of-a-block) - サーバーとクライアントの両方でブロックを登録する方法。 1. [**ブロックラッパー**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-wrapper) - ブロックのマークアップラッパーに適切な属性を設定する方法。 +1. [**エディター内のブロック**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/) - ブロックエディターに読み込まれる React コンポーネントとしてのブロックとその可能性。 +1. [**ブロックのマークアップ表現**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/markup-representation-block/) - データベースやテンプレートでのブロックの表現方法。 1. [**ブロックエディタでの JavaScript**](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/javascript-in-the-block-editor) - ブロックエディターで JavaScript を使用する方法。 -[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/README.md) \ No newline at end of file +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/README.md) + + diff --git a/docs/getting-started/fundamentals/block-in-the-editor.md b/docs/getting-started/fundamentals/block-in-the-editor.md new file mode 100644 index 00000000000000..56ba72c283bdf7 --- /dev/null +++ b/docs/getting-started/fundamentals/block-in-the-editor.md @@ -0,0 +1,167 @@ +# The block in the Editor + +The Block Editor is a React Single Page Application (SPA) and every block in the editor is displayed through a React component defined in the `edit` property of the settings object used to [register the block on the client](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-javascript-client-side). + +The `props` object received by the block's `Edit` React component includes: +- [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#attributes) - attributes object +- [`setAttributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#setattributes) - method to update the attributes object +- [`isSelected`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#isselected) - boolean that communicates whether the block is currently selected + +WordPress provides many built-in standard components that can be used to define the interface of the block in the editor. These built-in components are available via packages such as [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) and [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/). + +
+The WordPress Gutenberg project uses Storybook to document the user interface components that are available in WordPress packages. +
+ +Custom settings controls for the block in the Block Toolbar or the Settings Sidebar can also be defined through this `Edit` React component via built-in components such as: +- [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) +- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls) + +## Built-in components + +The package [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) includes a library of generic WordPress components to create common UI elements for the Block Editor and the WordPress dashboard. Some of the most commonly used components from this package are: +- [`TextControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-textcontrol--docs) +- [`Panel`](https://wordpress.github.io/gutenberg/?path=/docs/components-panel--docs) +- [`ToggleControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-togglecontrol--docs) +- [`ExternalLink`](https://wordpress.github.io/gutenberg/?path=/docs/components-externallink--docs) + +The package [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/) includes a library of components and hooks for the Block Editor, including those to define custom settings controls for the block in the Editor. Some of the components most commonly used from this package are: +- [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md) +- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls) +- [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) +- [`InnerBlocks`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md) +- `PanelColorSettings` or `ColorPalette` + +
+The package @wordpress/block-editor also provide the tools to create and use standalone block editors. +
+ +A good workflow when using a component for the Block Editor is: +- Import the component from a WordPress package +- Add the corresponding code for the component to your project in JSX format +- Most built-in components will be used to set [block attributes](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#using-attributes-to-store-block-data), so define any necessary attributes in `block.json` and create event handlers to update those attributes with `setAttributes` in your component +- If needed, adapt the code to be serialized and stored in the database + + + +## Block Controls: Block Toolbar and Settings Sidebar + +To simplify block customization and ensure a consistent experience for users, there are a number of built-in UI patterns to help generate the editor preview. + +![Diagram showing the Block Toolbar and the Settings Sidebar when a Paragraph block is selected](https://developer.wordpress.org/files/2023/12/block-toolbar-settings-sidebar.png) + +### Block Toolbar + +When the user selects a block, a number of control buttons may be shown in a toolbar above the selected block. Some of these block-level controls may be included automatically but you can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar. + +```jsx +export default function Edit( { className, attributes: attr, setAttributes } ) { + + const onChangeContent = ( newContent ) => { + setAttributes( { content: newContent } ); + }; + + const onChangeAlignment = ( newAlignment ) => { + setAttributes( { + alignment: newAlignment === undefined ? 'none' : newAlignment, + } ); + }; + + return ( +
+ + + + + + + +
+ ); +} +``` + +_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-toolbar-ab967f) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/block-toolbar-ab967f/src/edit.js)._ + + +Note that `BlockControls` is only visible when the block is currently selected and in visual editing mode. `BlockControls` are not shown when editing a block in HTML editing mode. + + +### Settings Sidebar + +The Settings Sidebar is used to display less-often-used settings or settings that require more screen space. The Settings Sidebar should be used for **block-level settings only**. + +If you have settings that affects only selected content inside a block (example: the "bold" setting for selected text inside a paragraph): **do not place it inside the Settings Sidebar**. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings. + +The Block Tab is shown in place of the Document Tab when a block is selected. + +Similar to rendering a toolbar, if you include an `InspectorControls` element in the return value of your block type's `edit` function, those controls will be shown in the Settings Sidebar region. + +```jsx +export default function Edit( { attributes, setAttributes } ) { + const onChangeBGColor = ( hexColor ) => { + setAttributes( { bg_color: hexColor } ); + }; + + const onChangeTextColor = ( hexColor ) => { + setAttributes( { text_color: hexColor } ); + }; + + return ( +
+ +
+
+ + { __( 'Background color', 'block-development-examples' ) } + + +
+
+ + { __( 'Text color', 'block-development-examples' ) } + + +
+
+
+ setAttributes( { message: val } ) } + style={ { + backgroundColor: attributes.bg_color, + color: attributes.text_color, + } } + /> +
+ ); +} +``` +_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/settings-sidebar-82c525) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/settings-sidebar-82c525/src/edit.js)._ + +Block controls rendered in both the toolbar and sidebar will also be used when multiple blocks of the same type are selected. + +
+For common customization settings including color, border, spacing customization and more, you can rely on block supports to provide the same functionality in a more efficient way. +
+ +## Additional resources + +- [Storybook for WordPress components](https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page) +- [@wordpress/block-editor](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/) +- [@wordpress/components](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) +- [`Inspector Controls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) +- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls) \ No newline at end of file diff --git a/docs/getting-started/fundamentals/block-json.md b/docs/getting-started/fundamentals/block-json.md index a40a8cbacf4211..aadf6d06398c2e 100644 --- a/docs/getting-started/fundamentals/block-json.md +++ b/docs/getting-started/fundamentals/block-json.md @@ -6,9 +6,9 @@ The `block.json` file simplifies the processs of defining and registering a bloc `block.json` ファイルはブロックの定義と登録プロセスを簡素化します。両方のプロセスに JSON 形式の同じブロック定義を使用し、サーバーとクライアントの両方でブロックを登録します。 -[![block.json の図解を excalidraw で開く](https://developer.wordpress.org/files/2023/11/block-json.png)](https://excalidraw.com/#json=v1GrIkGsYGKv8P14irBy6,Yy0vl8q7DTTL2VsH5Ww27A "block.json の図解を excalidraw で開く") +[![block.json の図解を開く](https://developer.wordpress.org/files/2023/11/block-json.png)](https://developer.wordpress.org/files/2023/11/block-json.png "block.json の図解を開く") + + + + +## attributes を使用したブロックデータの保存 + + +ブロックの[属性](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/#Attributes)は、ブロックに割り当てられた設定やデータです。ブロックのさまざまな要素を決定できます。例えば、コンテンツ、レイアウト、スタイル、その他ブロックの構造とともに保存したい特定の情報などです。たとえばフォントサイズなど、ユーザーがブロックを変更すると、その変更を永続化する方法が必要です。属性はその解決策です。 + + +新しいブロックタイプを登録する際、`block.json` の `attributes` プロパティに、ブロックが必要なカスタムデータとデータベースへの保存方法を記述します。これにより、エディターは値を正しく解析し、ブロックの `Edit` と `save` 関数に `attributes` を渡せます。 -デフォルトでは `attributes` はシリアライズされ、ブロックのデリミッタに格納されますが、これは[構成できます](https://developer.wordpress.org/news/2023/09/understanding-block-attributes/)。 +デフォルトでは属性はシリアライズされ、ブロックのデリミッタに格納されますが、これは[構成できます](https://developer.wordpress.org/news/2023/09/understanding-block-attributes/)。 +これらの [属性](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/#%E5%B1%9E%E6%80%A7) は React コンポーネントの `Edit` (ブロックエディターに表示するため)、`save` 関数 (データベース に保存されるマークアップを返すため)、そしてブロックの任意のサーバーサイドレンダー定義 (上の `render` プロパティ参照) に渡されます。 + + -これらの [`attributes`](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/#%E5%B1%9E%E6%80%A7) は React コンポーネントの `Edit` (ブロックエディターに表示するため)、`save` 関数 (データベース に保存されるマークアップを返すため)、そしてブロックの任意のサーバーサイドレンダー定義 (上の `render` プロパティ参照) に渡されます。 +### 属性の読み取りと更新 -[![属性の図解を excalidraw で開く](https://developer.wordpress.org/files/2023/11/attributes.png)](https://excalidraw.com/#json=pSgCZy8q9GbH7r0oz2fL1,MFCLd6ddQHqi_UqNp5ZSgg "属性の図解を excalidraw で開く") +[![属性の図解を開く](https://developer.wordpress.org/files/2023/11/attributes.png)](https://developer.wordpress.org/files/2023/11/attributes.png "属性の図解を開く") + + + +コアブロックを含む多くのブロックは、同種のカスタマイズオプションを提供します。例えば、背景色の変更、テキスト色の変更、パディングのカスタマイズオプションの追加など。 + + +`block.json` の [`supports`](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/#Supports) プロパティは、ブロックの特定機能のサポートを宣言します。ユーザーは設定サイドバーから特定の設定 (色やマージンなど) をカスタマイズできます。 + + +利用可能なブロック `supports` を使用することで、ブロックの動作をコアブロックに合わせられ、同じ機能を自分で繰り返さずにすみます。 `supports`を使用すると、プロパティのセットが生成されます。このプロパティは手動でブロックのラッピング要素に追加して、ブロックデータの一部として適切に保存されるようにする必要があります。 + +`supports`を使用するとプロパティのセットが生成されますが、これは手動で[ブロックのラッピング要素](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-wrapper/)に追加する必要があります。これにより、ブロックデータの一部として適切に保存され、フロントエンドに配信されるブロックのマークアップを生成する際に考慮されることが保証されます。 + -_例: ブロックのマークアップ表現として保存されるカスタム設定をサポート_ +_例: ブロックのマークアップ表現として保存される supports のカスタム設定_ ```html @@ -222,4 +267,18 @@ Check the サポートのリファレンスページを参照してください。 -[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/block-json.md) \ No newline at end of file + +## その他の情報 + + +- [block.json の図解](https://excalidraw.com/#json=v1GrIkGsYGKv8P14irBy6,Yy0vl8q7DTTL2VsH5Ww27A) +- [属性の図解](https://excalidraw.com/#json=pSgCZy8q9GbH7r0oz2fL1,MFCLd6ddQHqi_UqNp5ZSgg) + + +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/block-json.md) + diff --git a/docs/getting-started/fundamentals/block-wrapper.md b/docs/getting-started/fundamentals/block-wrapper.md index fa5f69489b4340..1fa03b476554aa 100644 --- a/docs/getting-started/fundamentals/block-wrapper.md +++ b/docs/getting-started/fundamentals/block-wrapper.md @@ -15,7 +15,7 @@ Ensuring proper attributes to the block wrapper is especially important when usi > `supports`を使用するとプロパティのセットが生成されます。ブロックデータの一部として適切に保存されるように、これらのプロパティを手動でブロックのラッパー要素に追加する必要があります。 @@ -39,7 +39,7 @@ A block can have three sets of markup defined, each one of them with a specific - この定義があると、サーバー側で生成されたマークアップはフロントエンドに返されます。データベースに保存されたマークアップは無視されます。 [`edit` React コンポーネントと `save` 関数](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/)においてブロックのラッパー要素は、ネイティブのDOM要素 (例: `
`) か、ネイティブの DOM 要素に追加の prop を転送する React コンポーネントでなければなりません。例えば、`` や `` コンポーネントは使用できません。 @@ -110,7 +110,7 @@ _([例](https://github.com/WordPress/block-development-examples/tree/trunk/plugi ``` ブロックの `Edit` コンポーネントに追加するクラスや属性は、`useBlockProps` の引数として渡す必要があります ([例](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/edit.js) を参照)。どの機能に対しても `supports` を追加すると、それらは `useBlockProps` フックが返すオブジェクトに追加されます。 @@ -158,7 +158,7 @@ Any additional classes and attributes for the `save` function of the block shoul ブロックの `save` 関数に追加するクラスと属性は、`useBlockProps.save()` の引数として渡す必要があります ([例](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/save.js)を参照)。 任意の機能に `supports` を追加すると、`useBlockProps.save()` フックが返すオブジェクトに適切なクラスが追加されます。 diff --git a/docs/getting-started/fundamentals/file-structure-of-a-block.md b/docs/getting-started/fundamentals/file-structure-of-a-block.md index acc7db2aae85d0..9f77e6e58c3480 100644 --- a/docs/getting-started/fundamentals/file-structure-of-a-block.md +++ b/docs/getting-started/fundamentals/file-structure-of-a-block.md @@ -14,9 +14,14 @@ The files generated by `create-block` are a good reference of the files that can `create-block` が生成するファイルセットは、ブロックの定義や登録に関連するファイルセットの良いリファレンスになります。 -[![ブロックのファイル構成の図解を excalidraw で開く](https://developer.wordpress.org/files/2023/11/file-structure-block.png)](https://excalidraw.com/#json=YYpeR-kY1ZMhFKVZxGhMi,mVZewfwNAh_oL-7bj4gmdw "ブロックのファイル構成の図解を excalidraw で開く") +[![ブロックのファイル構成の図解を開く](https://developer.wordpress.org/files/2023/11/file-structure-block.png)](https://developer.wordpress.org/files/2023/11/file-structure-block.png "ブロックのファイル構成の図解を開く") + + +## ブロックの定義と登録に関するフォルダとファイル ### `.php` @@ -162,15 +167,6 @@ In a standard project, the `build` folder contains the generated files in [the b --> ## その他の情報 - -- [block.json のメタデータ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/) -- [`wp-scripts build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) -- [`wp-scripts start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) -- [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) (webpack と WordPress パッケージの関係) | Developer Blog +- [ブロックのファイル構成の図解](https://excalidraw.com/#json=YYpeR-kY1ZMhFKVZxGhMi,mVZewfwNAh_oL-7bj4gmdw) -[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/file-structure-of-a-block.md) \ No newline at end of file +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/file-structure-of-a-block.md) diff --git a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md index e8d746e5bb0bed..64e0b18862d372 100644 --- a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md +++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md @@ -9,7 +9,7 @@ A JavaScript Build Process is recommended for most cases when working with Javas ブロックエディターで JavaScript を利用する場合、ほとんどのケースでは JavaScript ビルドプロセスを推奨します。ビルドプロセスを使用するとコードの中で ESNext や JSX (他にもあります) の構文や機能を使え、ほとんどのブラウザに対応したコードを作成できます。 ## JavaScript ビルドプロセス @@ -39,9 +39,9 @@ Among other things, with `wp-scripts` package you can use Javascript modules to 特に、`wp-scripts` パッケージでは、JavaScript モジュールを使用してコードをさまざまなファイルに分散し、ビルドプロセスの最後で2、3のバンドルされたファイルを取得できます ([例](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8)を参照)。 -[![ビルドプロセスの図解](https://developer.wordpress.org/files/2023/11/build-process.png)](https://excalidraw.com/#json=4aNG9JUti3pMnsfoga35b,ihEAI8p5dwkpjWr6gQmjuw "ビルドプロセスの図解を Excalidraw で開く") +[![ビルドプロセスの図解を開く](https://developer.wordpress.org/files/2023/11/build-process.png)](https://developer.wordpress.org/files/2023/11/build-process.png "ビルドプロセスの図解を開く") +- [パッケージリファレンス](https://developer.wordpress.org/block-editor/reference-guides/packages/) - [wp-scripts 入門](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-wp-scripts/) - [エディター内でのアセットのエンキュー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/enqueueing-assets-in-the-editor/) - [WordPress パッケージのハンドル](https://ja.wordpress.org/team/handbook/block-editor/contributors/code/scripts/) @@ -115,5 +118,6 @@ Use [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/ho - [ブロック開発例](https://github.com/WordPress/block-development-examples) | GitHub リポジトリ - [block-theme-examples](https://github.com/wptrainingteam/block-theme-examples) | GitHub リポジトリ - [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) (webpack と WordPress パッケージの関係) | Developer Blog +- [ビルドプロセスの図解](https://excalidraw.com/#json=4aNG9JUti3pMnsfoga35b,ihEAI8p5dwkpjWr6gQmjuw) -[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/javascript-in-the-block-editor.md) \ No newline at end of file +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/javascript-in-the-block-editor.md) diff --git a/docs/getting-started/fundamentals/markup-representation-block.md b/docs/getting-started/fundamentals/markup-representation-block.md new file mode 100644 index 00000000000000..20289f8f228ce8 --- /dev/null +++ b/docs/getting-started/fundamentals/markup-representation-block.md @@ -0,0 +1,44 @@ +# Markup representation of a block + +When stored, in the database (DB) or in templates as HTML files, blocks are represented using a [specific HTML grammar](https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/#data-and-attributes), which is technically valid HTML based on HTML comments that act as explicit block delimiters + +These are some of the rules for the markup used to represent a block: +- All core block comments start with a prefix and the block name: `wp:blockname` +- For custom blocks, `blockname` is `namespace/blockname` +- The comment can be a single line, self-closing, or wrapper for HTML content. +- Custom block settings and attributes are stored as a JSON object inside the block comment. + +_Example: Markup representation of an `image` core block_ + +``` + +
+ +``` + +The [markup representation of a block is parsed for the Block Editor](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/) and the block's output for the front end: +- In the editor, WordPress parses this block markup, captures its data and loads its `edit` version +- In the front end, WordPress parses this block markup, captures its data and generates its final HTML markup + +Whenever a block is saved, the `save` function, defined when the [block is registered in the client](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-javascript-client-side), is called to return the markup that will be saved into the database within the block delimiter's comment. If `save` is `null` (common case for blocks with dynamic rendering), only a single line block delimiter's comment is stored, along with any attributes + +The Post Editor checks that the markup created by the `save` function is identical to the block's markup saved to the database: +- If there are any differences, the Post Editor trigger a **block validation error**. +- Block validation errors usually happen when a block’s `save` function is updated to change the markup produced by the block. +- A block developer can mitigate these issues by adding a [**block deprecation**](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/) to register the change in the block. + +The markup of a **block with dynamic rendering** is expected to change so the markup of these blocks is not saved to the database. What is saved in the DB as representation of the block, for blocks with dynamic rendering, is a single line of HTML consisting on just the block delimiter's comment (including block attributes values). That HTML is not subject to the Post Editor’s validation. + +_Example: Markup representation of a block with dynamic rendering (`save` = `null`) and attributes_ + + +```html + +``` + +## Additional Resources + +- [Data Flow and Data Format](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/) +- [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/) +- [Block deprecation – a tutorial](https://developer.wordpress.org/news/2023/03/10/block-deprecation-a-tutorial/) +- [Introduction to Templates > Block markup](https://developer.wordpress.org/themes/templates/introduction-to-templates/#block-markup) | Theme Handbook \ No newline at end of file diff --git a/docs/getting-started/fundamentals/registration-of-a-block.md b/docs/getting-started/fundamentals/registration-of-a-block.md index 904a98ca25035f..a1de918d8e0c93 100644 --- a/docs/getting-started/fundamentals/registration-of-a-block.md +++ b/docs/getting-started/fundamentals/registration-of-a-block.md @@ -19,14 +19,14 @@ For example, to allow a block [to be styled via `theme.json`](https://developer. 例えば、あるブロックを [`theme.json` でスタイルを設定できる](https://developer.wordpress.org/themes/global-settings-and-styles/settings/blocks/)ようにするには、そのブロックをサーバーに登録する必要があります。そうしなければ `theme.json` で割り当てられたスタイルは無視されます。 -[![ブロック登録の図解を excalidraw で開く](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png)](https://excalidraw.com/#json=PUQu7jpvbKsUHYfpHWn7s,61QnhpZtjykp3s44lbUN_g "ブロック登録の図解を excalidraw で開く") +[![ブロック登録の図解を開く](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png)](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png "ブロック登録の図解を開く") -### PHP によるブロックの登録 (サーバー側) +## PHP によるブロックの登録 (サーバー側) -### JavaScript によるブロックの登録(クライアント側) +## JavaScript によるブロックの登録(クライアント側) > 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. + +
+ This tutorial uses 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. +
+ +## Scaffolding the block + +The first step in creating the Copyright Date Block is to scaffold the initial block structure using the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package. + +
+ Review the Get started with create-block documentation for an introduction to using this package. +
+ +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. + +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. + +
+ If you are not using wp-env, instead, navigate to the plugins/ folder in your local WordPress installation using the terminal and run the following command. +
+ +```bash +npx @wordpress/create-block@latest copyright-date-block --variant=dynamic +cd copyright-date-block +``` + +After executing this command, you'll find a new directory named `copyright-date-block` in the plugins folder. This directory contains all the initial files needed to start customizing your block. + +This command also sets up the basic structure of your block, with `copyright-date-block` as its slug. This slug uniquely identifies your block within WordPress. + +
+ You might have noticed that the command uses the --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. +
+ +Navigate to the Plugins page in the WordPress admin and confirm that the plugin is active. Then, create a new page or post and ensure you can insert the Copyright Date Block. It should look like this once inserted. + +![The scaffolded block in the Editor](https://developer.wordpress.org/files/2023/12/block-tutorial-2.png) + +## Reviewing the files +Before we begin modifying the scaffolded block, it's important to review the plugin's file structure. Open the plugin folder in your code editor. + +![The files that make up the block plugin](https://developer.wordpress.org/files/2023/12/block-tutorial-3.png) + +Next, look at the [File structure of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/) documentation for a thorough overview of what each file does. Don't worry if this is overwhelming right now. You will learn how to use each file throughout this tutorial. + +
+ Since you scaffolded a dynamic block, you will not see a save.js file. Later in the tutorial, you will add this file to the plugin to enable static rendering, so stay tuned. +
+ +## Initial setup + +Let's start by creating the simplest Copyright Date Block possible, which will be a dynamically rendered block that simply displays the copyright symbol (©) and the current year. We'll also add a few controls allowing the user to modify font size and text color. + +Before proceeding to the following steps, run `npm run start` in the terminal from within the plugin directory. This command will watch each file in the `/src` folder for changes. The block's build files will be updated each time you save a file. + +Check out the [Working with JavaScript for the Block Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor/) documentation to learn more. + +### Updating block.json + +Open the `block.json` file in the `/src` folder. + +```json +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "create-block/copyright-date-block", + "version": "0.1.0", + "title": "Copyright Date Block", + "category": "widgets", + "icon": "smiley", + "description": "Example block scaffolded with Create Block tool.", + "example": {}, + "supports": { + "html": false + }, + "textdomain": "copyright-date-block", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "render": "file:./render.php", + "viewScript": "file:./view.js" +} +``` + +
+ Review the block.json documentation for an introduction to this file. +
+ +Since this scaffolding process created this file, it requires some updating to suit the needs of the Copyright Date Block. + +#### Modifying the block identity + +Begin by removing the icon and adding a more appropriate description. You will add a custom icon later. + +1. Remove the line for `icon` +2. Update the description to "Display your site's copyright date." +3. Save the file + +After you refresh the Editor, you should now see that the block no longer has the smiley face icon, and its description has been updated. + +![The block in the Editor with updated information](https://developer.wordpress.org/files/2023/12/block-tutorial-4.png) + +#### Adding block supports + +Next, let's add a few [block supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) so that the user can control the font size and text color of the block. + +
+ You should always try to use native block supports before building custom functionality. This approach provides users with a consistent editing experience across blocks, and your block benefits from Core functionality with only a few lines of code. +
+ +Update the [`supports`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#enable-ui-settings-panels-for-the-block-with-supports) section of the `block.json` file to look like this. + +```json +"supports": { + "color": { + "background": false, + "text": true + }, + "html": false, + "typography": { + "fontSize": true + } +}, +``` + +Note that when you enable text color support with `"text": true`, the background color is also enabled by default. You are welcome to keep it enabled, but it's not required for this tutorial, so you can manually set `"background": false`. + +Save the file and select the block in the Editor. You will now see both Color and Typography panels in the Settings Sidebar. Try modifying the settings and see what happens. + +![The block in the Editor with block supports](https://developer.wordpress.org/files/2023/12/block-tutorial-5.png) + +#### Removing unnecessary code + +For simplicity, the styling for the Copyright Date Block will be controlled entirely by the color and typography block supports. This block also does not have any front-end Javascript. Therefore, you don't need to specify stylesheets or a `viewScript` in the `block.json` file. + +1. Remove the line for `editorStyle` +2. Remove the line for `style` +3. Remove the line for `viewScript` +4. Save the file + +Refresh the Editor, and you will see that the block styling now matches your current theme. + +![The block in the Editor without default styling](https://developer.wordpress.org/files/2023/12/block-tutorial-6.png) + +#### Putting it all together + +Your final `block.json` file should look like this: + +```json +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "create-block/copyright-date-block", + "version": "0.1.0", + "title": "Copyright Date Block", + "category": "widgets", + "description": "Display your site's copyright date.", + "example": {}, + "supports": { + "color": { + "background": false, + "text": true + }, + "html": false, + "typography": { + "fontSize": true + } + }, + "textdomain": "copyright-date-block", + "editorScript": "file:./index.js", + "render": "file:./render.php" +} +``` + +### Updating index.js + +Before you start building the functionality of the block itself, let's do a bit more cleanup and add a custom icon to the block. + +Open the [`index.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#index-js) file. This is the main JavaScript file of the block and is used to register it on the client. You can learn more about client-side and server-side registration in the [Registration of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/) documentation. + +Start by looking at the [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/) function. This function accepts the name of the block, which we are getting from the imported `block.js` file, and the block configuration object. + +```js +import Edit from './edit'; +import metadata from './block.json'; + +registerBlockType( metadata.name, { + edit: Edit, +} ); +``` + +By default, the object just includes the `edit` property, but you can add many more, including `icon`. While most of these properties are already defined in `block.json`, you need to specify the icon here to use a custom SVG. + +#### Adding a custom icon + +Using the calendar icon from the [Gutenberg Storybook](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library), add the SVG to the function like so: + +```js +const calendarIcon = ( + +); + +registerBlockType( metadata.name, { + icon: calendarIcon, + edit: Edit +} ); +``` + +
+ All block icons should be 24 pixels square. Note the viewBox parameter above. +
+ +Save the `index.js` file and refresh the Editor. You will now see the calendar icon instead of the default. + +![The block in the Editor a custom icon](https://developer.wordpress.org/files/2023/12/block-tutorial-7.png) + +At this point, the block's icon and description are correct, and block supports allow you to change the font size and text color. Now, it's time to move on to the actual functionality of the block. + +### Updating edit.js + +The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message " Copyright Date Block – hello from the editor!". Let's change that. + +Open the file and see that the `Edit()` function returns a paragraph tag with the default message. + +```js +export default function Edit() { + return ( +

+ { __( + '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 + +
+ Review the block wrapper documentation for an introductory guide on how to ensure the block's markup wrapper has the proper attributes. +
+ +As a reminder, the main purpose of this block is to display the copyright symbol (©) and the current year. So, you first need to get the current year in string form, which can be done with the following code. + +```js +const currentYear = new Date().getFullYear().toString(); +``` + +Next, update the function to display the correct information. + +```js +export default function Edit() { + const currentYear = new Date().getFullYear().toString(); + + return ( +

© { 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 ( + <> + + Testing + +

© { 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 ( + <> + + + Testing + + +

© { 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; + ... +``` + +
+ To see all the attributes associated with the Copyright Date Block, add console.log( attributes ); at the top of the Edit() function. This can be useful when building and testing a custom block. +
+ +Now, you can remove the "Testing" message and add a `TextControl`. It should include: + +1. A `label` property set to "Starting year" +2. A `value` property set to the attribute `startingYear` +3. An `onChange` property that updates the `startingYear` attribute whenever the value changes + +Putting it all together, 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 ( + <> + + + + setAttributes( { startingYear: value } ) + } + /> + + +

© { 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 ( + <> + + + + setAttributes( { + showStartingYear: ! showStartingYear, + } ) + } + /> + { showStartingYear && ( + + setAttributes( { startingYear: value } ) + } + /> + ) } + + +

© { 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; +} +``` + +
+ When you declare a variable with 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. +
+ +Next, you just need to update the block content to use the `displayDate` instead of the `currentYear` variable. + +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(); + + let displayDate; + + if ( showStartingYear && startingYear ) { + displayDate = startingYear + '–' + currentYear; + } else { + displayDate = currentYear; + } + + return ( + <> + + + + setAttributes( { + showStartingYear: ! showStartingYear, + } ) + } + /> + { showStartingYear && ( + + setAttributes( { startingYear: value } ) + } + /> + ) } + + +

© { 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.
  • +
+
+ +The code should look something like this. + +```php +if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) { + $display_date = $attributes['startingYear'] . '–' . $current_year; +} else { + $display_date = $current_year; +} +``` + +Next, you just need to update the block content to use the `$display_date` instead of the `$current_year` variable. + +Your final `render.php` file should look like this. + +```php + +

> + © +

+``` + +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 +} ); +``` + +
+ When defining properties of an object, if the property name and the variable name are the same, you can use shorthand property names. This is why the code above uses save instead of save: save. +
+ +Save both `save.js` and `index.js` files and refresh the Editor. It should look like this. + +![A block validation error message in the Editor](https://developer.wordpress.org/files/2023/12/block-tutorial-15.png) + +Don't worry, the error is expected. If you open the inspector in your browser, you should see the following message. + +![A block validation error message in the console](https://developer.wordpress.org/files/2023/12/block-tutorial-16.png) + +This block validation error occurs because the `save()` function returns block content, but no HTML is stored in the block markup since the previously saved block was dynamic. Remember that this is what the markup currently looks like. + +```html + +``` + +You will see more of these errors as you update the `save()` function in subsequent steps. Just click "Attempt Block Recovery" and update the page. + +After preforming block recovery, open the Code editor and you will see the markup now looks like this. + +```html + + + +``` + +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 + + + +``` + +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) -- [`` コンポーネントのレビュー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#ltEditorgt-%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) -- [カスタム ``](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-ltBlockEditorgt) -- [サイドバーのレビュー](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC) -- [ブロックの永続性](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E6%B0%B8%E7%B6%9A%E6%80%A7) -- [まとめ](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/#%E3%81%BE%E3%81%A8%E3%82%81) - diff --git a/docs/how-to-guides/plugin-sidebar-0.md b/docs/how-to-guides/plugin-sidebar-0.md index bcd37817b86045..e55592cca64ed2 100644 --- a/docs/how-to-guides/plugin-sidebar-0.md +++ b/docs/how-to-guides/plugin-sidebar-0.md @@ -39,7 +39,7 @@ The tutorial assumes you have an existing plugin setup and are ready to add PHP ## ステップバイステップガイド ### ステップ 1: サイドバーの起動 @@ -251,7 +251,7 @@ This code doesn't let users store or retrieve data just yet, so the next steps w このコードは、データの保存も取得もしません。次のステップでは、メタブロックフィールドとの接続方法を見ていきます。 ### ステップ 3: メタフィールドの登録 @@ -298,7 +298,7 @@ If the code returns `undefined` make sure your post type supports `custom-fields コードが `undefined` を返す場合、[投稿の登録時](https://developer.wordpress.org/reference/functions/register_post_type/#supports)または [add_post_type_support 関数](https://developer.wordpress.org/reference/functions/add_post_type_support/)で投稿タイプが `custom-fields` をサポートすることを確認してください。 ### ステップ 4: 入力コントロールの初期化 @@ -425,7 +425,7 @@ You can observe the content changing in the input component. 入力コンポーネントのコンテンツが変更されることを確認できます。 ### ステップ 5: 入力コントロールの変更でメタフィールドを更新する diff --git a/docs/how-to-guides/propagating-updates.md b/docs/how-to-guides/propagating-updates.md index ae5cb5f3b2a9ac..5f2861a4e456c6 100644 --- a/docs/how-to-guides/propagating-updates.md +++ b/docs/how-to-guides/propagating-updates.md @@ -40,7 +40,7 @@ It is not fool-proof because users can modify the class via the editor UI. Howe As the name suggests, these blocks are inherently synced across your site. Keep in mind that there are currently limitations with relying on reusable blocks to handle certain updates since content, HTML structure, and styles will all stay in sync when updates happen. If you require more nuance than that, this is a key element to factor in and a dynamic block might be a better approach. -### Template Parts and Templates +### Template parts and templates Because block themes allow users to directly edit templates and template parts, how changes are managed need to be adjusted in light of the greater access given to users. For context, when templates or template parts are changed by the user, the updated templates from the theme update don’t show for the user. Only new users of the theme or users who have not yet edited a template are experiencing the updated template. If users haven’t modified the files then the changes you make on the file system will be reflected on the user’s sites – you just need to update the files and they’ll get the changes. However if they have made changes to their templates then the only way you can update their templates is to: diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 7c50ccc87ac3be..2953ed1d12d0bb 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -227,6 +227,9 @@ body { --wp--preset--color--white: #ffffff; } ``` + - **カスタムプロパティ**: 自身の CSS カスタムプロパティを作成する仕組みもあります。 @@ -236,7 +239,6 @@ body { --> #### 入力 ## タイプの検証 @@ -175,7 +175,7 @@ Note that the validity of an `object` is determined by your `source`. For an exa `object` の検証は、`source` によって決定されることに注意してください。例として、以下の「query」の詳細を参照してください。 ## enum の検証 @@ -198,7 +198,7 @@ _例_: `enum` の例 ``` ## 値のソース @@ -821,7 +821,7 @@ function onChange( event ) { ``` ## デフォルト値 diff --git a/docs/reference-guides/block-api/block-context.md b/docs/reference-guides/block-api/block-context.md index aaf236df0ccf18..7208badd38c78d 100644 --- a/docs/reference-guides/block-api/block-context.md +++ b/docs/reference-guides/block-api/block-context.md @@ -19,7 +19,7 @@ If you are familiar with [React Context](https://reactjs.org/docs/context.html), [React コンテキスト](https://reactjs.org/docs/context.html) を知っていれば、ブロックコンテキストは多くで同じアイデアを採用しています。実際、ブロックコンテキストのクライアント側ブロックエディターの実装は非常に簡単な React コンテキストのアプリケーションです。ブロックコンテキストは以下の例で見るようにサーバー側 `render_callback` 実装でもサポートされています。 ## ブロックコンテキストの定義 @@ -29,7 +29,7 @@ Block context is defined in the registered settings of a block. A block can prov ブロックコンテキストはブロックの登録設定内で定義されます。ブロックはコンテキスト値を提供したり継承した値を消費することができます。 ### ブロックコンテキストの提供 @@ -61,7 +61,7 @@ As seen in the above example, it is recommended that you include a namespace as 上の例で見るようにコンテキストキーには名前空間を含めることが推奨されます。他のプラグインや WordPress で提供されるデフォルトのコンテキスト値との潜在的な衝突を防ぎます。コンテキストの名前空間は、プラグイン固有にしてください。多くの場合、ブロックの名前と同じものが使用されます。 ### Block コンテキストの消費 @@ -79,9 +79,10 @@ registerBlockType('my-plugin/record-title', { ``` ## Block コンテキストの使用 + diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md index 79e8c3eef1d50d..a8bf4d406b158e 100644 --- a/docs/reference-guides/block-api/block-edit-save.md +++ b/docs/reference-guides/block-api/block-edit-save.md @@ -31,7 +31,7 @@ const blockSettings = { ``` ### ブロックラッパー props diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index f3b920ac6bb8f7..627c447ea014a9 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -103,9 +103,9 @@ The same file is also used when [submitting block to Block Directory](/docs/gett --> -## メタデータファイルの利点 +## メタデータファイルを使用する利点 このセクションでは、`block.json` ファイルに追加可能な、ブロックタイプの振る舞いとメタデータを定義するすべてのプロパティを紹介します。 -### API Version +### API version -ブロックを識別しやすくするために icon プロパティを指定してください。任意の WordPress Dashicons を指定できます。またスラッグは 非 js コンテキストでのフォールバックとなります。 +ブロックを識別しやすくするために icon プロパティを指定してください。任意の [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/) を指定できます。またスラッグは 非 js コンテキストでのフォールバックとなります。 キーはフックするブロックの名前 (`string`)、値はフックする位置 (`string`) です。利用可能な設定については、[ブロックフックのドキュメント](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#block-hooks-optional) を参照してください。 -### Editor Script +### Editor script _注意: スクリプトの配列を渡すオプションもあります。 WordPress `6.1.0` 以降。_ -### View Script +### View script _注意: ビュースクリプトの配列を渡すオプションもあります。 WordPress `6.1.0` 以降。_ -### Editor Style +### Editor style ### フロントエンドでのエンキュー @@ -1240,7 +1241,7 @@ registerBlockType( metadata, { ``` ## 後方互換性 diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md index 7443ca97dcebac..ec8ead0dd39def 100644 --- a/docs/reference-guides/block-api/block-patterns.md +++ b/docs/reference-guides/block-api/block-patterns.md @@ -38,7 +38,7 @@ In this Document: - セマンティックブロックパターン ## ブロックパターン @@ -121,7 +121,9 @@ function my_plugin_register_my_patterns() { add_action( 'init', 'my_plugin_register_my_patterns' ); ``` - + ## ブロックパターンの登録の解除 ### unregister_block_pattern @@ -168,7 +170,7 @@ function my_plugin_unregister_my_patterns() { add_action( 'init', 'my_plugin_unregister_my_patterns' ); ``` ## ブロックパターンカテゴリー diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md index 18ad6dcc9e4f01..fed4b9d51f254e 100644 --- a/docs/reference-guides/block-api/block-registration.md +++ b/docs/reference-guides/block-api/block-registration.md @@ -72,7 +72,7 @@ _注意:_ ブロック名には英小文字、数字、ダッシュのみを使 _注意:_ ブロック名はコメントデリミッタとして `` のように使用されます。コアで提供されるブロックはシリアライズの際に名前空間が削除されます。 ### ブロック構成 @@ -565,7 +565,7 @@ Block Hooks will not work with post content or patterns crafted by the user, suc ブロックフックは、投稿コンテンツや、ユーザーが作成したパターン (同期パターンなど)、ユーザーが変更したテーマのテンプレートやテンプレートパーツでは機能しません。 ## ブロックコレクション diff --git a/docs/reference-guides/block-api/block-selectors.md b/docs/reference-guides/block-api/block-selectors.md index 71c8d1635c9eb6..f68f6a3a7b0488 100644 --- a/docs/reference-guides/block-api/block-selectors.md +++ b/docs/reference-guides/block-api/block-selectors.md @@ -25,7 +25,7 @@ subfeature. ブロックはその CSS セレクタを3つのレベル、「ルート」「フィーチャー」「サブフィーチャー」でカスタマイズできます。 ## ルートセレクタ @@ -56,7 +56,7 @@ default is generated in the form of `.wp-block-`. ``` ## フィーチャーセレクター @@ -90,7 +90,7 @@ but applying the typography styles to an inner heading only. ``` ## サブフィーチャーセレクタ diff --git a/docs/reference-guides/block-api/block-templates.md b/docs/reference-guides/block-api/block-templates.md index ab0d37d2578747..d1d4a028e20f7c 100644 --- a/docs/reference-guides/block-api/block-templates.md +++ b/docs/reference-guides/block-api/block-templates.md @@ -92,7 +92,7 @@ See the [Meta Block Tutorial](/docs/how-to-guides/metabox.md#step-4-finishing-to テンプレートを使用する完全なサンプルは [メタブロックのチュートリアル](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/metabox#step-4-finishing-touches) を参照してください。 ## ブロック属性 @@ -112,7 +112,7 @@ If you don't have the Gutenberg plugin installed, you can find `block.json` file Gutenberg プラグインをインストールしていなければ、`block.json` ファイルは `wp-includes/blocks/heading/block.json` で見つかります。 @@ -244,7 +244,7 @@ $template = array( ``` ## ネストしたテンプレート diff --git a/docs/reference-guides/block-api/block-transforms.md b/docs/reference-guides/block-api/block-transforms.md index e0eecf308dbe9c..2be14efff0e5c7 100644 --- a/docs/reference-guides/block-api/block-transforms.md +++ b/docs/reference-guides/block-api/block-transforms.md @@ -47,9 +47,10 @@ export const settings = { ``` ## 変換タイプ + diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 6de202640ff6a0..38339b8bffb486 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -389,9 +389,9 @@ Displays the previous comment's page link. ([Source](https://github.com/WordPres ## Comments Title / コメントタイトル -タイトルをコメント数と一緒に表示します ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title)) +タイトルをコメント数と一緒に表示します。([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title)) - **Name:** core/comments-title - **Category:** theme @@ -1275,9 +1275,9 @@ Displays the next posts page link. ([Source](https://github.com/WordPress/gutenb ## Page Numbers / ページ番号 -ページネーション用のページ番号のリストを表示します ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination-numbers)) +ページネーション用のページ番号のリストを表示します。([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination-numbers)) - **Name:** core/query-pagination-numbers - **Category:** theme diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 7d6a1deed455b5..1716482d5178c0 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -138,18 +138,14 @@ _Returns_ ### isEditingTemplate -Returns true if the template editing mode is enabled. - -_Parameters_ - -- _state_ `Object`: Global application state. +> **Deprecated** -_Returns_ - -- `boolean`: Whether we're editing the template. +Returns true if the template editing mode is enabled. ### isEditorPanelEnabled +> **Deprecated** + Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default. _Parameters_ @@ -163,6 +159,8 @@ _Returns_ ### isEditorPanelOpened +> **Deprecated** + Returns true if the given panel is open, or false otherwise. Panels are closed by default. _Parameters_ @@ -176,6 +174,8 @@ _Returns_ ### isEditorPanelRemoved +> **Deprecated** + Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default. _Parameters_ @@ -214,6 +214,8 @@ _Returns_ ### isInserterOpened +> **Deprecated** + Returns true if the inserter is opened. _Parameters_ @@ -414,6 +416,8 @@ _Returns_ ### removeEditorPanel +> **Deprecated** + Returns an action object used to remove a panel from the editor. _Parameters_ @@ -438,42 +442,30 @@ _Parameters_ ### setIsEditingTemplate -Returns an action object used to switch to template editing. - -_Parameters_ - -- _value_ `boolean`: Is editing template. +> **Deprecated** -_Returns_ - -- `Object`: Action object. +Returns an action object used to switch to template editing. ### setIsInserterOpened +> **Deprecated** + Returns an action object used to open/close the inserter. _Parameters_ -- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. -- _value.rootClientId_ `string`: The root client ID to insert at. -- _value.insertionIndex_ `number`: The index to insert at. - -_Returns_ - -- `Object`: Action object. +- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). ### setIsListViewOpened +> **Deprecated** + Returns an action object used to open/close the list view. _Parameters_ - _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed. -_Returns_ - -- `Object`: Action object. - ### showBlockTypes Update the provided block types to be visible. @@ -496,6 +488,8 @@ Action that toggles Distraction free mode. Distraction free mode expects there a ### toggleEditorPanelEnabled +> **Deprecated** + Returns an action object used to enable or disable a panel in the editor. _Parameters_ @@ -508,6 +502,8 @@ _Returns_ ### toggleEditorPanelOpened +> **Deprecated** + Opens a closed panel and closes an open panel. _Parameters_ diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 7a0d67f9db0be0..636ccab4f3c6da 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -157,7 +157,9 @@ _Returns_ ### isInserterOpened -Returns the current opened/closed state of the inserter panel. +> **Deprecated** + +Returns true if the inserter is opened. _Parameters_ @@ -165,11 +167,11 @@ _Parameters_ _Returns_ -- `boolean`: True if the inserter panel should be open; false if closed. +- `boolean`: Whether the inserter is opened. ### isListViewOpened -Returns the current opened/closed state of the list view panel. +Returns true if the list view is opened. _Parameters_ @@ -177,7 +179,7 @@ _Parameters_ _Returns_ -- `boolean`: True if the list view panel should be open; false if closed. +- `boolean`: Whether the list view is opened. ### isNavigationOpened @@ -307,25 +309,23 @@ _Parameters_ ### setIsInserterOpened -Opens or closes the inserter. - -_Parameters_ +> **Deprecated** -- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. -- _value.rootClientId_ `string`: The root client ID to insert at. -- _value.insertionIndex_ `number`: The index to insert at. +Returns an action object used to open/close the inserter. -_Returns_ +_Parameters_ -- `Object`: Action object. +- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). ### setIsListViewOpened -Sets whether the list view panel should be open. +> **Deprecated** + +Returns an action object used to open/close the list view. _Parameters_ -- _isOpen_ `boolean`: If true, opens the list view. If false, closes it. It does not toggle the state, but sets it directly. +- _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed. ### setIsNavigationPanelOpened diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 0bfa052cf15229..be2276bbf03641 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -256,6 +256,30 @@ _Returns_ - `string`: Post type. +### getCurrentTemplateId + +Returns the template ID currently being rendered/edited + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `string?`: Template ID. + +### getDeviceType + +Returns the current editing canvas device type. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `string`: Device type. + ### getEditedPostAttribute Returns a single attribute of the post being edited, preferring the unsaved edit if one exists, but falling back to the attribute for the last known saved state of the post. @@ -855,12 +879,75 @@ _Returns_ - `boolean`: Whether the post can be saved. +### isEditorPanelEnabled + +Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default. + +_Parameters_ + +- _state_ `Object`: Global application state. +- _panelName_ `string`: A string that identifies the panel. + +_Returns_ + +- `boolean`: Whether or not the panel is enabled. + +### isEditorPanelOpened + +Returns true if the given panel is open, or false otherwise. Panels are closed by default. + +_Parameters_ + +- _state_ `Object`: Global application state. +- _panelName_ `string`: A string that identifies the panel. + +_Returns_ + +- `boolean`: Whether or not the panel is open. + +### isEditorPanelRemoved + +Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default. + +_Parameters_ + +- _state_ `Object`: Global application state. +- _panelName_ `string`: A string that identifies the panel. + +_Returns_ + +- `boolean`: Whether or not the panel is removed. + ### isFirstMultiSelectedBlock _Related_ - isFirstMultiSelectedBlock in core/block-editor store. +### isInserterOpened + +Returns true if the inserter is opened. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether the inserter is opened. + +### isListViewOpened + +Returns true if the list view is opened. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether the list view is opened. + ### isMultiSelecting _Related_ @@ -1202,6 +1289,18 @@ _Related_ - removeBlocks in core/block-editor store. +### removeEditorPanel + +Returns an action object used to remove a panel from the editor. + +_Parameters_ + +- _panelName_ `string`: A string that identifies the panel to remove. + +_Returns_ + +- `Object`: Action object. + ### replaceBlock _Related_ @@ -1249,6 +1348,57 @@ _Related_ - selectBlock in core/block-editor store. +### setDeviceType + +Action that changes the width of the editing canvas. + +_Parameters_ + +- _deviceType_ `string`: + +_Returns_ + +- `Object`: Action object. + +### setEditedPost + +Returns an action that sets the current post Type and post ID. + +_Parameters_ + +- _postType_ `string`: Post Type. +- _postId_ `string`: Post ID. + +_Returns_ + +- `Object`: Action object. + +### setIsInserterOpened + +Returns an action object used to open/close the inserter. + +_Parameters_ + +- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. +- _value.rootClientId_ `string`: The root client ID to insert at. +- _value.insertionIndex_ `number`: The index to insert at. + +_Returns_ + +- `Object`: Action object. + +### setIsListViewOpened + +Returns an action object used to open/close the list view. + +_Parameters_ + +- _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed. + +_Returns_ + +- `Object`: Action object. + ### setRenderingMode Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes: @@ -1280,16 +1430,14 @@ _Parameters_ ### setupEditorState -Returns an action object used to setup the editor state when first opening an editor. +> **Deprecated** + +Setup the editor state. _Parameters_ - _post_ `Object`: Post object. -_Returns_ - -- `Object`: Action object. - ### showInsertionPoint _Related_ @@ -1332,6 +1480,26 @@ _Related_ - toggleBlockMode in core/block-editor store. +### toggleEditorPanelEnabled + +Returns an action object used to enable or disable a panel in the editor. + +_Parameters_ + +- _panelName_ `string`: A string that identifies the panel to enable or disable. + +_Returns_ + +- `Object`: Action object. + +### toggleEditorPanelOpened + +Opens a closed panel and closes an open panel. + +_Parameters_ + +- _panelName_ `string`: A string that identifies the panel to open or close. + ### toggleSelection _Related_ diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md index d0a40c202016b2..9343b85930c618 100644 --- a/docs/reference-guides/filters/block-filters.md +++ b/docs/reference-guides/filters/block-filters.md @@ -116,7 +116,7 @@ wp.hooks.addFilter( ); ``` -#### `blocks.getSaveContent.extraProps` +### `blocks.getSaveContent.extraProps` A filter that applies to all blocks returning a WP Element in the `save` function. This filter is used to add extra props to the root element of the `save` function. For example: to add a className, an id, or any valid prop for this element. @@ -233,7 +233,7 @@ const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => { }, 'withMyPluginControls' ); ``` -#### `editor.BlockListBlock` +### `editor.BlockListBlock` Used to modify the block's wrapper component containing the block's `edit` component and all toolbars. It receives the original `BlockListBlock` component and returns a new wrapped component. diff --git a/docs/reference-guides/packages.md b/docs/reference-guides/packages.md index 96368f775d61a3..a740fe8e695a59 100644 --- a/docs/reference-guides/packages.md +++ b/docs/reference-guides/packages.md @@ -8,7 +8,7 @@ WordPress exposes a list of JavaScript packages and tools for WordPress developm WordPress は開発用に JavaScript のパッケージとツールをエクスポーズします。 @@ -35,7 +35,7 @@ For a list of the possible properties to pass your RichText component, [check ou RickText コンポーネントに渡すことができるプロパティのリストについては [GitHub 内のコンポーネントのドキュメント](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)を参照してください。 @@ -137,7 +137,7 @@ registerBlockType( /* ... */, { ``` @@ -167,7 +167,7 @@ RichText のプレースホルダーコンテンツが表示したい入力域 --> @@ -176,7 +176,7 @@ If the HTML tags from text formatting such as `` or `` are being esc `` や `` などのテキストフォーマットの HTML タグがエスケープされてサイトのフロントエンド側に表示される場合は恐らく save 関数の問題です。save 関数のコードが `` (JSX の場合) のようになっていることを確認してください。単純な出力 `

{ heading }

` は誤りです。 ### エディター内で特定のフォーマットを無効化する diff --git a/docs/reference-guides/slotfills/plugin-document-setting-panel.md b/docs/reference-guides/slotfills/plugin-document-setting-panel.md index 76e077056abd63..c62c56b7e6877e 100644 --- a/docs/reference-guides/slotfills/plugin-document-setting-panel.md +++ b/docs/reference-guides/slotfills/plugin-document-setting-panel.md @@ -49,10 +49,10 @@ To programmatically toggle panels, use the following: ```js import { useDispatch } from '@wordpress/data'; -import { store as editPostStore } from '@wordpress/edit-post'; +import { store as editorStore } from '@wordpress/editor'; const Example = () => { - const { toggleEditorPanelOpened } = useDispatch( editPostStore ); + const { toggleEditorPanelOpened } = useDispatch( editorStore ); return (