Apa saja fitur baru di Gutenberg 23.0? (22 April)

“What’s new in Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/” posts (labeled with the #gutenberg-new tag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.

Gutenberg 23.0 has been released and is available for download!

This release introduces a revisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. panel for templates, template parts, and patterns (experimental), and extends the Site Editor’s Design › Identity panel with Site Title and Site Tagline fields, completing the set alongside the previously added Site Logo and Icon. Real-time collaboration gains compatibility with legacy meta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes and a range of reliability improvements, while the block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor receives several quality-of-life refinements.

A total of 174 PRs were merged in Gutenberg 23.0, with 8 first-time contributors.

Table of contents

1. Revisions panel in templates, template parts, and patterns (experimental)
2. Site Title and Site Tagline in the Design › Identity panel
3. Other Notable Highlights
4. Note for users of the Guidelines experiment
5. Changelog
   1. Enhancements
   2. Bug Fixes
   3. Accessibility
   4. Performance
   5. Experiments
   6. Documentation
   7. Code Quality
   8. Tools
6. First-time contributors
7. Contributors

Revisions panel in templates, template parts, and patterns (experimental)

Editing a template, template part, or pattern now surfaces the same Revisions panel previously available only for posts and pages. When any of these entities has revisions, a Revisions row appears in the sidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. with access to review and restore prior versions, matching the behavior already in place for regular post types.

This is part of the ongoing Editor Inspector: Use DataForm experiment, which is progressively rolling out a unified DataForm-based inspector across all post types. Enable the experiment from Gutenberg → Experiments to try it in the Site Editor or while editing a template from the Post Editor. (#77008)

Site Title and Site Tagline in the Design › Identity panel

The Design › Identity panel — introduced in 22.8 with Site Logo and Site Icon — now also includes Site Title and Site Tagline. All four identity settings sit in a single panel, editable directly from the Site Editor without a trip to Settings → General. Because the title and tagline fields write to the same root/site entity that the Site Title and Site Tagline blocks read from, edits show up live in the editor canvas as you type. The panel uses consistent field styling across text and media controls, so the four settings read as one unified form. (#76264)

Other Notable Highlights

• Real-time Collaboration, legacy meta box compatibility. Plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. authors can now mark individual meta boxes as RTC-compatible using a new __rtc_compatible_meta_box flag, so the presence of a legacy meta box no longer unconditionally disables collaboration. Site administrators can also apply the flag to third-party meta boxes via the existing filter_block_editor_meta_boxes hook. (#76939)
• Real-time Collaboration, reliability. Concurrent edits to array-type block attributes — such as table rows — are now preserved when the array is restructured (#77164). A single corrupted sync update no longer crashes the whole poll cycle and disconnects every room (#76968). Gutenberg’s activation hook now honors the Core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WP_ALLOW_COLLABORATION constant, giving hosts a reliable kill switch (#77084).
• Keyboard shortcuts for moving blocks surface in tooltips. The block toolbar’s move-up / move-down tooltips now display their keyboard shortcuts. (#76992)
• Spacing side controls re-order when unlinked. When link mode is off, the four side inputs are arranged in a more predictable order. (#66317)
• Separator block honors the --- shortcut’s default variation. Inserting a Separator via the Markdown-style --- shortcut now applies the block’s default style variation, matching the behavior of inserting it through the inserter. (#77135)

Note for users of the Guidelines experiment

If you had the Guidelines experiment enabled in a previous release, 23.0 renames its internal identifiers from content-guidelines / content_guideline to guidelines / guideline. The rename covers the custom post type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. slug, REST base, meta keys, experiment flag, and Redux store. Because the experiment flag itself is renamed, it will appear disabled after updating — you’ll need to re-enable it from Gutenberg → Experiments and re-enter any previously saved guidelines. (#77147, #77223)

Changelog

Enhancements

Components

• wordpress/ui: Add global CSS Cascading Style Sheets. defense module. (76783)
• Admin (and super admin) UI User interface: Increase page header The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. vertical padding. (77152)
• Admin UI: Update Page background color to surface-neutral. (76869)
• Autocomplete: Remove getAutoCompleterUI factory pattern. (77048)
• DataForm: Add min/max date range support for date and datetime fields. (77201)
• DataForm: Show tooltip in edit button in panel layout. (77024)
• DataForm: Support disabled controls. (77090)
• FormToggle: Update disabled styles. (77208)
• Media Upload Modal: Persist view configuration. (77288)
• Text: Remove UA margins. (76970)
• UI Text: Mark as recommended. (77044)
• UI/Dialog: Add explicit margin-inline-end rule to Title. (77334)
• UI: Update @base-ui/react from 1.3.0 to 1.4.0. (77308)
• UI: Use Text component for Badge typography. (77295)
• Use --wpds-cursor-control design token for interactive controls. (76786), (77259)
• @wordpress/ui: Add Popover. (76438)
• ui/AlertDialog: Better async confirm APIs, fully use base ui’s AlertDialog. (76937)
• ui/Dialog: Update Header layout, refactor Title to use Text. (77161)
• ui: Expose container portal prop on all overlay Popup components. (77163)

Block Library

• Add context for next/previous enlarge image. (76967)
• Image block: Validate attachment ID exists before treating image as local. (77178)
• Search Block: Ensure color settings apply to input field when button is disabled. (77219)
• Tab Menu Item: Simplify active tab menu item style. (77195)
• Tabs: Remove sequential numbering from new tab labels. (77321)
• Use entity link title for link control preview. (77155)

Guidelines

• Guidelines CPT: Rename from “content guidelines” to “guidelines” (slug, classes, routes). (77147), (77223)
• Guidelines: Make the CPT type-aware. (77491)
• Improve guideline revision UX User experience. (76560)
• Registers wp_guideline_type taxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies.. (77156)
• Update actions-section and import/export workflow. (76621)

Post Editor

• DataViews: Simplify defaultLayouts prop. (77232)
• RTC: Add filterable flag for meta box RTC compatibility. (76939)
• RTC: Change SyncConnectionModal to isSyncConnectionErrorHandled filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. and drop IS_GUTENBERG_PLUGIN check. (76853)

Block Editor

• Display shortcuts for moving blocks via tooltips. (76992)
• Re-order spacing side controls when unlinked. (66317)

Connectors

• Update the AI plugin settings page slug we link to after activation. (77336)

DataViews

• Classify admin-ui and dataviews to components. (76959)

Global Styles

• Renamed focus visible label. (77292)

REST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/

• Add date field in templates and template parts. (77134)

Media

• Media Modal Experiment: Set matching picker grid layout properties for when a user switches layouts. (77118)

Collaboration

• Backport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch.: Improve validation and permission checks for WP_HTTP_Polling_Sync_Server. (76987)
• RTC: Add optional shouldSync function to entity sync configuration. (76947)
• RTC: Respect WP_ALLOW_COLLABORATION in Gutenberg for activation hook. (77084)

Site Editor

• Add Site Tagline and Site Title to Design > Identity panel. (76264)

Bug Fixes

Components

• Calendar: Fix disabled styles. (77138)
• Card: Set default foreground color on root. (77013)
• Checkbox: Fix disabled styles. (77132)
• DataForm: Remove text-transform from panel field labels. (77196)
• DataViews: Fix compact density clipping and remove top/bottom padding. (77054)
• Fix autocomplete overlapping trigger matching. (77018)
• FormTokenField: Fix disabled styles. (77137)
• RTC: Fix inline inserter reset on update sync. (76980)
• RadioControl: Add support for disabling radio group. (77127)
• Remove sandbox allow-same-origin for core/html HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. blocks. (77212)
• TextArea: Add disabled styles. (77129)
• UI: Normalize render prop and ref forwarding patterns. (77160)

Block Library

• Cover block: Fix embed video background Error 153 in editor. (76904)
• Fix overflow of highlighted white-space in Code Block. (77085)
• Image block: Hide drag handles while an upload is in progress. (77121)
• Paragraph: Prevent onEnter splitting of parent block when insertion of that block type is not allowed. (77291)
• Post Author Biography: Preserve occurrence of white spaces. (71133)
• RTC: Core/cover block minor compatibility fixes. (76916)
• Search block: Match behavior of global styling for border and color with local styling (inspector controls) to remove inconsistency. (77060)
• Search block: Derive ‘isSearchFieldHidden’ value. (77082)
• Separator Block: Apply default block variation when inserting via --- shortcut. (77135)
• Upload external media: Ensure notice only fires once. (77218)

Block Editor

• Fix SyntaxError in Autocompleter UI when pasting matching content. (76961)
• LinkPicker: Decode HTML entities in link preview title. (77170)
• Prevent Enter key from inserting paragraphs in contentOnly sections. (76989)
• RTC: Fix “Edit as HTML” content reset during collaboration. (77043)
• Writing Flow: Fix format toolbar not appearing when selecting text from block edge. (77136)
• contentOnly template lock: Fix block insertion and removal rules. (77119)
• Fix numeric value clearing in preset input controls. (77139)

Guidelines

• Guidelines CPT: Skip registration when post type already exists. (77486)

Data Layer

• Core Data: Fix ‘useEntityProp’ for raw attributes. (77120)
• Core Data: Fix incorrect pagination for non-paginated entities. (76406)
• RTC: Fix core/table cell merging. (76913)
• RTC: Fix orphaned meta causing dirty editor state. (77529)
• RTC: Improve array attribute stability when structural changes occur. (77164)
• getMergedItemsIds: Receive full page bigger than perPage. (77262)

Connectors

• Account for mu-plugins when resolving plugin.file status. (76994)
• Don’t clobber third-party custom render in registerDefaultConnectors. (77116)
• Hide Akismet unless already installed. (76962)
• Replace speak() with notice store for state changes. (77174)
• Update help text from ‘reset’ to ‘manage’. (76963)

Post Editor

• Fields: Fix postContentInfoField when there are edits. (76901)
• Fix: Restore editor canvas padding in classic themes. (76864)
• RTC: Fix button flickering on retry dialog. (77234)
• RTC: Predefined retry schedules for disconnect dialog, make more lenient. (76966)
• Revision: Fix ‘Show changes’ button reset state. (77122)

Collaboration

• Fix failing ‘WP_HTTP_Polling_Sync_Server’ unit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (77025)
• RTC: Fix disconnect dialog due to uneditable entity. (77242)
• RTC: Isolate sync update failures to prevent full disconnect. (76968)

Global Styles

• Fix duotone filter not applying on style variation switch. (77229)
• Global Styles Revisions: Fix footer overflow. (77103)

DataViews

• Fix Gutenberg_REST_View_Config_Controller_7_1 PHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher warnings. (77290)

Patterns

• Fix custom category The ‘category’ taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in site editor not displaying pattern actions. (77251)

Media

• MediaEdit: Handle ‘*’ wildcard in validateMimeType. (77168)

Client Side Media

• Use image.copyMemory() for batch thumbnail generation. (76979)

Accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

Components

• ValidatedRangeControl: Fix aria-label rendered as [object Object]. (77042)

Performance

Post Editor

• Autocompleters: Move and improve links search. (76995)

Client Side Media

• Add performance metrics for client-side media processing. (76792)

Experiments

Post Editor

• Add revisions panel to templates, template parts and patterns. (77008)

Documentation

• Add missing documentation in collaboration.php. (77173)
• Autocomplete: Clarify ‘isDebounced’ setting limitation. (77062)
• Docs: Add README for DatePicker and TimePicker Components. (70365)
• Editor: Fix ‘selectedNote’ action JSDoc. (77080)
• Eslint: Suggest alternative in no-setting-ds-tokens rule. (77154)
• Fix: A sentence has no ending punctuation in README.md file. (77027)
• HStack, VStack: Mark as not recommended for use. (77041)
• Improve CSS setup instructions in package readmes. (76975)
• Storybook: Enable theming toolbar for wp-components. (77038)
• Storybook: Fix “Default” cursor option in theming toolbar. (77037)
• UI/Tooltip: Add usage guidelines documentation. (77158)
• UI: Use Link component in details story example. (76997)
• iAPI Docs: Fix typos, code errors, and inaccuracies in the documentation. (76636)
• ui/docs: Add additional global css setup instructions. (77228)

Code Quality

• TypeScript: Migrate a11y Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) package to TS. (70680)

Components

• Add .scss files to CSS module linting. (77140)
• Block Directory: Use --wpds-cursor-control design token. (77330)
• Autocomplete: Refactor useAutocomplete to use useReducer. (77020)
• BoxControl: Remove unused state for icon side. (77143)
• Build Tools: Update TypeScript to 6.0.2. (77010)
• Button: Remove obsolete Safari + VoiceOver workaround. (77107)
• Button: Remove unused Storybook stylesheet. (77031)
• Dataviews: Remove unneeded ref callbacks. (77179)
• Extract the autocomplete matcher into a separate function. (76957)
• FormTokenField: Remove unnecessary styles. (77263)
• Textarea: Remove unnecessary styles. (77221)
• Theme: Rename typography tokens to use “typography” prefix. (76912)
• Update React React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org function names for better ESLint detection. (77148)
• i18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Make sprintf return FormattedText for type-safe createInterpolateElement. (76974)
• ui/Card: Remove redundant margin reset from Card.Title. (77187)
• ui/VisuallyHidden: Standardize composition pattern. (77190)

Block Editor

• Block Editor store: Refactor controlledInnerBlocks to Set. (77094)
• Global Styles: Move pseudo-state slicing logic into useStyle hook. (77104)
• BlockMover: Remove unused disabled button props. (76993)
• Extract getElementCSSRules from useBlockProps. (77327)
• updateBlockListSettings: Convert state to Map, do all updates in one action. (46392)

Post Editor

• BlockStyleVariationOverridesWithConfig: Change name and fix lint errors. (77130)
• ESLint plugin: Disable jsx-a11y/heading-has-content. (77073)
• Edit Post: Fix warning in ‘useMetaBoxInitialization’ hook. (77311)
• RTC: Store metaboxes RTC-compatible flag on location entries. (77361)
• Revisions: Simplify fetching. (77086)

Block Library

• Tabs: Simplify anchor handling. (77189)
• TypeScript: Migrate packages/list-reusable-blocks package to TypeScript. (70518)
• TypeScript: Migrate viewport package. (71118)

Data Layer

• Remove remaining esModuleInterop usage. (77095)
• Blocks: Convert blocks package to TypeScript. (76312)

Guidelines

• Remove jsxRuntime pragma. (77255)

Icons

• Override WP_Icons_Registry singleton with Gutenberg icons registry. (76455)

Annotations

• TypeScript: Migrate annotations package to TS. (70602)

Tools

Testing

• Autocomplete: Fix flaky end-to-end tests. (77322)
• E2E Tests: Ensure artifacts generate correctly and remove unnecessary artifacts. (77093)
• Fix page.waitForFunction call arguments in e2e tests. (77300)
• Guidelines: Add end-to-end tests based on the Settings page testing instructions. (77192)
• Remove ‘Home’ and ‘End’ key usage from Navigation tests. (77102)
• Restore original template registration tests alongside activation variants. (77068)
• Tests: Auto-fix some new ‘eslint-plugin-playwright’ warnings. (77314)
• Tests: Fix workspace test scripts (wp-env not found, argument forwarding). (77055), (77083)

Build Tooling

• Add iteration issue template. (77113)
• Build: Fix glob ignore patterns in dot-prefixed directories. (75114)
• Convert directories in test/ to workspaces. (74684)
• Env: Fix loopback requests when running on non-default ports. (77057)
• Fix lint-staged API An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. documentation path. (77203)
• Resolve package-lock.json JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. inconsistency for @babel/eslint-parser. (77256)
• Storybook: Fix end-to-end subpath exports and add CI build smoke test. (77034)
• Refactor: Migrate bin/api-docs to tools/api-docs as workspace @wordpress/api-docs-generator. (77019)
• Upgrade ESLint to v10. (76654)

Data Layer

• Fix pre-existing lint errors across the codebase. (77002)
• Remove unused catch block variables across the codebase. (76969)

First-time contributors

The following PRs were merged by first-time contributors:

• @DarkMatter-999: Fix numeric value clearing in preset input controls. (77139)
• @dkotter: Update the AI plugin settings page slug we link to after activation. (77336)
• @dpmehta: Search block: Match behavior of global styling for border and color with local styling (inspector controls) to remove inconsistency. (77060)
• @mehrazmorshed: Fix: A sentence has no ending punctuation in README.md file. (77027)
• @prachigarg19: Fix duotone filter not applying on style variation switch. (77229)
• @samvaidya: Image block: Validate attachment ID exists before treating image as local. (77178)
• @sandipr942: Added missing documentation in collaboration.php. (77173)
• @superdav42: Connectors: Don’t clobber third-party custom render in registerDefaultConnectors. (77116)

Contributors

The following contributors merged PRs in this release:

@adamsilverstein @Adi-ty @aduth @alecgeatches @andrewserong @annezazu @aswasif007 @BugReportOnWeb @CGastrell @chriszarate @ciampo @coderGtm @DAreRodz @DarkMatter-999 @dinhtungdu @dkotter @dpmehta @ellatrix @gziolo @hbhalodia @iamchughmayank @Infinite-Null @ingeniumed @jameskoster @jeryj @jorgefilipecosta @jsnajdr @kushagra-goyal-14 @madhusudhand @MaggieCabrera @Mamaduka @manzoorwanijk @mehrazmorshed @mirka @nerrad @ntsekouras @oandregal @prachigarg19 @R1shabh-Gupta @ramonjd @samvaidya @sandipr942 @scruffian @shail-mehta @Shekhar0109 @shrivastavanolo @superdav42 @Swanand01 @t-hamano @talldan @tyxla @USERSATOSHI @yashjawale @yogeshbhutkar