From b0d346d7f283fd73bd3feaa3dff92979ac5e3d13 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 23 Jun 2026 19:01:37 +0530 Subject: [PATCH 01/46] feat: Migrate the bold folder --- .../src/bold/{index.js => index.tsx} | 16 +++++++++++-- packages/format-library/src/types.ts | 12 ++++++++++ packages/format-library/tsconfig.json | 24 +++++++++++++++++++ tsconfig.json | 3 ++- 4 files changed, 52 insertions(+), 3 deletions(-) rename packages/format-library/src/bold/{index.js => index.tsx} (79%) create mode 100644 packages/format-library/src/types.ts create mode 100644 packages/format-library/tsconfig.json diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.tsx similarity index 79% rename from packages/format-library/src/bold/index.js rename to packages/format-library/src/bold/index.tsx index 172cc2bced5d6f..1ed2336e13b763 100644 --- a/packages/format-library/src/bold/index.js +++ b/packages/format-library/src/bold/index.tsx @@ -4,9 +4,15 @@ import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent, + // @ts-ignore } from '@wordpress/block-editor'; import { formatBold } from '@wordpress/icons'; +/* + * Internal dependencies + */ +import type { BoldEditProps } from '../types'; + const name = 'core/bold'; const title = __( 'Bold' ); @@ -15,9 +21,15 @@ export const bold = { title, tagName: 'strong', className: null, - edit( { isActive, value, onChange, onFocus, isVisible = true } ) { + edit( { + isActive, + value, + onChange, + onFocus, + isVisible = true, + }: BoldEditProps ): JSX.Element { function onToggle() { - onChange( toggleFormat( value, { type: name, title } ) ); + onChange( toggleFormat( value, { type: name } ) ); } function onClick() { diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts new file mode 100644 index 00000000000000..f1149cef71ec36 --- /dev/null +++ b/packages/format-library/src/types.ts @@ -0,0 +1,12 @@ +/* + * WordPress dependencies + */ +import type { RichTextValue } from '@wordpress/rich-text'; + +export interface BoldEditProps { + isActive: boolean; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; + isVisible?: boolean; +} diff --git a/packages/format-library/tsconfig.json b/packages/format-library/tsconfig.json new file mode 100644 index 00000000000000..760a4b2b5f0aa8 --- /dev/null +++ b/packages/format-library/tsconfig.json @@ -0,0 +1,24 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig.json", + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "types": [ "gutenberg-env" ], + "checkJs": false + }, + "references": [ + { "path": "../a11y" }, + { "path": "../block-editor" }, + { "path": "../components" }, + { "path": "../compose" }, + { "path": "../data" }, + { "path": "../element" }, + { "path": "../html-entities" }, + { "path": "../i18n" }, + { "path": "../icons" }, + { "path": "../latex-to-mathml" }, + { "path": "../private-apis" }, + { "path": "../rich-text" }, + { "path": "../ui" }, + { "path": "../url" } + ] +} diff --git a/tsconfig.json b/tsconfig.json index 72e332d1561c01..a233ddd5ec5c0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -41,7 +41,8 @@ { "path": "packages/widget-dashboard" }, { "path": "packages/widget-primitives" }, { "path": "packages/wordcount" }, - { "path": "packages/worker-threads" } + { "path": "packages/worker-threads" }, + { "path": "packages/format-library" } ], "files": [] } From c81beb71a29d663a200823b264a4e674148cc456 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 23 Jun 2026 19:34:54 +0530 Subject: [PATCH 02/46] feat: Migrate the code folder --- .../src/code/{index.js => index.tsx} | 24 +++++++++++++++---- packages/format-library/src/types.ts | 7 +++++- 2 files changed, 26 insertions(+), 5 deletions(-) rename packages/format-library/src/code/{index.js => index.tsx} (72%) diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.tsx similarity index 72% rename from packages/format-library/src/code/index.js rename to packages/format-library/src/code/index.tsx index 415cdffaec79de..12f93641a83ac4 100644 --- a/packages/format-library/src/code/index.js +++ b/packages/format-library/src/code/index.tsx @@ -1,10 +1,21 @@ import { __ } from '@wordpress/i18n'; +import type { ReactElement } from 'react'; import { toggleFormat, remove, applyFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, RichTextShortcut, + // @ts-ignore } from '@wordpress/block-editor'; import { code as codeIcon } from '@wordpress/icons'; +import type { RichTextValue } from '@wordpress/rich-text'; + +/* + * Internal dependencies + */ +import type { CodeEditProps } from '../types'; + +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; const name = 'core/code'; const title = __( 'Inline code' ); @@ -14,7 +25,7 @@ export const code = { title, tagName: 'code', className: null, - __unstableInputRule( value ) { + __unstableInputRule( value: RichTextValue ): RichTextValue { const BACKTICK = '`'; const { start, text } = value; const characterBefore = text[ start - 1 ]; @@ -46,9 +57,14 @@ export const code = { return value; }, - edit( { value, onChange, onFocus, isActive } ) { + edit( { + value, + onChange, + onFocus, + isActive, + }: CodeEditProps ): ReactElement { function onClick() { - onChange( toggleFormat( value, { type: name, title } ) ); + onChange( toggleFormat( value, { type: name } ) ); onFocus(); } @@ -59,7 +75,7 @@ export const code = { character="x" onUse={ onClick } /> - void; isVisible?: boolean; } +export interface CodeEditProps { + isActive: boolean; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; +} From b87fc46e74f7ed0c04f7926025587c799b097b0f Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 23 Jun 2026 19:37:45 +0530 Subject: [PATCH 03/46] feat: Migrate italic folder ot TS --- .../src/italic/{index.js => index.tsx} | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) rename packages/format-library/src/italic/{index.js => index.tsx} (81%) diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.tsx similarity index 81% rename from packages/format-library/src/italic/index.js rename to packages/format-library/src/italic/index.tsx index 9111acefef2381..3fc051ecc5b2c2 100644 --- a/packages/format-library/src/italic/index.js +++ b/packages/format-library/src/italic/index.tsx @@ -7,6 +7,11 @@ import { } from '@wordpress/block-editor'; import { formatItalic } from '@wordpress/icons'; +/* + * Internal dependencies + */ +import type { BoldEditProps } from '../types'; + const name = 'core/italic'; const title = __( 'Italic' ); @@ -15,9 +20,15 @@ export const italic = { title, tagName: 'em', className: null, - edit( { isActive, value, onChange, onFocus, isVisible = true } ) { + edit( { + isActive, + value, + onChange, + onFocus, + isVisible = true, + }: BoldEditProps ) { function onToggle() { - onChange( toggleFormat( value, { type: name, title } ) ); + onChange( toggleFormat( value, { type: name } ) ); } function onClick() { From 06291ab3621f4e7626a7594c517ed0d14774cc8a Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 23 Jun 2026 19:40:43 +0530 Subject: [PATCH 04/46] feat: Migrate keyboard package to TS --- .../src/keyboard/{index.js => index.tsx} | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) rename packages/format-library/src/keyboard/{index.js => index.tsx} (64%) diff --git a/packages/format-library/src/keyboard/index.js b/packages/format-library/src/keyboard/index.tsx similarity index 64% rename from packages/format-library/src/keyboard/index.js rename to packages/format-library/src/keyboard/index.tsx index 7d239cb8cbe4c3..4126060139570e 100644 --- a/packages/format-library/src/keyboard/index.js +++ b/packages/format-library/src/keyboard/index.tsx @@ -3,17 +3,24 @@ import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { button } from '@wordpress/icons'; +/* + * Internal dependencies + */ +import type { CodeEditProps } from '../types'; + const name = 'core/keyboard'; const title = __( 'Keyboard input' ); +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; export const keyboard = { name, title, tagName: 'kbd', className: null, - edit( { isActive, value, onChange, onFocus } ) { + edit( { isActive, value, onChange, onFocus }: CodeEditProps ) { function onToggle() { - onChange( toggleFormat( value, { type: name, title } ) ); + onChange( toggleFormat( value, { type: name } ) ); } function onClick() { @@ -22,7 +29,7 @@ export const keyboard = { } return ( - Date: Wed, 24 Jun 2026 20:12:36 +0530 Subject: [PATCH 05/46] feat: Migrate language folder to TS --- .../src/language/{index.js => index.tsx} | 29 ++++++++++++++----- packages/format-library/src/types.ts | 13 +++++++++ 2 files changed, 35 insertions(+), 7 deletions(-) rename packages/format-library/src/language/{index.js => index.tsx} (79%) diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.tsx similarity index 79% rename from packages/format-library/src/language/index.js rename to packages/format-library/src/language/index.tsx index 04aa2dc2ac8562..ec5f12b1eff798 100644 --- a/packages/format-library/src/language/index.js +++ b/packages/format-library/src/language/index.tsx @@ -11,6 +11,14 @@ import { useState } from '@wordpress/element'; import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text'; import { language as languageIcon } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import type { LanguageEditProps, InlineLanguageUIProps } from '../types'; + +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + const name = 'core/language'; const title = __( 'Language' ); @@ -26,7 +34,7 @@ export const language = { edit: Edit, }; -function Edit( { isActive, value, onChange, contentRef } ) { +function Edit( { isActive, value, onChange, contentRef }: LanguageEditProps ) { const [ isPopoverVisible, setIsPopoverVisible ] = useState( false ); const togglePopover = () => { setIsPopoverVisible( ( state ) => ! state ); @@ -34,7 +42,7 @@ function Edit( { isActive, value, onChange, contentRef } ) { return ( <> - ( 'ltr' ); return ( void; onFocus: () => void; } +export interface LanguageEditProps { + isActive: boolean; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + contentRef: React.RefObject< HTMLElement >; +} + +export interface InlineLanguageUIProps { + value: RichTextValue; + contentRef: React.RefObject< HTMLElement >; + onChange: ( value: RichTextValue ) => void; + onClose: () => void; +} From 3827a0eaec4d6d75b6697788ad80ebaede8f6ace Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 24 Jun 2026 20:16:28 +0530 Subject: [PATCH 06/46] feat: Migrate nbsp folder to TS --- .../src/non-breaking-space/{index.js => index.tsx} | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) rename packages/format-library/src/non-breaking-space/{index.js => index.tsx} (69%) diff --git a/packages/format-library/src/non-breaking-space/index.js b/packages/format-library/src/non-breaking-space/index.tsx similarity index 69% rename from packages/format-library/src/non-breaking-space/index.js rename to packages/format-library/src/non-breaking-space/index.tsx index 21c438dbb64350..cec36909276751 100644 --- a/packages/format-library/src/non-breaking-space/index.js +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -1,16 +1,22 @@ import { __ } from '@wordpress/i18n'; +import type { RichTextValue } from '@wordpress/rich-text'; import { insert } from '@wordpress/rich-text'; import { RichTextShortcut } from '@wordpress/block-editor'; const name = 'core/non-breaking-space'; const title = __( 'Non breaking space' ); +interface NonBreakingSpaceEditProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; +} + export const nonBreakingSpace = { name, title, tagName: 'nbsp', className: null, - edit( { value, onChange } ) { + edit( { value, onChange }: NonBreakingSpaceEditProps ) { function addNonBreakingSpace() { onChange( insert( value, '\u00a0' ) ); } From 536a44d406b3f694ade9f177131df8112431a6c3 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 24 Jun 2026 20:18:27 +0530 Subject: [PATCH 07/46] feat: Migrate strikethrough folder to TS --- .../src/strikethrough/{index.js => index.tsx} | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) rename packages/format-library/src/strikethrough/{index.js => index.tsx} (60%) diff --git a/packages/format-library/src/strikethrough/index.js b/packages/format-library/src/strikethrough/index.tsx similarity index 60% rename from packages/format-library/src/strikethrough/index.js rename to packages/format-library/src/strikethrough/index.tsx index 78f824e776c909..f123bd7d93e7fb 100644 --- a/packages/format-library/src/strikethrough/index.js +++ b/packages/format-library/src/strikethrough/index.tsx @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +import type { RichTextValue } from '@wordpress/rich-text'; import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, @@ -6,17 +7,26 @@ import { } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; +interface StrikethroughEditProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + isActive: boolean; + onFocus: () => void; +} + const name = 'core/strikethrough'; const title = __( 'Strikethrough' ); +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; export const strikethrough = { name, title, tagName: 's', className: null, - edit( { isActive, value, onChange, onFocus } ) { + edit( { isActive, value, onChange, onFocus }: StrikethroughEditProps ) { function onClick() { - onChange( toggleFormat( value, { type: name, title } ) ); + onChange( toggleFormat( value, { type: name } ) ); onFocus(); } @@ -27,7 +37,7 @@ export const strikethrough = { character="d" onUse={ onClick } /> - Date: Wed, 24 Jun 2026 20:34:44 +0530 Subject: [PATCH 08/46] feat: Update RichTextFormat to include title --- packages/format-library/src/bold/index.tsx | 4 ++-- packages/format-library/src/code/index.tsx | 9 +++++++-- packages/format-library/src/italic/index.tsx | 4 ++-- packages/format-library/src/keyboard/index.tsx | 2 +- packages/format-library/src/strikethrough/index.tsx | 2 +- .../src/subscript/{index.js => index.tsx} | 13 +++++++++++-- packages/rich-text/src/types.ts | 1 + 7 files changed, 25 insertions(+), 10 deletions(-) rename packages/format-library/src/subscript/{index.js => index.tsx} (67%) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 1ed2336e13b763..469f62569b7273 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -29,11 +29,11 @@ export const bold = { isVisible = true, }: BoldEditProps ): JSX.Element { function onToggle() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); } function onClick() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); } diff --git a/packages/format-library/src/code/index.tsx b/packages/format-library/src/code/index.tsx index 12f93641a83ac4..da246f651c36a3 100644 --- a/packages/format-library/src/code/index.tsx +++ b/packages/format-library/src/code/index.tsx @@ -53,7 +53,12 @@ export const code = { value = remove( value, startIndex, startIndex + 1 ); value = remove( value, endIndex, endIndex + 1 ); - value = applyFormat( value, { type: name }, startIndex, endIndex ); + value = applyFormat( + value, + { type: name, title }, + startIndex, + endIndex + ); return value; }, @@ -64,7 +69,7 @@ export const code = { isActive, }: CodeEditProps ): ReactElement { function onClick() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); } diff --git a/packages/format-library/src/italic/index.tsx b/packages/format-library/src/italic/index.tsx index 3fc051ecc5b2c2..aa701416d830e1 100644 --- a/packages/format-library/src/italic/index.tsx +++ b/packages/format-library/src/italic/index.tsx @@ -28,11 +28,11 @@ export const italic = { isVisible = true, }: BoldEditProps ) { function onToggle() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); } function onClick() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); } diff --git a/packages/format-library/src/keyboard/index.tsx b/packages/format-library/src/keyboard/index.tsx index 4126060139570e..313f0d289f3c4d 100644 --- a/packages/format-library/src/keyboard/index.tsx +++ b/packages/format-library/src/keyboard/index.tsx @@ -20,7 +20,7 @@ export const keyboard = { className: null, edit( { isActive, value, onChange, onFocus }: CodeEditProps ) { function onToggle() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); } function onClick() { diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index f123bd7d93e7fb..d5b89674add73c 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -26,7 +26,7 @@ export const strikethrough = { className: null, edit( { isActive, value, onChange, onFocus }: StrikethroughEditProps ) { function onClick() { - onChange( toggleFormat( value, { type: name } ) ); + onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); } diff --git a/packages/format-library/src/subscript/index.js b/packages/format-library/src/subscript/index.tsx similarity index 67% rename from packages/format-library/src/subscript/index.js rename to packages/format-library/src/subscript/index.tsx index 3a22c381236ca2..018b1ecac4ab29 100644 --- a/packages/format-library/src/subscript/index.js +++ b/packages/format-library/src/subscript/index.tsx @@ -6,12 +6,21 @@ import { subscript as subscriptIcon } from '@wordpress/icons'; const name = 'core/subscript'; const title = __( 'Subscript' ); +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + +interface SubscriptEditProps { + isActive: boolean; + value: any; + onChange: ( value: any ) => void; + onFocus: () => void; +} export const subscript = { name, title, tagName: 'sub', className: null, - edit( { isActive, value, onChange, onFocus } ) { + edit( { isActive, value, onChange, onFocus }: SubscriptEditProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } @@ -22,7 +31,7 @@ export const subscript = { } return ( - Date: Thu, 25 Jun 2026 17:34:21 +0530 Subject: [PATCH 09/46] feat: Migrate other folders to TS --- ...default-formats.js => default-formats.tsx} | 0 .../src/{index.js => index.tsx} | 0 .../format-library/src/language/index.tsx | 19 ++- .../src/{lock-unlock.js => lock-unlock.tsx} | 0 .../src/non-breaking-space/index.tsx | 2 +- .../src/strikethrough/index.tsx | 2 +- .../format-library/src/subscript/index.tsx | 2 +- .../src/superscript/{index.js => index.tsx} | 14 +- .../src/text-color/{index.js => index.tsx} | 28 +++- .../src/text-color/{inline.js => inline.tsx} | 153 ++++++++++++------ .../src/underline/{index.js => index.tsx} | 9 +- .../src/unknown/{index.js => index.tsx} | 17 +- .../rich-text/src/register-format-type.js | 22 +-- packages/rich-text/src/types.ts | 3 +- 14 files changed, 193 insertions(+), 78 deletions(-) rename packages/format-library/src/{default-formats.js => default-formats.tsx} (100%) rename packages/format-library/src/{index.js => index.tsx} (100%) rename packages/format-library/src/{lock-unlock.js => lock-unlock.tsx} (100%) rename packages/format-library/src/superscript/{index.js => index.tsx} (63%) rename packages/format-library/src/text-color/{index.js => index.tsx} (75%) rename packages/format-library/src/text-color/{inline.js => inline.tsx} (51%) rename packages/format-library/src/underline/{index.js => index.tsx} (81%) rename packages/format-library/src/unknown/{index.js => index.tsx} (65%) diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.tsx similarity index 100% rename from packages/format-library/src/default-formats.js rename to packages/format-library/src/default-formats.tsx diff --git a/packages/format-library/src/index.js b/packages/format-library/src/index.tsx similarity index 100% rename from packages/format-library/src/index.js rename to packages/format-library/src/index.tsx diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index ec5f12b1eff798..83921760c4c8de 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -22,7 +22,17 @@ const RichTextToolbarButtonUnsafe = const name = 'core/language'; const title = __( 'Language' ); -export const language = { +export const language: { + name: string; + title: string; + tagName: string; + className: null; + attributes: { + lang: string; + dir: string; + }; + edit: ( props: LanguageEditProps ) => JSX.Element; +} = { name, title, tagName: 'bdo', @@ -75,10 +85,9 @@ function InlineLanguageUI( { onClose, }: InlineLanguageUIProps ) { const popoverAnchor = useAnchor( { - editableContentElement: - // eslint-disable-next-line react-hooks/refs - contentRef.current as HTMLElement | null, - settings: language as any, + // eslint-disable-next-line react-hooks/refs + editableContentElement: contentRef.current as HTMLElement | null, + settings: language as typeof language, } ); const [ lang, setLang ] = useState( '' ); diff --git a/packages/format-library/src/lock-unlock.js b/packages/format-library/src/lock-unlock.tsx similarity index 100% rename from packages/format-library/src/lock-unlock.js rename to packages/format-library/src/lock-unlock.tsx diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index cec36909276751..8aa76d5b094d14 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -6,7 +6,7 @@ import { RichTextShortcut } from '@wordpress/block-editor'; const name = 'core/non-breaking-space'; const title = __( 'Non breaking space' ); -interface NonBreakingSpaceEditProps { +export interface NonBreakingSpaceEditProps { value: RichTextValue; onChange: ( value: RichTextValue ) => void; } diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index d5b89674add73c..1b6862a4a5f495 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -7,7 +7,7 @@ import { } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; -interface StrikethroughEditProps { +export interface StrikethroughEditProps { value: RichTextValue; onChange: ( value: RichTextValue ) => void; isActive: boolean; diff --git a/packages/format-library/src/subscript/index.tsx b/packages/format-library/src/subscript/index.tsx index 018b1ecac4ab29..8e924a9f3c3825 100644 --- a/packages/format-library/src/subscript/index.tsx +++ b/packages/format-library/src/subscript/index.tsx @@ -9,7 +9,7 @@ const title = __( 'Subscript' ); const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; -interface SubscriptEditProps { +export interface SubscriptEditProps { isActive: boolean; value: any; onChange: ( value: any ) => void; diff --git a/packages/format-library/src/superscript/index.js b/packages/format-library/src/superscript/index.tsx similarity index 63% rename from packages/format-library/src/superscript/index.js rename to packages/format-library/src/superscript/index.tsx index aa20315216562a..f40417b1e09146 100644 --- a/packages/format-library/src/superscript/index.js +++ b/packages/format-library/src/superscript/index.tsx @@ -2,16 +2,26 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { superscript as superscriptIcon } from '@wordpress/icons'; +import type { RichTextValue } from '@wordpress/rich-text'; const name = 'core/superscript'; const title = __( 'Superscript' ); +export interface SuperscriptEditProps { + isActive: boolean; + value: RichTextValue; + onChange: ( value: any ) => void; + onFocus: () => void; +} +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + export const superscript = { name, title, tagName: 'sup', className: null, - edit( { isActive, value, onChange, onFocus } ) { + edit( { isActive, value, onChange, onFocus }: SuperscriptEditProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } @@ -22,7 +32,7 @@ export const superscript = { } return ( - ; + +function getComputedStyleProperty( element: HTMLElement, property: string ) { const { ownerDocument } = element; const { defaultView } = ownerDocument; - const style = defaultView.getComputedStyle( element ); - const value = style.getPropertyValue( property ); + const style = defaultView?.getComputedStyle( element ); + const value = style?.getPropertyValue( property ); if ( property === 'background-color' && @@ -33,7 +37,10 @@ function getComputedStyleProperty( element, property ) { return value; } -function fillComputedColors( element, { color, backgroundColor } ) { +function fillComputedColors( + element: HTMLElement, + { color, backgroundColor }: { color?: string; backgroundColor?: string } +) { if ( ! color && ! backgroundColor ) { return; } @@ -53,6 +60,12 @@ function TextColorEdit( { isActive, activeAttributes, contentRef, +}: { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + isActive: boolean; + activeAttributes: Record< string, string >; + contentRef: React.RefObject< HTMLElement >; } ) { const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings( 'color.custom', @@ -62,7 +75,7 @@ function TextColorEdit( { const colorIndicatorStyle = useMemo( () => fillComputedColors( - contentRef.current, + contentRef.current as HTMLElement, getActiveColors( value, name, colors ) ), [ contentRef, value, colors ] @@ -75,7 +88,7 @@ function TextColorEdit( { return ( <> - setIsAddingColor( false ) } + // @ts-expect-error -- InlineColorUI does not have a type for activeAttributes yet. activeAttributes={ activeAttributes } value={ value } onChange={ onChange } diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.tsx similarity index 51% rename from packages/format-library/src/text-color/inline.js rename to packages/format-library/src/text-color/inline.tsx index 9368b1ee740f43..cf44476104ae7b 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.tsx @@ -16,6 +16,7 @@ import { import { Popover } from '@wordpress/components'; import { Tabs } from '@wordpress/ui'; import { __ } from '@wordpress/i18n'; +import type { RichTextValue } from '@wordpress/rich-text'; import { textColor as settings, transparentValue } from './index'; const TABS = [ @@ -23,42 +24,74 @@ const TABS = [ { name: 'backgroundColor', title: __( 'Background' ) }, ]; -function parseCSS( css = '' ) { - return css.split( ';' ).reduce( ( accumulator, rule ) => { - if ( rule ) { - const [ property, value ] = rule.split( ':' ); - if ( property === 'color' ) { - accumulator.color = value; - } - if ( - property === 'background-color' && - value !== transparentValue - ) { - accumulator.backgroundColor = value; - } - } - return accumulator; - }, {} ); +type ColorObject = { + slug: string; + color: string; + name?: string; +}; + +function parseCSS( css = '' ): { color?: string; backgroundColor?: string } { + return css + .split( ';' ) + .reduce( + ( + accumulator: { color?: string; backgroundColor?: string }, + rule + ) => { + if ( rule ) { + const [ property, value ] = rule.split( ':' ); + if ( property === 'color' ) { + accumulator.color = value; + } + if ( + property === 'background-color' && + value !== transparentValue + ) { + accumulator.backgroundColor = value; + } + } + return accumulator; + }, + {} + ); } -export function parseClassName( className = '', colorSettings ) { - return className.split( ' ' ).reduce( ( accumulator, name ) => { - // `colorSlug` could contain dashes, so simply match the start and end. - if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { - const colorSlug = name - .replace( /^has-/, '' ) - .replace( /-color$/, '' ); - const colorObject = getColorObjectByAttributeValues( - colorSettings, - colorSlug - ); - accumulator.color = colorObject.color; - } - return accumulator; - }, {} ); +export function parseClassName( + className = '', + colorSettings: ColorObject[] +): { color?: string } { + return className + .split( ' ' ) + .reduce( + ( + accumulator: { color?: string; backgroundColor?: string }, + name + ) => { + // `colorSlug` could contain dashes, so simply match the start and end. + if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { + const colorSlug = name + .replace( /^has-/, '' ) + .replace( /-color$/, '' ); + const colorObject = getColorObjectByAttributeValues( + colorSettings, + colorSlug + ); + accumulator.color = colorObject.color; + } + return accumulator; + }, + {} + ); } -export function getActiveColors( value, name, colorSettings ) { +export function getActiveColors( + value: RichTextValue, + name: string, + colorSettings: ColorObject[] +): { + color?: string; + backgroundColor?: string; +} { const activeColorFormat = getActiveFormat( value, name ); if ( ! activeColorFormat ) { @@ -66,12 +99,17 @@ export function getActiveColors( value, name, colorSettings ) { } return { - ...parseCSS( activeColorFormat.attributes.style ), - ...parseClassName( activeColorFormat.attributes.class, colorSettings ), + ...parseCSS( activeColorFormat.attributes?.style ), + ...parseClassName( activeColorFormat.attributes?.class, colorSettings ), }; } -function setColors( value, name, colorSettings, colors ) { +function setColors( + value: RichTextValue, + name: string, + colorSettings: ColorObject[], + colors: { color?: string; backgroundColor?: string } +) { const { color, backgroundColor } = { ...getActiveColors( value, name, colorSettings ), ...colors, @@ -81,9 +119,9 @@ function setColors( value, name, colorSettings, colors ) { return removeFormat( value, name ); } - const styles = []; - const classNames = []; - const attributes = {}; + const styles: string[] = []; + const classNames: string[] = []; + const attributes: { style?: string; class?: string } = {}; if ( backgroundColor ) { styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); @@ -95,8 +133,15 @@ function setColors( value, name, colorSettings, colors ) { if ( color ) { const colorObject = getColorObjectByColorValue( colorSettings, color ); - if ( colorObject ) { - classNames.push( getColorClassName( 'color', colorObject.slug ) ); + if ( colorObject && colorObject.slug ) { + const colorClassName = getColorClassName( + 'color', + colorObject.slug + ); + + if ( colorClassName ) { + classNames.push( colorClassName ); + } } else { styles.push( [ 'color', color ].join( ':' ) ); } @@ -112,7 +157,17 @@ function setColors( value, name, colorSettings, colors ) { return applyFormat( value, { type: name, attributes } ); } -function ColorPicker( { name, property, value, onChange } ) { +function ColorPicker( { + name, + property, + value, + onChange, +}: { + name: string; + property: 'color' | 'backgroundColor'; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; +} ) { const colors = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().colors ?? []; @@ -125,7 +180,7 @@ function ColorPicker( { name, property, value, onChange } ) { return ( { + onChange={ ( color: string | undefined ) => { onChange( setColors( value, name, colors, { [ property ]: color } ) ); @@ -144,10 +199,18 @@ export default function InlineColorUI( { onClose, contentRef, isActive, +}: { + name: string; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onClose: () => void; + contentRef: React.RefObject< HTMLElement >; + isActive: boolean; } ) { const popoverAnchor = useAnchor( { - editableContentElement: contentRef.current, - settings: { ...settings, isActive }, + // eslint-disable-next-line react-hooks/refs + editableContentElement: contentRef.current as HTMLElement | null, + settings: { ...settings, isActive } as any, } ); return ( @@ -172,7 +235,7 @@ export default function InlineColorUI( { > diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.tsx similarity index 81% rename from packages/format-library/src/underline/index.js rename to packages/format-library/src/underline/index.tsx index 0bb4e4c2fc09f0..486b62fcd745eb 100644 --- a/packages/format-library/src/underline/index.js +++ b/packages/format-library/src/underline/index.tsx @@ -4,6 +4,7 @@ import { RichTextShortcut, __unstableRichTextInputEvent, } from '@wordpress/block-editor'; +import type { RichTextValue } from '@wordpress/rich-text'; const name = 'core/underline'; const title = __( 'Underline' ); @@ -16,7 +17,13 @@ export const underline = { attributes: { style: 'style', }, - edit( { value, onChange } ) { + edit( { + value, + onChange, + }: { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + } ) { const onToggle = () => { onChange( toggleFormat( value, { diff --git a/packages/format-library/src/unknown/index.js b/packages/format-library/src/unknown/index.tsx similarity index 65% rename from packages/format-library/src/unknown/index.js rename to packages/format-library/src/unknown/index.tsx index 55f05fd1d533a6..ede3ed8c842e19 100644 --- a/packages/format-library/src/unknown/index.js +++ b/packages/format-library/src/unknown/index.tsx @@ -2,11 +2,22 @@ import { __ } from '@wordpress/i18n'; import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { help } from '@wordpress/icons'; +import type { RichTextValue } from '@wordpress/rich-text'; const name = 'core/unknown'; const title = __( 'Clear Unknown Formatting' ); -function selectionContainsUnknownFormats( value ) { +export interface UnknownEditProps { + isActive: boolean; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; +} + +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + +function selectionContainsUnknownFormats( value: RichTextValue ) { if ( isCollapsed( value ) ) { return false; } @@ -22,7 +33,7 @@ export const unknown = { title, tagName: '*', className: null, - edit( { isActive, value, onChange, onFocus } ) { + edit( { isActive, value, onChange, onFocus }: UnknownEditProps ) { if ( ! isActive && ! selectionContainsUnknownFormats( value ) ) { return null; } @@ -33,7 +44,7 @@ export const unknown = { } return ( - ; type: | 'core/bold' | 'core/italic' From 384fa66cd468c10d5740a1d8ff52cc2d171e28fe Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 25 Jun 2026 18:00:25 +0530 Subject: [PATCH 10/46] feat: Migrate image and math folders to TS --- .../src/image/{index.js => index.tsx} | 55 ++++++++++++++--- .../src/math/{index.js => index.tsx} | 60 ++++++++++++++++--- packages/rich-text/src/types.ts | 1 + 3 files changed, 99 insertions(+), 17 deletions(-) rename packages/format-library/src/image/{index.js => index.tsx} (79%) rename packages/format-library/src/math/{index.js => index.tsx} (73%) diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.tsx similarity index 79% rename from packages/format-library/src/image/index.js rename to packages/format-library/src/image/index.tsx index ce39b966e04257..318e2fbd83bf6e 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.tsx @@ -8,6 +8,7 @@ import { inlineImage } from '@wordpress/icons'; import { Link, Stack } from '@wordpress/ui'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; +import type { RichTextValue } from '@wordpress/rich-text'; import { insertObject, useAnchor } from '@wordpress/rich-text'; import { MediaUpload, @@ -20,13 +21,32 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ]; const name = 'core/image'; const title = __( 'Inline image' ); +export interface EditProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus?: () => void; + isObjectActive?: boolean; + activeObjectAttributes: { + style?: string; + alt?: string | undefined; + className?: string; + url?: string; + } | null; + contentRef: React.RefObject< HTMLElement >; +} + +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + /** * Extracts the image ID from the className attribute. * * @param {Object} activeObjectAttributes The attributes of the active object. * @return {number|undefined} The extracted image ID or undefined if not found. */ -function getCurrentImageId( activeObjectAttributes ) { +function getCurrentImageId( + activeObjectAttributes: EditProps[ 'activeObjectAttributes' ] +) { if ( ! activeObjectAttributes?.className ) { return undefined; } @@ -53,13 +73,21 @@ export const image = { edit: Edit, }; -function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { - const { style, alt } = activeObjectAttributes; +function InlineUI( { + value, + onChange, + activeObjectAttributes, + contentRef, +}: EditProps ) { + const style = activeObjectAttributes?.style; + const alt = activeObjectAttributes?.alt; + const width = style?.replace( /\D/g, '' ); const [ editedWidth, setEditedWidth ] = useState( width ); const [ editedAlt, setEditedAlt ] = useState( alt ); const hasChanged = editedWidth !== width || editedAlt !== alt; const popoverAnchor = useAnchor( { + // eslint-disable-next-line react-hooks/refs editableContentElement: contentRef.current, settings: image, } ); @@ -82,7 +110,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { style: editedWidth ? `width: ${ editedWidth }px;` : '', - alt: editedAlt, + alt: editedAlt ?? '', }, }; @@ -105,7 +133,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { /> { setEditedAlt( newAlt ); } } @@ -153,13 +181,24 @@ function Edit( { isObjectActive, activeObjectAttributes, contentRef, -} ) { +}: EditProps ) { return ( { + onSelect={ ( { + id, + url, + alt, + width: imgWidth, + }: { + id: string; + url: string; + alt: string; + width: number; + } ) => { onChange( insertObject( value, { type: name, @@ -174,7 +213,7 @@ function Edit( { }, } ) ); - onFocus(); + onFocus?.(); } } render={ ( { open } ) => ( void; + activeAttributes: Record< string, string > | null; + contentRef: React.RefObject< HTMLElement >; + latexToMathML: ( + latex: string, + options?: { displayMode?: boolean } + ) => string; +} + +interface EditProps { + isObjectActive: boolean; + activeObjectAttributes: Record< string, string > | null; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; + contentRef: React.RefObject< HTMLElement >; + latexToMathML: ( + latex: string, + options?: { displayMode?: boolean } + ) => string; +} +const RichTextToolbarButtonUnsafe = + RichTextToolbarButton as React.ComponentType< any >; + function InlineUI( { value, onChange, activeAttributes, contentRef, latexToMathML, -} ) { +}: InlineUIProps ) { const [ latex, setLatex ] = useState( activeAttributes?.[ 'data-latex' ] || '' ); - const [ error, setError ] = useState( null ); + const [ error, setError ] = useState< string | null >( null ); const formRef = useRef(); const popoverAnchor = useAnchor( { - editableContentElement: contentRef.current, + // eslint-disable-next-line react-hooks/refs + editableContentElement: contentRef.current as HTMLElement | null, settings: math, } ); // Update the math object in real-time as the user types - const handleLatexChange = ( newLatex ) => { + const handleLatexChange = ( newLatex: string ) => { + let mathML = ''; + setLatex( newLatex ); let mathML = ''; @@ -47,7 +77,7 @@ function InlineUI( { try { mathML = latexToMathML( newLatex, { displayMode: false } ); setError( null ); - } catch ( err ) { + } catch ( err: any ) { setError( err.message ); } } else { @@ -102,6 +132,15 @@ function InlineUI( { ); } +interface EditProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; + isObjectActive: boolean; + activeObjectAttributes: Record< string, string > | null; + contentRef: React.RefObject< HTMLElement >; +} + function Edit( { value, onChange, @@ -109,8 +148,11 @@ function Edit( { isObjectActive, activeObjectAttributes, contentRef, -} ) { - const [ latexToMathML, setLatexToMathML ] = useState(); +}: EditProps ) { + const [ latexToMathML, setLatexToMathML ] = + useState< + ( latex: string, options?: { displayMode?: boolean } ) => string + >(); useEffect( () => { import( '@wordpress/latex-to-mathml' ).then( ( module ) => { @@ -158,13 +200,13 @@ function Edit( { return ( <> - - { isObjectActive && ( + { isObjectActive && latexToMathML && ( ; + innerHTML?: string; type: | 'core/bold' | 'core/italic' From 0ad47409d438785c4432b131291bb6471f5cad54 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Mon, 29 Jun 2026 19:19:09 +0530 Subject: [PATCH 11/46] feat: Migrate link folder --- ...ses-setting.js => css-classes-setting.tsx} | 25 ++-- .../src/link/{inline.js => inline.tsx} | 107 ++++++++++++------ ...stance-key.js => use-link-instance-key.ts} | 8 +- .../src/link/{utils.js => utils.ts} | 97 ++++++++++------ packages/rich-text/README.md | 4 + packages/rich-text/src/index.ts | 2 +- 6 files changed, 163 insertions(+), 80 deletions(-) rename packages/format-library/src/link/{css-classes-setting.js => css-classes-setting.tsx} (76%) rename packages/format-library/src/link/{inline.js => inline.tsx} (80%) rename packages/format-library/src/link/{use-link-instance-key.js => use-link-instance-key.ts} (67%) rename packages/format-library/src/link/{utils.js => utils.ts} (72%) diff --git a/packages/format-library/src/link/css-classes-setting.js b/packages/format-library/src/link/css-classes-setting.tsx similarity index 76% rename from packages/format-library/src/link/css-classes-setting.js rename to packages/format-library/src/link/css-classes-setting.tsx index 7ebf85bd09de68..ef97eea2ac6dc8 100644 --- a/packages/format-library/src/link/css-classes-setting.js +++ b/packages/format-library/src/link/css-classes-setting.tsx @@ -14,19 +14,30 @@ import { Stack, VisuallyHidden } from '@wordpress/ui'; * is shown when the toggle is enabled or when there is already a value. When * toggled off and a value exists, it resets the value to an empty string. * - * @param {Object} props - Component props. - * @param {Object} props.setting - Setting configuration object. - * @param {Object} props.value - Current link value object. - * @param {Function} props.onChange - Callback when value changes. + * @param props - Component props. + * @param props.setting - Setting configuration object. + * @param props.value - Current link value object. + * @param props.onChange - Callback when value changes. + * @param props.setting.id + * @param props.setting.title + * @param props.value.cssClasses */ -const CSSClassesSettingComponent = ( { setting, value, onChange } ) => { - const hasValue = value ? value?.cssClasses?.length > 0 : false; +const CSSClassesSettingComponent = ( { + setting, + value, + onChange, +}: { + setting: { id: string; title: string }; + value: { cssClasses?: string }; + onChange: ( newValue: { cssClasses?: string } ) => void; +} ) => { + const hasValue = value ? !! ( value?.cssClasses?.length ?? 0 ) : false; const [ isSettingActive, setIsSettingActive ] = useState( hasValue ); const instanceId = useInstanceId( CSSClassesSettingComponent ); const controlledRegionId = `css-classes-setting-${ instanceId }`; // Sanitize user input: replace commas with spaces, collapse repeated spaces, and trim - const handleSettingChange = ( newValue ) => { + const handleSettingChange = ( newValue: string | undefined ) => { const sanitizedValue = typeof newValue === 'string' ? newValue.replace( /,/g, ' ' ).replace( /\s+/g, ' ' ).trim() diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.tsx similarity index 80% rename from packages/format-library/src/link/inline.js rename to packages/format-library/src/link/inline.tsx index 1717df0ff610f6..11d3e449eb2fff 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.tsx @@ -20,6 +20,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; +import type { RichTextValue } from '@wordpress/rich-text'; import { createLinkFormat, isValidHref, getFormatBoundary } from './utils'; import { link as settings } from './index'; import CSSClassesSettingComponent from './css-classes-setting'; @@ -33,18 +34,48 @@ const LINK_SETTINGS = [ { id: 'cssClasses', title: __( 'Additional CSS class(es)' ), - render: ( setting, value, onChange ) => { - return ( - - ); - }, + render: ( + setting: { id: string; title: string }, + value: { cssClasses?: string }, + onChange: ( newValue: { cssClasses?: string } ) => void + ) => ( + + ), }, ]; +interface LinkValue { + url?: string; + type?: string; + id?: string | number; + opensInNewTab?: boolean; + nofollow?: boolean; + title?: string; + cssClasses?: string; +} + +interface InlineLinkUIProps { + isActive: boolean; + activeAttributes: { + url: string; + type?: string; + id?: string; + target?: string; + rel?: string; + + class?: string; + }; + value: RichTextValue; + onChange: ( newValue: RichTextValue ) => void; + onFocusOutside: () => void; + stopAddingLink: () => void; + contentRef: React.RefObject< HTMLElement >; + focusOnMount?: boolean; +} function InlineLinkUI( { isActive, activeAttributes, @@ -54,7 +85,7 @@ function InlineLinkUI( { stopAddingLink, contentRef, focusOnMount, -} ) { +}: InlineLinkUIProps ) { const richLinkTextValue = getRichTextValueFromSelection( value, isActive ); // Get the text content minus any HTML tags. @@ -105,7 +136,7 @@ function InlineLinkUI( { speak( __( 'Link removed.' ), 'assertive' ); } - function onChangeLink( nextValue ) { + function onChangeLink( nextValue: LinkValue ) { const hasLink = linkValue?.url; const isNewLink = ! hasLink; @@ -115,7 +146,7 @@ function InlineLinkUI( { ...nextValue, }; - const newUrl = prependHTTPS( nextValue.url ); + const newUrl = prependHTTPS( nextValue?.url ?? '' ); const linkFormat = createLinkFormat( { url: newUrl, type: nextValue.type, @@ -131,14 +162,14 @@ function InlineLinkUI( { const newText = nextValue.title || newUrl; // Scenario: we have any active text selection or an active format. - let newValue; + let newValue: RichTextValue; if ( isCollapsed( value ) && ! isActive ) { // Scenario: we don't have any actively selected text or formats. const inserted = insert( value, newText ); newValue = applyFormat( inserted, - linkFormat, + linkFormat as any, value.start, value.start + newText.length ); @@ -166,7 +197,7 @@ function InlineLinkUI( { } ); newValue = applyFormat( value, - linkFormat, + linkFormat as any, boundary.start, boundary.end ); @@ -177,7 +208,12 @@ function InlineLinkUI( { // can apply formats to it. newValue = create( { text: newText } ); // Apply the new Link format to this new text value. - newValue = applyFormat( newValue, linkFormat, 0, newText.length ); + newValue = applyFormat( + newValue, + linkFormat as any, + 0, + newText.length + ); // Get the boundaries of the active link format. const boundary = getFormatBoundary( value, { @@ -189,11 +225,9 @@ function InlineLinkUI( { // the second half of the split value is split at the format's // start boundary and avoids relying on the value's "end" property // which may not correspond correctly. - const [ valBefore, valAfter ] = split( - value, - boundary.start, - boundary.start - ); + const splitValue = + split( value, boundary.start ?? 0, boundary.start ?? 0 ) ?? []; + const [ valBefore, valAfter ] = splitValue; // Update the original (full) RichTextValue replacing the // target text with the *new* RichTextValue containing: @@ -207,7 +241,11 @@ function InlineLinkUI( { // Note original formats will be lost when applying this change. // That is expected behaviour. // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179. - const newValAfter = replace( valAfter, richTextText, newValue ); + const newValAfter = replace( + valAfter, + richTextText, + () => newValue + ); newValue = concat( valBefore, newValAfter ); } @@ -237,14 +275,12 @@ function InlineLinkUI( { } const popoverAnchor = useAnchor( { - editableContentElement: contentRef.current, - settings: { - ...settings, - isActive, - }, + // eslint-disable-next-line react-hooks/refs + editableContentElement: contentRef.current as HTMLElement | null, + settings: { ...settings, isActive } as any, } ); - async function handleCreate( pageTitle ) { + async function handleCreate( pageTitle: string ) { const page = await createPageEntity( { title: pageTitle, status: 'draft', @@ -259,7 +295,7 @@ function InlineLinkUI( { }; } - function createButtonText( searchTerm ) { + function createButtonText( searchTerm: string ) { return createInterpolateElement( sprintf( /* translators: %s: search term. */ @@ -284,14 +320,14 @@ function InlineLinkUI( { > +) => ReturnType< typeof walkToBoundary >; + const partialRight = - ( fn, ...partialArgs ) => - ( ...args ) => + ( fn: ( ...args: any[] ) => any, ...partialArgs: any[] ) => + ( ...args: any[] ) => fn( ...args, ...partialArgs ); -const walkToStart = partialRight( walkToBoundary, 'backwards' ); - -const walkToEnd = partialRight( walkToBoundary, 'forwards' ); +const walkToStart: WalkFn = partialRight( walkToBoundary, 'backwards' ); +const walkToEnd: WalkFn = partialRight( walkToBoundary, 'forwards' ); diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index 98f19c7022c357..0c34b9a6a15e4e 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -376,6 +376,10 @@ document.querySelector( 'p' ) )`. - Create one from a rich text value: `new RichTextData( { text: '...', formats: [ ... ] } )`. +### RichTextFormat + +An object which represents a formatted string. See main `@wordpress/rich-text` documentation for more information. + ### RichTextValue An object which represents a formatted string. See main `@wordpress/rich-text` documentation for more information. diff --git a/packages/rich-text/src/index.ts b/packages/rich-text/src/index.ts index f95828f53d36d5..784761adf2ccd3 100644 --- a/packages/rich-text/src/index.ts +++ b/packages/rich-text/src/index.ts @@ -35,7 +35,7 @@ export function __experimentalRichText() {} * An object which represents a formatted string. See main `@wordpress/rich-text` * documentation for more information. */ -export type { RichTextValue } from './types'; +export type { RichTextValue, RichTextFormat } from './types'; /** * The callback-Set refs the private event-listener helpers dispatch from. From 794ed93a62f35b443a5797de906b382eb2c5f5c0 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Mon, 29 Jun 2026 19:28:43 +0530 Subject: [PATCH 12/46] feat: Migrate link folder index.tsx --- .../src/link/{index.js => index.tsx} | 48 +++++++++++++++---- packages/format-library/src/link/inline.tsx | 2 +- 2 files changed, 39 insertions(+), 11 deletions(-) rename packages/format-library/src/link/{index.js => index.tsx} (86%) diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.tsx similarity index 86% rename from packages/format-library/src/link/index.js rename to packages/format-library/src/link/index.tsx index 276b740ad92da6..589675be70198c 100644 --- a/packages/format-library/src/link/index.js +++ b/packages/format-library/src/link/index.tsx @@ -17,12 +17,35 @@ import { import { decodeEntities } from '@wordpress/html-entities'; import { link as linkIcon } from '@wordpress/icons'; import { speak } from '@wordpress/a11y'; +import type { RichTextValue } from '@wordpress/rich-text'; import InlineLinkUI from './inline'; import { isValidHref } from './utils'; const name = 'core/link'; const title = __( 'Link' ); +interface EditProps { + isActive: boolean; + activeAttributes: { + url: string; + type?: string; + id?: string; + target?: string; + rel?: string; + class?: string; + }; + value: RichTextValue; + onChange: ( newValue: RichTextValue ) => void; + onFocus: () => void; + contentRef: React.RefObject< HTMLElement >; + isVisible?: boolean; +} + +interface OpenedBy { + el: HTMLElement; + action: 'click' | null; +} + function Edit( { isActive, activeAttributes, @@ -31,11 +54,11 @@ function Edit( { onFocus, contentRef, isVisible = true, -} ) { +}: EditProps ) { const [ addingLink, setAddingLink ] = useState( false ); // We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field. - const [ openedBy, setOpenedBy ] = useState( null ); + const [ openedBy, setOpenedBy ] = useState< OpenedBy | null >( null ); useEffect( () => { // When the link becomes inactive (i.e. isActive is false), reset the editingLink state @@ -52,14 +75,16 @@ function Edit( { return; } - function handleClick( event ) { + function handleClick( event: MouseEvent ) { // There is a situation whereby there is an existing link in the rich text // and the user clicks on the leftmost edge of that link and fails to activate // the link format, but the click event still fires on the `` element. // This causes the `editingLink` state to be set to `true` and the link UI // to be rendered in "creating" mode. We need to check isActive to see if // we have an active link format. - const link = event.target.closest( '[contenteditable] a' ); + const link = ( event.target as HTMLElement ).closest( + '[contenteditable] a' + ); if ( ! link || // other formats (e.g. bold) may be nested within the link. ! isActive @@ -69,7 +94,7 @@ function Edit( { setAddingLink( true ); setOpenedBy( { - el: link, + el: link as HTMLElement, action: 'click', } ); } @@ -81,7 +106,7 @@ function Edit( { }; }, [ contentRef, isActive ] ); - function addLink( target ) { + function addLink( target?: HTMLElement ) { const text = getTextContent( slice( value ) ); if ( ! isActive && text && isURL( text ) && isValidHref( text ) ) { @@ -108,7 +133,7 @@ function Edit( { } else { if ( target ) { setOpenedBy( { - el: target, + el: target as HTMLElement, action: null, // We don't need to distinguish between click or keyboard here } ); } @@ -185,8 +210,8 @@ function Edit( { name="link" icon={ linkIcon } title={ isActive ? __( 'Link' ) : title } - onClick={ ( event ) => { - addLink( event.currentTarget ); + onClick={ ( event: MouseEvent ) => { + addLink( event.currentTarget as HTMLElement ); } } isActive={ isActive || addingLink } shortcutType="primary" @@ -225,7 +250,10 @@ export const link = { rel: 'rel', class: 'class', }, - __unstablePasteRule( value, { html, plainText } ) { + __unstablePasteRule( + value: RichTextValue, + { html, plainText }: { html?: string; plainText: string } + ) { const pastedText = ( html || plainText ) .replace( /<[^>]+>/g, '' ) .trim(); diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 11d3e449eb2fff..333fc9faced8a7 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -74,7 +74,7 @@ interface InlineLinkUIProps { onFocusOutside: () => void; stopAddingLink: () => void; contentRef: React.RefObject< HTMLElement >; - focusOnMount?: boolean; + focusOnMount?: 'firstElement' | 'container' | false; } function InlineLinkUI( { isActive, From ae1f1134baac8e40b9c77b81dd0f473d5ce7bd75 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 10:23:11 +0530 Subject: [PATCH 13/46] fix: Feedbacks from ai --- packages/format-library/src/bold/index.tsx | 1 - .../format-library/src/language/index.tsx | 4 ---- .../src/{lock-unlock.tsx => lock-unlock.ts} | 0 .../src/strikethrough/index.tsx | 9 +------- .../format-library/src/subscript/index.tsx | 7 +------ .../format-library/src/superscript/index.tsx | 8 +------ packages/format-library/src/types.ts | 21 ++++++++++++------- packages/format-library/src/unknown/index.tsx | 7 ------- 8 files changed, 16 insertions(+), 41 deletions(-) rename packages/format-library/src/{lock-unlock.tsx => lock-unlock.ts} (100%) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 469f62569b7273..8dedfa25ca073d 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -4,7 +4,6 @@ import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent, - // @ts-ignore } from '@wordpress/block-editor'; import { formatBold } from '@wordpress/icons'; diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index 83921760c4c8de..9330f90964b212 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -10,10 +10,6 @@ import { Stack } from '@wordpress/ui'; import { useState } from '@wordpress/element'; import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text'; import { language as languageIcon } from '@wordpress/icons'; - -/** - * Internal dependencies - */ import type { LanguageEditProps, InlineLanguageUIProps } from '../types'; const RichTextToolbarButtonUnsafe = diff --git a/packages/format-library/src/lock-unlock.tsx b/packages/format-library/src/lock-unlock.ts similarity index 100% rename from packages/format-library/src/lock-unlock.tsx rename to packages/format-library/src/lock-unlock.ts diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index 1b6862a4a5f495..f2c9e7bb49b08f 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -1,18 +1,11 @@ import { __ } from '@wordpress/i18n'; -import type { RichTextValue } from '@wordpress/rich-text'; import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, RichTextShortcut, } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; - -export interface StrikethroughEditProps { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - isActive: boolean; - onFocus: () => void; -} +import type { StrikethroughEditProps } from '../types'; const name = 'core/strikethrough'; const title = __( 'Strikethrough' ); diff --git a/packages/format-library/src/subscript/index.tsx b/packages/format-library/src/subscript/index.tsx index 8e924a9f3c3825..bae3765a7b2c0f 100644 --- a/packages/format-library/src/subscript/index.tsx +++ b/packages/format-library/src/subscript/index.tsx @@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { subscript as subscriptIcon } from '@wordpress/icons'; +import type { SubscriptEditProps } from '../types'; const name = 'core/subscript'; const title = __( 'Subscript' ); @@ -9,12 +10,6 @@ const title = __( 'Subscript' ); const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; -export interface SubscriptEditProps { - isActive: boolean; - value: any; - onChange: ( value: any ) => void; - onFocus: () => void; -} export const subscript = { name, title, diff --git a/packages/format-library/src/superscript/index.tsx b/packages/format-library/src/superscript/index.tsx index f40417b1e09146..b75ab2d8f2387a 100644 --- a/packages/format-library/src/superscript/index.tsx +++ b/packages/format-library/src/superscript/index.tsx @@ -2,17 +2,11 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { superscript as superscriptIcon } from '@wordpress/icons'; -import type { RichTextValue } from '@wordpress/rich-text'; +import type { SuperscriptEditProps } from '../types'; const name = 'core/superscript'; const title = __( 'Superscript' ); -export interface SuperscriptEditProps { - isActive: boolean; - value: RichTextValue; - onChange: ( value: any ) => void; - onFocus: () => void; -} const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index c3731a65204d1d..1e16beb152e799 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -2,19 +2,16 @@ * WordPress dependencies */ import type { RichTextValue } from '@wordpress/rich-text'; -export interface BoldEditProps { - isActive: boolean; - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onFocus: () => void; - isVisible?: boolean; -} -export interface CodeEditProps { + +interface BaseFormatEditProps { isActive: boolean; value: RichTextValue; onChange: ( value: RichTextValue ) => void; onFocus: () => void; } + +export type BoldEditProps = BaseFormatEditProps & { isVisible?: boolean }; + export interface LanguageEditProps { isActive: boolean; value: RichTextValue; @@ -28,3 +25,11 @@ export interface InlineLanguageUIProps { onChange: ( value: RichTextValue ) => void; onClose: () => void; } + +export type { + BaseFormatEditProps as CodeEditProps, + BaseFormatEditProps as StrikethroughEditProps, + BaseFormatEditProps as SubscriptEditProps, + BaseFormatEditProps as SuperscriptEditProps, + BaseFormatEditProps as UnknownEditProps, +}; diff --git a/packages/format-library/src/unknown/index.tsx b/packages/format-library/src/unknown/index.tsx index ede3ed8c842e19..66a1abc2b5d7bd 100644 --- a/packages/format-library/src/unknown/index.tsx +++ b/packages/format-library/src/unknown/index.tsx @@ -7,13 +7,6 @@ import type { RichTextValue } from '@wordpress/rich-text'; const name = 'core/unknown'; const title = __( 'Clear Unknown Formatting' ); -export interface UnknownEditProps { - isActive: boolean; - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onFocus: () => void; -} - const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; From 31a133bc629accfe53998fbff49da0ec093efc00 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 10:59:20 +0530 Subject: [PATCH 14/46] fix: Standardize the interface/types declaration in types.ts --- packages/format-library/src/image/index.tsx | 21 +-- packages/format-library/src/link/index.tsx | 25 +--- packages/format-library/src/link/inline.tsx | 31 +--- packages/format-library/src/link/utils.ts | 39 +---- packages/format-library/src/math/index.tsx | 37 +---- .../src/non-breaking-space/index.tsx | 11 +- packages/format-library/src/types.ts | 133 ++++++++++++++++++ packages/rich-text/src/types.ts | 2 +- 8 files changed, 152 insertions(+), 147 deletions(-) diff --git a/packages/format-library/src/image/index.tsx b/packages/format-library/src/image/index.tsx index 318e2fbd83bf6e..887a21224a5cf1 100644 --- a/packages/format-library/src/image/index.tsx +++ b/packages/format-library/src/image/index.tsx @@ -8,7 +8,6 @@ import { inlineImage } from '@wordpress/icons'; import { Link, Stack } from '@wordpress/ui'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -import type { RichTextValue } from '@wordpress/rich-text'; import { insertObject, useAnchor } from '@wordpress/rich-text'; import { MediaUpload, @@ -21,20 +20,6 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ]; const name = 'core/image'; const title = __( 'Inline image' ); -export interface EditProps { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onFocus?: () => void; - isObjectActive?: boolean; - activeObjectAttributes: { - style?: string; - alt?: string | undefined; - className?: string; - url?: string; - } | null; - contentRef: React.RefObject< HTMLElement >; -} - const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; @@ -45,7 +30,7 @@ const RichTextToolbarButtonUnsafe = * @return {number|undefined} The extracted image ID or undefined if not found. */ function getCurrentImageId( - activeObjectAttributes: EditProps[ 'activeObjectAttributes' ] + activeObjectAttributes: EditImageProps[ 'activeObjectAttributes' ] ) { if ( ! activeObjectAttributes?.className ) { return undefined; @@ -78,7 +63,7 @@ function InlineUI( { onChange, activeObjectAttributes, contentRef, -}: EditProps ) { +}: EditImageProps ) { const style = activeObjectAttributes?.style; const alt = activeObjectAttributes?.alt; @@ -181,7 +166,7 @@ function Edit( { isObjectActive, activeObjectAttributes, contentRef, -}: EditProps ) { +}: EditImageProps ) { return ( void; - onFocus: () => void; - contentRef: React.RefObject< HTMLElement >; - isVisible?: boolean; -} - -interface OpenedBy { - el: HTMLElement; - action: 'click' | null; -} - function Edit( { isActive, activeAttributes, @@ -54,7 +33,7 @@ function Edit( { onFocus, contentRef, isVisible = true, -}: EditProps ) { +}: EditLinkProps ) { const [ addingLink, setAddingLink ] = useState( false ); // We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field. diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 333fc9faced8a7..b4512f976d3af1 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -24,6 +24,7 @@ import type { RichTextValue } from '@wordpress/rich-text'; import { createLinkFormat, isValidHref, getFormatBoundary } from './utils'; import { link as settings } from './index'; import CSSClassesSettingComponent from './css-classes-setting'; +import type { InlineLinkUIProps, LinkValue, LinkFormat } from '../types'; const LINK_SETTINGS = [ ...LinkControl.DEFAULT_LINK_SETTINGS, @@ -48,34 +49,6 @@ const LINK_SETTINGS = [ }, ]; -interface LinkValue { - url?: string; - type?: string; - id?: string | number; - opensInNewTab?: boolean; - nofollow?: boolean; - title?: string; - cssClasses?: string; -} - -interface InlineLinkUIProps { - isActive: boolean; - activeAttributes: { - url: string; - type?: string; - id?: string; - target?: string; - rel?: string; - - class?: string; - }; - value: RichTextValue; - onChange: ( newValue: RichTextValue ) => void; - onFocusOutside: () => void; - stopAddingLink: () => void; - contentRef: React.RefObject< HTMLElement >; - focusOnMount?: 'firstElement' | 'container' | false; -} function InlineLinkUI( { isActive, activeAttributes, @@ -169,7 +142,7 @@ function InlineLinkUI( { newValue = applyFormat( inserted, - linkFormat as any, + linkFormat as LinkFormat, value.start, value.start + newText.length ); diff --git a/packages/format-library/src/link/utils.ts b/packages/format-library/src/link/utils.ts index 2e5a6cab1726c2..d8f5c32283cba0 100644 --- a/packages/format-library/src/link/utils.ts +++ b/packages/format-library/src/link/utils.ts @@ -12,6 +12,10 @@ import { } from '@wordpress/url'; import type { RichTextValue, RichTextFormat } from '@wordpress/rich-text'; +/** + * Internal dependencies + */ +import type { LinkFormat, LinkFormatOptions } from '../types'; /** * Check for issues with the provided href. * @@ -75,41 +79,6 @@ export function isValidHref( href: string ): boolean { return true; } -/** - * Generates the format object that will be applied to the link text. - * - * @param {Object} options - * @param {string} options.url The href of the link. - * @param {string} options.type The type of the link. - * @param {string} options.id The ID of the link. - * @param {boolean} options.opensInNewWindow Whether this link will open in a new window. - * @param {boolean} options.nofollow Whether this link is marked as no follow relationship. - * @param {string} options.cssClasses The CSS classes to apply to the link. - * @return {Object} The final format object. - */ - -interface LinkFormatOptions { - url: string; - type?: string; - id?: string; - opensInNewWindow?: boolean; - nofollow?: boolean; - cssClasses?: string; -} - -interface LinkFormatAttributes { - url: string; - type?: string; - id?: string; - target?: string; - rel?: string; - class?: string; -} - -interface LinkFormat { - type: 'core/link'; - attributes: LinkFormatAttributes; -} export function createLinkFormat( { url, type, diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index 949ee6f3c4ae3f..2284ff6cf24414 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -13,37 +13,14 @@ import { privateApis as componentsPrivateApis, } from '@wordpress/components'; import { math as icon } from '@wordpress/icons'; -import type { RichTextValue } from '@wordpress/rich-text'; import { unlock } from '../lock-unlock'; +import type { InlineUIProps, EditMathProps } from '../types'; const { ValidatedInputControl } = unlock( componentsPrivateApis ); const name = 'core/math'; const title = __( 'Math' ); -interface InlineUIProps { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - activeAttributes: Record< string, string > | null; - contentRef: React.RefObject< HTMLElement >; - latexToMathML: ( - latex: string, - options?: { displayMode?: boolean } - ) => string; -} - -interface EditProps { - isObjectActive: boolean; - activeObjectAttributes: Record< string, string > | null; - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onFocus: () => void; - contentRef: React.RefObject< HTMLElement >; - latexToMathML: ( - latex: string, - options?: { displayMode?: boolean } - ) => string; -} const RichTextToolbarButtonUnsafe = RichTextToolbarButton as React.ComponentType< any >; @@ -61,7 +38,6 @@ function InlineUI( { const formRef = useRef(); const popoverAnchor = useAnchor( { - // eslint-disable-next-line react-hooks/refs editableContentElement: contentRef.current as HTMLElement | null, settings: math, } ); @@ -132,15 +108,6 @@ function InlineUI( { ); } -interface EditProps { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onFocus: () => void; - isObjectActive: boolean; - activeObjectAttributes: Record< string, string > | null; - contentRef: React.RefObject< HTMLElement >; -} - function Edit( { value, onChange, @@ -148,7 +115,7 @@ function Edit( { isObjectActive, activeObjectAttributes, contentRef, -}: EditProps ) { +}: EditMathProps ) { const [ latexToMathML, setLatexToMathML ] = useState< ( latex: string, options?: { displayMode?: boolean } ) => string diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index 8aa76d5b094d14..0720fd49d27e94 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -1,16 +1,15 @@ import { __ } from '@wordpress/i18n'; -import type { RichTextValue } from '@wordpress/rich-text'; import { insert } from '@wordpress/rich-text'; import { RichTextShortcut } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import type { NonBreakingSpaceEditProps } from '../types'; + const name = 'core/non-breaking-space'; const title = __( 'Non breaking space' ); -export interface NonBreakingSpaceEditProps { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; -} - export const nonBreakingSpace = { name, title, diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 1e16beb152e799..d9932cc9391abe 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -12,6 +12,10 @@ interface BaseFormatEditProps { export type BoldEditProps = BaseFormatEditProps & { isVisible?: boolean }; +export type NonBreakingSpaceEditProps = Pick< + BaseFormatEditProps, + 'value' | 'onChange' +>; export interface LanguageEditProps { isActive: boolean; value: RichTextValue; @@ -26,6 +30,26 @@ export interface InlineLanguageUIProps { onClose: () => void; } +export interface InlineUIProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + activeAttributes: Record< string, string > | null; + contentRef: React.RefObject< HTMLElement >; + latexToMathML: ( + latex: string, + options?: { displayMode?: boolean } + ) => string; +} + +export interface EditMathProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus: () => void; + isObjectActive: boolean; + activeObjectAttributes: Record< string, string > | null; + contentRef: React.RefObject< HTMLElement >; +} + export type { BaseFormatEditProps as CodeEditProps, BaseFormatEditProps as StrikethroughEditProps, @@ -33,3 +57,112 @@ export type { BaseFormatEditProps as SuperscriptEditProps, BaseFormatEditProps as UnknownEditProps, }; + +export interface EditImageProps { + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + onFocus?: () => void; + isObjectActive?: boolean; + activeObjectAttributes: { + style?: string; + alt?: string | undefined; + className?: string; + url?: string; + } | null; + contentRef: React.RefObject< HTMLElement >; +} + +export interface EditLinkProps { + isActive: boolean; + activeAttributes: { + url: string; + type?: string; + id?: string; + target?: string; + rel?: string; + class?: string; + }; + value: RichTextValue; + onChange: ( newValue: RichTextValue ) => void; + onFocus: () => void; + contentRef: React.RefObject< HTMLElement >; + isVisible?: boolean; +} + +export interface OpenedBy { + el: HTMLElement; + action: 'click' | null; +} + +export interface LinkValue { + url?: string; + type?: string; + id?: string | number; + opensInNewTab?: boolean; + nofollow?: boolean; + title?: string; + cssClasses?: string; +} + +export interface InlineLinkUIProps { + isActive: boolean; + activeAttributes: { + url: string; + type?: string; + id?: string; + target?: string; + rel?: string; + + class?: string; + }; + value: RichTextValue; + onChange: ( newValue: RichTextValue ) => void; + onFocusOutside: () => void; + stopAddingLink: () => void; + contentRef: React.RefObject< HTMLElement >; + focusOnMount?: 'firstElement' | 'container' | false; +} + +/** + * Generates the format object that will be applied to the link text. + */ +export interface LinkFormatOptions { + /* + * The href of the link. + */ + url: string; + /* + * The type of the link. + */ + type?: string; + /* + * The ID of the link. + */ + id?: string; + /* + * Whether this link will open in a new window. + */ + opensInNewWindow?: boolean; + /* + * Whether this link is marked as no follow relationship. + */ + nofollow?: boolean; + /* + * The CSS classes to apply to the link. + */ + cssClasses?: string; +} + +export interface LinkFormatAttributes { + url: string; + type?: string; + id?: string; + target?: string; + rel?: string; + class?: string; +} + +export interface LinkFormat { + type: 'core/link'; + attributes: LinkFormatAttributes; +} diff --git a/packages/rich-text/src/types.ts b/packages/rich-text/src/types.ts index d2b4cd7f5972a6..4dfff54279e05c 100644 --- a/packages/rich-text/src/types.ts +++ b/packages/rich-text/src/types.ts @@ -8,7 +8,7 @@ export type RichTextFormat = { type: | 'core/bold' | 'core/italic' - | 'core/link ' + | 'core/link' | 'core/strikethrough' | 'core/image' | string; From 735ff226372e1e253ee34e93b7df347d46fc4472 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 11:19:55 +0530 Subject: [PATCH 15/46] fix: linkFormat ts issue --- packages/format-library/src/link/inline.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index b4512f976d3af1..7e25362fe8220e 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -24,7 +24,7 @@ import type { RichTextValue } from '@wordpress/rich-text'; import { createLinkFormat, isValidHref, getFormatBoundary } from './utils'; import { link as settings } from './index'; import CSSClassesSettingComponent from './css-classes-setting'; -import type { InlineLinkUIProps, LinkValue, LinkFormat } from '../types'; +import type { InlineLinkUIProps, LinkValue } from '../types'; const LINK_SETTINGS = [ ...LinkControl.DEFAULT_LINK_SETTINGS, @@ -142,7 +142,7 @@ function InlineLinkUI( { newValue = applyFormat( inserted, - linkFormat as LinkFormat, + linkFormat as any, value.start, value.start + newText.length ); From e40146bc54ad2a86c5e8258142e64d8691fd4fba Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 11:46:07 +0530 Subject: [PATCH 16/46] fix: Static lint failing errors --- packages/format-library/src/bold/index.tsx | 1 + packages/format-library/src/image/index.tsx | 11 ++++++++--- packages/format-library/src/italic/index.tsx | 1 + packages/format-library/src/keyboard/index.tsx | 1 + packages/format-library/src/language/index.tsx | 1 + packages/format-library/src/link/index.tsx | 1 + packages/format-library/src/link/inline.tsx | 1 + packages/format-library/src/math/index.tsx | 1 + .../format-library/src/non-breaking-space/index.tsx | 1 + packages/format-library/src/strikethrough/index.tsx | 1 + packages/format-library/src/subscript/index.tsx | 1 + packages/format-library/src/superscript/index.tsx | 1 + packages/format-library/src/text-color/inline.tsx | 1 + packages/format-library/src/underline/index.tsx | 1 + packages/format-library/src/unknown/index.tsx | 6 ++++++ 15 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 8dedfa25ca073d..469f62569b7273 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -4,6 +4,7 @@ import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent, + // @ts-ignore } from '@wordpress/block-editor'; import { formatBold } from '@wordpress/icons'; diff --git a/packages/format-library/src/image/index.tsx b/packages/format-library/src/image/index.tsx index 887a21224a5cf1..eccb54a85b775d 100644 --- a/packages/format-library/src/image/index.tsx +++ b/packages/format-library/src/image/index.tsx @@ -13,8 +13,13 @@ import { MediaUpload, RichTextToolbarButton, MediaUploadCheck, + // @ts-ignore } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import type { EditImageProps } from '../types'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const name = 'core/image'; @@ -26,12 +31,12 @@ const RichTextToolbarButtonUnsafe = /** * Extracts the image ID from the className attribute. * - * @param {Object} activeObjectAttributes The attributes of the active object. - * @return {number|undefined} The extracted image ID or undefined if not found. + * @param activeObjectAttributes The attributes of the active object. + * @return The extracted image ID or undefined if not found. */ function getCurrentImageId( activeObjectAttributes: EditImageProps[ 'activeObjectAttributes' ] -) { +): number | undefined { if ( ! activeObjectAttributes?.className ) { return undefined; } diff --git a/packages/format-library/src/italic/index.tsx b/packages/format-library/src/italic/index.tsx index aa701416d830e1..0f96c3d1716fb3 100644 --- a/packages/format-library/src/italic/index.tsx +++ b/packages/format-library/src/italic/index.tsx @@ -4,6 +4,7 @@ import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent, + // @ts-ignore } from '@wordpress/block-editor'; import { formatItalic } from '@wordpress/icons'; diff --git a/packages/format-library/src/keyboard/index.tsx b/packages/format-library/src/keyboard/index.tsx index 313f0d289f3c4d..7b8d92cdb983f1 100644 --- a/packages/format-library/src/keyboard/index.tsx +++ b/packages/format-library/src/keyboard/index.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { button } from '@wordpress/icons'; diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index 9330f90964b212..30b151736348d5 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { TextControl, diff --git a/packages/format-library/src/link/index.tsx b/packages/format-library/src/link/index.tsx index 461f876ebe4cad..992a2b8899262a 100644 --- a/packages/format-library/src/link/index.tsx +++ b/packages/format-library/src/link/index.tsx @@ -13,6 +13,7 @@ import { isURL, isEmail, isPhoneNumber } from '@wordpress/url'; import { RichTextToolbarButton, RichTextShortcut, + // @ts-ignore } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; import { link as linkIcon } from '@wordpress/icons'; diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 7e25362fe8220e..7b9983e8523036 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -18,6 +18,7 @@ import { import { LinkControl, store as blockEditorStore, + // @ts-ignore } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import type { RichTextValue } from '@wordpress/rich-text'; diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index 2284ff6cf24414..a9a2d77b906c99 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -7,6 +7,7 @@ import { getTextContent, useAnchor, } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { Popover, diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index 0720fd49d27e94..be613d61e7419e 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import { insert } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextShortcut } from '@wordpress/block-editor'; /** diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index f2c9e7bb49b08f..bcbea027ffb889 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -3,6 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, RichTextShortcut, + // @ts-ignore } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; import type { StrikethroughEditProps } from '../types'; diff --git a/packages/format-library/src/subscript/index.tsx b/packages/format-library/src/subscript/index.tsx index bae3765a7b2c0f..cd1346fac51e67 100644 --- a/packages/format-library/src/subscript/index.tsx +++ b/packages/format-library/src/subscript/index.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { subscript as subscriptIcon } from '@wordpress/icons'; import type { SubscriptEditProps } from '../types'; diff --git a/packages/format-library/src/superscript/index.tsx b/packages/format-library/src/superscript/index.tsx index b75ab2d8f2387a..ca8c128e133494 100644 --- a/packages/format-library/src/superscript/index.tsx +++ b/packages/format-library/src/superscript/index.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { superscript as superscriptIcon } from '@wordpress/icons'; import type { SuperscriptEditProps } from '../types'; diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index cf44476104ae7b..ed75d8fab0c4db 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -12,6 +12,7 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, store as blockEditorStore, + // @ts-ignore } from '@wordpress/block-editor'; import { Popover } from '@wordpress/components'; import { Tabs } from '@wordpress/ui'; diff --git a/packages/format-library/src/underline/index.tsx b/packages/format-library/src/underline/index.tsx index 486b62fcd745eb..c0306ffe3254ea 100644 --- a/packages/format-library/src/underline/index.tsx +++ b/packages/format-library/src/underline/index.tsx @@ -3,6 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; import { RichTextShortcut, __unstableRichTextInputEvent, + // @ts-ignore } from '@wordpress/block-editor'; import type { RichTextValue } from '@wordpress/rich-text'; diff --git a/packages/format-library/src/unknown/index.tsx b/packages/format-library/src/unknown/index.tsx index 66a1abc2b5d7bd..36c5077243d805 100644 --- a/packages/format-library/src/unknown/index.tsx +++ b/packages/format-library/src/unknown/index.tsx @@ -1,9 +1,15 @@ import { __ } from '@wordpress/i18n'; import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text'; +// @ts-ignore import { RichTextToolbarButton } from '@wordpress/block-editor'; import { help } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; +/** + * Internal dependencies + */ +import type { UnknownEditProps } from '../types'; + const name = 'core/unknown'; const title = __( 'Clear Unknown Formatting' ); From 1a90f086f3ef901d98ecdb4ca62a8c559bb5f7c7 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 12:49:14 +0530 Subject: [PATCH 17/46] fix: Lint error with split() --- packages/format-library/src/link/inline.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 7b9983e8523036..b6debb46d9815b 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -199,9 +199,18 @@ function InlineLinkUI( { // the second half of the split value is split at the format's // start boundary and avoids relying on the value's "end" property // which may not correspond correctly. - const splitValue = - split( value, boundary.start ?? 0, boundary.start ?? 0 ) ?? []; - const [ valBefore, valAfter ] = splitValue; + // `split`'s exported TS signature only declares (value, string), but at + // runtime it forwards extra args to `splitAtSelection`, which supports the + // (value, startIndex, endIndex) form used here. Cast to reflect that. + const splitValue = ( + split as ( + value: RichTextValue, + startIndex?: number, + endIndex?: number + ) => RichTextValue[] | undefined + )( value, boundary.start ?? 0, boundary.start ?? 0 ); + + const [ valBefore, valAfter ] = splitValue ?? []; // Update the original (full) RichTextValue replacing the // target text with the *new* RichTextValue containing: From 7259a02117f4a583a1a2698fc3dd96af879efc1c Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 30 Jun 2026 13:35:17 +0530 Subject: [PATCH 18/46] fix: CI errors --- .../block-editor/src/components/link-control/index.js | 3 +++ packages/format-library/src/link/utils.ts | 11 ++++++----- packages/format-library/src/text-color/index.tsx | 7 ++++++- packages/format-library/src/types.ts | 3 +-- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index fe61a7a6795f78..ed8494fc03b23b 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -88,11 +88,14 @@ import normalizeUrl from './normalize-url'; * @property {boolean=} forceIsEditingLink If passed as either `true` or `false`, controls the * internal editing state of the component to respective * show or not show the URL input field. + * @property {string=} searchInputPlaceholder Placeholder text for the search input. * @property {WPLinkControlValue=} value Current link value. * @property {WPLinkControlOnChangeProp=} onChange Value change handler, called with the updated value if * the user selects a new link or updates settings. * @property {Function=} onInputChange Callback fired when the search input value changes. * Use this for observation only (e.g., to track search state). + * @property {Function=} onRemove Callback invoked when the link is removed. + * @property {Function=} onCancel Callback invoked when editing is cancelled. * @property {string=} inputValue Initial value for the search input (uncontrolled). * @property {boolean=} noDirectEntry Whether to allow turning a URL-like search query directly into a link. * @property {boolean=} showSuggestions Whether to present suggestions when typing the URL. diff --git a/packages/format-library/src/link/utils.ts b/packages/format-library/src/link/utils.ts index d8f5c32283cba0..27fc883490bd22 100644 --- a/packages/format-library/src/link/utils.ts +++ b/packages/format-library/src/link/utils.ts @@ -190,13 +190,11 @@ export function getFormatBoundary( const index = newFormats[ initialIndex ].indexOf( targetFormat ); - const walkingArgs = [ newFormats, initialIndex, targetFormat, index ]; - // Walk the startIndex "backwards" to the leading "edge" of the matching format. - startIndex = walkToStart( ...walkingArgs ); + startIndex = walkToStart( newFormats, initialIndex, targetFormat, index ); // Walk the endIndex "forwards" until the trailing "edge" of the matching format. - endIndex = walkToEnd( ...walkingArgs ); + endIndex = walkToEnd( newFormats, initialIndex, targetFormat, index ); // Safe guard: start index cannot be less than 0. startIndex = startIndex < 0 ? 0 : startIndex; @@ -256,7 +254,10 @@ function walkToBoundary( } type WalkFn = ( - ...args: Parameters< typeof walkToBoundary > + formats: RichTextFormat[][], + initialIndex: number, + targetFormatRef: RichTextFormat, + formatIndex: number ) => ReturnType< typeof walkToBoundary >; const partialRight = diff --git a/packages/format-library/src/text-color/index.tsx b/packages/format-library/src/text-color/index.tsx index 87710e3821f05f..ba933715db1042 100644 --- a/packages/format-library/src/text-color/index.tsx +++ b/packages/format-library/src/text-color/index.tsx @@ -1,6 +1,11 @@ import { __ } from '@wordpress/i18n'; import { useMemo, useState } from '@wordpress/element'; -import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor'; + +import { + RichTextToolbarButton, + useSettings, + // @ts-ignore +} from '@wordpress/block-editor'; import { Icon, color as colorIcon, diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index d9932cc9391abe..5d01f988649475 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -112,7 +112,6 @@ export interface InlineLinkUIProps { id?: string; target?: string; rel?: string; - class?: string; }; value: RichTextValue; @@ -120,7 +119,7 @@ export interface InlineLinkUIProps { onFocusOutside: () => void; stopAddingLink: () => void; contentRef: React.RefObject< HTMLElement >; - focusOnMount?: 'firstElement' | 'container' | false; + focusOnMount?: 'firstElement' | false; } /** From b76e065b2e4fd7c04c523ac493fe75e820fa1c0f Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 16:15:54 +0530 Subject: [PATCH 19/46] fix: TS issues --- packages/format-library/tsconfig.json | 10 +++++----- tsconfig.build.json | 1 + tsconfig.json | 3 +-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/format-library/tsconfig.json b/packages/format-library/tsconfig.json index 760a4b2b5f0aa8..c0a4cbdc3cbf40 100644 --- a/packages/format-library/tsconfig.json +++ b/packages/format-library/tsconfig.json @@ -6,14 +6,14 @@ "checkJs": false }, "references": [ - { "path": "../a11y" }, + { "path": "../a11y/tsconfig.build.json" }, { "path": "../block-editor" }, { "path": "../components" }, - { "path": "../compose" }, + { "path": "../compose/tsconfig.build.json" }, { "path": "../data" }, - { "path": "../element" }, - { "path": "../html-entities" }, - { "path": "../i18n" }, + { "path": "../element/tsconfig.build.json" }, + { "path": "../html-entities/tsconfig.build.json" }, + { "path": "../i18n/tsconfig.build.json" }, { "path": "../icons" }, { "path": "../latex-to-mathml" }, { "path": "../private-apis" }, diff --git a/tsconfig.build.json b/tsconfig.build.json index 05b49ae6e4cf94..bd3e20b2d8989b 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -35,6 +35,7 @@ { "path": "packages/escape-html/tsconfig.build.json" }, { "path": "packages/eslint-plugin" }, { "path": "packages/fields" }, + { "path": "packages/format-library" }, { "path": "packages/global-styles-engine/tsconfig.build.json" }, { "path": "packages/global-styles-ui" }, { "path": "packages/grid/tsconfig.build.json" }, diff --git a/tsconfig.json b/tsconfig.json index a233ddd5ec5c0d..72e332d1561c01 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -41,8 +41,7 @@ { "path": "packages/widget-dashboard" }, { "path": "packages/widget-primitives" }, { "path": "packages/wordcount" }, - { "path": "packages/worker-threads" }, - { "path": "packages/format-library" } + { "path": "packages/worker-threads" } ], "files": [] } From 6366cacb8a5ee4babd8b1fdd2edd41d5da529f40 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 16:27:58 +0530 Subject: [PATCH 20/46] fix: Feedbacks related to ts-ignore and RichTextFormat --- packages/format-library/src/bold/index.tsx | 6 +----- packages/format-library/src/code/index.tsx | 9 ++------- packages/format-library/src/image/index.tsx | 12 ++---------- packages/format-library/src/italic/index.tsx | 6 +----- packages/format-library/src/keyboard/index.tsx | 6 +----- packages/format-library/src/language/index.tsx | 4 ++-- packages/format-library/src/link/index.tsx | 2 +- packages/format-library/src/link/inline.tsx | 2 +- packages/format-library/src/link/utils.ts | 7 ++----- packages/format-library/src/math/index.tsx | 7 +++---- .../format-library/src/non-breaking-space/index.tsx | 6 +----- packages/format-library/src/strikethrough/index.tsx | 2 +- packages/format-library/src/subscript/index.tsx | 2 +- packages/format-library/src/superscript/index.tsx | 2 +- packages/format-library/src/text-color/index.tsx | 3 +-- packages/format-library/src/text-color/inline.tsx | 2 +- packages/format-library/src/types.ts | 3 --- packages/format-library/src/underline/index.tsx | 2 +- packages/format-library/src/unknown/index.tsx | 6 +----- packages/rich-text/README.md | 2 +- packages/rich-text/src/index.ts | 9 ++++++++- 21 files changed, 33 insertions(+), 67 deletions(-) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 469f62569b7273..4d77cc4a58d42f 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -4,13 +4,9 @@ import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { formatBold } from '@wordpress/icons'; - -/* - * Internal dependencies - */ import type { BoldEditProps } from '../types'; const name = 'core/bold'; diff --git a/packages/format-library/src/code/index.tsx b/packages/format-library/src/code/index.tsx index da246f651c36a3..92dcda4e6080a1 100644 --- a/packages/format-library/src/code/index.tsx +++ b/packages/format-library/src/code/index.tsx @@ -1,17 +1,12 @@ import { __ } from '@wordpress/i18n'; -import type { ReactElement } from 'react'; import { toggleFormat, remove, applyFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, RichTextShortcut, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { code as codeIcon } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; - -/* - * Internal dependencies - */ import type { CodeEditProps } from '../types'; const RichTextToolbarButtonUnsafe = @@ -67,7 +62,7 @@ export const code = { onChange, onFocus, isActive, - }: CodeEditProps ): ReactElement { + }: CodeEditProps ): React.ReactNode { function onClick() { onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); diff --git a/packages/format-library/src/image/index.tsx b/packages/format-library/src/image/index.tsx index eccb54a85b775d..3600d1ee44b21b 100644 --- a/packages/format-library/src/image/index.tsx +++ b/packages/format-library/src/image/index.tsx @@ -13,21 +13,14 @@ import { MediaUpload, RichTextToolbarButton, MediaUploadCheck, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ import type { EditImageProps } from '../types'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const name = 'core/image'; const title = __( 'Inline image' ); -const RichTextToolbarButtonUnsafe = - RichTextToolbarButton as React.ComponentType< any >; - /** * Extracts the image ID from the className attribute. * @@ -175,7 +168,6 @@ function Edit( { return ( ( + render={ ( { open }: { open: () => void } ) => ( JSX.Element; + edit: ( props: LanguageEditProps ) => React.ReactNode; } = { name, title, diff --git a/packages/format-library/src/link/index.tsx b/packages/format-library/src/link/index.tsx index 992a2b8899262a..6248dd17a3b368 100644 --- a/packages/format-library/src/link/index.tsx +++ b/packages/format-library/src/link/index.tsx @@ -13,7 +13,7 @@ import { isURL, isEmail, isPhoneNumber } from '@wordpress/url'; import { RichTextToolbarButton, RichTextShortcut, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; import { link as linkIcon } from '@wordpress/icons'; diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index b6debb46d9815b..c3e8a09e817838 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -18,7 +18,7 @@ import { import { LinkControl, store as blockEditorStore, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import type { RichTextValue } from '@wordpress/rich-text'; diff --git a/packages/format-library/src/link/utils.ts b/packages/format-library/src/link/utils.ts index 27fc883490bd22..1011dd0ec0c8f1 100644 --- a/packages/format-library/src/link/utils.ts +++ b/packages/format-library/src/link/utils.ts @@ -11,10 +11,6 @@ import { isValidFragment, } from '@wordpress/url'; import type { RichTextValue, RichTextFormat } from '@wordpress/rich-text'; - -/** - * Internal dependencies - */ import type { LinkFormat, LinkFormatOptions } from '../types'; /** * Check for issues with the provided href. @@ -128,7 +124,8 @@ export function createLinkFormat( { * Get the start and end boundaries of a given format from a rich text value. * * @param value the rich text value to interrogate. - * @param format the identifier for the target format (e.g. `core/link`, `core/bold`). + * @param format the target format object, identified by its `type` (e.g. + * `core/link`, `core/bold`). * @param startIndex optional startIndex to seek from. * @param endIndex optional endIndex to seek from. * @return object containing start and end values for the given format. diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index a9a2d77b906c99..b23da5950fc2d2 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -7,7 +7,7 @@ import { getTextContent, useAnchor, } from '@wordpress/rich-text'; -// @ts-ignore +// @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { Popover, @@ -36,17 +36,16 @@ function InlineUI( { activeAttributes?.[ 'data-latex' ] || '' ); const [ error, setError ] = useState< string | null >( null ); - const formRef = useRef(); + const formRef = useRef< HTMLFormElement >( null ); const popoverAnchor = useAnchor( { + // eslint-disable-next-line react-hooks/refs editableContentElement: contentRef.current as HTMLElement | null, settings: math, } ); // Update the math object in real-time as the user types const handleLatexChange = ( newLatex: string ) => { - let mathML = ''; - setLatex( newLatex ); let mathML = ''; diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index be613d61e7419e..c854b731abd657 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -1,11 +1,7 @@ import { __ } from '@wordpress/i18n'; import { insert } from '@wordpress/rich-text'; -// @ts-ignore +// @ts-expect-error Block Editor not fully typed yet. import { RichTextShortcut } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ import type { NonBreakingSpaceEditProps } from '../types'; const name = 'core/non-breaking-space'; diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index bcbea027ffb889..d13aebab26d8d1 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -3,7 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton, RichTextShortcut, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; import type { StrikethroughEditProps } from '../types'; diff --git a/packages/format-library/src/subscript/index.tsx b/packages/format-library/src/subscript/index.tsx index cd1346fac51e67..efa33ce4eb50f2 100644 --- a/packages/format-library/src/subscript/index.tsx +++ b/packages/format-library/src/subscript/index.tsx @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; -// @ts-ignore +// @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { subscript as subscriptIcon } from '@wordpress/icons'; import type { SubscriptEditProps } from '../types'; diff --git a/packages/format-library/src/superscript/index.tsx b/packages/format-library/src/superscript/index.tsx index ca8c128e133494..b95321c41f6895 100644 --- a/packages/format-library/src/superscript/index.tsx +++ b/packages/format-library/src/superscript/index.tsx @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; import { toggleFormat } from '@wordpress/rich-text'; -// @ts-ignore +// @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { superscript as superscriptIcon } from '@wordpress/icons'; import type { SuperscriptEditProps } from '../types'; diff --git a/packages/format-library/src/text-color/index.tsx b/packages/format-library/src/text-color/index.tsx index ba933715db1042..e4bb8cfa223d15 100644 --- a/packages/format-library/src/text-color/index.tsx +++ b/packages/format-library/src/text-color/index.tsx @@ -1,10 +1,9 @@ import { __ } from '@wordpress/i18n'; import { useMemo, useState } from '@wordpress/element'; - import { RichTextToolbarButton, useSettings, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { Icon, diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index ed75d8fab0c4db..77a9cd1003c93b 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -12,7 +12,7 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, store as blockEditorStore, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { Popover } from '@wordpress/components'; import { Tabs } from '@wordpress/ui'; diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 5d01f988649475..abd1c6e6835902 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -1,6 +1,3 @@ -/* - * WordPress dependencies - */ import type { RichTextValue } from '@wordpress/rich-text'; interface BaseFormatEditProps { diff --git a/packages/format-library/src/underline/index.tsx b/packages/format-library/src/underline/index.tsx index c0306ffe3254ea..f80a60823eeff6 100644 --- a/packages/format-library/src/underline/index.tsx +++ b/packages/format-library/src/underline/index.tsx @@ -3,7 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; import { RichTextShortcut, __unstableRichTextInputEvent, - // @ts-ignore + // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import type { RichTextValue } from '@wordpress/rich-text'; diff --git a/packages/format-library/src/unknown/index.tsx b/packages/format-library/src/unknown/index.tsx index 36c5077243d805..9a99556aad147e 100644 --- a/packages/format-library/src/unknown/index.tsx +++ b/packages/format-library/src/unknown/index.tsx @@ -1,13 +1,9 @@ import { __ } from '@wordpress/i18n'; import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text'; -// @ts-ignore +// @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { help } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; - -/** - * Internal dependencies - */ import type { UnknownEditProps } from '../types'; const name = 'core/unknown'; diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index 0c34b9a6a15e4e..b7d89af2024db8 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -378,7 +378,7 @@ formats: [ ... ] } )`. ### RichTextFormat -An object which represents a formatted string. See main `@wordpress/rich-text` documentation for more information. +A single format, such as `core/bold`, applied to a range of characters within a `RichTextValue`. See main `@wordpress/rich-text` documentation for more information. ### RichTextValue diff --git a/packages/rich-text/src/index.ts b/packages/rich-text/src/index.ts index 784761adf2ccd3..5d9a9f6c089560 100644 --- a/packages/rich-text/src/index.ts +++ b/packages/rich-text/src/index.ts @@ -35,7 +35,14 @@ export function __experimentalRichText() {} * An object which represents a formatted string. See main `@wordpress/rich-text` * documentation for more information. */ -export type { RichTextValue, RichTextFormat } from './types'; +export type { RichTextValue } from './types'; + +/** + * A single format, such as `core/bold`, applied to a range of characters within + * a `RichTextValue`. See main `@wordpress/rich-text` documentation for more + * information. + */ +export type { RichTextFormat } from './types'; /** * The callback-Set refs the private event-listener helpers dispatch from. From 0d5a4e7f148e476d1a6419ba3063de5a2a649a87 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 16:37:22 +0530 Subject: [PATCH 21/46] fix: Feedbacks for ReactNode in bold file --- packages/format-library/src/bold/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 4d77cc4a58d42f..1df2e41bce6122 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -23,7 +23,7 @@ export const bold = { onChange, onFocus, isVisible = true, - }: BoldEditProps ): JSX.Element { + }: BoldEditProps ): React.ReactNode { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } From 5459d36f1d01a5df905dff52d4279e8a701c8858 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 16:43:34 +0530 Subject: [PATCH 22/46] fix: casting issue for linkFormat arg in applyFormat function --- packages/format-library/src/language/index.tsx | 2 +- packages/format-library/src/link/inline.tsx | 11 +++-------- packages/format-library/src/types.ts | 4 ++-- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index 992d56f771402c..4605c31dc301e4 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -110,7 +110,7 @@ function InlineLanguageUI( { lang, dir, }, - } as any ) + } ) ); onClose(); } } diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index c3e8a09e817838..6ac2e87372ea5a 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -143,7 +143,7 @@ function InlineLinkUI( { newValue = applyFormat( inserted, - linkFormat as any, + linkFormat, value.start, value.start + newText.length ); @@ -171,7 +171,7 @@ function InlineLinkUI( { } ); newValue = applyFormat( value, - linkFormat as any, + linkFormat, boundary.start, boundary.end ); @@ -182,12 +182,7 @@ function InlineLinkUI( { // can apply formats to it. newValue = create( { text: newText } ); // Apply the new Link format to this new text value. - newValue = applyFormat( - newValue, - linkFormat as any, - 0, - newText.length - ); + newValue = applyFormat( newValue, linkFormat, 0, newText.length ); // Get the boundaries of the active link format. const boundary = getFormatBoundary( value, { diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index abd1c6e6835902..7c2abd1ef33c82 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -149,14 +149,14 @@ export interface LinkFormatOptions { cssClasses?: string; } -export interface LinkFormatAttributes { +export type LinkFormatAttributes = { url: string; type?: string; id?: string; target?: string; rel?: string; class?: string; -} +}; export interface LinkFormat { type: 'core/link'; From b33390c1d8590704ebc8bd726057cd715d0118a6 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 17:07:39 +0530 Subject: [PATCH 23/46] fix: Remove unsafe alias --- packages/format-library/src/code/index.tsx | 5 +---- packages/format-library/src/keyboard/index.tsx | 4 +--- packages/format-library/src/language/index.tsx | 5 +---- packages/format-library/src/math/index.tsx | 5 +---- packages/format-library/src/strikethrough/index.tsx | 4 +--- packages/format-library/src/subscript/index.tsx | 5 +---- packages/format-library/src/superscript/index.tsx | 5 +---- packages/format-library/src/text-color/index.tsx | 5 +---- packages/format-library/src/unknown/index.tsx | 5 +---- 9 files changed, 9 insertions(+), 34 deletions(-) diff --git a/packages/format-library/src/code/index.tsx b/packages/format-library/src/code/index.tsx index 92dcda4e6080a1..cd9c1d58eb0b37 100644 --- a/packages/format-library/src/code/index.tsx +++ b/packages/format-library/src/code/index.tsx @@ -9,9 +9,6 @@ import { code as codeIcon } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; import type { CodeEditProps } from '../types'; -const RichTextToolbarButtonUnsafe = - RichTextToolbarButton as React.ComponentType< any >; - const name = 'core/code'; const title = __( 'Inline code' ); @@ -75,7 +72,7 @@ export const code = { character="x" onUse={ onClick } /> - ; export const keyboard = { name, @@ -26,7 +24,7 @@ export const keyboard = { } return ( - ; - const name = 'core/language'; const title = __( 'Language' ); @@ -49,7 +46,7 @@ function Edit( { isActive, value, onChange, contentRef }: LanguageEditProps ) { return ( <> - ; - function InlineUI( { value, onChange, @@ -167,7 +164,7 @@ function Edit( { return ( <> - ; export const strikethrough = { name, @@ -31,7 +29,7 @@ export const strikethrough = { character="d" onUse={ onClick } /> - ; - export const subscript = { name, title, @@ -27,7 +24,7 @@ export const subscript = { } return ( - ; - export const superscript = { name, title, @@ -27,7 +24,7 @@ export const superscript = { } return ( - ; - function getComputedStyleProperty( element: HTMLElement, property: string ) { const { ownerDocument } = element; const { defaultView } = ownerDocument; @@ -92,7 +89,7 @@ function TextColorEdit( { return ( <> - ; - function selectionContainsUnknownFormats( value: RichTextValue ) { if ( isCollapsed( value ) ) { return false; @@ -39,7 +36,7 @@ export const unknown = { } return ( - Date: Wed, 19 Aug 2026 17:08:20 +0530 Subject: [PATCH 24/46] fix: Avoid use of any in useAchor hook --- packages/format-library/src/link/inline.tsx | 8 +++++++- packages/format-library/src/text-color/inline.tsx | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 6ac2e87372ea5a..b69483add5141d 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -252,10 +252,16 @@ function InlineLinkUI( { } } + /* + * `isActive` is not part of `WPFormat`, but `useAnchor` reads it + * dynamically. Hoisting the object out of the call avoids excess property + * checking, which only applies to object literals passed inline. + */ + const anchorSettings = { ...settings, isActive }; const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs editableContentElement: contentRef.current as HTMLElement | null, - settings: { ...settings, isActive } as any, + settings: anchorSettings, } ); async function handleCreate( pageTitle: string ) { diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index 77a9cd1003c93b..9a0b894af6ae34 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -208,10 +208,16 @@ export default function InlineColorUI( { contentRef: React.RefObject< HTMLElement >; isActive: boolean; } ) { + /* + * `isActive` is not part of `WPFormat`, but `useAnchor` reads it + * dynamically. Hoisting the object out of the call avoids excess property + * checking, which only applies to object literals passed inline. + */ + const anchorSettings = { ...settings, isActive }; const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs editableContentElement: contentRef.current as HTMLElement | null, - settings: { ...settings, isActive } as any, + settings: anchorSettings, } ); return ( From f88357c5724be880d9493ebe0a3884631e0edcbd Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 17:15:49 +0530 Subject: [PATCH 25/46] fix: any type in math --- packages/format-library/src/math/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index 8df60c9b1b0b6c..b7d75c6816927f 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -50,8 +50,12 @@ function InlineUI( { try { mathML = latexToMathML( newLatex, { displayMode: false } ); setError( null ); - } catch ( err: any ) { - setError( err.message ); + } catch ( err ) { + setError( + err instanceof Error + ? err.message + : __( 'Could not parse the LaTeX math syntax.' ) + ); } } else { setError( null ); From b005a2df162a810d93ff3de68a5d0326dd45b146 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 17:28:30 +0530 Subject: [PATCH 26/46] fix: tsconfig related changes --- packages/format-library/tsconfig.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/format-library/tsconfig.json b/packages/format-library/tsconfig.json index c0a4cbdc3cbf40..89ef9721fca1b5 100644 --- a/packages/format-library/tsconfig.json +++ b/packages/format-library/tsconfig.json @@ -7,18 +7,18 @@ }, "references": [ { "path": "../a11y/tsconfig.build.json" }, - { "path": "../block-editor" }, - { "path": "../components" }, + { "path": "../block-editor/tsconfig.build.json" }, + { "path": "../components/tsconfig.build.json" }, { "path": "../compose/tsconfig.build.json" }, { "path": "../data" }, { "path": "../element/tsconfig.build.json" }, { "path": "../html-entities/tsconfig.build.json" }, { "path": "../i18n/tsconfig.build.json" }, - { "path": "../icons" }, + { "path": "../icons/tsconfig.build.json" }, { "path": "../latex-to-mathml" }, { "path": "../private-apis" }, { "path": "../rich-text" }, - { "path": "../ui" }, + { "path": "../ui/tsconfig.build.json" }, { "path": "../url" } ] } From c78eac6a5c79eb213cbf8ff8cba629faec10033d Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 19 Aug 2026 17:47:29 +0530 Subject: [PATCH 27/46] fix: Remove suppressions --- .../data/data-core-annotations.md | 1 + .../data/data-core-block-directory.md | 5 +- .../data/data-core-block-editor.md | 159 +++--- .../reference-guides/data/data-core-blocks.md | 503 +++++++++--------- .../data/data-core-commands.md | 1 + .../data/data-core-customize-widgets.md | 43 +- .../data/data-core-edit-post.md | 37 +- .../data/data-core-edit-site.md | 57 +- .../data/data-core-edit-widgets.md | 1 + .../reference-guides/data/data-core-editor.md | 47 +- .../data/data-core-keyboard-shortcuts.md | 410 +++++++------- .../data/data-core-notices.md | 209 ++++---- .../data/data-core-preferences.md | 1 + .../data/data-core-reusable-blocks.md | 1 + .../data/data-core-rich-text.md | 59 +- .../data/data-core-viewport.md | 21 +- docs/reference-guides/data/data-core.md | 1 + packages/a11y/README.md | 1 + packages/admin-ui/README.md | 13 +- packages/autop/README.md | 1 + packages/blob/README.md | 21 +- packages/block-directory/README.md | 5 +- packages/block-editor/README.md | 174 +++--- packages/block-library/README.md | 1 + .../README.md | 125 ++--- packages/blocks/README.md | 216 ++++---- packages/commands/README.md | 153 +++--- packages/compose/README.md | 66 ++- packages/core-commands/README.md | 1 + packages/core-data/README.md | 115 ++-- packages/data-controls/README.md | 11 +- packages/data/README.md | 209 ++++---- packages/date/README.md | 1 + packages/deprecated/README.md | 1 + packages/dom-ready/README.md | 3 +- packages/dom/README.md | 11 +- packages/edit-post/README.md | 1 + packages/editor/README.md | 116 ++-- packages/element/README.md | 19 +- packages/escape-html/README.md | 1 + packages/fields/README.md | 18 +- packages/html-entities/README.md | 1 + packages/i18n/README.md | 1 + packages/kebab-case/README.md | 1 + packages/keyboard-shortcuts/README.md | 1 + packages/keycodes/README.md | 13 +- packages/media-utils/README.md | 1 + packages/plugins/README.md | 23 +- packages/preferences-persistence/README.md | 3 +- packages/preferences/README.md | 1 + packages/priority-queue/README.md | 3 +- packages/react-i18n/README.md | 1 + packages/redux-routine/README.md | 1 + packages/rich-text/README.md | 17 +- packages/router/README.md | 1 + packages/server-side-render/README.md | 39 +- packages/shortcode/README.md | 1 + packages/style-engine/README.md | 1 + packages/sync/README.md | 1 + packages/undo-manager/README.md | 1 + packages/upload-media/README.md | 3 +- packages/url/README.md | 52 +- packages/video-conversion/README.md | 1 + packages/viewport/README.md | 5 +- packages/views/README.md | 3 +- packages/vips/README.md | 1 + packages/warning/README.md | 1 + packages/wordcount/README.md | 3 +- tools/eslint/suppressions.json | 25 - 69 files changed, 1524 insertions(+), 1520 deletions(-) diff --git a/docs/reference-guides/data/data-core-annotations.md b/docs/reference-guides/data/data-core-annotations.md index ec9be123836539..5af22fc511f9e2 100644 --- a/docs/reference-guides/data/data-core-annotations.md +++ b/docs/reference-guides/data/data-core-annotations.md @@ -20,4 +20,5 @@ Nothing to document. Nothing to document. + diff --git a/docs/reference-guides/data/data-core-block-directory.md b/docs/reference-guides/data/data-core-block-directory.md index c1fe96521adc32..685b39ea7b08d6 100644 --- a/docs/reference-guides/data/data-core-block-directory.md +++ b/docs/reference-guides/data/data-core-block-directory.md @@ -205,8 +205,8 @@ Returns an action object used to indicate install in progress. _Parameters_ -- _blockId_ `string`: -- _isInstalling_ `boolean`: +- _blockId_ `string`: +- _isInstalling_ `boolean`: _Returns_ @@ -220,4 +220,5 @@ _Parameters_ - _block_ `Object`: The blockType object. + diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 19da15b04e2c48..25af0b0d4312d6 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -573,7 +573,7 @@ _Returns_ ### getHoveredBlockClientId -> **Deprecated** +> **Deprecated** Returns the currently hovered block. @@ -744,34 +744,34 @@ Returns the currently selected block, or null if there is no selected block. _Usage_ ```js -import { select } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { select } from '@wordpress/data' +import { store as blockEditorStore } from '@wordpress/block-editor' // Set initial active block client ID -let activeBlockClientId = null; +let activeBlockClientId = null const getActiveBlockData = () => { - const activeBlock = select( blockEditorStore ).getSelectedBlock(); + const activeBlock = select(blockEditorStore).getSelectedBlock() - if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) { - activeBlockClientId = activeBlock.clientId; + if (activeBlock && activeBlock.clientId !== activeBlockClientId) { + activeBlockClientId = activeBlock.clientId // Get active block name and attributes - const activeBlockName = activeBlock.name; - const activeBlockAttributes = activeBlock.attributes; + const activeBlockName = activeBlock.name + const activeBlockAttributes = activeBlock.attributes // Log active block name and attributes - console.log( activeBlockName, activeBlockAttributes ); + console.log(activeBlockName, activeBlockAttributes) + } } -}; -// Subscribe to changes in the editor -// wp.data.subscribe(() => { -// getActiveBlockData() -// }) + // Subscribe to changes in the editor + // wp.data.subscribe(() => { + // getActiveBlockData() + // }) -// Update active block data on click -// onclick="getActiveBlockData()" + // Update active block data on click + // onclick="getActiveBlockData()" ``` _Parameters_ @@ -872,7 +872,7 @@ Returns the defined block template _Parameters_ -- _state_ `boolean`: +- _state_ `boolean`: _Returns_ @@ -893,7 +893,7 @@ _Returns_ ### hasBlockMovingClientId -> **Deprecated** +> **Deprecated** Returns whether block moving mode is enabled. @@ -1095,7 +1095,7 @@ _Returns_ ### isCaretWithinFormattedText -> **Deprecated** +> **Deprecated** Returns true if the caret is within formatted text, or false otherwise. @@ -1212,7 +1212,7 @@ Returns whether the blocks matches the template or not. _Parameters_ -- _state_ `boolean`: +- _state_ `boolean`: _Returns_ @@ -1252,12 +1252,12 @@ Action that duplicates a list of blocks. _Parameters_ -- _clientIds_ `string[]`: -- _updateSelection_ `boolean`: +- _clientIds_ `string[]`: +- _updateSelection_ `boolean`: ### enterFormattedText -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the caret has entered formatted text. @@ -1267,7 +1267,7 @@ _Returns_ ### exitFormattedText -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user caret has exited formatted text. @@ -1290,7 +1290,7 @@ Action that hides the insertion point. ### hoverBlock -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the block with the specified client ID has been hovered. @@ -1300,7 +1300,7 @@ Action that inserts a default block after a given block. _Parameters_ -- _clientId_ `string`: +- _clientId_ `string`: ### insertBeforeBlock @@ -1308,7 +1308,7 @@ Action that inserts a default block before a given block. _Parameters_ -- _clientId_ `string`: +- _clientId_ `string`: ### insertBlock @@ -1340,7 +1340,7 @@ _Parameters_ - _blocks_ `Object[]`: Block objects to insert. - _index_ `?number`: Index at which block should be inserted. - _rootClientId_ `?string`: Optional root client ID of block list on which to insert. -- _updateSelection_ `?boolean`: If true block selection will be updated. If false, block selection will not change. Defaults to true. +- _updateSelection_ `?boolean`: If true block selection will be updated. If false, block selection will not change. Defaults to true. - _initialPosition_ `0|-1|null`: Initial focus position. Setting it to null prevent focusing the inserted block. - _meta_ `?Object`: Optional Meta values to be passed to the action object. @@ -1409,7 +1409,7 @@ _Parameters_ ### receiveBlocks -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that blocks have been received. Unlike resetBlocks, these should be appended to the existing known set, not replacing. @@ -1464,54 +1464,54 @@ _Properties_ _Usage_ ```js -wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( { - name: 'openverse', - labels: { - name: 'Openverse', - search_items: 'Search Openverse', - }, - mediaType: 'image', - async fetch( query = {} ) { - const defaultArgs = { - mature: false, - excluded_source: 'flickr,inaturalist,wikimedia', - license: 'pdm,cc0', - }; - const finalQuery = { ...query, ...defaultArgs }; - // Sometimes you might need to map the supported request params according to `InserterMediaRequest`. - // interface. In this example the `search` query param is named `q`. - const mapFromInserterMediaRequest = { - per_page: 'page_size', - search: 'q', - }; - const url = new URL( 'https://api.openverse.org/v1/images/' ); - Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { - const queryKey = mapFromInserterMediaRequest[ key ] || key; - url.searchParams.set( queryKey, value ); - } ); - const response = await window.fetch( url, { - headers: { - 'User-Agent': 'WordPress/inserter-media-fetch', - }, - } ); - const jsonResponse = await response.json(); - const results = jsonResponse.results; - return results.map( ( result ) => ( { - ...result, - // If your response result includes an `id` prop that you want to access later, it should - // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide - // a report URL getter. - // Additionally you should always clear the `id` value of your response results because - // it is used to identify WordPress media items. - sourceId: result.id, - id: undefined, - caption: result.caption, - previewUrl: result.thumbnail, - } ) ); - }, - getReportUrl: ( { sourceId } ) => - `https://wordpress.org/openverse/image/${ sourceId }/report/`, - isExternalResource: true, +wp.data.dispatch('core/block-editor').registerInserterMediaCategory( { + name: 'openverse', + labels: { + name: 'Openverse', + search_items: 'Search Openverse', + }, + mediaType: 'image', + async fetch( query = {} ) { + const defaultArgs = { + mature: false, + excluded_source: 'flickr,inaturalist,wikimedia', + license: 'pdm,cc0', + }; + const finalQuery = { ...query, ...defaultArgs }; + // Sometimes you might need to map the supported request params according to `InserterMediaRequest`. + // interface. In this example the `search` query param is named `q`. + const mapFromInserterMediaRequest = { + per_page: 'page_size', + search: 'q', + }; + const url = new URL( 'https://api.openverse.org/v1/images/' ); + Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { + const queryKey = mapFromInserterMediaRequest[ key ] || key; + url.searchParams.set( queryKey, value ); + } ); + const response = await window.fetch( url, { + headers: { + 'User-Agent': 'WordPress/inserter-media-fetch', + }, + } ); + const jsonResponse = await response.json(); + const results = jsonResponse.results; + return results.map( ( result ) => ( { + ...result, + // If your response result includes an `id` prop that you want to access later, it should + // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide + // a report URL getter. + // Additionally you should always clear the `id` value of your response results because + // it is used to identify WordPress media items. + sourceId: result.id, + id: undefined, + caption: result.caption, + previewUrl: result.thumbnail, + } ) ); + }, + getReportUrl: ( { sourceId } ) => + `https://wordpress.org/openverse/image/${ sourceId }/report/`, + isExternalResource: true, } ); ``` @@ -1687,7 +1687,7 @@ _Returns_ ### setBlockMovingClientId -> **Deprecated** +> **Deprecated** Set the block moving client ID. @@ -1913,4 +1913,5 @@ _Parameters_ - _blocks_ `Array`: Array of blocks. + diff --git a/docs/reference-guides/data/data-core-blocks.md b/docs/reference-guides/data/data-core-blocks.md index 49dff81aedcceb..0fc98d06797d66 100644 --- a/docs/reference-guides/data/data-core-blocks.md +++ b/docs/reference-guides/data/data-core-blocks.md @@ -23,23 +23,23 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - // This example assumes that a core/embed block is the first block in the Block Editor. - const activeBlockVariation = useSelect( ( select ) => { - // Retrieve the list of blocks. - const [ firstBlock ] = select( blockEditorStore ).getBlocks(); - - // Return the active block variation for the first block. - return select( blocksStore ).getActiveBlockVariation( - firstBlock.name, - firstBlock.attributes - ); - }, [] ); - - return activeBlockVariation && activeBlockVariation.name === 'spotify' ? ( -

{ __( 'Spotify variation' ) }

- ) : ( -

{ __( 'Other variation' ) }

- ); + // This example assumes that a core/embed block is the first block in the Block Editor. + const activeBlockVariation = useSelect( ( select ) => { + // Retrieve the list of blocks. + const [ firstBlock ] = select( blockEditorStore ).getBlocks() + + // Return the active block variation for the first block. + return select( blocksStore ).getActiveBlockVariation( + firstBlock.name, + firstBlock.attributes + ); + }, [] ); + + return activeBlockVariation && activeBlockVariation.name === 'spotify' ? ( +

{ __( 'Spotify variation' ) }

+ ) : ( +

{ __( 'Other variation' ) }

+ ); }; ``` @@ -66,19 +66,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const buttonBlockStyles = useSelect( - ( select ) => select( blocksStore ).getBlockStyles( 'core/button' ), - [] - ); - - return ( -
    - { buttonBlockStyles && - buttonBlockStyles.map( ( style ) => ( -
  • { style.label }
    • - ) ) } -
- ); + const buttonBlockStyles = useSelect( ( select ) => + select( blocksStore ).getBlockStyles( 'core/button' ), + [] + ); + + return ( +
    + { buttonBlockStyles && + buttonBlockStyles.map( ( style ) => ( +
  • { style.label }
    • + ) ) } +
+ ); }; ``` @@ -103,20 +103,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const paragraphBlockSupportValue = useSelect( - ( select ) => - select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ), - [] - ); - - return ( -

- { sprintf( - __( 'core/paragraph supports.anchor value: %s' ), - paragraphBlockSupportValue - ) } -

- ); + const paragraphBlockSupportValue = useSelect( ( select ) => + select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ), + [] + ); + + return ( +

+ { sprintf( + __( 'core/paragraph supports.anchor value: %s' ), + paragraphBlockSupportValue + ) } +

+ ); }; ``` @@ -142,27 +141,26 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const paragraphBlock = useSelect( - ( select ) => ( select ) => - select( blocksStore ).getBlockType( 'core/paragraph' ), - [] - ); - - return ( -
    - { paragraphBlock && - Object.entries( paragraphBlock.supports ).map( - ( blockSupportsEntry ) => { - const [ propertyName, value ] = blockSupportsEntry; - return ( -
  • { `${ propertyName } : ${ value }` }
    • - ); - } - ) } -
- ); + const paragraphBlock = useSelect( ( select ) => + ( select ) => select( blocksStore ).getBlockType( 'core/paragraph' ), + [] + ); + + return ( +
    + { paragraphBlock && + Object.entries( paragraphBlock.supports ).map( + ( blockSupportsEntry ) => { + const [ propertyName, value ] = blockSupportsEntry; + return ( +
  • { `${ propertyName } : ${ value }` }
    • + ); + } + ) } +
+ ); }; ``` @@ -186,18 +184,18 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const blockTypes = useSelect( - ( select ) => select( blocksStore ).getBlockTypes(), - [] - ); - - return ( -
    - { blockTypes.map( ( block ) => ( -
  • { block.title }
    • - ) ) } -
- ); + const blockTypes = useSelect( + ( select ) => select( blocksStore ).getBlockTypes(), + [] + ); + + return ( +
    + { blockTypes.map( ( block ) => ( +
  • { block.title }
    • + ) ) } +
+ ); }; ``` @@ -220,20 +218,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const socialLinkVariations = useSelect( - ( select ) => - select( blocksStore ).getBlockVariations( 'core/social-link' ), - [] - ); - - return ( -
    - { socialLinkVariations && - socialLinkVariations.map( ( variation ) => ( -
  • { variation.title }
    • - ) ) } -
- ); + const socialLinkVariations = useSelect( ( select ) => + select( blocksStore ).getBlockVariations( 'core/social-link' ), + [] + ); + + return ( +
    + { socialLinkVariations && + socialLinkVariations.map( ( variation ) => ( +
  • { variation.title }
    • + ) ) } +
+ ); }; ``` @@ -255,21 +252,21 @@ _Usage_ ```js import { store as blocksStore } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; +import { useSelect, } from '@wordpress/data'; const ExampleComponent = () => { - const blockCategories = useSelect( - ( select ) => select( blocksStore ).getCategories(), - [] - ); - - return ( -
    - { blockCategories.map( ( category ) => ( -
  • { category.title }
    • - ) ) } -
- ); + const blockCategories = useSelect( ( select ) => + select( blocksStore ).getCategories(), + [] + ); + + return ( +
    + { blockCategories.map( ( category ) => ( +
  • { category.title }
    • + ) ) } +
+ ); }; ``` @@ -292,20 +289,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const childBlockNames = useSelect( - ( select ) => - select( blocksStore ).getChildBlockNames( 'core/navigation' ), - [] - ); - - return ( -
    - { childBlockNames && - childBlockNames.map( ( child ) => ( -
  • { child }
    • - ) ) } -
- ); + const childBlockNames = useSelect( ( select ) => + select( blocksStore ).getChildBlockNames( 'core/navigation' ), + [] + ); + + return ( +
    + { childBlockNames && + childBlockNames.map( ( child ) => ( +
  • { child }
    • + ) ) } +
+ ); }; ``` @@ -329,19 +325,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const blockCollections = useSelect( - ( select ) => select( blocksStore ).getCollections(), - [] - ); - - return ( -
    - { Object.values( blockCollections ).length > 0 && - Object.values( blockCollections ).map( ( collection ) => ( -
  • { collection.title }
    • - ) ) } -
- ); + const blockCollections = useSelect( ( select ) => + select( blocksStore ).getCollections(), + [] + ); + + return ( +
    + { Object.values( blockCollections ).length > 0 && + Object.values( blockCollections ).map( ( collection ) => ( +
  • { collection.title }
    • + ) ) } +
+ ); }; ``` @@ -365,18 +361,18 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const defaultBlockName = useSelect( - ( select ) => select( blocksStore ).getDefaultBlockName(), - [] - ); - - return ( - defaultBlockName && ( -

- { sprintf( __( 'Default block name: %s' ), defaultBlockName ) } -

- ) - ); + const defaultBlockName = useSelect( ( select ) => + select( blocksStore ).getDefaultBlockName(), + [] + ); + + return ( + defaultBlockName && ( +

+ { sprintf( __( 'Default block name: %s' ), defaultBlockName ) } +

+ ) + ); }; ``` @@ -400,22 +396,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const defaultEmbedBlockVariation = useSelect( - ( select ) => - select( blocksStore ).getDefaultBlockVariation( 'core/embed' ), - [] - ); - - return ( - defaultEmbedBlockVariation && ( -

- { sprintf( - __( 'core/embed default variation: %s' ), - defaultEmbedBlockVariation.title - ) } -

- ) - ); + const defaultEmbedBlockVariation = useSelect( ( select ) => + select( blocksStore ).getDefaultBlockVariation( 'core/embed' ), + [] + ); + + return ( + defaultEmbedBlockVariation && ( +

+ { sprintf( + __( 'core/embed default variation: %s' ), + defaultEmbedBlockVariation.title + ) } +

+ ) + ); }; ``` @@ -441,21 +436,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const freeformFallbackBlockName = useSelect( - ( select ) => select( blocksStore ).getFreeformFallbackBlockName(), - [] - ); - - return ( - freeformFallbackBlockName && ( -

- { sprintf( - __( 'Freeform fallback block name: %s' ), - freeformFallbackBlockName - ) } -

- ) - ); + const freeformFallbackBlockName = useSelect( ( select ) => + select( blocksStore ).getFreeformFallbackBlockName(), + [] + ); + + return ( + freeformFallbackBlockName && ( +

+ { sprintf( __( + 'Freeform fallback block name: %s' ), + freeformFallbackBlockName + ) } +

+ ) + ); }; ``` @@ -479,21 +474,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const groupingBlockName = useSelect( - ( select ) => select( blocksStore ).getGroupingBlockName(), - [] - ); - - return ( - groupingBlockName && ( -

- { sprintf( - __( 'Default grouping block name: %s' ), - groupingBlockName - ) } -

- ) - ); + const groupingBlockName = useSelect( ( select ) => + select( blocksStore ).getGroupingBlockName(), + [] + ); + + return ( + groupingBlockName && ( +

+ { sprintf( + __( 'Default grouping block name: %s' ), + groupingBlockName + ) } +

+ ) + ); }; ``` @@ -517,21 +512,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const unregisteredFallbackBlockName = useSelect( - ( select ) => select( blocksStore ).getUnregisteredFallbackBlockName(), - [] - ); - - return ( - unregisteredFallbackBlockName && ( -

- { sprintf( - __( 'Unregistered fallback block name: %s' ), - unregisteredFallbackBlockName - ) } -

- ) - ); + const unregisteredFallbackBlockName = useSelect( ( select ) => + select( blocksStore ).getUnregisteredFallbackBlockName(), + [] + ); + + return ( + unregisteredFallbackBlockName && ( +

+ { sprintf( __( + 'Unregistered fallback block name: %s' ), + unregisteredFallbackBlockName + ) } +

+ ) + ); }; ``` @@ -594,19 +589,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const navigationBlockHasChildBlocks = useSelect( - ( select ) => select( blocksStore ).hasChildBlocks( 'core/navigation' ), - [] - ); - - return ( -

- { sprintf( - __( 'core/navigation has child blocks: %s' ), - navigationBlockHasChildBlocks - ) } -

- ); + const navigationBlockHasChildBlocks = useSelect( ( select ) => + select( blocksStore ).hasChildBlocks( 'core/navigation' ), + [] + ); + + return ( +

+ { sprintf( + __( 'core/navigation has child blocks: %s' ), + navigationBlockHasChildBlocks + ) } +

+ ); }; ``` @@ -631,24 +626,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const navigationBlockHasChildBlocksWithInserterSupport = useSelect( - ( select ) => - select( blocksStore ).hasChildBlocksWithInserterSupport( - 'core/navigation' - ), - [] - ); - - return ( -

- { sprintf( - __( - 'core/navigation has child blocks with inserter support: %s' - ), - navigationBlockHasChildBlocksWithInserterSupport - ) } -

- ); + const navigationBlockHasChildBlocksWithInserterSupport = useSelect( ( select ) => + select( blocksStore ).hasChildBlocksWithInserterSupport( + 'core/navigation' + ), + [] + ); + + return ( +

+ { sprintf( + __( 'core/navigation has child blocks with inserter support: %s' ), + navigationBlockHasChildBlocksWithInserterSupport + ) } +

+ ); }; ``` @@ -673,25 +665,25 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const termFound = useSelect( - ( select ) => - select( blocksStore ).isMatchingSearchTerm( - 'core/navigation', - 'theme' - ), - [] - ); - - return ( -

- { sprintf( - __( - 'Search term was found in the title, keywords, category or description in block.json: %s' - ), - termFound - ) } -

- ); + const termFound = useSelect( + ( select ) => + select( blocksStore ).isMatchingSearchTerm( + 'core/navigation', + 'theme' + ), + [] + ); + + return ( +

+ { sprintf( + __( + 'Search term was found in the title, keywords, category or description in block.json: %s' + ), + termFound + ) } +

+ ); }; ``` @@ -717,6 +709,7 @@ The actions in this package shouldn't be used directly. Instead, use the functio Signals that all block types should be computed again. It uses stored unprocessed block types and all the most recent list of registered filters. -It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late. +It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late. + diff --git a/docs/reference-guides/data/data-core-commands.md b/docs/reference-guides/data/data-core-commands.md index 9621de9d98c957..36f800649e1fe3 100644 --- a/docs/reference-guides/data/data-core-commands.md +++ b/docs/reference-guides/data/data-core-commands.md @@ -126,4 +126,5 @@ _Returns_ - `Object`: action. + diff --git a/docs/reference-guides/data/data-core-customize-widgets.md b/docs/reference-guides/data/data-core-customize-widgets.md index 8796f4cfea5ddf..b2087b8bd35e51 100644 --- a/docs/reference-guides/data/data-core-customize-widgets.md +++ b/docs/reference-guides/data/data-core-customize-widgets.md @@ -18,14 +18,14 @@ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { isInserterOpened } = useSelect( - ( select ) => select( customizeWidgetsStore ), - [] - ); - - return isInserterOpened() - ? __( 'Inserter is open' ) - : __( 'Inserter is closed.' ); + const { isInserterOpened } = useSelect( + ( select ) => select( customizeWidgetsStore ), + [] + ); + + return isInserterOpened() + ? __( 'Inserter is open' ) + : __( 'Inserter is closed.' ); }; ``` @@ -57,19 +57,19 @@ import { useDispatch } from '@wordpress/data'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { setIsInserterOpened } = useDispatch( customizeWidgetsStore ); - const [ isOpen, setIsOpen ] = useState( false ); - - return ( - - ); + const { setIsInserterOpened } = useDispatch( customizeWidgetsStore ); + const [ isOpen, setIsOpen ] = useState( false ); + + return ( + + ); }; ``` @@ -83,4 +83,5 @@ _Returns_ - `Object`: Action object. + diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index c316a9266af98a..d315678b7ba780 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -138,13 +138,13 @@ _Returns_ ### isEditingTemplate -> **Deprecated** +> **Deprecated** Returns true if the template editing mode is enabled. ### isEditorPanelEnabled -> **Deprecated** +> **Deprecated** Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default. @@ -159,7 +159,7 @@ _Returns_ ### isEditorPanelOpened -> **Deprecated** +> **Deprecated** Returns true if the given panel is open, or false otherwise. Panels are closed by default. @@ -174,7 +174,7 @@ _Returns_ ### isEditorPanelRemoved -> **Deprecated** +> **Deprecated** Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default. @@ -214,7 +214,7 @@ _Returns_ ### isInserterOpened -> **Deprecated** +> **Deprecated** Returns true if the inserter is opened. @@ -306,7 +306,7 @@ _Returns_ ### isPublishSidebarOpened -> **Deprecated** +> **Deprecated** Returns true if the publish sidebar is opened. @@ -352,7 +352,7 @@ _Returns_ ### closePublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user closed the publish sidebar. @@ -412,7 +412,7 @@ _Returns_ ### openPublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user opened the publish sidebar. @@ -422,7 +422,7 @@ _Returns_ ### removeEditorPanel -> **Deprecated** +> **Deprecated** Returns an action object used to remove a panel from the editor. @@ -448,13 +448,13 @@ _Parameters_ ### setIsEditingTemplate -> **Deprecated** +> **Deprecated** Returns an action object used to switch to template editing. ### setIsInserterOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the inserter. @@ -464,7 +464,7 @@ _Parameters_ ### setIsListViewOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the list view. @@ -482,7 +482,7 @@ _Parameters_ ### switchEditorMode -> **Deprecated** +> **Deprecated** Triggers an action used to switch editor mode. @@ -492,13 +492,13 @@ _Parameters_ ### toggleDistractionFree -> **Deprecated** +> **Deprecated** Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars. ### toggleEditorPanelEnabled -> **Deprecated** +> **Deprecated** Returns an action object used to enable or disable a panel in the editor. @@ -512,7 +512,7 @@ _Returns_ ### toggleEditorPanelOpened -> **Deprecated** +> **Deprecated** Opens a closed panel and closes an open panel. @@ -542,7 +542,7 @@ _Parameters_ ### togglePublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user toggles the publish sidebar. @@ -552,8 +552,9 @@ _Returns_ ### updatePreferredStyleVariations -> **Deprecated** +> **Deprecated** Returns an action object used in signaling that a style should be auto-applied when a block is created. + diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index a16c53861daada..e4161787dec809 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -20,11 +20,11 @@ _Returns_ ### getCurrentTemplateNavigationPanelSubMenu -> **Deprecated** +> **Deprecated** ### getCurrentTemplateTemplateParts -> **Deprecated** +> **Deprecated** Returns the template parts and their blocks for the current edited template. @@ -38,7 +38,7 @@ _Returns_ ### getEditedPostContext -> **Deprecated** +> **Deprecated** Returns the edited post's context object. @@ -52,7 +52,7 @@ _Returns_ ### getEditedPostId -> **Deprecated** +> **Deprecated** Returns the ID of the currently edited template or template part. @@ -66,7 +66,7 @@ _Returns_ ### getEditedPostType -> **Deprecated** +> **Deprecated** Returns the current edited post type (wp_template or wp_template_part). @@ -92,15 +92,15 @@ _Returns_ ### getHomeTemplateId -> **Deprecated** +> **Deprecated** ### getNavigationPanelActiveMenu -> **Deprecated** +> **Deprecated** ### getPage -> **Deprecated** +> **Deprecated** Returns the current page object. @@ -138,7 +138,7 @@ _Returns_ ### hasPageContentFocus -> **Deprecated** +> **Deprecated** Whether or not the editor allows only page content to be edited. @@ -148,7 +148,7 @@ _Returns_ ### isFeatureActive -> **Deprecated** +> **Deprecated** Returns whether the given feature is enabled or not. @@ -163,7 +163,7 @@ _Returns_ ### isInserterOpened -> **Deprecated** +> **Deprecated** Returns true if the inserter is opened. @@ -189,11 +189,11 @@ _Returns_ ### isNavigationOpened -> **Deprecated** +> **Deprecated** ### isPage -> **Deprecated** +> **Deprecated** Whether or not the editor has a page loaded into it. @@ -229,7 +229,7 @@ _Returns_ ### addTemplate -> **Deprecated** +> **Deprecated** Action that adds a new template and sets it as the current template. @@ -255,7 +255,7 @@ _Parameters_ ### openNavigationPanelToMenu -> **Deprecated** +> **Deprecated** Opens the navigation panel and sets its active menu at the same time. @@ -274,12 +274,12 @@ Reverts a template to its original theme-provided file. _Parameters_ - _template_ `Object`: The template to revert. -- _options_ `[Object]`: +- _options_ `[Object]`: - _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true. ### setEditedEntity -> **Deprecated** +> **Deprecated** Action that sets an edited entity. @@ -295,7 +295,7 @@ _Returns_ ### setEditedPostContext -> **Deprecated** +> **Deprecated** Set's the current block editor context. @@ -317,11 +317,11 @@ _Parameters_ ### setHomeTemplateId -> **Deprecated** +> **Deprecated** ### setIsInserterOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the inserter. @@ -331,7 +331,7 @@ _Parameters_ ### setIsListViewOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the list view. @@ -341,7 +341,7 @@ _Parameters_ ### setIsNavigationPanelOpened -> **Deprecated** +> **Deprecated** Sets whether the navigation panel should be open. @@ -355,7 +355,7 @@ _Parameters_ ### setNavigationMenu -> **Deprecated** +> **Deprecated** Action that sets a navigation menu. @@ -369,7 +369,7 @@ _Returns_ ### setNavigationPanelActiveMenu -> **Deprecated** +> **Deprecated** Action that sets the active navigation panel menu. @@ -379,7 +379,7 @@ _Returns_ ### setPage -> **Deprecated** +> **Deprecated** Resolves the template for a page and displays both. If no path is given, attempts to use the postId to generate a path like `?p=${ postId }`. @@ -397,7 +397,7 @@ _Returns_ ### setTemplatePart -> **Deprecated** +> **Deprecated** Action that sets a template part. @@ -411,7 +411,7 @@ _Returns_ ### switchEditorMode -> **Deprecated** +> **Deprecated** Triggers an action used to switch editor mode. @@ -421,7 +421,7 @@ _Parameters_ ### toggleDistractionFree -> **Deprecated** +> **Deprecated** Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars. @@ -445,4 +445,5 @@ _Returns_ - `Object`: Action object. + diff --git a/docs/reference-guides/data/data-core-edit-widgets.md b/docs/reference-guides/data/data-core-edit-widgets.md index 94b4af5a9f176d..cb49f194e914e2 100644 --- a/docs/reference-guides/data/data-core-edit-widgets.md +++ b/docs/reference-guides/data/data-core-edit-widgets.md @@ -359,4 +359,5 @@ _Returns_ - `Object`: Action object + diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 3191956f8d99b0..371ae5389cbc61 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -293,22 +293,20 @@ Returns a single attribute of the post being edited, preferring the unsaved edit _Usage_ ```js -// Get specific media size based on the featured media ID -// Note: change sizes?.large for any registered size -const getFeaturedMediaUrl = useSelect( ( select ) => { - const getFeaturedMediaId = - select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); - const media = select( 'core' ).getEntityRecord( - 'postType', - 'attachment', - getFeaturedMediaId - ); - - return ( - media?.media_details?.sizes?.large?.source_url || - media?.source_url || - '' - ); + // Get specific media size based on the featured media ID + // Note: change sizes?.large for any registered size + const getFeaturedMediaUrl = useSelect( ( select ) => { + const getFeaturedMediaId = + select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); + const media = select( 'core' ).getEntityRecord( + 'postType', + 'attachment', + getFeaturedMediaId + ); + + return ( + media?.media_details?.sizes?.large?.source_url || media?.source_url || '' + ); }, [] ); ``` @@ -375,7 +373,7 @@ Return the current block list. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -399,7 +397,7 @@ Returns the current selection. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -413,7 +411,7 @@ Returns the current selection end. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -427,7 +425,7 @@ Returns the current selection start. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -1190,7 +1188,7 @@ _Related_ ### autosave -Action that autosaves the current post. This includes server-side autosaving (default) and client-side (a.k.a. local) autosaving (e.g. on the Web, the post might be committed to Session Storage). +Action that autosaves the current post. This includes server-side autosaving (default) and client-side (a.k.a. local) autosaving (e.g. on the Web, the post might be committed to Session Storage). _Parameters_ @@ -1462,7 +1460,7 @@ Action for saving the current post in the editor. _Parameters_ -- _options_ `[Object]`: +- _options_ `[Object]`: ### selectBlock @@ -1476,7 +1474,7 @@ Action that changes the width of the editing canvas. _Parameters_ -- _deviceType_ `string`: +- _deviceType_ `string`: _Returns_ @@ -1554,7 +1552,7 @@ _Parameters_ ### setupEditorState -> **Deprecated** +> **Deprecated** Setup the editor state. @@ -1749,4 +1747,5 @@ _Returns_ - `Object`: Action object. + diff --git a/docs/reference-guides/data/data-core-keyboard-shortcuts.md b/docs/reference-guides/data/data-core-keyboard-shortcuts.md index 33eea613d9a936..11ea0ba643e39c 100644 --- a/docs/reference-guides/data/data-core-keyboard-shortcuts.md +++ b/docs/reference-guides/data/data-core-keyboard-shortcuts.md @@ -19,36 +19,36 @@ import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const allShortcutKeyCombinations = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getAllShortcutKeyCombinations( - 'core/editor/next-region' - ), - [] - ); - - return ( - allShortcutKeyCombinations.length > 0 && ( -
    - { allShortcutKeyCombinations.map( - ( { character, modifier }, index ) => ( -
  • - { createInterpolateElement( - sprintf( - 'Character: %s / Modifier: %s', - character, - modifier - ), - { - code: , - } - ) } -
    • - ) - ) } -
- ) - ); + const allShortcutKeyCombinations = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getAllShortcutKeyCombinations( + 'core/editor/next-region' + ), + [] + ); + + return ( + allShortcutKeyCombinations.length > 0 && ( +
    + { allShortcutKeyCombinations.map( + ( { character, modifier }, index ) => ( +
  • + { createInterpolateElement( + sprintf( + 'Character: %s / Modifier: %s', + character, + modifier + ), + { + code: , + } + ) } +
    • + ) + ) } +
+ ) + ); }; ``` @@ -74,35 +74,35 @@ import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const allShortcutRawKeyCombinations = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations( - 'core/editor/next-region' - ), - [] - ); - - return ( - allShortcutRawKeyCombinations.length > 0 && ( -
    - { allShortcutRawKeyCombinations.map( - ( shortcutRawKeyCombination, index ) => ( -
  • - { createInterpolateElement( - sprintf( - ' %s', - shortcutRawKeyCombination - ), - { - code: , - } - ) } -
    • - ) - ) } -
- ) - ); + const allShortcutRawKeyCombinations = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations( + 'core/editor/next-region' + ), + [] + ); + + return ( + allShortcutRawKeyCombinations.length > 0 && ( +
    + { allShortcutRawKeyCombinations.map( + ( shortcutRawKeyCombination, index ) => ( +
  • + { createInterpolateElement( + sprintf( + ' %s', + shortcutRawKeyCombination + ), + { + code: , + } + ) } +
    • + ) + ) } +
+ ) + ); }; ``` @@ -126,21 +126,23 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const categoryShortcuts = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ), - [] - ); - - return ( - categoryShortcuts.length > 0 && ( -
    - { categoryShortcuts.map( ( categoryShortcut ) => ( -
  • { categoryShortcut }
    • - ) ) } -
- ) - ); + const categoryShortcuts = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getCategoryShortcuts( + 'block' + ), + [] + ); + + return ( + categoryShortcuts.length > 0 && ( +
    + { categoryShortcuts.map( ( categoryShortcut ) => ( +
  • { categoryShortcut }
    • + ) ) } +
+ ) + ); }; ``` @@ -165,34 +167,34 @@ import { useSelect } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const shortcutAliases = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutAliases( - 'core/editor/next-region' - ), - [] - ); - - return ( - shortcutAliases.length > 0 && ( -
    - { shortcutAliases.map( ( { character, modifier }, index ) => ( -
  • - { createInterpolateElement( - sprintf( - 'Character: %s / Modifier: %s', - character, - modifier - ), - { - code: , - } - ) } -
    • - ) ) } -
- ) - ); + const shortcutAliases = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutAliases( + 'core/editor/next-region' + ), + [] + ); + + return ( + shortcutAliases.length > 0 && ( +
    + { shortcutAliases.map( ( { character, modifier }, index ) => ( +
  • + { createInterpolateElement( + sprintf( + 'Character: %s / Modifier: %s', + character, + modifier + ), + { + code: , + } + ) } +
    • + ) ) } +
+ ) + ); }; ``` @@ -216,19 +218,17 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const shortcutDescription = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutDescription( - 'core/editor/next-region' - ), - [] - ); - - return shortcutDescription ? ( -
{ shortcutDescription }
- ) : ( -
{ __( 'No description.' ) }
- ); + const shortcutDescription = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ), + [] + ); + + return shortcutDescription ? ( +
{ shortcutDescription }
+ ) : ( +
{ __( 'No description.' ) }
+ ); }; ``` @@ -253,28 +253,28 @@ import { useSelect } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const { character, modifier } = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'core/editor/next-region' - ), - [] - ); - - return ( -
- { createInterpolateElement( - sprintf( - 'Character: %s / Modifier: %s', - character, - modifier - ), - { - code: , - } - ) } -
- ); + const {character, modifier} = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'core/editor/next-region' + ), + [] + ); + + return ( +
+ { createInterpolateElement( + sprintf( + 'Character: %s / Modifier: %s', + character, + modifier + ), + { + code: , + } + ) } +
+ ); }; ``` @@ -299,31 +299,24 @@ import { useSelect } from '@wordpress/data'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const { display, raw, ariaLabel } = useSelect( ( select ) => { - return { - display: select( keyboardShortcutsStore ).getShortcutRepresentation( - 'core/editor/next-region' - ), - raw: select( keyboardShortcutsStore ).getShortcutRepresentation( - 'core/editor/next-region', - 'raw' - ), - ariaLabel: select( - keyboardShortcutsStore - ).getShortcutRepresentation( - 'core/editor/next-region', - 'ariaLabel' - ), - }; - }, [] ); - - return ( -
    -
  • { sprintf( 'display string: %s', display ) }
    • -
  • { sprintf( 'raw string: %s', raw ) }
    • -
  • { sprintf( 'ariaLabel string: %s', ariaLabel ) }
    • -
- ); + const {display, raw, ariaLabel} = useSelect( + ( select ) =>{ + return { + display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ), + raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ), + ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel') + } + }, + [] + ); + + return ( +
    +
  • { sprintf( 'display string: %s', display ) }
    • +
  • { sprintf( 'raw string: %s', raw ) }
    • +
  • { sprintf( 'ariaLabel string: %s', ariaLabel ) }
    • +
+ ); }; ``` @@ -356,33 +349,33 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const { registerShortcut } = useDispatch( keyboardShortcutsStore ); - - useEffect( () => { - registerShortcut( { - name: 'custom/my-custom-shortcut', - category: 'my-category', - description: __( 'My custom shortcut' ), - keyCombination: { - modifier: 'primary', - character: 'j', - }, - } ); - }, [] ); - - const shortcut = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'custom/my-custom-shortcut' - ), - [] - ); - - return shortcut ? ( -

{ __( 'Shortcut is registered.' ) }

- ) : ( -

{ __( 'Shortcut is not registered.' ) }

- ); + const { registerShortcut } = useDispatch( keyboardShortcutsStore ); + + useEffect( () => { + registerShortcut( { + name: 'custom/my-custom-shortcut', + category: 'my-category', + description: __( 'My custom shortcut' ), + keyCombination: { + modifier: 'primary', + character: 'j', + }, + } ); + }, [] ); + + const shortcut = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'custom/my-custom-shortcut' + ), + [] + ); + + return shortcut ? ( +

{ __( 'Shortcut is registered.' ) }

+ ) : ( +

{ __( 'Shortcut is not registered.' ) }

+ ); }; ``` @@ -407,25 +400,25 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const { unregisterShortcut } = useDispatch( keyboardShortcutsStore ); - - useEffect( () => { - unregisterShortcut( 'core/editor/next-region' ); - }, [] ); - - const shortcut = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'core/editor/next-region' - ), - [] - ); - - return shortcut ? ( -

{ __( 'Shortcut is not unregistered.' ) }

- ) : ( -

{ __( 'Shortcut is unregistered.' ) }

- ); + const { unregisterShortcut } = useDispatch( keyboardShortcutsStore ); + + useEffect( () => { + unregisterShortcut( 'core/editor/next-region' ); + }, [] ); + + const shortcut = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'core/editor/next-region' + ), + [] + ); + + return shortcut ? ( +

{ __( 'Shortcut is not unregistered.' ) }

+ ) : ( +

{ __( 'Shortcut is unregistered.' ) }

+ ); }; ``` @@ -437,4 +430,5 @@ _Returns_ - `Object`: action. + diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md index b1a2316d19bb82..111103944ad44e 100644 --- a/docs/reference-guides/data/data-core-notices.md +++ b/docs/reference-guides/data/data-core-notices.md @@ -17,16 +17,14 @@ import { useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; const ExampleComponent = () => { - const notices = useSelect( ( select ) => - select( noticesStore ).getNotices() - ); - return ( -
    - { notices.map( ( notice ) => ( -
  • { notice.content }
    • - ) ) } -
- ); + const notices = useSelect( ( select ) => select( noticesStore ).getNotices() ); + return ( +
    + { notices.map( ( notice ) => ( +
  • { notice.content }
    • + ) ) } +
+ ) }; ``` @@ -62,21 +60,21 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createErrorNotice } = useDispatch( noticesStore ); - return ( - - ); + const { createErrorNotice } = useDispatch( noticesStore ); + return ( + + ); }; ``` @@ -106,18 +104,18 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createInfoNotice } = useDispatch( noticesStore ); - return ( - - ); + const { createInfoNotice } = useDispatch( noticesStore ); + return ( + + ); }; ``` @@ -143,14 +141,14 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createNotice } = useDispatch( noticesStore ); - return ( - - ); + const { createNotice } = useDispatch( noticesStore ); + return ( + + ); }; ``` @@ -181,19 +179,19 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createSuccessNotice } = useDispatch( noticesStore ); - return ( - - ); + const { createSuccessNotice } = useDispatch( noticesStore ); + return ( + + ); }; ``` @@ -223,23 +221,22 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createWarningNotice, createInfoNotice } = - useDispatch( noticesStore ); - return ( - - ); + const { createWarningNotice, createInfoNotice } = useDispatch( noticesStore ); + return ( + + ); }; ``` @@ -276,14 +273,19 @@ export const ExampleComponent = () => {
  • { notice.content }
    • ) ) } - - ); @@ -312,29 +314,27 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const notices = useSelect( ( select ) => - select( noticesStore ).getNotices() - ); - const { createWarningNotice, removeNotice } = useDispatch( noticesStore ); - - return ( - <> - - { notices.length > 0 && ( - - ) } - - ); + const notices = useSelect( ( select ) => select( noticesStore ).getNotices() ); + const { createWarningNotice, removeNotice } = useDispatch( noticesStore ); + + return ( + <> + + { notices.length > 0 && ( + + ) } + + ); }; ``` @@ -392,4 +392,5 @@ _Returns_ - `Extract< ReducerAction, { type: 'REMOVE_NOTICES'; } >`: Action object. + diff --git a/docs/reference-guides/data/data-core-preferences.md b/docs/reference-guides/data/data-core-preferences.md index bace94f750b3f7..42b3eba536959a 100644 --- a/docs/reference-guides/data/data-core-preferences.md +++ b/docs/reference-guides/data/data-core-preferences.md @@ -81,4 +81,5 @@ _Parameters_ - _scope_ `string`: The preference scope (e.g. core/edit-post). - _name_ `string`: The preference name. + diff --git a/docs/reference-guides/data/data-core-reusable-blocks.md b/docs/reference-guides/data/data-core-reusable-blocks.md index 728281d0e48f3b..c229476ca9c4b0 100644 --- a/docs/reference-guides/data/data-core-reusable-blocks.md +++ b/docs/reference-guides/data/data-core-reusable-blocks.md @@ -19,4 +19,5 @@ Nothing to document. Nothing to document. + diff --git a/docs/reference-guides/data/data-core-rich-text.md b/docs/reference-guides/data/data-core-rich-text.md index 8c213ee9c69ec4..431a972a67176b 100644 --- a/docs/reference-guides/data/data-core-rich-text.md +++ b/docs/reference-guides/data/data-core-rich-text.md @@ -60,15 +60,15 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypeForBareElement } = useSelect( - ( select ) => select( richTextStore ), - [] - ); + const { getFormatTypeForBareElement } = useSelect( + ( select ) => select( richTextStore ), + [] + ); - const format = getFormatTypeForBareElement( 'strong' ); + const format = getFormatTypeForBareElement( 'strong' ); - return format &&

    { sprintf( __( 'Format name: %s' ), format.name ) }

    ; -}; + return format &&

    { sprintf( __( 'Format name: %s' ), format.name ) }

    ; +} ``` _Parameters_ @@ -92,14 +92,14 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypeForClassName } = useSelect( - ( select ) => select( richTextStore ), - [] - ); + const { getFormatTypeForClassName } = useSelect( + ( select ) => select( richTextStore ), + [] + ); - const format = getFormatTypeForClassName( 'has-inline-color' ); + const format = getFormatTypeForClassName( 'has-inline-color' ); - return format &&

    { sprintf( __( 'Format name: %s' ), format.name ) }

    ; + return format &&

    { sprintf( __( 'Format name: %s' ), format.name ) }

    ; }; ``` @@ -124,22 +124,22 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypes } = useSelect( - ( select ) => select( richTextStore ), - [] - ); - - const availableFormats = getFormatTypes(); - - return availableFormats ? ( -
      - { availableFormats?.map( ( format ) => ( -
    • { format.name }
      • - ) ) } -
    - ) : ( - __( 'No Formats available' ) - ); + const { getFormatTypes } = useSelect( + ( select ) => select( richTextStore ), + [] + ); + + const availableFormats = getFormatTypes(); + + return availableFormats ? ( +
      + { availableFormats?.map( ( format ) => ( +
    • { format.name }
      • + ) ) } +
    + ) : ( + __( 'No Formats available' ) + ); }; ``` @@ -159,4 +159,5 @@ _Returns_ Nothing to document. + diff --git a/docs/reference-guides/data/data-core-viewport.md b/docs/reference-guides/data/data-core-viewport.md index 4534f0c1b5494f..b9dffcaafcec1c 100644 --- a/docs/reference-guides/data/data-core-viewport.md +++ b/docs/reference-guides/data/data-core-viewport.md @@ -17,16 +17,16 @@ import { store as viewportStore } from '@wordpress/viewport'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const isMobile = useSelect( - ( select ) => select( viewportStore ).isViewportMatch( '< small' ), - [] - ); - - return isMobile ? ( -
    { __( 'Mobile' ) }
    - ) : ( -
    { __( 'Not Mobile' ) }
    - ); + const isMobile = useSelect( + ( select ) => select( viewportStore ).isViewportMatch( '< small' ), + [] + ); + + return isMobile ? ( +
    { __( 'Mobile' ) }
    + ) : ( +
    { __( 'Not Mobile' ) }
    + ); }; ``` @@ -49,4 +49,5 @@ The actions in this package shouldn't be used directly. Nothing to document. + diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md index a6d52f560f4c96..c959213f8cb1ec 100644 --- a/docs/reference-guides/data/data-core.md +++ b/docs/reference-guides/data/data-core.md @@ -961,4 +961,5 @@ _Parameters_ Action triggered to undo the last edit to an entity record, if any. + diff --git a/packages/a11y/README.md b/packages/a11y/README.md index 2c1874983ae0f5..4871e11fab22a7 100644 --- a/packages/a11y/README.md +++ b/packages/a11y/README.md @@ -41,6 +41,7 @@ _Parameters_ - _message_ `string`: The message to be announced by assistive technologies. - _ariaLive_ `['polite' | 'assertive']`: The politeness level for aria-live; default: 'polite'. + ### Background diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index 57b84dcc933e11..31db2ab9cfac57 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -49,17 +49,17 @@ _Usage_ ```jsx ``` _Parameters_ -- _props_ `BreadcrumbsProps`: +- _props_ `BreadcrumbsProps`: - _props.items_ `BreadcrumbsProps[ 'items' ]`: The breadcrumb items to display. ### getAdminThemeColors @@ -78,6 +78,7 @@ Undocumented declaration. Undocumented declaration. + ## Contributing to this package diff --git a/packages/autop/README.md b/packages/autop/README.md index e1e00d1bce5f0c..86f8b9a1419886 100644 --- a/packages/autop/README.md +++ b/packages/autop/README.md @@ -59,6 +59,7 @@ _Returns_ - `string`: The content with stripped paragraph tags. + ## Contributing to this package diff --git a/packages/blob/README.md b/packages/blob/README.md index d315cdab5e4a48..d0e550e0336f4d 100644 --- a/packages/blob/README.md +++ b/packages/blob/README.md @@ -33,16 +33,16 @@ Downloads a file, e.g., a text or readable stream, in the browser. Appropriate f Example usage: ```js -const fileContent = JSON.stringify( - { - title: 'My Post', - }, - null, - 2 -); -const filename = 'file.json'; - -downloadBlob( filename, fileContent, 'application/json' ); + const fileContent = JSON.stringify( + { + "title": "My Post", + }, + null, + 2 + ); + const filename = 'file.json'; + + downloadBlob( filename, fileContent, 'application/json' ); ``` _Parameters_ @@ -95,6 +95,7 @@ _Parameters_ - _url_ `string`: The blob URL. + ## Contributing to this package diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index abb44a7c3849ec..eeacd9f1db7f87 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -121,8 +121,8 @@ Returns an action object used to indicate install in progress. _Parameters_ -- _blockId_ `string`: -- _isInstalling_ `boolean`: +- _blockId_ `string`: +- _isInstalling_ `boolean`: _Returns_ @@ -244,6 +244,7 @@ _Returns_ - `boolean`: Whether a request is in progress for the blocks list. + ## Contributing to this package diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 1b246207be21a4..6c9bd5385dcfa0 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -140,16 +140,16 @@ _Usage_ ```jsx function MyBlockEditor() { - const [ blocks, updateBlocks ] = useState( [] ); - return ( - - - - ); + const [ blocks, updateBlocks ] = useState([]); + return ( + + + + ); } ``` @@ -178,7 +178,7 @@ _Related_ _Parameters_ -- _props_ `BlockContextProviderProps`: +- _props_ `BlockContextProviderProps`: ### BlockControls @@ -283,15 +283,12 @@ Renders the block's configured title as a string, or empty if the title cannot b _Usage_ ```jsx - + ``` _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.clientId_ `string`: Client ID of block. - _props.maximumLength_ `number|undefined`: The maximum length that the block title string may be before truncated. - _props.context_ `string|undefined`: The context to pass to `getBlockLabel`. @@ -344,7 +341,7 @@ _Related_ ### ButtonBlockerAppender -> **Deprecated** +> **Deprecated** Use `ButtonBlockAppender` instead. @@ -364,11 +361,11 @@ _Related_ ### CopyHandler -> **Deprecated** +> **Deprecated** _Parameters_ -- _props_ `Object`: +- _props_ `Object`: ### createCustomColorsHOC @@ -379,15 +376,12 @@ Use this higher-order component to work with a custom set of colors. _Usage_ ```jsx -const CUSTOM_COLORS = [ - { name: 'Red', slug: 'red', color: '#ff0000' }, - { name: 'Blue', slug: 'blue', color: '#0000ff' }, -]; +const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ]; const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS ); // ... export default compose( - withCustomColors( 'backgroundColor', 'borderColor' ), - MyColorfulComponent + withCustomColors( 'backgroundColor', 'borderColor' ), + MyColorfulComponent, ); ``` @@ -413,7 +407,7 @@ _Related_ _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.label_ `?string`: A label for the control. - _props.onChange_ `( value: string ) => void`: Called when the dimension value changes. - _props.value_ `string`: The current dimension value. @@ -482,18 +476,18 @@ _Usage_ ```js // Calculate fluid font-size value from a minimum and maximum value. const fontSize = getComputedFluidTypographyValue( { - minimumFontSize: '20px', - maximumFontSize: '45px', + minimumFontSize: '20px', + maximumFontSize: '45px' } ); // Calculate fluid font-size value from a single font size. const fontSize = getComputedFluidTypographyValue( { - fontSize: '30px', + fontSize: '30px', } ); ``` _Parameters_ -- _args_ `Object`: +- _args_ `Object`: - _args.minimumViewportWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. - _args.maximumViewportWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified. - _args.fontSize_ `[string|number]`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. @@ -533,7 +527,7 @@ _Returns_ ### getFontSize -Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. + Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. _Parameters_ @@ -598,7 +592,7 @@ _Returns_ ### getPxFromCssUnit -> **Deprecated** +> **Deprecated** This function was accidentally exposed for mobile/native usage. @@ -655,7 +649,7 @@ _Related_ _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.label_ `?string`: A label for the control. - _props.onChange_ `( value: string ) => void`: Called when the height changes. - _props.value_ `string`: The current height value. @@ -736,9 +730,9 @@ Observe input changes without controlling the value: ```jsx console.log( newValue ) } + value={ link } + onChange={ setLink } + onInputChange={ ( newValue ) => console.log( newValue ) } /> ``` @@ -748,10 +742,10 @@ Pre-populate the search input with a default value: ```jsx console.log( newValue ) } + value={ link } + onChange={ setLink } + inputValue="wordpress" + onInputChange={ ( newValue ) => console.log( newValue ) } /> ``` @@ -785,7 +779,7 @@ _Related_ ### MultiSelectScrollIntoView -> **Deprecated** +> **Deprecated** Scrolls the multi block selection end into view if not in view already. This is important to do after selection by keyboard. @@ -818,23 +812,23 @@ import { registerBlockType } from '@wordpress/blocks'; import { PlainText } from '@wordpress/block-editor'; registerBlockType( 'my-plugin/example-block', { - // ... - - attributes: { - content: { - type: 'string', - }, - }, - - edit( { className, attributes, setAttributes } ) { - return ( - setAttributes( { content } ) } - /> - ); - }, + // ... + + attributes: { + content: { + type: 'string', + }, + }, + + edit( { className, attributes, setAttributes } ) { + return ( + <PlainText + className={ className } + value={ attributes.content } + onChange={ ( content ) => setAttributes( { content } ) } + /> + ); + }, } ); ``` @@ -861,7 +855,7 @@ Wrap block content with this provider and provide the same `uniqueId` prop as us _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.uniqueId_ `*`: Any value that acts as a unique identifier for a block instance. - _props.blockName_ `string`: Optional block name. - _props.children_ `React.JSX.Element`: React children. @@ -998,23 +992,23 @@ It contains the following utils: _Usage_ ```js -import { useBlockBindingsUtils } from '@wordpress/block-editor'; +import { useBlockBindingsUtils } from '@wordpress/block-editor' const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils(); // Update url and alt attributes. updateBlockBindings( { - url: { - source: 'core/post-meta', - args: { - key: 'url_custom_field', - }, - }, - alt: { - source: 'core/post-meta', - args: { - key: 'text_custom_field', - }, - }, + url: { + source: 'core/post-meta', + args: { + key: 'url_custom_field', + }, + }, + alt: { + source: 'core/post-meta', + args: { + key: 'text_custom_field', + }, + }, } ); // Remove binding from url attribute. @@ -1070,8 +1064,8 @@ _Usage_ ```js function MyBlock( { attributes, setAttributes } ) { - useBlockEditingMode( 'disabled' ); - return <div { ...useBlockProps() }></div>; + useBlockEditingMode( 'disabled' ); + return <div { ...useBlockProps() }></div>; } ``` @@ -1108,15 +1102,20 @@ _Usage_ import { useBlockProps } from '@wordpress/block-editor'; export default function Edit() { - const blockProps = useBlockProps( { - className: 'my-custom-class', - style: { - color: '#222222', - backgroundColor: '#eeeeee', - }, - } ); - - return <div { ...blockProps }></div>; + + const blockProps = useBlockProps( { + className: 'my-custom-class', + style: { + color: '#222222', + backgroundColor: '#eeeeee' + } + } ) + + return ( + <div { ...blockProps }> + + </div> + ) } ``` @@ -1124,7 +1123,7 @@ _Parameters_ - _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. - _options_ `Object`: Options for internal use only. -- _options.\_\_unstableIsHtml_ `boolean`: +- _options.\_\_unstableIsHtml_ `boolean`: _Returns_ @@ -1136,7 +1135,7 @@ Keeps an up-to-date copy of the passed value and returns it. If value becomes fa _Parameters_ -- _value_ `any`: +- _value_ `any`: _Returns_ @@ -1242,8 +1241,8 @@ _Usage_ ```jsx export default compose( - withColors( 'backgroundColor', { textColor: 'color' } ), - MyColorfulComponent + withColors( 'backgroundColor', { textColor: 'color' } ), + MyColorfulComponent, ); ``` @@ -1276,6 +1275,7 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.children_ `Element`: Children to be rendered. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/block-library/README.md b/packages/block-library/README.md index c83494b6c402bc..21607855cfb410 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -32,6 +32,7 @@ _Parameters_ - _blocks_ `Array`: An optional array of the core blocks being registered. + <!-- END TOKEN(Autogenerated API docs) --> ## Registering individual blocks diff --git a/packages/block-serialization-default-parser/README.md b/packages/block-serialization-default-parser/README.md index 7fef607a29d8f6..f662e2e21411a1 100644 --- a/packages/block-serialization-default-parser/README.md +++ b/packages/block-serialization-default-parser/README.md @@ -26,27 +26,21 @@ Input post: ```html <!-- wp:columns {"columns":3} --> -<div class="wp-block-columns has-3-columns"> - <!-- wp:column --> - <div class="wp-block-column"> - <!-- wp:paragraph --> - <p>Left</p> - <!-- /wp:paragraph --> - </div> - <!-- /wp:column --> - - <!-- wp:column --> - <div class="wp-block-column"> - <!-- wp:paragraph --> - <p><strong>Middle</strong></p> - <!-- /wp:paragraph --> - </div> - <!-- /wp:column --> - - <!-- wp:column --> - <div class="wp-block-column"></div> - <!-- /wp:column --> -</div> +<div class="wp-block-columns has-3-columns"><!-- wp:column --> +<div class="wp-block-column"><!-- wp:paragraph --> +<p>Left</p> +<!-- /wp:paragraph --></div> +<!-- /wp:column --> + +<!-- wp:column --> +<div class="wp-block-column"><!-- wp:paragraph --> +<p><strong>Middle</strong></p> +<!-- /wp:paragraph --></div> +<!-- /wp:column --> + +<!-- wp:column --> +<div class="wp-block-column"></div> +<!-- /wp:column --></div> <!-- /wp:columns --> ``` @@ -55,51 +49,49 @@ Parsing code: ```js import { parse } from '@wordpress/block-serialization-default-parser'; -parse( post ) === - [ - { - blockName: 'core/columns', - attrs: { - columns: 3, - }, - innerBlocks: [ - { - blockName: 'core/column', - attrs: null, - innerBlocks: [ - { - blockName: 'core/paragraph', - attrs: null, - innerBlocks: [], - innerHTML: '\n<p>Left</p>\n', - }, - ], - innerHTML: '\n<div class="wp-block-column"></div>\n', - }, - { - blockName: 'core/column', - attrs: null, - innerBlocks: [ - { - blockName: 'core/paragraph', - attrs: null, - innerBlocks: [], - innerHTML: '\n<p><strong>Middle</strong></p>\n', - }, - ], - innerHTML: '\n<div class="wp-block-column"></div>\n', - }, - { - blockName: 'core/column', - attrs: null, - innerBlocks: [], - innerHTML: '\n<div class="wp-block-column"></div>\n', - }, - ], - innerHTML: - '\n<div class="wp-block-columns has-3-columns">\n\n\n\n</div>\n', - }, - ]; +parse( post ) === [ + { + blockName: "core/columns", + attrs: { + columns: 3 + }, + innerBlocks: [ + { + blockName: "core/column", + attrs: null, + innerBlocks: [ + { + blockName: "core/paragraph", + attrs: null, + innerBlocks: [], + innerHTML: "\n<p>Left</p>\n" + } + ], + innerHTML: '\n<div class="wp-block-column"></div>\n' + }, + { + blockName: "core/column", + attrs: null, + innerBlocks: [ + { + blockName: "core/paragraph", + attrs: null, + innerBlocks: [], + innerHTML: "\n<p><strong>Middle</strong></p>\n" + } + ], + innerHTML: '\n<div class="wp-block-column"></div>\n' + }, + { + blockName: "core/column", + attrs: null, + innerBlocks: [], + innerHTML: '\n<div class="wp-block-column"></div>\n' + } + ], + innerHTML: '\n<div class="wp-block-columns has-3-columns">\n\n\n\n</div>\n' + } +]; ``` _Parameters_ @@ -110,6 +102,7 @@ _Returns_ - `ParsedBlock[]`: A block-based representation of the input HTML. + <!-- END TOKEN(Autogenerated API docs) --> ## Theory diff --git a/packages/blocks/README.md b/packages/blocks/README.md index 470b4191ed4852..afadc486bf4065 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -501,7 +501,7 @@ Converts an HTML string to known blocks. Strips everything else. _Parameters_ -- _options_ `{ HTML?: string; plainText?: string; mode?: 'AUTO' | 'INLINE' | 'BLOCKS'; tagName?: string; }`: +- _options_ `{ HTML?: string; plainText?: string; mode?: 'AUTO' | 'INLINE' | 'BLOCKS'; tagName?: string; }`: - _options.HTML_ `string`: The HTML to convert. - _options.plainText_ `string`: Plain text version. - _options.mode_ `'AUTO' | 'INLINE' | 'BLOCKS'`: Handle content as blocks or inline content. _ 'AUTO': Decide based on the content passed. _ 'INLINE': Always handle as inline content, and return string. \* 'BLOCKS': Always handle as blocks, and return array of blocks. @@ -544,15 +544,15 @@ _Usage_ ```js import { _x } from '@wordpress/i18n'; -import { registerBlockBindingsSource } from '@wordpress/blocks'; +import { registerBlockBindingsSource } from '@wordpress/blocks' registerBlockBindingsSource( { - name: 'plugin/my-custom-source', - label: _x( 'My Custom Source', 'block bindings source' ), - usesContext: [ 'postType' ], - getValues: getSourceValues, - setValues: updateMyCustomValuesInBatch, - canUserEditValue: () => true, + name: 'plugin/my-custom-source', + label: _x( 'My Custom Source', 'block bindings source' ), + usesContext: [ 'postType' ], + getValues: getSourceValues, + setValues: updateMyCustomValuesInBatch, + canUserEditValue: () => true, } ); ``` @@ -576,14 +576,14 @@ import { registerBlockCollection, registerBlockType } from '@wordpress/blocks'; // Register the collection. registerBlockCollection( 'my-collection', { - title: __( 'Custom Collection' ), + title: __( 'Custom Collection' ), } ); // Register a block in the same namespace to add it to the collection. registerBlockType( 'my-collection/block-name', { - title: __( 'My First Block' ), - edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, - save: () => <div>'Hello from the saved content!</div>, + title: __( 'My First Block' ), + edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, + save: () => <div>'Hello from the saved content!</div>, } ); ``` @@ -607,19 +607,20 @@ import { __ } from '@wordpress/i18n'; import { registerBlockStyle } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; + const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - registerBlockStyle( 'core/quote', { - name: 'fancy-quote', - label: __( 'Fancy Quote' ), - } ); - } } - > - { __( 'Add a new block style for core/quote' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + registerBlockStyle( 'core/quote', { + name: 'fancy-quote', + label: __( 'Fancy Quote' ), + } ); + } } + > + { __( 'Add a new block style for core/quote' ) } + </Button> + ); }; ``` @@ -638,12 +639,12 @@ _Usage_ ```js import { __ } from '@wordpress/i18n'; -import { registerBlockType } from '@wordpress/blocks'; +import { registerBlockType } from '@wordpress/blocks' registerBlockType( 'namespace/block-name', { - title: __( 'My First Block' ), - edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, - save: () => <div>Hello from the saved content!</div>, + title: __( 'My First Block' ), + edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, + save: () => <div>Hello from the saved content!</div>, } ); ``` @@ -670,19 +671,19 @@ import { registerBlockVariation } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - registerBlockVariation( 'core/embed', { - name: 'custom', - title: __( 'My Custom Embed' ), - attributes: { providerNameSlug: 'custom' }, - } ); - } } - > - __( 'Add a custom variation for core/embed' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + registerBlockVariation( 'core/embed', { + name: 'custom', + title: __( 'My Custom Embed' ), + attributes: { providerNameSlug: 'custom' }, + } ); + } } + > + __( 'Add a custom variation for core/embed' ) } + </Button> + ); }; ``` @@ -750,25 +751,25 @@ import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - // Retrieve the list of current categories. - const blockCategories = useSelect( - ( select ) => select( blocksStore ).getCategories(), - [] - ); - - return ( - <Button - onClick={ () => { - // Add a custom category to the existing list. - setCategories( [ - ...blockCategories, - { title: 'Custom Category', slug: 'custom-category' }, - ] ); - } } - > - { __( 'Add a new custom block category' ) } - </Button> - ); + // Retrieve the list of current categories. + const blockCategories = useSelect( + ( select ) => select( blocksStore ).getCategories(), + [] + ); + + return ( + <Button + onClick={ () => { + // Add a custom category to the existing list. + setCategories( [ + ...blockCategories, + { title: 'Custom Category', slug: 'custom-category' }, + ] ); + } } + > + { __( 'Add a new custom block category' ) } + </Button> + ); }; ``` @@ -786,11 +787,12 @@ _Usage_ import { setDefaultBlockName } from '@wordpress/blocks'; const ExampleComponent = () => { - return ( - <Button onClick={ () => setDefaultBlockName( 'core/heading' ) }> - { __( 'Set the default block to Heading' ) } - </Button> - ); + + return ( + <Button onClick={ () => setDefaultBlockName( 'core/heading' ) }> + { __( 'Set the default block to Heading' ) } + </Button> + ); }; ``` @@ -818,11 +820,12 @@ _Usage_ import { setGroupingBlockName } from '@wordpress/blocks'; const ExampleComponent = () => { - return ( - <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }> - { __( 'Wrap in columns' ) } - </Button> - ); + + return ( + <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }> + { __( 'Wrap in columns' ) } + </Button> + ); }; ``` @@ -907,15 +910,15 @@ import { unregisterBlockStyle } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - unregisterBlockStyle( 'core/quote', 'plain' ); - } } - > - { __( 'Remove the "Plain" block style for core/quote' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + unregisterBlockStyle( 'core/quote', 'plain' ); + } } + > + { __( 'Remove the "Plain" block style for core/quote' ) } + </Button> + ); }; ``` @@ -935,13 +938,15 @@ import { __ } from '@wordpress/i18n'; import { unregisterBlockType } from '@wordpress/blocks'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => unregisterBlockType( 'my-collection/block-name' ) } - > - { __( 'Unregister my custom block.' ) } - </Button> - ); + return ( + <Button + onClick={ () => + unregisterBlockType( 'my-collection/block-name' ) + } + > + { __( 'Unregister my custom block.' ) } + </Button> + ); }; ``` @@ -965,15 +970,15 @@ import { unregisterBlockVariation } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - unregisterBlockVariation( 'core/embed', 'youtube' ); - } } - > - { __( 'Remove the YouTube variation from core/embed' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + unregisterBlockVariation( 'core/embed', 'youtube' ); + } } + > + { __( 'Remove the YouTube variation from core/embed' ) } + </Button> + ); }; ``` @@ -994,15 +999,15 @@ import { updateCategory } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - updateCategory( 'text', { title: __( 'Written Word' ) } ); - } } - > - { __( 'Update Text category title' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + updateCategory( 'text', { title: __( 'Written Word' ) } ); + } } + > + { __( 'Update Text category title' ) } + </Button> +) ; }; ``` @@ -1026,7 +1031,7 @@ _Returns_ ### withBlockContentContext -> **Deprecated** +> **Deprecated** A Higher Order Component used to inject BlockContent using context to the wrapped component. @@ -1038,6 +1043,7 @@ _Returns_ - `T`: The same component. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/commands/README.md b/packages/commands/README.md index cb7a243007dc27..9a4f7cbe547d25 100644 --- a/packages/commands/README.md +++ b/packages/commands/README.md @@ -115,14 +115,14 @@ import { useCommand } from '@wordpress/commands'; import { plus } from '@wordpress/icons'; useCommand( { - name: 'myplugin/my-command-name', - label: __( 'Add new post' ), - icon: plus, - category: 'command', - callback: ( { close } ) => { - document.location.href = 'post-new.php'; - close(); - }, + name: 'myplugin/my-command-name', + label: __( 'Add new post' ), + icon: plus, + category: 'command', + callback: ({ close }) => { + document.location.href = 'post-new.php'; + close(); + }, } ); ``` @@ -146,57 +146,57 @@ import { store as coreStore } from '@wordpress/core-data'; import { useMemo } from '@wordpress/element'; function usePageSearchCommandLoader( { search } ) { - // Retrieve the pages for the "search" term. - const { records, isLoading } = useSelect( - ( select ) => { - const { getEntityRecords } = select( coreStore ); - const query = { - search: !! search ? search : undefined, - per_page: 10, - orderby: search ? 'relevance' : 'date', - }; - return { - records: getEntityRecords( 'postType', 'page', query ), - isLoading: ! select( coreStore ).hasFinishedResolution( - 'getEntityRecords', - [ 'postType', 'page', query ] - ), - }; - }, - [ search ] - ); - - // Create the commands. - const commands = useMemo( () => { - return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => { - return { - name: record.title?.rendered + ' ' + record.id, - label: record.title?.rendered - ? record.title?.rendered - : __( '(no title)' ), - icon: page, - category: 'edit', - callback: ( { close } ) => { - const args = { - p: '/page', - postId: record.id, - }; - document.location = addQueryArgs( 'site-editor.php', args ); - close(); - }, - }; - } ); - }, [ records ] ); - - return { - commands, - isLoading, - }; + // Retrieve the pages for the "search" term. + const { records, isLoading } = useSelect( + ( select ) => { + const { getEntityRecords } = select( coreStore ); + const query = { + search: !! search ? search : undefined, + per_page: 10, + orderby: search ? 'relevance' : 'date', + }; + return { + records: getEntityRecords( 'postType', 'page', query ), + isLoading: ! select( coreStore ).hasFinishedResolution( + 'getEntityRecords', + [ 'postType', 'page', query ] + ), + }; + }, + [ search ] + ); + + // Create the commands. + const commands = useMemo( () => { + return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => { + return { + name: record.title?.rendered + ' ' + record.id, + label: record.title?.rendered + ? record.title?.rendered + : __( '(no title)' ), + icon: page, + category: 'edit', + callback: ( { close } ) => { + const args = { + p: '/page', + postId: record.id, + }; + document.location = addQueryArgs( 'site-editor.php', args ); + close(); + }, + }; + } ); + }, [ records ] ); + + return { + commands, + isLoading, + }; } useCommandLoader( { - name: 'myplugin/page-search', - hook: usePageSearchCommandLoader, + name: 'myplugin/page-search', + hook: usePageSearchCommandLoader, } ); ``` @@ -215,26 +215,26 @@ import { useCommands } from '@wordpress/commands'; import { plus, pencil } from '@wordpress/icons'; useCommands( [ - { - name: 'myplugin/add-post', - label: __( 'Add new post' ), - icon: plus, - category: 'command', - callback: ( { close } ) => { - document.location.href = 'post-new.php'; - close(); - }, - }, - { - name: 'myplugin/edit-posts', - label: __( 'Edit posts' ), - icon: pencil, - category: 'view', - callback: ( { close } ) => { - document.location.href = 'edit.php'; - close(); - }, - }, + { + name: 'myplugin/add-post', + label: __( 'Add new post' ), + icon: plus, + category: 'command', + callback: ({ close }) => { + document.location.href = 'post-new.php'; + close(); + }, + }, + { + name: 'myplugin/edit-posts', + label: __( 'Edit posts' ), + icon: pencil, + category: 'view', + callback: ({ close }) => { + document.location.href = 'edit.php'; + close(); + }, + }, ] ); ``` @@ -242,6 +242,7 @@ _Parameters_ - _commands_ `import('../store/actions').WPCommandConfig[]`: Array of command configs. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/compose/README.md b/packages/compose/README.md index 24b9f4ce0cc4e5..c2a2986eb94b23 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -218,7 +218,7 @@ _Returns_ ### useCopyOnClick -> **Deprecated** +> **Deprecated** Copies the text to the clipboard when the element is clicked. @@ -288,15 +288,12 @@ import { useDisabled } from '@wordpress/compose'; const DisabledExample = () => { const disabledRef = useDisabled(); - return ( - <div ref={ disabledRef }> - <a href="#">This link will have tabindex set to -1</a> - <input - placeholder="This input will have the disabled attribute added to it." - type="text" - /> - </div> - ); +return ( + <div ref={ disabledRef }> + <a href="#">This link will have tabindex set to -1</a> + <input placeholder="This input will have the disabled attribute added to it." type="text" /> + </div> +); }; ``` @@ -317,14 +314,14 @@ _Usage_ ```tsx function Component( props ) { - const onClick = useEvent( props.onClick ); - useEffect( () => { - onClick(); - // Won't trigger the effect again when props.onClick is updated. - }, [ onClick ] ); - // Won't re-render Button when props.onClick is updated (if `Button` is - // wrapped in `React.memo`). - return <Button onClick={ onClick } />; + const onClick = useEvent( props.onClick ); + useEffect( () => { + onClick(); + // Won't trigger the effect again when props.onClick is updated. + }, [ onClick ] ); + // Won't re-render Button when props.onClick is updated (if `Button` is + // wrapped in `React.memo`). + return <Button onClick={ onClick } />; } ``` @@ -350,14 +347,14 @@ _Usage_ import { useFocusOnMount } from '@wordpress/compose'; const WithFocusOnMount = () => { - const ref = useFocusOnMount(); - return ( - <div ref={ ref }> - <Button /> - <Button /> - </div> - ); -}; + const ref = useFocusOnMount() + return ( + <div ref={ ref }> + <Button /> + <Button /> + </div> + ); +} ``` _Parameters_ @@ -427,10 +424,10 @@ _Parameters_ - _shortcuts_ `string[] | string`: Keyboard Shortcuts. - _callback_ `( e: ExtendedKeyboardEvent, combo: string ) => void`: Shortcut callback. - _options_ `Partial< KeyboardShortcutConfig >`: Shortcut options. -- _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`: -- _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`: -- _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`: -- _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`: +- _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`: +- _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`: +- _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`: +- _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`: ### useMediaQuery @@ -614,10 +611,10 @@ Hook that performs a shallow comparison between the previous value of an object _Usage_ ```tsx -function MyComponent( props: Record< string, any > ) { - useWarnOnChange( props ); +function MyComponent(props: Record<string, any>) { + useWarnOnChange(props); - return 'Something'; + return "Something"; } ``` @@ -628,7 +625,7 @@ _Parameters_ ### withGlobalEvents -> **Deprecated** +> **Deprecated** Higher-order component creator which, given an object of DOM event types and values corresponding to a callback function name on the component, will create or update a window event handler to invoke the callback when an event occurs. On behalf of the consuming developer, the higher-order component manages unbinding when the component unmounts, and binding at most a single event handler for the entire application. @@ -662,6 +659,7 @@ _Returns_ - `any`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/core-commands/README.md b/packages/core-commands/README.md index 687ef3dec5891a..ca30065d5edea7 100644 --- a/packages/core-commands/README.md +++ b/packages/core-commands/README.md @@ -28,6 +28,7 @@ _Parameters_ Undocumented declaration. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/core-data/README.md b/packages/core-data/README.md index 255e1b0acc5ec8..822cff4e8dd95f 100644 --- a/packages/core-data/README.md +++ b/packages/core-data/README.md @@ -1038,7 +1038,7 @@ _Parameters_ - _kind_ `string`: The entity kind. - _name_ `string`: The entity name. -- _options_ `Object`: +- _options_ `Object`: - _options.id_ `[string]`: An entity ID to use instead of the context-provided one. _Returns_ @@ -1079,13 +1079,13 @@ _Usage_ import { useEntityRecord } from '@wordpress/core-data'; function PageTitleDisplay( { id } ) { - const { record, isResolving } = useEntityRecord( 'postType', 'page', id ); + const { record, isResolving } = useEntityRecord( 'postType', 'page', id ); - if ( isResolving ) { - return 'Loading...'; - } + if ( isResolving ) { + return 'Loading...'; + } - return record.title; + return record.title; } // Rendered in the application: @@ -1109,12 +1109,9 @@ function PageRenameForm( { id } ) { const { createSuccessNotice, createErrorNotice } = useDispatch( noticeStore ); - const setTitle = useCallback( - ( title ) => { - page.edit( { title } ); - }, - [ page.edit ] - ); + const setTitle = useCallback( ( title ) => { + page.edit( { title } ); + }, [ page.edit ] ); if ( page.isResolving ) { return 'Loading...'; @@ -1177,19 +1174,19 @@ _Usage_ import { useEntityRecords } from '@wordpress/core-data'; function PageTitlesList() { - const { records, isResolving } = useEntityRecords( 'postType', 'page' ); - - if ( isResolving ) { - return 'Loading...'; - } - - return ( - <ul> - { records.map( ( page ) => ( - <li>{ page.title }</li> - ) ) } - </ul> - ); + const { records, isResolving } = useEntityRecords( 'postType', 'page' ); + + if ( isResolving ) { + return 'Loading...'; + } + + return ( + <ul> + {records.map(( page ) => ( + <li>{ page.title }</li> + ))} + </ul> + ); } // Rendered in the application: @@ -1225,21 +1222,18 @@ _Usage_ import { useResourcePermissions } from '@wordpress/core-data'; function PagesList() { - const { canCreate, isResolving } = useResourcePermissions( { - kind: 'postType', - name: 'page', - } ); - - if ( isResolving ) { - return 'Loading ...'; - } - - return ( - <div> - { canCreate ? <button>+ Create a new page</button> : false } - // ... - </div> - ); + const { canCreate, isResolving } = useResourcePermissions( { kind: 'postType', name: 'page' } ); + + if ( isResolving ) { + return 'Loading ...'; + } + + return ( + <div> + {canCreate ? (<button>+ Create a new page</button>) : false} + // ... + </div> + ); } // Rendered in the application: @@ -1249,26 +1243,26 @@ function PagesList() { ```js import { useResourcePermissions } from '@wordpress/core-data'; -function Page( { pageId } ) { - const { canCreate, canUpdate, canDelete, isResolving } = - useResourcePermissions( { - kind: 'postType', - name: 'page', - id: pageId, - } ); - - if ( isResolving ) { - return 'Loading ...'; - } - - return ( - <div> - { canCreate ? <button>+ Create a new page</button> : false } - { canUpdate ? <button>Edit page</button> : false } - { canDelete ? <button>Delete page</button> : false } - // ... - </div> - ); +function Page({ pageId }) { + const { + canCreate, + canUpdate, + canDelete, + isResolving + } = useResourcePermissions( { kind: 'postType', name: 'page', id: pageId } ); + + if ( isResolving ) { + return 'Loading ...'; + } + + return ( + <div> + {canCreate ? (<button>+ Create a new page</button>) : false} + {canUpdate ? (<button>Edit page</button>) : false} + {canDelete ? (<button>Delete page</button>) : false} + // ... + </div> + ); } // Rendered in the application: @@ -1296,6 +1290,7 @@ _Changelog_ Utility type that adds permissions to any record type. + <!-- END TOKEN(Autogenerated hooks|src/hooks/index.ts) --> ## Contributing to this package diff --git a/packages/data-controls/README.md b/packages/data-controls/README.md index 8adeebba1cf34c..dfc39735985b01 100644 --- a/packages/data-controls/README.md +++ b/packages/data-controls/README.md @@ -60,11 +60,11 @@ import * as actions from './actions'; import * as resolvers from './resolvers'; registerStore( 'my-custom-store', { - reducer, - controls, - actions, - selectors, - resolvers, +reducer, +controls, +actions, +selectors, +resolvers, } ); ``` @@ -102,6 +102,7 @@ _Parameters_ - _selectorName_ `string`: The selector name. - _args_ `any[]`: Arguments passed without change to the `@wordpress/data` control. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/data/README.md b/packages/data/README.md index 152026972b896b..68613b26616d83 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -306,19 +306,19 @@ import { useSelect, AsyncModeProvider } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; function BlockCount() { - const count = useSelect( ( select ) => { - return select( blockEditorStore ).getBlockCount(); - }, [] ); + const count = useSelect( ( select ) => { + return select( blockEditorStore ).getBlockCount() + }, [] ); - return count; + return count; } function App() { - return ( - <AsyncModeProvider value={ true }> - <BlockCount /> - </AsyncModeProvider> - ); + return ( + <AsyncModeProvider value={ true }> + <BlockCount /> + </AsyncModeProvider> + ); } ``` @@ -341,16 +341,18 @@ _Usage_ import { combineReducers, createReduxStore, register } from '@wordpress/data'; const prices = ( state = {}, action ) => { - return action.type === 'SET_PRICE' - ? { - ...state, - [ action.item ]: action.price, - } - : state; + return action.type === 'SET_PRICE' ? + { + ...state, + [ action.item ]: action.price, + } : + state; }; const discountPercent = ( state = 0, action ) => { - return action.type === 'START_SALE' ? action.discountPercent : state; + return action.type === 'START_SALE' ? + action.discountPercent : + state; }; const store = createReduxStore( 'my-shop', { @@ -388,10 +390,10 @@ _Usage_ import { createReduxStore } from '@wordpress/data'; const store = createReduxStore( 'demo', { - reducer: ( state = 'OK' ) => state, - selectors: { - getValue: ( state ) => state, - }, + reducer: ( state = 'OK' ) => state, + selectors: { + getValue: ( state ) => state, + }, } ); ``` @@ -422,13 +424,13 @@ _Returns_ Creates a control function that takes additional curried argument with the `registry` object. While a regular control has signature ```js -( action ) => iteratorOrPromise; +( action ) => ( iteratorOrPromise ) ``` where the control works with the `action` that it's bound to, a registry control has signature: ```js -( registry ) => ( action ) => iteratorOrPromise; +( registry ) => ( action ) => ( iteratorOrPromise ) ``` A registry control is typically used to select data or dispatch an action to a registered store. @@ -448,15 +450,13 @@ _Returns_ Creates a selector function that takes additional curried argument with the registry `select` function. While a regular selector has signature ```js -( state, ...selectorArgs ) => result; +( state, ...selectorArgs ) => ( result ) ``` that allows to select data from the store's `state`, a registry selector has signature: ```js -( select ) => - ( state, ...selectorArgs ) => - result; +( select ) => ( state, ...selectorArgs ) => ( result ) ``` that supports also selecting from other registered stores. @@ -468,18 +468,14 @@ import { store as coreStore } from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => { - return select( editorStore ).getCurrentPostId(); + return select( editorStore ).getCurrentPostId(); } ); const getPostEdits = createRegistrySelector( ( select ) => ( state ) => { - // calling another registry selector just like any other function - const postType = getCurrentPostType( state ); - const postId = getCurrentPostId( state ); - return select( coreStore ).getEntityRecordEdits( - 'postType', - postType, - postId - ); + // calling another registry selector just like any other function + const postType = getCurrentPostType( state ); + const postId = getCurrentPostId( state ); + return select( coreStore ).getEntityRecordEdits( 'postType', postType, postId ); } ); ``` @@ -549,11 +545,11 @@ _Usage_ import { keyedReducer } from '@wordpress/data'; const itemsByContext = keyedReducer( 'context' )( ( state = [], action ) => { - switch ( action.type ) { - case 'ADD_ITEM': - return [ ...state, action.item ]; - } - return state; + switch ( action.type ) { + case 'ADD_ITEM': + return [ ...state, action.item ]; + } + return state; } ); ``` @@ -583,10 +579,10 @@ _Usage_ import { createReduxStore, register } from '@wordpress/data'; const store = createReduxStore( 'demo', { - reducer: ( state = 'OK' ) => state, - selectors: { - getValue: ( state ) => state, - }, + reducer: ( state = 'OK' ) => state, + selectors: { + getValue: ( state ) => state, + }, } ); register( store ); ``` @@ -668,7 +664,7 @@ _Usage_ import { resolveSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; -resolveSelect( myCustomStore ).getPrice( 'hammer' ).then( console.log ); +resolveSelect( myCustomStore ).getPrice( 'hammer' ).then(console.log) ``` _Parameters_ @@ -765,25 +761,21 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function Button( { onClick, children } ) { - return ( - <button type="button" onClick={ onClick }> - { children } - </button> - ); + return <button type="button" onClick={ onClick }>{ children }</button> } const SaleButton = ( { children } ) => { - const { stockNumber } = useSelect( - ( select ) => select( myCustomStore ).getStockNumber(), - [] - ); - const { startSale } = useDispatch( myCustomStore ); - const onClick = useCallback( () => { - const discountPercent = stockNumber > 50 ? 10 : 20; - startSale( discountPercent ); - }, [ stockNumber ] ); - return <Button onClick={ onClick }>{ children }</Button>; -}; + const { stockNumber } = useSelect( + ( select ) => select( myCustomStore ).getStockNumber(), + [] + ); + const { startSale } = useDispatch( myCustomStore ); + const onClick = useCallback( () => { + const discountPercent = stockNumber > 50 ? 10: 20; + startSale( discountPercent ); + }, [ stockNumber ] ); + return <Button onClick={ onClick }>{ children }</Button> +} // Rendered somewhere in the application: // @@ -811,21 +803,24 @@ Note: Generally speaking, `useRegistry` is a low level hook that in most cases w _Usage_ ```js -import { RegistryProvider, createRegistry, useRegistry } from '@wordpress/data'; +import { + RegistryProvider, + createRegistry, + useRegistry, +} from '@wordpress/data'; const registry = createRegistry( {} ); const SomeChildUsingRegistry = ( props ) => { - const registry = useRegistry(); - // ...logic implementing the registry in other react hooks. + const registry = useRegistry(); + // ...logic implementing the registry in other react hooks. }; + const ParentProvidingRegistry = ( props ) => { - return ( - <RegistryProvider value={ registry }> - <SomeChildUsingRegistry { ...props } /> - </RegistryProvider> - ); + return <RegistryProvider value={ registry }> + <SomeChildUsingRegistry { ...props } /> + </RegistryProvider> }; ``` @@ -846,16 +841,13 @@ import { useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function HammerPriceDisplay( { currency } ) { - const price = useSelect( - ( select ) => { - return select( myCustomStore ).getPrice( 'hammer', currency ); - }, - [ currency ] - ); - return new Intl.NumberFormat( 'en-US', { - style: 'currency', - currency, - } ).format( price ); + const price = useSelect( ( select ) => { + return select( myCustomStore ).getPrice( 'hammer', currency ); + }, [ currency ] ); + return new Intl.NumberFormat( 'en-US', { + style: 'currency', + currency, + } ).format( price ); } // Rendered in the application: @@ -880,12 +872,12 @@ import { useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function Paste( { children } ) { - const { getSettings } = useSelect( myCustomStore ); - function onPaste() { - // Do something with the settings. - const settings = getSettings(); - } - return <div onPaste={ onPaste }>{ children }</div>; + const { getSettings } = useSelect( myCustomStore ); + function onPaste() { + // Do something with the settings. + const settings = getSettings(); + } + return <div onPaste={ onPaste }>{ children }</div>; } ``` @@ -919,25 +911,21 @@ _Usage_ ```jsx function Button( { onClick, children } ) { - return ( - <button type="button" onClick={ onClick }> - { children } - </button> - ); + return <button type="button" onClick={ onClick }>{ children }</button>; } import { withDispatch } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; const SaleButton = withDispatch( ( dispatch, ownProps ) => { - const { startSale } = dispatch( myCustomStore ); - const { discountPercent } = ownProps; - - return { - onClick() { - startSale( discountPercent ); - }, - }; + const { startSale } = dispatch( myCustomStore ); + const { discountPercent } = ownProps; + + return { + onClick() { + startSale( discountPercent ); + }, + }; } )( Button ); // Rendered in the application: @@ -960,26 +948,22 @@ only. ```jsx function Button( { onClick, children } ) { - return ( - <button type="button" onClick={ onClick }> - { children } - </button> - ); + return <button type="button" onClick={ onClick }>{ children }</button>; } import { withDispatch } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => { - // Stock number changes frequently. - const { getStockNumber } = select( myCustomStore ); - const { startSale } = dispatch( myCustomStore ); - return { - onClick() { - const discountPercent = getStockNumber() > 50 ? 10 : 20; - startSale( discountPercent ); - }, - }; + // Stock number changes frequently. + const { getStockNumber } = select( myCustomStore ); + const { startSale } = dispatch( myCustomStore ); + return { + onClick() { + const discountPercent = getStockNumber() > 50 ? 10 : 20; + startSale( discountPercent ); + }, + }; } )( Button ); // Rendered in the application: @@ -1047,6 +1031,7 @@ _Returns_ - Enhanced component with merged state data props. + <!-- END TOKEN(Autogenerated API docs) --> ### batch diff --git a/packages/date/README.md b/packages/date/README.md index 075fc3ee061ee0..1a1661ad55b5c9 100644 --- a/packages/date/README.md +++ b/packages/date/README.md @@ -148,6 +148,7 @@ _Parameters_ - _dateSettings_ `DateSettings`: Settings, including locale data. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/deprecated/README.md b/packages/deprecated/README.md index ee09f023356b54..14596cd4e05faa 100644 --- a/packages/deprecated/README.md +++ b/packages/deprecated/README.md @@ -69,6 +69,7 @@ _Type_ - `Record< string, true >` + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/dom-ready/README.md b/packages/dom-ready/README.md index f3f19529152870..2bce2cf882b782 100644 --- a/packages/dom-ready/README.md +++ b/packages/dom-ready/README.md @@ -25,7 +25,7 @@ _Usage_ ```js import domReady from '@wordpress/dom-ready'; -domReady( function () { +domReady( function() { //do something after DOM loads. } ); ``` @@ -34,6 +34,7 @@ _Parameters_ - _callback_ `VoidFunction`: A function to execute after the DOM is ready. + <!-- END TOKEN(Autogenerated API docs) --> ## Browser support diff --git a/packages/dom/README.md b/packages/dom/README.md index ae52281b688f0a..fd8c3b633a46c0 100644 --- a/packages/dom/README.md +++ b/packages/dom/README.md @@ -148,7 +148,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### isEmpty @@ -259,7 +259,7 @@ _Returns_ _Parameters_ -- _node_ `Node`: +- _node_ `Node`: _Returns_ @@ -321,7 +321,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### removeInvalidHTML @@ -348,7 +348,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### replaceTag @@ -385,7 +385,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### wrap @@ -396,6 +396,7 @@ _Parameters_ - _newNode_ `Element`: The node to insert. - _referenceNode_ `Element`: The node to wrap. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 82b106daaf6b6c..9c3b0e7fe398c1 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -103,6 +103,7 @@ _Type_ - `Object` + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/editor/README.md b/packages/editor/README.md index c7c921e0ce383c..32da46b1bfef60 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -347,11 +347,11 @@ _Usage_ ```jsx <EditorProvider - post={ post } - settings={ settings } - __unstableTemplate={ template } + post={ post } + settings={ settings } + __unstableTemplate={ template } > - { children } + { children } </EditorProvider> ``` @@ -549,17 +549,20 @@ _Usage_ var __ = wp.i18n.__; var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem; -function doOnClick() { +function doOnClick(){ // To be called when the user clicks the menu item. } function MyPluginBlockSettingsMenuItem() { - return React.createElement( PluginBlockSettingsMenuItem, { - allowedBlocks: [ 'core/paragraph' ], - icon: 'dashicon-name', - label: __( 'Menu item text' ), - onClick: doOnClick, - } ); + return React.createElement( + PluginBlockSettingsMenuItem, + { + allowedBlocks: [ 'core/paragraph' ], + icon: 'dashicon-name', + label: __( 'Menu item text' ), + onClick: doOnClick, + } + ); } ``` @@ -568,17 +571,16 @@ function MyPluginBlockSettingsMenuItem() { import { __ } from '@wordpress/i18n'; import { PluginBlockSettingsMenuItem } from '@wordpress/editor'; -const doOnClick = () => { - // To be called when the user clicks the menu item. +const doOnClick = ( ) => { + // To be called when the user clicks the menu item. }; const MyPluginBlockSettingsMenuItem = () => ( - <PluginBlockSettingsMenuItem + <PluginBlockSettingsMenuItem allowedBlocks={ [ 'core/paragraph' ] } - icon="dashicon-name" + icon='dashicon-name' label={ __( 'Menu item text' ) } - onClick={ doOnClick } - /> + onClick={ doOnClick } /> ); ``` @@ -622,7 +624,7 @@ function MyDocumentSettingPlugin() { } registerPlugin( 'my-document-setting-plugin', { - render: MyDocumentSettingPlugin, + render: MyDocumentSettingPlugin } ); ``` @@ -632,16 +634,12 @@ import { registerPlugin } from '@wordpress/plugins'; import { PluginDocumentSettingPanel } from '@wordpress/editor'; const MyDocumentSettingTest = () => ( - <PluginDocumentSettingPanel - className="my-document-setting-plugin" - title="My Panel" - name="my-panel" - > + <PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel"> <p>My Document Setting Panel</p> </PluginDocumentSettingPanel> ); -registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); + registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); ``` _Parameters_ @@ -696,7 +694,10 @@ function onButtonClick() { } const MyButtonMoreMenuItem = () => ( - <PluginMoreMenuItem icon={ more } onClick={ onButtonClick }> + <PluginMoreMenuItem + icon={ more } + onClick={ onButtonClick } + > { __( 'My button title' ) } </PluginMoreMenuItem> ); @@ -732,7 +733,7 @@ const MyPluginPostPublishPanel = () => ( title={ __( 'My panel title' ) } initialOpen={ true } > - { __( 'My panel content' ) } + { __( 'My panel content' ) } </PluginPostPublishPanel> ); ``` @@ -768,7 +769,7 @@ function MyPluginPostStatusInfo() { className: 'my-plugin-post-status-info', }, __( 'My post status info' ) - ); + ) } ``` @@ -778,7 +779,9 @@ import { __ } from '@wordpress/i18n'; import { PluginPostStatusInfo } from '@wordpress/editor'; const MyPluginPostStatusInfo = () => ( - <PluginPostStatusInfo className="my-plugin-post-status-info"> + <PluginPostStatusInfo + className="my-plugin-post-status-info" + > { __( 'My post status info' ) } </PluginPostStatusInfo> ); @@ -811,7 +814,7 @@ const MyPluginPrePublishPanel = () => ( title={ __( 'My panel title' ) } initialOpen={ true } > - { __( 'My panel content' ) } + { __( 'My panel content' ) } </PluginPrePublishPanel> ); ``` @@ -841,16 +844,19 @@ import { PluginPreviewMenuItem } from '@wordpress/editor'; import { external } from '@wordpress/icons'; function onPreviewClick() { - // Handle preview action + // Handle preview action } const ExternalPreviewMenuItem = () => ( - <PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }> - { __( 'Preview in new tab' ) } - </PluginPreviewMenuItem> + <PluginPreviewMenuItem + icon={ external } + onClick={ onPreviewClick } + > + { __( 'Preview in new tab' ) } + </PluginPreviewMenuItem> ); registerPlugin( 'external-preview-menu-item', { - render: ExternalPreviewMenuItem, + render: ExternalPreviewMenuItem, } ); ``` @@ -872,9 +878,7 @@ _Returns_ Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar. It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`. If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API: ```js -wp.data - .dispatch( 'core/edit-post' ) - .openGeneralSidebar( 'plugin-name/sidebar-name' ); +wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' ); ``` _Related_ @@ -893,13 +897,17 @@ var moreIcon = React.createElement( 'svg' ); //... svg element. function MyPluginSidebar() { return el( - PluginSidebar, - { - name: 'my-sidebar', - title: 'My sidebar title', - icon: moreIcon, - }, - el( PanelBody, {}, __( 'My sidebar content' ) ) + PluginSidebar, + { + name: 'my-sidebar', + title: 'My sidebar title', + icon: moreIcon, + }, + el( + PanelBody, + {}, + __( 'My sidebar content' ) + ) ); } ``` @@ -912,8 +920,14 @@ import { PluginSidebar } from '@wordpress/editor'; import { more } from '@wordpress/icons'; const MyPluginSidebar = () => ( - <PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }> - <PanelBody>{ __( 'My sidebar content' ) }</PanelBody> + <PluginSidebar + name="my-sidebar" + title="My sidebar title" + icon={ more } + > + <PanelBody> + { __( 'My sidebar content' ) } + </PanelBody> </PluginSidebar> ); ``` @@ -948,7 +962,7 @@ function MySidebarMoreMenuItem() { icon: moreIcon, }, __( 'My sidebar title' ) - ); + ) } ``` @@ -959,7 +973,10 @@ import { PluginSidebarMoreMenuItem } from '@wordpress/editor'; import { more } from '@wordpress/icons'; const MySidebarMoreMenuItem = () => ( - <PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }> + <PluginSidebarMoreMenuItem + target="my-sidebar" + icon={ more } + > { __( 'My sidebar title' ) } </PluginSidebarMoreMenuItem> ); @@ -1410,7 +1427,7 @@ Renders the `PostTitle` component. _Parameters_ -- \_\_\_ `Object`: Unused parameter. +- _\__ `Object`: Unused parameter. - _forwardedRef_ `Element`: Forwarded ref for the component. _Returns_ @@ -1772,6 +1789,7 @@ _Returns_ > **Deprecated** since 5.3, use `wp.blockEditor.WritingFlow` instead. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/element/README.md b/packages/element/README.md index 160bed534ef229..084efe535ebd27 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -246,10 +246,8 @@ _Usage_ import { Platform } from '@wordpress/element'; const placeholderLabel = Platform.select( { - web: __( - 'Drag images, upload new ones or select files from your library.' - ), - default: __( 'Add media' ), + web: __( 'Drag images, upload new ones or select files from your library.' ), + default: __( 'Add media' ), } ); ``` @@ -270,11 +268,7 @@ _Usage_ ```jsx import { RawHTML } from '@wordpress/element'; -const Component = () => ( - <RawHTML> - <h3>Hello world</h3> - </RawHTML> -); +const Component = () => <RawHTML><h3>Hello world</h3></RawHTML>; // Edit: <div><h3>Hello world</h3></div> // save: <h3>Hello world</h3> ``` @@ -303,9 +297,9 @@ Serializes a React element to string. _Parameters_ -- _element_ `React.ReactNode`: -- _context_ `any`: -- _legacyContext_ `Record< string, any >`: +- _element_ `React.ReactNode`: +- _context_ `any`: +- _legacyContext_ `Record< string, any >`: ### startTransition @@ -436,6 +430,7 @@ _Related_ - <https://react.dev/reference/react/useTransition> + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/escape-html/README.md b/packages/escape-html/README.md index 5ab0c7a993056a..cdd41629367bb2 100644 --- a/packages/escape-html/README.md +++ b/packages/escape-html/README.md @@ -127,6 +127,7 @@ _Returns_ - `boolean`: Whether attribute is valid. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/fields/README.md b/packages/fields/README.md index a5bcf9ef05d600..5c050e9dbf9920 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -67,7 +67,7 @@ A React component that renders a modal for creating a template part. The modal d _Parameters_ - _props_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps`: The component props. -- _props.modalTitle_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`: +- _props.modalTitle_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`: ### dateField @@ -130,12 +130,15 @@ import { MediaEdit } from '@wordpress/fields'; import type { DataFormControlProps } from '@wordpress/dataviews'; const featuredImageField = { - id: 'featured_media', - type: 'media', - label: 'Featured Image', - Edit: ( props: DataFormControlProps< MyPostType > ) => ( - <MediaEdit { ...props } allowedTypes={ [ 'image' ] } /> - ), + id: 'featured_media', + type: 'media', + label: 'Featured Image', + Edit: (props: DataFormControlProps<MyPostType>) => ( + <MediaEdit + {...props} + allowedTypes={['image']} + /> + ), }; ``` @@ -302,6 +305,7 @@ View post action for BasePost. View post revisions action for Post. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/html-entities/README.md b/packages/html-entities/README.md index 1133c7df156194..fba1930770e562 100644 --- a/packages/html-entities/README.md +++ b/packages/html-entities/README.md @@ -37,6 +37,7 @@ _Returns_ - `string`: The decoded string. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/i18n/README.md b/packages/i18n/README.md index 5c94c0207b29a0..931838f9b419cd 100644 --- a/packages/i18n/README.md +++ b/packages/i18n/README.md @@ -215,6 +215,7 @@ _Returns_ - `TransformedText<Text>`: Translated text. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/kebab-case/README.md b/packages/kebab-case/README.md index 9170e83f6eb7e7..95dc844d2fc846 100644 --- a/packages/kebab-case/README.md +++ b/packages/kebab-case/README.md @@ -51,6 +51,7 @@ _Returns_ - Kebab-cased string + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md index ae2e0a4a1057c1..4a8d29338494ee 100644 --- a/packages/keyboard-shortcuts/README.md +++ b/packages/keyboard-shortcuts/README.md @@ -47,6 +47,7 @@ _Parameters_ - _options_ `UseShortcutOptions`: Shortcut options. - _options.isDisabled_ `UseShortcutOptions[ 'isDisabled' ]`: Whether to disable the shortcut. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/keycodes/README.md b/packages/keycodes/README.md index 03dcd014aacfd5..ccdf749d6b8a36 100644 --- a/packages/keycodes/README.md +++ b/packages/keycodes/README.md @@ -58,20 +58,20 @@ _Usage_ ```js // Assuming macOS: -ariaKeyShortcut.primary( 'm' ); +ariaKeyShortcut.primary( 'm' ) // "Meta+M" -ariaKeyShortcut.primaryAlt( 'm' ); +ariaKeyShortcut.primaryAlt( 'm' ) // "Meta+Alt+M" // Assuming Windows: -ariaKeyShortcut.primary( 'm' ); +ariaKeyShortcut.primary( 'm' ) // "Control+M" -ariaKeyShortcut.primaryAlt( 'm' ); +ariaKeyShortcut.primaryAlt( 'm' ) // "Control+Alt+M" -ariaKeyShortcut.primaryShift( 'del' ); +ariaKeyShortcut.primaryShift( 'del' ) // "Control+Shift+Delete" ``` @@ -199,7 +199,7 @@ _Usage_ ```js // Assuming macOS: -rawShortcut.primary( 'm' ); +rawShortcut.primary( 'm' ) // "meta+m" ``` @@ -255,6 +255,7 @@ _Returns_ Keycode for ZERO key. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md index 7b3fc814169bdd..5be1cf657fb370 100644 --- a/packages/media-utils/README.md +++ b/packages/media-utils/README.md @@ -89,6 +89,7 @@ _Parameters_ - _file_ `File`: File object. - _wpAllowedMimeTypes_ `Record< string, string > | null`: List of allowed mime types and file extensions. + <!-- END TOKEN(Autogenerated API docs) --> ## Usage diff --git a/packages/plugins/README.md b/packages/plugins/README.md index ac2434e51442f4..b28e4e10137080 100644 --- a/packages/plugins/README.md +++ b/packages/plugins/README.md @@ -52,7 +52,12 @@ var el = React.createElement; var PluginArea = wp.plugins.PluginArea; function Layout() { - return el( 'div', { scope: 'my-page' }, 'Content of the page', PluginArea ); + return el( + 'div', + { scope: 'my-page' }, + 'Content of the page', + PluginArea + ); } ``` @@ -70,9 +75,9 @@ const Layout = () => ( _Parameters_ -- _props_ `{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }`: -- _props.scope_ `string`: -- _props.onError_ `( name: WPPlugin[ 'name' ], error: Error ) => void`: +- _props_ `{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }`: +- _props.scope_ `string`: +- _props.onError_ `( name: WPPlugin[ 'name' ], error: Error ) => void`: _Returns_ @@ -129,10 +134,15 @@ import { more } from '@wordpress/icons'; const Component = () => ( <> - <PluginSidebarMoreMenuItem target="sidebar-name"> + <PluginSidebarMoreMenuItem + target="sidebar-name" + > My Sidebar </PluginSidebarMoreMenuItem> - <PluginSidebar name="sidebar-name" title="My Sidebar"> + <PluginSidebar + name="sidebar-name" + title="My Sidebar" + > Content of the sidebar </PluginSidebar> </> @@ -204,6 +214,7 @@ _Returns_ - `Component`: Enhanced component with injected context as props. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/preferences-persistence/README.md b/packages/preferences-persistence/README.md index af8f6cc4b14388..d545866d588de6 100644 --- a/packages/preferences-persistence/README.md +++ b/packages/preferences-persistence/README.md @@ -38,7 +38,7 @@ Creates a persistence layer that stores data in WordPress user meta via the REST _Parameters_ -- _options_ `Object`: +- _options_ `Object`: - _options.preloadedData_ `?Object`: Any persisted preferences data that should be preloaded. When set, the persistence layer will avoid fetching data from the REST API. - _options.localStorageRestoreKey_ `?string`: The key to use for restoring the localStorage backup, used when the persistence layer calls `localStorage.getItem` or `localStorage.setItem`. - _options.requestDebounceMS_ `?number`: Debounce requests to the API so that they only occur at minimum every `requestDebounceMS` milliseconds, and don't swamp the server. Defaults to 2500ms. @@ -47,6 +47,7 @@ _Returns_ - `Object`: A persistence layer for WordPress user meta. + <!-- END TOKEN(Autogenerated Docs|src/index.js) --> ## Contributing to this package diff --git a/packages/preferences/README.md b/packages/preferences/README.md index 7eaedb5841f584..a1ccb6130640eb 100644 --- a/packages/preferences/README.md +++ b/packages/preferences/README.md @@ -244,6 +244,7 @@ _Returns_ - `*`: Is the feature enabled? + <!-- END TOKEN(Autogenerated selectors|src/store/selectors.ts) --> ## Contributing to this package diff --git a/packages/priority-queue/README.md b/packages/priority-queue/README.md index 7d38649cb20691..af168b615e9913 100644 --- a/packages/priority-queue/README.md +++ b/packages/priority-queue/README.md @@ -33,7 +33,7 @@ const ctx2 = {}; // For a given context in the queue, only the last callback is executed. queue.add( ctx1, () => console.log( 'This will be printed first' ) ); -queue.add( ctx2, () => console.log( "This won't be printed" ) ); +queue.add( ctx2, () => console.log( 'This won\'t be printed' ) ); queue.add( ctx2, () => console.log( 'This will be printed second' ) ); ``` @@ -41,6 +41,7 @@ _Returns_ - `WPPriorityQueue`: Queue object with `add`, `flush` and `reset` methods. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md index 172f770fde51ce..a2e3fc7a3850eb 100644 --- a/packages/react-i18n/README.md +++ b/packages/react-i18n/README.md @@ -85,6 +85,7 @@ _Returns_ - `FunctionComponent< PropsAndI18n< P > >`: The wrapped component + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/redux-routine/README.md b/packages/redux-routine/README.md index f10c09e5a966b9..04af72469cd242 100644 --- a/packages/redux-routine/README.md +++ b/packages/redux-routine/README.md @@ -71,6 +71,7 @@ _Returns_ - `Middleware`: Co-routine runtime + <!-- END TOKEN(Autogenerated API docs) --> ## Motivation diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index b7d89af2024db8..094da416c02217 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -174,7 +174,7 @@ _Parameters_ - _$1.text_ `[string]`: Text to create value from. - _$1.html_ `[string]`: HTML to create value from. - _$1.range_ `[Range]`: Range to create value from. -- _$1.\_\_unstableIsEditableTree_ `[boolean]`: +- _$1.\_\_unstableIsEditableTree_ `[boolean]`: _Returns_ @@ -271,8 +271,8 @@ Check if the selection of a Rich Text value is collapsed or not. Collapsed means _Parameters_ - _props_ `RichTextValue`: The rich text value to check. -- _props.start_ `RichTextValue[ 'start' ]`: -- _props.end_ `RichTextValue[ 'end' ]`: +- _props.start_ `RichTextValue[ 'start' ]`: +- _props.end_ `RichTextValue[ 'end' ]`: _Returns_ @@ -369,12 +369,12 @@ The RichTextData class is used to instantiate a wrapper around rich text values, - Create an empty instance: `new RichTextData()`. - Create one from an HTML string: `RichTextData.fromHTMLString( -'<em>hello</em>' )`. + '<em>hello</em>' )`. - Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement( -document.querySelector( 'p' ) )`. + document.querySelector( 'p' ) )`. - Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`. - Create one from a rich text value: `new RichTextData( { text: '...', -formats: [ ... ] } )`. + formats: [ ... ] } )`. ### RichTextFormat @@ -404,7 +404,7 @@ Split a Rich Text value in two at the given `startIndex` and `endIndex`, or spli _Parameters_ -- _value_ `RichTextValue`: +- _value_ `RichTextValue`: - _string_ `[number|string]`: Start index, or string at which to split. _Returns_ @@ -483,7 +483,7 @@ This hook, to be used in a format type's Edit component, returns the active elem _Parameters_ - _$1_ `Object`: Named parameters. -- _$1.ref_ `RefObject<HTMLElement>`: React ref of the element containing the editable content. +- _$1.ref_ `RefObject<HTMLElement>`: React ref of the element containing the editable content. - _$1.value_ `RichTextValue`: Value to check for selection. - _$1.settings_ `WPFormat`: The format type's settings. @@ -491,6 +491,7 @@ _Returns_ - `Element|Range`: The active element or selection range. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/router/README.md b/packages/router/README.md index 9964c31dfe6a8a..3877838b22f1a2 100644 --- a/packages/router/README.md +++ b/packages/router/README.md @@ -20,6 +20,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If Undocumented declaration. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index 78658c64184eb7..fb8439d649634e 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -50,14 +50,14 @@ import { ServerSideRender } from '@wordpress/server-side-render'; // import { default as ServerSideRender } from '@wordpress/server-side-render'; function Example() { - return ( - <ServerSideRender - block="core/archives" - attributes={ { showPostCounts: true } } - urlQueryArgs={ { customArg: 'value' } } - className="custom-class" - /> - ); + return ( + <ServerSideRender + block="core/archives" + attributes={ { showPostCounts: true } } + urlQueryArgs={ { customArg: 'value' } } + className="custom-class" + /> + ); } ``` @@ -85,20 +85,20 @@ import { RawHTML } from '@wordpress/element'; import { useServerSideRender } from '@wordpress/server-side-render'; function MyServerSideRender( { attributes, block } ) { - const { content, status, error } = useServerSideRender( { - attributes, - block, - } ); + const { content, status, error } = useServerSideRender( { + attributes, + block, + } ); - if ( status === 'loading' ) { - return <div>Loading...</div>; - } + if ( status === 'loading' ) { + return <div>Loading...</div>; + } - if ( status === 'error' ) { - return <div>Error: { error }</div>; - } + if ( status === 'error' ) { + return <div>Error: { error }</div>; + } - return <RawHTML>{ content }</RawHTML>; + return <RawHTML>{ content }</RawHTML>; } ``` @@ -110,6 +110,7 @@ _Returns_ - `ServerSideRenderResponse`: The server-side render response object. + <!-- END TOKEN(Autogenerated API docs) --> ## Output diff --git a/packages/shortcode/README.md b/packages/shortcode/README.md index 4657736756b739..859fbd47dfb4f7 100644 --- a/packages/shortcode/README.md +++ b/packages/shortcode/README.md @@ -126,6 +126,7 @@ _Returns_ - `string`: String representation of the shortcode. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index 14a964402f0c7b..d8a73e2d363712 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -320,6 +320,7 @@ A block or theme style object accepted by `compileCSS` and `getCSSRules`. Options for `compileCSS` and `getCSSRules`. + <!-- END TOKEN(Autogenerated API docs) --> ## Glossary diff --git a/packages/sync/README.md b/packages/sync/README.md index df4651a6948ce9..34acb04d4fe3a8 100644 --- a/packages/sync/README.md +++ b/packages/sync/README.md @@ -62,6 +62,7 @@ externals: { The major version of Yjs that is bundled and exported by this package. This can be used by third-party code to ensure that they are targeting a compatible version of Yjs. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/undo-manager/README.md b/packages/undo-manager/README.md index 32a3f5e63d4a2d..df09f01ef13412 100644 --- a/packages/undo-manager/README.md +++ b/packages/undo-manager/README.md @@ -22,6 +22,7 @@ _Returns_ - `UndoManager< T >`: Undo manager. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/upload-media/README.md b/packages/upload-media/README.md index 40ee3ed48dc3d6..ecf4fb122e8469 100644 --- a/packages/upload-media/README.md +++ b/packages/upload-media/README.md @@ -48,7 +48,7 @@ Adds a new item to the upload queue. _Parameters_ -- _$0_ `AddItemsArgs`: +- _$0_ `AddItemsArgs`: - _$0.files_ `AddItemsArgs[ 'files' ]`: Files - _$0.onChange_ `[AddItemsArgs[ 'onChange' ]]`: Function called each time a file or a temporary representation of the file is available. - _$0.onSuccess_ `[AddItemsArgs[ 'onSuccess' ]]`: Function called after the file is uploaded. @@ -168,4 +168,5 @@ _Returns_ - `boolean`: Whether upload is currently in progress for the given attachment. + <!-- END TOKEN(Autogenerated selectors|src/store/selectors.ts) --> diff --git a/packages/url/README.md b/packages/url/README.md index 86159b22c20343..27cf84299a315e 100644 --- a/packages/url/README.md +++ b/packages/url/README.md @@ -45,13 +45,13 @@ _Usage_ ```js const queryString = buildQueryString( { - simple: 'is ok', - arrays: [ 'are', 'fine', 'too' ], - objects: { - evenNested: { - ok: 'yes', - }, - }, + simple: 'is ok', + arrays: [ 'are', 'fine', 'too' ], + objects: { + evenNested: { + ok: 'yes', + }, + }, } ); // "simple=is%20ok&arrays%5B0%5D=are&arrays%5B1%5D=fine&arrays%5B2%5D=too&objects%5BevenNested%5D%5Bok%5D=yes" ``` @@ -87,13 +87,8 @@ Returns a URL for display. _Usage_ ```js -const displayUrl = filterURLForDisplay( - 'https://www.wordpress.org/gutenberg/' -); // wordpress.org/gutenberg -const imageUrl = filterURLForDisplay( - 'https://www.wordpress.org/wp-content/uploads/img.png', - 20 -); // …ent/uploads/img.png +const displayUrl = filterURLForDisplay( 'https://www.wordpress.org/gutenberg/' ); // wordpress.org/gutenberg +const imageUrl = filterURLForDisplay( 'https://www.wordpress.org/wp-content/uploads/img.png', 20 ); // …ent/uploads/img.png ``` _Parameters_ @@ -150,12 +145,8 @@ Returns the fragment part of the URL. _Usage_ ```js -const fragment1 = getFragment( - 'http://localhost:8080/this/is/a/test?query=true#fragment' -); // '#fragment' -const fragment2 = getFragment( - 'https://wordpress.org#another-fragment?query=true' -); // '#another-fragment' +const fragment1 = getFragment( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // '#fragment' +const fragment2 = getFragment( 'https://wordpress.org#another-fragment?query=true' ); // '#another-fragment' ``` _Parameters_ @@ -192,12 +183,8 @@ Returns the path part and query string part of the URL. _Usage_ ```js -const pathAndQueryString1 = getPathAndQueryString( - 'http://localhost:8080/this/is/a/test?query=true' -); // '/this/is/a/test?query=true' -const pathAndQueryString2 = getPathAndQueryString( - 'https://wordpress.org/help/faq/' -); // '/help/faq' +const pathAndQueryString1 = getPathAndQueryString( 'http://localhost:8080/this/is/a/test?query=true' ); // '/this/is/a/test?query=true' +const pathAndQueryString2 = getPathAndQueryString( 'https://wordpress.org/help/faq/' ); // '/help/faq' ``` _Parameters_ @@ -272,9 +259,7 @@ Returns the query string part of the URL. _Usage_ ```js -const queryString = getQueryString( - 'http://localhost:8080/this/is/a/test?query=true#fragment' -); // 'query=true' +const queryString = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' ``` _Parameters_ @@ -329,7 +314,7 @@ Determines whether the given string looks like a phone number. _Usage_ ```js -const isPhoneNumber = isPhoneNumber( '+1 (555) 123-4567' ); // true +const isPhoneNumber = isPhoneNumber('+1 (555) 123-4567'); // true ``` _Parameters_ @@ -515,11 +500,7 @@ Removes arguments from the query string of the url _Usage_ ```js -const newUrl = removeQueryArgs( - 'https://wordpress.org?foo=bar&bar=baz&baz=foobar', - 'foo', - 'bar' -); // https://wordpress.org?baz=foobar +const newUrl = removeQueryArgs( 'https://wordpress.org?foo=bar&bar=baz&baz=foobar', 'foo', 'bar' ); // https://wordpress.org?baz=foobar ``` _Parameters_ @@ -561,6 +542,7 @@ _Returns_ - `string`: Decoded URI component if possible. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/video-conversion/README.md b/packages/video-conversion/README.md index 9fc538ee2ee0ff..0fcda4dcf79a05 100644 --- a/packages/video-conversion/README.md +++ b/packages/video-conversion/README.md @@ -73,4 +73,5 @@ Message prefix for "unsupported but graceful" outcomes (no WebCodecs, unsupporte The contract is the message _prefix_, not the Error type: the worker RPC layer (comctx) serializes a thrown error to its `message` string only - the Error subclass, `name`, and `stack` do not survive the worker boundary. + <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/viewport/README.md b/packages/viewport/README.md index f24672eb697ab6..af304489b9e61c 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -101,7 +101,9 @@ _Usage_ ```jsx function MyComponent( { isMobile } ) { - return <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>; + return ( + <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div> + ); } MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent ); @@ -115,6 +117,7 @@ _Returns_ - Higher-order component. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/views/README.md b/packages/views/README.md index 0d838df13694ff..b1770685e0264f 100644 --- a/packages/views/README.md +++ b/packages/views/README.md @@ -62,7 +62,7 @@ A hook that retrieves the view configuration for a given entity from the core da _Parameters_ -- _params_ `Object`: +- _params_ `Object`: - _params.kind_ `string`: The kind of the entity. - _params.name_ `string`: The name of the entity. - _params.fields_ `[?(string|string[])]`: Subset of top-level config properties to request, as an array or a comma-separated string (mapped to the REST API `_fields` parameter). When omitted, the full config is requested. @@ -71,4 +71,5 @@ _Returns_ - `Object`: An object containing the `default_view`, `default_layouts`, `view_list`, and `form` configuration for the entity. + <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/vips/README.md b/packages/vips/README.md index 04a819e980282e..d862c32ee5d328 100644 --- a/packages/vips/README.md +++ b/packages/vips/README.md @@ -226,4 +226,5 @@ _Returns_ - `Promise< { buffer: ArrayBuffer | ArrayBufferLike; width: number; height: number; } >`: Rotated file data plus the new dimensions. + <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/warning/README.md b/packages/warning/README.md index cc082a7f214467..293f01b6e76284 100644 --- a/packages/warning/README.md +++ b/packages/warning/README.md @@ -51,6 +51,7 @@ _Parameters_ - _message_ `string`: Message to show in the warning. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/wordcount/README.md b/packages/wordcount/README.md index 28b52eed91213e..dffb837125a9b7 100644 --- a/packages/wordcount/README.md +++ b/packages/wordcount/README.md @@ -24,7 +24,7 @@ _Usage_ ```ts import { count } from '@wordpress/wordcount'; -const numberOfWords = count( 'Words to count', 'words', {} ); +const numberOfWords = count( 'Words to count', 'words', {} ) ``` _Parameters_ @@ -37,6 +37,7 @@ _Returns_ - `number`: The word or character count. + <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index 6756d12674039d..f76498f973e188 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -1478,31 +1478,6 @@ "count": 1 } }, - "packages/format-library/src/image/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/language/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/link/inline.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/math/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/text-color/inline.js": { - "react-hooks/refs": { - "count": 2 - } - }, "packages/global-styles-ui/src/block-preview-panel.tsx": { "@wordpress/use-recommended-components": { "count": 1 From c0cb6422cb0d8f9d2491325e13b5011dd823f595 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Wed, 19 Aug 2026 17:49:45 +0530 Subject: [PATCH 28/46] Revert "fix: Remove suppressions" This reverts commit c78eac6a5c79eb213cbf8ff8cba629faec10033d. --- .../data/data-core-annotations.md | 1 - .../data/data-core-block-directory.md | 5 +- .../data/data-core-block-editor.md | 159 +++--- .../reference-guides/data/data-core-blocks.md | 503 +++++++++--------- .../data/data-core-commands.md | 1 - .../data/data-core-customize-widgets.md | 43 +- .../data/data-core-edit-post.md | 37 +- .../data/data-core-edit-site.md | 57 +- .../data/data-core-edit-widgets.md | 1 - .../reference-guides/data/data-core-editor.md | 47 +- .../data/data-core-keyboard-shortcuts.md | 410 +++++++------- .../data/data-core-notices.md | 209 ++++---- .../data/data-core-preferences.md | 1 - .../data/data-core-reusable-blocks.md | 1 - .../data/data-core-rich-text.md | 59 +- .../data/data-core-viewport.md | 21 +- docs/reference-guides/data/data-core.md | 1 - packages/a11y/README.md | 1 - packages/admin-ui/README.md | 13 +- packages/autop/README.md | 1 - packages/blob/README.md | 21 +- packages/block-directory/README.md | 5 +- packages/block-editor/README.md | 174 +++--- packages/block-library/README.md | 1 - .../README.md | 125 +++-- packages/blocks/README.md | 216 ++++---- packages/commands/README.md | 153 +++--- packages/compose/README.md | 66 +-- packages/core-commands/README.md | 1 - packages/core-data/README.md | 115 ++-- packages/data-controls/README.md | 11 +- packages/data/README.md | 209 ++++---- packages/date/README.md | 1 - packages/deprecated/README.md | 1 - packages/dom-ready/README.md | 3 +- packages/dom/README.md | 11 +- packages/edit-post/README.md | 1 - packages/editor/README.md | 116 ++-- packages/element/README.md | 19 +- packages/escape-html/README.md | 1 - packages/fields/README.md | 18 +- packages/html-entities/README.md | 1 - packages/i18n/README.md | 1 - packages/kebab-case/README.md | 1 - packages/keyboard-shortcuts/README.md | 1 - packages/keycodes/README.md | 13 +- packages/media-utils/README.md | 1 - packages/plugins/README.md | 23 +- packages/preferences-persistence/README.md | 3 +- packages/preferences/README.md | 1 - packages/priority-queue/README.md | 3 +- packages/react-i18n/README.md | 1 - packages/redux-routine/README.md | 1 - packages/rich-text/README.md | 17 +- packages/router/README.md | 1 - packages/server-side-render/README.md | 39 +- packages/shortcode/README.md | 1 - packages/style-engine/README.md | 1 - packages/sync/README.md | 1 - packages/undo-manager/README.md | 1 - packages/upload-media/README.md | 3 +- packages/url/README.md | 52 +- packages/video-conversion/README.md | 1 - packages/viewport/README.md | 5 +- packages/views/README.md | 3 +- packages/vips/README.md | 1 - packages/warning/README.md | 1 - packages/wordcount/README.md | 3 +- tools/eslint/suppressions.json | 25 + 69 files changed, 1520 insertions(+), 1524 deletions(-) diff --git a/docs/reference-guides/data/data-core-annotations.md b/docs/reference-guides/data/data-core-annotations.md index 5af22fc511f9e2..ec9be123836539 100644 --- a/docs/reference-guides/data/data-core-annotations.md +++ b/docs/reference-guides/data/data-core-annotations.md @@ -20,5 +20,4 @@ Nothing to document. Nothing to document. - <!-- END TOKEN(Autogenerated actions|../../../packages/annotations/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core-block-directory.md b/docs/reference-guides/data/data-core-block-directory.md index 685b39ea7b08d6..c1fe96521adc32 100644 --- a/docs/reference-guides/data/data-core-block-directory.md +++ b/docs/reference-guides/data/data-core-block-directory.md @@ -205,8 +205,8 @@ Returns an action object used to indicate install in progress. _Parameters_ -- _blockId_ `string`: -- _isInstalling_ `boolean`: +- _blockId_ `string`: +- _isInstalling_ `boolean`: _Returns_ @@ -220,5 +220,4 @@ _Parameters_ - _block_ `Object`: The blockType object. - <!-- END TOKEN(Autogenerated actions|../../../packages/block-directory/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 25af0b0d4312d6..19da15b04e2c48 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -573,7 +573,7 @@ _Returns_ ### getHoveredBlockClientId -> **Deprecated** +> **Deprecated** Returns the currently hovered block. @@ -744,34 +744,34 @@ Returns the currently selected block, or null if there is no selected block. _Usage_ ```js -import { select } from '@wordpress/data' -import { store as blockEditorStore } from '@wordpress/block-editor' +import { select } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; // Set initial active block client ID -let activeBlockClientId = null +let activeBlockClientId = null; const getActiveBlockData = () => { - const activeBlock = select(blockEditorStore).getSelectedBlock() + const activeBlock = select( blockEditorStore ).getSelectedBlock(); - if (activeBlock && activeBlock.clientId !== activeBlockClientId) { - activeBlockClientId = activeBlock.clientId + if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) { + activeBlockClientId = activeBlock.clientId; // Get active block name and attributes - const activeBlockName = activeBlock.name - const activeBlockAttributes = activeBlock.attributes + const activeBlockName = activeBlock.name; + const activeBlockAttributes = activeBlock.attributes; // Log active block name and attributes - console.log(activeBlockName, activeBlockAttributes) - } + console.log( activeBlockName, activeBlockAttributes ); } +}; - // Subscribe to changes in the editor - // wp.data.subscribe(() => { - // getActiveBlockData() - // }) +// Subscribe to changes in the editor +// wp.data.subscribe(() => { +// getActiveBlockData() +// }) - // Update active block data on click - // onclick="getActiveBlockData()" +// Update active block data on click +// onclick="getActiveBlockData()" ``` _Parameters_ @@ -872,7 +872,7 @@ Returns the defined block template _Parameters_ -- _state_ `boolean`: +- _state_ `boolean`: _Returns_ @@ -893,7 +893,7 @@ _Returns_ ### hasBlockMovingClientId -> **Deprecated** +> **Deprecated** Returns whether block moving mode is enabled. @@ -1095,7 +1095,7 @@ _Returns_ ### isCaretWithinFormattedText -> **Deprecated** +> **Deprecated** Returns true if the caret is within formatted text, or false otherwise. @@ -1212,7 +1212,7 @@ Returns whether the blocks matches the template or not. _Parameters_ -- _state_ `boolean`: +- _state_ `boolean`: _Returns_ @@ -1252,12 +1252,12 @@ Action that duplicates a list of blocks. _Parameters_ -- _clientIds_ `string[]`: -- _updateSelection_ `boolean`: +- _clientIds_ `string[]`: +- _updateSelection_ `boolean`: ### enterFormattedText -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the caret has entered formatted text. @@ -1267,7 +1267,7 @@ _Returns_ ### exitFormattedText -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user caret has exited formatted text. @@ -1290,7 +1290,7 @@ Action that hides the insertion point. ### hoverBlock -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the block with the specified client ID has been hovered. @@ -1300,7 +1300,7 @@ Action that inserts a default block after a given block. _Parameters_ -- _clientId_ `string`: +- _clientId_ `string`: ### insertBeforeBlock @@ -1308,7 +1308,7 @@ Action that inserts a default block before a given block. _Parameters_ -- _clientId_ `string`: +- _clientId_ `string`: ### insertBlock @@ -1340,7 +1340,7 @@ _Parameters_ - _blocks_ `Object[]`: Block objects to insert. - _index_ `?number`: Index at which block should be inserted. - _rootClientId_ `?string`: Optional root client ID of block list on which to insert. -- _updateSelection_ `?boolean`: If true block selection will be updated. If false, block selection will not change. Defaults to true. +- _updateSelection_ `?boolean`: If true block selection will be updated. If false, block selection will not change. Defaults to true. - _initialPosition_ `0|-1|null`: Initial focus position. Setting it to null prevent focusing the inserted block. - _meta_ `?Object`: Optional Meta values to be passed to the action object. @@ -1409,7 +1409,7 @@ _Parameters_ ### receiveBlocks -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that blocks have been received. Unlike resetBlocks, these should be appended to the existing known set, not replacing. @@ -1464,54 +1464,54 @@ _Properties_ _Usage_ ```js -wp.data.dispatch('core/block-editor').registerInserterMediaCategory( { - name: 'openverse', - labels: { - name: 'Openverse', - search_items: 'Search Openverse', - }, - mediaType: 'image', - async fetch( query = {} ) { - const defaultArgs = { - mature: false, - excluded_source: 'flickr,inaturalist,wikimedia', - license: 'pdm,cc0', - }; - const finalQuery = { ...query, ...defaultArgs }; - // Sometimes you might need to map the supported request params according to `InserterMediaRequest`. - // interface. In this example the `search` query param is named `q`. - const mapFromInserterMediaRequest = { - per_page: 'page_size', - search: 'q', - }; - const url = new URL( 'https://api.openverse.org/v1/images/' ); - Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { - const queryKey = mapFromInserterMediaRequest[ key ] || key; - url.searchParams.set( queryKey, value ); - } ); - const response = await window.fetch( url, { - headers: { - 'User-Agent': 'WordPress/inserter-media-fetch', - }, - } ); - const jsonResponse = await response.json(); - const results = jsonResponse.results; - return results.map( ( result ) => ( { - ...result, - // If your response result includes an `id` prop that you want to access later, it should - // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide - // a report URL getter. - // Additionally you should always clear the `id` value of your response results because - // it is used to identify WordPress media items. - sourceId: result.id, - id: undefined, - caption: result.caption, - previewUrl: result.thumbnail, - } ) ); - }, - getReportUrl: ( { sourceId } ) => - `https://wordpress.org/openverse/image/${ sourceId }/report/`, - isExternalResource: true, +wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( { + name: 'openverse', + labels: { + name: 'Openverse', + search_items: 'Search Openverse', + }, + mediaType: 'image', + async fetch( query = {} ) { + const defaultArgs = { + mature: false, + excluded_source: 'flickr,inaturalist,wikimedia', + license: 'pdm,cc0', + }; + const finalQuery = { ...query, ...defaultArgs }; + // Sometimes you might need to map the supported request params according to `InserterMediaRequest`. + // interface. In this example the `search` query param is named `q`. + const mapFromInserterMediaRequest = { + per_page: 'page_size', + search: 'q', + }; + const url = new URL( 'https://api.openverse.org/v1/images/' ); + Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { + const queryKey = mapFromInserterMediaRequest[ key ] || key; + url.searchParams.set( queryKey, value ); + } ); + const response = await window.fetch( url, { + headers: { + 'User-Agent': 'WordPress/inserter-media-fetch', + }, + } ); + const jsonResponse = await response.json(); + const results = jsonResponse.results; + return results.map( ( result ) => ( { + ...result, + // If your response result includes an `id` prop that you want to access later, it should + // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide + // a report URL getter. + // Additionally you should always clear the `id` value of your response results because + // it is used to identify WordPress media items. + sourceId: result.id, + id: undefined, + caption: result.caption, + previewUrl: result.thumbnail, + } ) ); + }, + getReportUrl: ( { sourceId } ) => + `https://wordpress.org/openverse/image/${ sourceId }/report/`, + isExternalResource: true, } ); ``` @@ -1687,7 +1687,7 @@ _Returns_ ### setBlockMovingClientId -> **Deprecated** +> **Deprecated** Set the block moving client ID. @@ -1913,5 +1913,4 @@ _Parameters_ - _blocks_ `Array`: Array of blocks. - <!-- END TOKEN(Autogenerated actions|../../../packages/block-editor/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-blocks.md b/docs/reference-guides/data/data-core-blocks.md index 0fc98d06797d66..49dff81aedcceb 100644 --- a/docs/reference-guides/data/data-core-blocks.md +++ b/docs/reference-guides/data/data-core-blocks.md @@ -23,23 +23,23 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - // This example assumes that a core/embed block is the first block in the Block Editor. - const activeBlockVariation = useSelect( ( select ) => { - // Retrieve the list of blocks. - const [ firstBlock ] = select( blockEditorStore ).getBlocks() - - // Return the active block variation for the first block. - return select( blocksStore ).getActiveBlockVariation( - firstBlock.name, - firstBlock.attributes - ); - }, [] ); - - return activeBlockVariation && activeBlockVariation.name === 'spotify' ? ( - <p>{ __( 'Spotify variation' ) }</p> - ) : ( - <p>{ __( 'Other variation' ) }</p> - ); + // This example assumes that a core/embed block is the first block in the Block Editor. + const activeBlockVariation = useSelect( ( select ) => { + // Retrieve the list of blocks. + const [ firstBlock ] = select( blockEditorStore ).getBlocks(); + + // Return the active block variation for the first block. + return select( blocksStore ).getActiveBlockVariation( + firstBlock.name, + firstBlock.attributes + ); + }, [] ); + + return activeBlockVariation && activeBlockVariation.name === 'spotify' ? ( + <p>{ __( 'Spotify variation' ) }</p> + ) : ( + <p>{ __( 'Other variation' ) }</p> + ); }; ``` @@ -66,19 +66,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const buttonBlockStyles = useSelect( ( select ) => - select( blocksStore ).getBlockStyles( 'core/button' ), - [] - ); - - return ( - <ul> - { buttonBlockStyles && - buttonBlockStyles.map( ( style ) => ( - <li key={ style.name }>{ style.label }</li> - ) ) } - </ul> - ); + const buttonBlockStyles = useSelect( + ( select ) => select( blocksStore ).getBlockStyles( 'core/button' ), + [] + ); + + return ( + <ul> + { buttonBlockStyles && + buttonBlockStyles.map( ( style ) => ( + <li key={ style.name }>{ style.label }</li> + ) ) } + </ul> + ); }; ``` @@ -103,19 +103,20 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const paragraphBlockSupportValue = useSelect( ( select ) => - select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ), - [] - ); - - return ( - <p> - { sprintf( - __( 'core/paragraph supports.anchor value: %s' ), - paragraphBlockSupportValue - ) } - </p> - ); + const paragraphBlockSupportValue = useSelect( + ( select ) => + select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ), + [] + ); + + return ( + <p> + { sprintf( + __( 'core/paragraph supports.anchor value: %s' ), + paragraphBlockSupportValue + ) } + </p> + ); }; ``` @@ -141,26 +142,27 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const paragraphBlock = useSelect( ( select ) => - ( select ) => select( blocksStore ).getBlockType( 'core/paragraph' ), - [] - ); - - return ( - <ul> - { paragraphBlock && - Object.entries( paragraphBlock.supports ).map( - ( blockSupportsEntry ) => { - const [ propertyName, value ] = blockSupportsEntry; - return ( - <li - key={ propertyName } - >{ `${ propertyName } : ${ value }` }</li> - ); - } - ) } - </ul> - ); + const paragraphBlock = useSelect( + ( select ) => ( select ) => + select( blocksStore ).getBlockType( 'core/paragraph' ), + [] + ); + + return ( + <ul> + { paragraphBlock && + Object.entries( paragraphBlock.supports ).map( + ( blockSupportsEntry ) => { + const [ propertyName, value ] = blockSupportsEntry; + return ( + <li + key={ propertyName } + >{ `${ propertyName } : ${ value }` }</li> + ); + } + ) } + </ul> + ); }; ``` @@ -184,18 +186,18 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const blockTypes = useSelect( - ( select ) => select( blocksStore ).getBlockTypes(), - [] - ); - - return ( - <ul> - { blockTypes.map( ( block ) => ( - <li key={ block.name }>{ block.title }</li> - ) ) } - </ul> - ); + const blockTypes = useSelect( + ( select ) => select( blocksStore ).getBlockTypes(), + [] + ); + + return ( + <ul> + { blockTypes.map( ( block ) => ( + <li key={ block.name }>{ block.title }</li> + ) ) } + </ul> + ); }; ``` @@ -218,19 +220,20 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const socialLinkVariations = useSelect( ( select ) => - select( blocksStore ).getBlockVariations( 'core/social-link' ), - [] - ); - - return ( - <ul> - { socialLinkVariations && - socialLinkVariations.map( ( variation ) => ( - <li key={ variation.name }>{ variation.title }</li> - ) ) } - </ul> - ); + const socialLinkVariations = useSelect( + ( select ) => + select( blocksStore ).getBlockVariations( 'core/social-link' ), + [] + ); + + return ( + <ul> + { socialLinkVariations && + socialLinkVariations.map( ( variation ) => ( + <li key={ variation.name }>{ variation.title }</li> + ) ) } + </ul> + ); }; ``` @@ -252,21 +255,21 @@ _Usage_ ```js import { store as blocksStore } from '@wordpress/blocks'; -import { useSelect, } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const blockCategories = useSelect( ( select ) => - select( blocksStore ).getCategories(), - [] - ); - - return ( - <ul> - { blockCategories.map( ( category ) => ( - <li key={ category.slug }>{ category.title }</li> - ) ) } - </ul> - ); + const blockCategories = useSelect( + ( select ) => select( blocksStore ).getCategories(), + [] + ); + + return ( + <ul> + { blockCategories.map( ( category ) => ( + <li key={ category.slug }>{ category.title }</li> + ) ) } + </ul> + ); }; ``` @@ -289,19 +292,20 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const childBlockNames = useSelect( ( select ) => - select( blocksStore ).getChildBlockNames( 'core/navigation' ), - [] - ); - - return ( - <ul> - { childBlockNames && - childBlockNames.map( ( child ) => ( - <li key={ child }>{ child }</li> - ) ) } - </ul> - ); + const childBlockNames = useSelect( + ( select ) => + select( blocksStore ).getChildBlockNames( 'core/navigation' ), + [] + ); + + return ( + <ul> + { childBlockNames && + childBlockNames.map( ( child ) => ( + <li key={ child }>{ child }</li> + ) ) } + </ul> + ); }; ``` @@ -325,19 +329,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const blockCollections = useSelect( ( select ) => - select( blocksStore ).getCollections(), - [] - ); - - return ( - <ul> - { Object.values( blockCollections ).length > 0 && - Object.values( blockCollections ).map( ( collection ) => ( - <li key={ collection.title }>{ collection.title }</li> - ) ) } - </ul> - ); + const blockCollections = useSelect( + ( select ) => select( blocksStore ).getCollections(), + [] + ); + + return ( + <ul> + { Object.values( blockCollections ).length > 0 && + Object.values( blockCollections ).map( ( collection ) => ( + <li key={ collection.title }>{ collection.title }</li> + ) ) } + </ul> + ); }; ``` @@ -361,18 +365,18 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const defaultBlockName = useSelect( ( select ) => - select( blocksStore ).getDefaultBlockName(), - [] - ); - - return ( - defaultBlockName && ( - <p> - { sprintf( __( 'Default block name: %s' ), defaultBlockName ) } - </p> - ) - ); + const defaultBlockName = useSelect( + ( select ) => select( blocksStore ).getDefaultBlockName(), + [] + ); + + return ( + defaultBlockName && ( + <p> + { sprintf( __( 'Default block name: %s' ), defaultBlockName ) } + </p> + ) + ); }; ``` @@ -396,21 +400,22 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const defaultEmbedBlockVariation = useSelect( ( select ) => - select( blocksStore ).getDefaultBlockVariation( 'core/embed' ), - [] - ); - - return ( - defaultEmbedBlockVariation && ( - <p> - { sprintf( - __( 'core/embed default variation: %s' ), - defaultEmbedBlockVariation.title - ) } - </p> - ) - ); + const defaultEmbedBlockVariation = useSelect( + ( select ) => + select( blocksStore ).getDefaultBlockVariation( 'core/embed' ), + [] + ); + + return ( + defaultEmbedBlockVariation && ( + <p> + { sprintf( + __( 'core/embed default variation: %s' ), + defaultEmbedBlockVariation.title + ) } + </p> + ) + ); }; ``` @@ -436,21 +441,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const freeformFallbackBlockName = useSelect( ( select ) => - select( blocksStore ).getFreeformFallbackBlockName(), - [] - ); - - return ( - freeformFallbackBlockName && ( - <p> - { sprintf( __( - 'Freeform fallback block name: %s' ), - freeformFallbackBlockName - ) } - </p> - ) - ); + const freeformFallbackBlockName = useSelect( + ( select ) => select( blocksStore ).getFreeformFallbackBlockName(), + [] + ); + + return ( + freeformFallbackBlockName && ( + <p> + { sprintf( + __( 'Freeform fallback block name: %s' ), + freeformFallbackBlockName + ) } + </p> + ) + ); }; ``` @@ -474,21 +479,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const groupingBlockName = useSelect( ( select ) => - select( blocksStore ).getGroupingBlockName(), - [] - ); - - return ( - groupingBlockName && ( - <p> - { sprintf( - __( 'Default grouping block name: %s' ), - groupingBlockName - ) } - </p> - ) - ); + const groupingBlockName = useSelect( + ( select ) => select( blocksStore ).getGroupingBlockName(), + [] + ); + + return ( + groupingBlockName && ( + <p> + { sprintf( + __( 'Default grouping block name: %s' ), + groupingBlockName + ) } + </p> + ) + ); }; ``` @@ -512,21 +517,21 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const unregisteredFallbackBlockName = useSelect( ( select ) => - select( blocksStore ).getUnregisteredFallbackBlockName(), - [] - ); - - return ( - unregisteredFallbackBlockName && ( - <p> - { sprintf( __( - 'Unregistered fallback block name: %s' ), - unregisteredFallbackBlockName - ) } - </p> - ) - ); + const unregisteredFallbackBlockName = useSelect( + ( select ) => select( blocksStore ).getUnregisteredFallbackBlockName(), + [] + ); + + return ( + unregisteredFallbackBlockName && ( + <p> + { sprintf( + __( 'Unregistered fallback block name: %s' ), + unregisteredFallbackBlockName + ) } + </p> + ) + ); }; ``` @@ -589,19 +594,19 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const navigationBlockHasChildBlocks = useSelect( ( select ) => - select( blocksStore ).hasChildBlocks( 'core/navigation' ), - [] - ); - - return ( - <p> - { sprintf( - __( 'core/navigation has child blocks: %s' ), - navigationBlockHasChildBlocks - ) } - </p> - ); + const navigationBlockHasChildBlocks = useSelect( + ( select ) => select( blocksStore ).hasChildBlocks( 'core/navigation' ), + [] + ); + + return ( + <p> + { sprintf( + __( 'core/navigation has child blocks: %s' ), + navigationBlockHasChildBlocks + ) } + </p> + ); }; ``` @@ -626,21 +631,24 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const navigationBlockHasChildBlocksWithInserterSupport = useSelect( ( select ) => - select( blocksStore ).hasChildBlocksWithInserterSupport( - 'core/navigation' - ), - [] - ); - - return ( - <p> - { sprintf( - __( 'core/navigation has child blocks with inserter support: %s' ), - navigationBlockHasChildBlocksWithInserterSupport - ) } - </p> - ); + const navigationBlockHasChildBlocksWithInserterSupport = useSelect( + ( select ) => + select( blocksStore ).hasChildBlocksWithInserterSupport( + 'core/navigation' + ), + [] + ); + + return ( + <p> + { sprintf( + __( + 'core/navigation has child blocks with inserter support: %s' + ), + navigationBlockHasChildBlocksWithInserterSupport + ) } + </p> + ); }; ``` @@ -665,25 +673,25 @@ import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const termFound = useSelect( - ( select ) => - select( blocksStore ).isMatchingSearchTerm( - 'core/navigation', - 'theme' - ), - [] - ); - - return ( - <p> - { sprintf( - __( - 'Search term was found in the title, keywords, category or description in block.json: %s' - ), - termFound - ) } - </p> - ); + const termFound = useSelect( + ( select ) => + select( blocksStore ).isMatchingSearchTerm( + 'core/navigation', + 'theme' + ), + [] + ); + + return ( + <p> + { sprintf( + __( + 'Search term was found in the title, keywords, category or description in block.json: %s' + ), + termFound + ) } + </p> + ); }; ``` @@ -709,7 +717,6 @@ The actions in this package shouldn't be used directly. Instead, use the functio Signals that all block types should be computed again. It uses stored unprocessed block types and all the most recent list of registered filters. -It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late. - +It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late. <!-- END TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core-commands.md b/docs/reference-guides/data/data-core-commands.md index 36f800649e1fe3..9621de9d98c957 100644 --- a/docs/reference-guides/data/data-core-commands.md +++ b/docs/reference-guides/data/data-core-commands.md @@ -126,5 +126,4 @@ _Returns_ - `Object`: action. - <!-- END TOKEN(Autogenerated actions|../../../packages/commands/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-customize-widgets.md b/docs/reference-guides/data/data-core-customize-widgets.md index b2087b8bd35e51..8796f4cfea5ddf 100644 --- a/docs/reference-guides/data/data-core-customize-widgets.md +++ b/docs/reference-guides/data/data-core-customize-widgets.md @@ -18,14 +18,14 @@ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { isInserterOpened } = useSelect( - ( select ) => select( customizeWidgetsStore ), - [] - ); - - return isInserterOpened() - ? __( 'Inserter is open' ) - : __( 'Inserter is closed.' ); + const { isInserterOpened } = useSelect( + ( select ) => select( customizeWidgetsStore ), + [] + ); + + return isInserterOpened() + ? __( 'Inserter is open' ) + : __( 'Inserter is closed.' ); }; ``` @@ -57,19 +57,19 @@ import { useDispatch } from '@wordpress/data'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { setIsInserterOpened } = useDispatch( customizeWidgetsStore ); - const [ isOpen, setIsOpen ] = useState( false ); - - return ( - <Button - onClick={ () => { - setIsInserterOpened( ! isOpen ); - setIsOpen( ! isOpen ); - } } - > - { __( 'Open/close inserter' ) } - </Button> - ); + const { setIsInserterOpened } = useDispatch( customizeWidgetsStore ); + const [ isOpen, setIsOpen ] = useState( false ); + + return ( + <Button + onClick={ () => { + setIsInserterOpened( ! isOpen ); + setIsOpen( ! isOpen ); + } } + > + { __( 'Open/close inserter' ) } + </Button> + ); }; ``` @@ -83,5 +83,4 @@ _Returns_ - `Object`: Action object. - <!-- END TOKEN(Autogenerated actions|../../../packages/customize-widgets/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index d315678b7ba780..c316a9266af98a 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -138,13 +138,13 @@ _Returns_ ### isEditingTemplate -> **Deprecated** +> **Deprecated** Returns true if the template editing mode is enabled. ### isEditorPanelEnabled -> **Deprecated** +> **Deprecated** Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default. @@ -159,7 +159,7 @@ _Returns_ ### isEditorPanelOpened -> **Deprecated** +> **Deprecated** Returns true if the given panel is open, or false otherwise. Panels are closed by default. @@ -174,7 +174,7 @@ _Returns_ ### isEditorPanelRemoved -> **Deprecated** +> **Deprecated** Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default. @@ -214,7 +214,7 @@ _Returns_ ### isInserterOpened -> **Deprecated** +> **Deprecated** Returns true if the inserter is opened. @@ -306,7 +306,7 @@ _Returns_ ### isPublishSidebarOpened -> **Deprecated** +> **Deprecated** Returns true if the publish sidebar is opened. @@ -352,7 +352,7 @@ _Returns_ ### closePublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user closed the publish sidebar. @@ -412,7 +412,7 @@ _Returns_ ### openPublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user opened the publish sidebar. @@ -422,7 +422,7 @@ _Returns_ ### removeEditorPanel -> **Deprecated** +> **Deprecated** Returns an action object used to remove a panel from the editor. @@ -448,13 +448,13 @@ _Parameters_ ### setIsEditingTemplate -> **Deprecated** +> **Deprecated** Returns an action object used to switch to template editing. ### setIsInserterOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the inserter. @@ -464,7 +464,7 @@ _Parameters_ ### setIsListViewOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the list view. @@ -482,7 +482,7 @@ _Parameters_ ### switchEditorMode -> **Deprecated** +> **Deprecated** Triggers an action used to switch editor mode. @@ -492,13 +492,13 @@ _Parameters_ ### toggleDistractionFree -> **Deprecated** +> **Deprecated** Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars. ### toggleEditorPanelEnabled -> **Deprecated** +> **Deprecated** Returns an action object used to enable or disable a panel in the editor. @@ -512,7 +512,7 @@ _Returns_ ### toggleEditorPanelOpened -> **Deprecated** +> **Deprecated** Opens a closed panel and closes an open panel. @@ -542,7 +542,7 @@ _Parameters_ ### togglePublishSidebar -> **Deprecated** +> **Deprecated** Returns an action object used in signalling that the user toggles the publish sidebar. @@ -552,9 +552,8 @@ _Returns_ ### updatePreferredStyleVariations -> **Deprecated** +> **Deprecated** Returns an action object used in signaling that a style should be auto-applied when a block is created. - <!-- END TOKEN(Autogenerated actions|../../../packages/edit-post/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index e4161787dec809..a16c53861daada 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -20,11 +20,11 @@ _Returns_ ### getCurrentTemplateNavigationPanelSubMenu -> **Deprecated** +> **Deprecated** ### getCurrentTemplateTemplateParts -> **Deprecated** +> **Deprecated** Returns the template parts and their blocks for the current edited template. @@ -38,7 +38,7 @@ _Returns_ ### getEditedPostContext -> **Deprecated** +> **Deprecated** Returns the edited post's context object. @@ -52,7 +52,7 @@ _Returns_ ### getEditedPostId -> **Deprecated** +> **Deprecated** Returns the ID of the currently edited template or template part. @@ -66,7 +66,7 @@ _Returns_ ### getEditedPostType -> **Deprecated** +> **Deprecated** Returns the current edited post type (wp_template or wp_template_part). @@ -92,15 +92,15 @@ _Returns_ ### getHomeTemplateId -> **Deprecated** +> **Deprecated** ### getNavigationPanelActiveMenu -> **Deprecated** +> **Deprecated** ### getPage -> **Deprecated** +> **Deprecated** Returns the current page object. @@ -138,7 +138,7 @@ _Returns_ ### hasPageContentFocus -> **Deprecated** +> **Deprecated** Whether or not the editor allows only page content to be edited. @@ -148,7 +148,7 @@ _Returns_ ### isFeatureActive -> **Deprecated** +> **Deprecated** Returns whether the given feature is enabled or not. @@ -163,7 +163,7 @@ _Returns_ ### isInserterOpened -> **Deprecated** +> **Deprecated** Returns true if the inserter is opened. @@ -189,11 +189,11 @@ _Returns_ ### isNavigationOpened -> **Deprecated** +> **Deprecated** ### isPage -> **Deprecated** +> **Deprecated** Whether or not the editor has a page loaded into it. @@ -229,7 +229,7 @@ _Returns_ ### addTemplate -> **Deprecated** +> **Deprecated** Action that adds a new template and sets it as the current template. @@ -255,7 +255,7 @@ _Parameters_ ### openNavigationPanelToMenu -> **Deprecated** +> **Deprecated** Opens the navigation panel and sets its active menu at the same time. @@ -274,12 +274,12 @@ Reverts a template to its original theme-provided file. _Parameters_ - _template_ `Object`: The template to revert. -- _options_ `[Object]`: +- _options_ `[Object]`: - _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true. ### setEditedEntity -> **Deprecated** +> **Deprecated** Action that sets an edited entity. @@ -295,7 +295,7 @@ _Returns_ ### setEditedPostContext -> **Deprecated** +> **Deprecated** Set's the current block editor context. @@ -317,11 +317,11 @@ _Parameters_ ### setHomeTemplateId -> **Deprecated** +> **Deprecated** ### setIsInserterOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the inserter. @@ -331,7 +331,7 @@ _Parameters_ ### setIsListViewOpened -> **Deprecated** +> **Deprecated** Returns an action object used to open/close the list view. @@ -341,7 +341,7 @@ _Parameters_ ### setIsNavigationPanelOpened -> **Deprecated** +> **Deprecated** Sets whether the navigation panel should be open. @@ -355,7 +355,7 @@ _Parameters_ ### setNavigationMenu -> **Deprecated** +> **Deprecated** Action that sets a navigation menu. @@ -369,7 +369,7 @@ _Returns_ ### setNavigationPanelActiveMenu -> **Deprecated** +> **Deprecated** Action that sets the active navigation panel menu. @@ -379,7 +379,7 @@ _Returns_ ### setPage -> **Deprecated** +> **Deprecated** Resolves the template for a page and displays both. If no path is given, attempts to use the postId to generate a path like `?p=${ postId }`. @@ -397,7 +397,7 @@ _Returns_ ### setTemplatePart -> **Deprecated** +> **Deprecated** Action that sets a template part. @@ -411,7 +411,7 @@ _Returns_ ### switchEditorMode -> **Deprecated** +> **Deprecated** Triggers an action used to switch editor mode. @@ -421,7 +421,7 @@ _Parameters_ ### toggleDistractionFree -> **Deprecated** +> **Deprecated** Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars. @@ -445,5 +445,4 @@ _Returns_ - `Object`: Action object. - <!-- END TOKEN(Autogenerated actions|../../../packages/edit-site/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-edit-widgets.md b/docs/reference-guides/data/data-core-edit-widgets.md index cb49f194e914e2..94b4af5a9f176d 100644 --- a/docs/reference-guides/data/data-core-edit-widgets.md +++ b/docs/reference-guides/data/data-core-edit-widgets.md @@ -359,5 +359,4 @@ _Returns_ - `Object`: Action object - <!-- END TOKEN(Autogenerated actions|../../../packages/edit-widgets/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 371ae5389cbc61..3191956f8d99b0 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -293,20 +293,22 @@ Returns a single attribute of the post being edited, preferring the unsaved edit _Usage_ ```js - // Get specific media size based on the featured media ID - // Note: change sizes?.large for any registered size - const getFeaturedMediaUrl = useSelect( ( select ) => { - const getFeaturedMediaId = - select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); - const media = select( 'core' ).getEntityRecord( - 'postType', - 'attachment', - getFeaturedMediaId - ); - - return ( - media?.media_details?.sizes?.large?.source_url || media?.source_url || '' - ); +// Get specific media size based on the featured media ID +// Note: change sizes?.large for any registered size +const getFeaturedMediaUrl = useSelect( ( select ) => { + const getFeaturedMediaId = + select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); + const media = select( 'core' ).getEntityRecord( + 'postType', + 'attachment', + getFeaturedMediaId + ); + + return ( + media?.media_details?.sizes?.large?.source_url || + media?.source_url || + '' + ); }, [] ); ``` @@ -373,7 +375,7 @@ Return the current block list. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -397,7 +399,7 @@ Returns the current selection. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -411,7 +413,7 @@ Returns the current selection end. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -425,7 +427,7 @@ Returns the current selection start. _Parameters_ -- _state_ `Object`: +- _state_ `Object`: _Returns_ @@ -1188,7 +1190,7 @@ _Related_ ### autosave -Action that autosaves the current post. This includes server-side autosaving (default) and client-side (a.k.a. local) autosaving (e.g. on the Web, the post might be committed to Session Storage). +Action that autosaves the current post. This includes server-side autosaving (default) and client-side (a.k.a. local) autosaving (e.g. on the Web, the post might be committed to Session Storage). _Parameters_ @@ -1460,7 +1462,7 @@ Action for saving the current post in the editor. _Parameters_ -- _options_ `[Object]`: +- _options_ `[Object]`: ### selectBlock @@ -1474,7 +1476,7 @@ Action that changes the width of the editing canvas. _Parameters_ -- _deviceType_ `string`: +- _deviceType_ `string`: _Returns_ @@ -1552,7 +1554,7 @@ _Parameters_ ### setupEditorState -> **Deprecated** +> **Deprecated** Setup the editor state. @@ -1747,5 +1749,4 @@ _Returns_ - `Object`: Action object. - <!-- END TOKEN(Autogenerated actions|../../../packages/editor/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-keyboard-shortcuts.md b/docs/reference-guides/data/data-core-keyboard-shortcuts.md index 11ea0ba643e39c..33eea613d9a936 100644 --- a/docs/reference-guides/data/data-core-keyboard-shortcuts.md +++ b/docs/reference-guides/data/data-core-keyboard-shortcuts.md @@ -19,36 +19,36 @@ import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const allShortcutKeyCombinations = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getAllShortcutKeyCombinations( - 'core/editor/next-region' - ), - [] - ); - - return ( - allShortcutKeyCombinations.length > 0 && ( - <ul> - { allShortcutKeyCombinations.map( - ( { character, modifier }, index ) => ( - <li key={ index }> - { createInterpolateElement( - sprintf( - 'Character: <code>%s</code> / Modifier: <code>%s</code>', - character, - modifier - ), - { - code: <code />, - } - ) } - </li> - ) - ) } - </ul> - ) - ); + const allShortcutKeyCombinations = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getAllShortcutKeyCombinations( + 'core/editor/next-region' + ), + [] + ); + + return ( + allShortcutKeyCombinations.length > 0 && ( + <ul> + { allShortcutKeyCombinations.map( + ( { character, modifier }, index ) => ( + <li key={ index }> + { createInterpolateElement( + sprintf( + 'Character: <code>%s</code> / Modifier: <code>%s</code>', + character, + modifier + ), + { + code: <code />, + } + ) } + </li> + ) + ) } + </ul> + ) + ); }; ``` @@ -74,35 +74,35 @@ import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const allShortcutRawKeyCombinations = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations( - 'core/editor/next-region' - ), - [] - ); - - return ( - allShortcutRawKeyCombinations.length > 0 && ( - <ul> - { allShortcutRawKeyCombinations.map( - ( shortcutRawKeyCombination, index ) => ( - <li key={ index }> - { createInterpolateElement( - sprintf( - ' <code>%s</code>', - shortcutRawKeyCombination - ), - { - code: <code />, - } - ) } - </li> - ) - ) } - </ul> - ) - ); + const allShortcutRawKeyCombinations = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations( + 'core/editor/next-region' + ), + [] + ); + + return ( + allShortcutRawKeyCombinations.length > 0 && ( + <ul> + { allShortcutRawKeyCombinations.map( + ( shortcutRawKeyCombination, index ) => ( + <li key={ index }> + { createInterpolateElement( + sprintf( + ' <code>%s</code>', + shortcutRawKeyCombination + ), + { + code: <code />, + } + ) } + </li> + ) + ) } + </ul> + ) + ); }; ``` @@ -126,23 +126,21 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const categoryShortcuts = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getCategoryShortcuts( - 'block' - ), - [] - ); - - return ( - categoryShortcuts.length > 0 && ( - <ul> - { categoryShortcuts.map( ( categoryShortcut ) => ( - <li key={ categoryShortcut }>{ categoryShortcut }</li> - ) ) } - </ul> - ) - ); + const categoryShortcuts = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ), + [] + ); + + return ( + categoryShortcuts.length > 0 && ( + <ul> + { categoryShortcuts.map( ( categoryShortcut ) => ( + <li key={ categoryShortcut }>{ categoryShortcut }</li> + ) ) } + </ul> + ) + ); }; ``` @@ -167,34 +165,34 @@ import { useSelect } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const shortcutAliases = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutAliases( - 'core/editor/next-region' - ), - [] - ); - - return ( - shortcutAliases.length > 0 && ( - <ul> - { shortcutAliases.map( ( { character, modifier }, index ) => ( - <li key={ index }> - { createInterpolateElement( - sprintf( - 'Character: <code>%s</code> / Modifier: <code>%s</code>', - character, - modifier - ), - { - code: <code />, - } - ) } - </li> - ) ) } - </ul> - ) - ); + const shortcutAliases = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutAliases( + 'core/editor/next-region' + ), + [] + ); + + return ( + shortcutAliases.length > 0 && ( + <ul> + { shortcutAliases.map( ( { character, modifier }, index ) => ( + <li key={ index }> + { createInterpolateElement( + sprintf( + 'Character: <code>%s</code> / Modifier: <code>%s</code>', + character, + modifier + ), + { + code: <code />, + } + ) } + </li> + ) ) } + </ul> + ) + ); }; ``` @@ -218,17 +216,19 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const shortcutDescription = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ), - [] - ); - - return shortcutDescription ? ( - <div>{ shortcutDescription }</div> - ) : ( - <div>{ __( 'No description.' ) }</div> - ); + const shortcutDescription = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutDescription( + 'core/editor/next-region' + ), + [] + ); + + return shortcutDescription ? ( + <div>{ shortcutDescription }</div> + ) : ( + <div>{ __( 'No description.' ) }</div> + ); }; ``` @@ -253,28 +253,28 @@ import { useSelect } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const {character, modifier} = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'core/editor/next-region' - ), - [] - ); - - return ( - <div> - { createInterpolateElement( - sprintf( - 'Character: <code>%s</code> / Modifier: <code>%s</code>', - character, - modifier - ), - { - code: <code />, - } - ) } - </div> - ); + const { character, modifier } = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'core/editor/next-region' + ), + [] + ); + + return ( + <div> + { createInterpolateElement( + sprintf( + 'Character: <code>%s</code> / Modifier: <code>%s</code>', + character, + modifier + ), + { + code: <code />, + } + ) } + </div> + ); }; ``` @@ -299,24 +299,31 @@ import { useSelect } from '@wordpress/data'; import { sprintf } from '@wordpress/i18n'; const ExampleComponent = () => { - const {display, raw, ariaLabel} = useSelect( - ( select ) =>{ - return { - display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ), - raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ), - ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel') - } - }, - [] - ); - - return ( - <ul> - <li>{ sprintf( 'display string: %s', display ) }</li> - <li>{ sprintf( 'raw string: %s', raw ) }</li> - <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li> - </ul> - ); + const { display, raw, ariaLabel } = useSelect( ( select ) => { + return { + display: select( keyboardShortcutsStore ).getShortcutRepresentation( + 'core/editor/next-region' + ), + raw: select( keyboardShortcutsStore ).getShortcutRepresentation( + 'core/editor/next-region', + 'raw' + ), + ariaLabel: select( + keyboardShortcutsStore + ).getShortcutRepresentation( + 'core/editor/next-region', + 'ariaLabel' + ), + }; + }, [] ); + + return ( + <ul> + <li>{ sprintf( 'display string: %s', display ) }</li> + <li>{ sprintf( 'raw string: %s', raw ) }</li> + <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li> + </ul> + ); }; ``` @@ -349,33 +356,33 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const { registerShortcut } = useDispatch( keyboardShortcutsStore ); - - useEffect( () => { - registerShortcut( { - name: 'custom/my-custom-shortcut', - category: 'my-category', - description: __( 'My custom shortcut' ), - keyCombination: { - modifier: 'primary', - character: 'j', - }, - } ); - }, [] ); - - const shortcut = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'custom/my-custom-shortcut' - ), - [] - ); - - return shortcut ? ( - <p>{ __( 'Shortcut is registered.' ) }</p> - ) : ( - <p>{ __( 'Shortcut is not registered.' ) }</p> - ); + const { registerShortcut } = useDispatch( keyboardShortcutsStore ); + + useEffect( () => { + registerShortcut( { + name: 'custom/my-custom-shortcut', + category: 'my-category', + description: __( 'My custom shortcut' ), + keyCombination: { + modifier: 'primary', + character: 'j', + }, + } ); + }, [] ); + + const shortcut = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'custom/my-custom-shortcut' + ), + [] + ); + + return shortcut ? ( + <p>{ __( 'Shortcut is registered.' ) }</p> + ) : ( + <p>{ __( 'Shortcut is not registered.' ) }</p> + ); }; ``` @@ -400,25 +407,25 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const { unregisterShortcut } = useDispatch( keyboardShortcutsStore ); - - useEffect( () => { - unregisterShortcut( 'core/editor/next-region' ); - }, [] ); - - const shortcut = useSelect( - ( select ) => - select( keyboardShortcutsStore ).getShortcutKeyCombination( - 'core/editor/next-region' - ), - [] - ); - - return shortcut ? ( - <p>{ __( 'Shortcut is not unregistered.' ) }</p> - ) : ( - <p>{ __( 'Shortcut is unregistered.' ) }</p> - ); + const { unregisterShortcut } = useDispatch( keyboardShortcutsStore ); + + useEffect( () => { + unregisterShortcut( 'core/editor/next-region' ); + }, [] ); + + const shortcut = useSelect( + ( select ) => + select( keyboardShortcutsStore ).getShortcutKeyCombination( + 'core/editor/next-region' + ), + [] + ); + + return shortcut ? ( + <p>{ __( 'Shortcut is not unregistered.' ) }</p> + ) : ( + <p>{ __( 'Shortcut is unregistered.' ) }</p> + ); }; ``` @@ -430,5 +437,4 @@ _Returns_ - `Object`: action. - <!-- END TOKEN(Autogenerated actions|../../../packages/keyboard-shortcuts/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md index 111103944ad44e..b1a2316d19bb82 100644 --- a/docs/reference-guides/data/data-core-notices.md +++ b/docs/reference-guides/data/data-core-notices.md @@ -17,14 +17,16 @@ import { useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; const ExampleComponent = () => { - const notices = useSelect( ( select ) => select( noticesStore ).getNotices() ); - return ( - <ul> - { notices.map( ( notice ) => ( - <li key={ notice.ID }>{ notice.content }</li> - ) ) } - </ul> - ) + const notices = useSelect( ( select ) => + select( noticesStore ).getNotices() + ); + return ( + <ul> + { notices.map( ( notice ) => ( + <li key={ notice.ID }>{ notice.content }</li> + ) ) } + </ul> + ); }; ``` @@ -60,21 +62,21 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createErrorNotice } = useDispatch( noticesStore ); - return ( - <Button - onClick={ () => - createErrorNotice( __( 'An error occurred!' ), { - type: 'snackbar', - explicitDismiss: true, - } ) - } - > - { __( - 'Generate a snackbar error notice with explicit dismiss button.' - ) } - </Button> - ); + const { createErrorNotice } = useDispatch( noticesStore ); + return ( + <Button + onClick={ () => + createErrorNotice( __( 'An error occurred!' ), { + type: 'snackbar', + explicitDismiss: true, + } ) + } + > + { __( + 'Generate a snackbar error notice with explicit dismiss button.' + ) } + </Button> + ); }; ``` @@ -104,18 +106,18 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createInfoNotice } = useDispatch( noticesStore ); - return ( - <Button - onClick={ () => - createInfoNotice( __( 'Something happened!' ), { - isDismissible: false, - } ) - } - > - { __( 'Generate a notice that cannot be dismissed.' ) } - </Button> - ); + const { createInfoNotice } = useDispatch( noticesStore ); + return ( + <Button + onClick={ () => + createInfoNotice( __( 'Something happened!' ), { + isDismissible: false, + } ) + } + > + { __( 'Generate a notice that cannot be dismissed.' ) } + </Button> + ); }; ``` @@ -141,14 +143,14 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createNotice } = useDispatch( noticesStore ); - return ( - <Button - onClick={ () => createNotice( 'success', __( 'Notice message' ) ) } - > - { __( 'Generate a success notice!' ) } - </Button> - ); + const { createNotice } = useDispatch( noticesStore ); + return ( + <Button + onClick={ () => createNotice( 'success', __( 'Notice message' ) ) } + > + { __( 'Generate a success notice!' ) } + </Button> + ); }; ``` @@ -179,19 +181,19 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createSuccessNotice } = useDispatch( noticesStore ); - return ( - <Button - onClick={ () => - createSuccessNotice( __( 'Success!' ), { - type: 'snackbar', - icon: '🔥', - } ) - } - > - { __( 'Generate a snackbar success notice!' ) } - </Button> - ); + const { createSuccessNotice } = useDispatch( noticesStore ); + return ( + <Button + onClick={ () => + createSuccessNotice( __( 'Success!' ), { + type: 'snackbar', + icon: '🔥', + } ) + } + > + { __( 'Generate a snackbar success notice!' ) } + </Button> + ); }; ``` @@ -221,22 +223,23 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const { createWarningNotice, createInfoNotice } = useDispatch( noticesStore ); - return ( - <Button - onClick={ () => - createWarningNotice( __( 'Warning!' ), { - onDismiss: () => { - createInfoNotice( - __( 'The warning has been dismissed!' ) - ); - }, - } ) - } - > - { __( 'Generates a warning notice with onDismiss callback' ) } - </Button> - ); + const { createWarningNotice, createInfoNotice } = + useDispatch( noticesStore ); + return ( + <Button + onClick={ () => + createWarningNotice( __( 'Warning!' ), { + onDismiss: () => { + createInfoNotice( + __( 'The warning has been dismissed!' ) + ); + }, + } ) + } + > + { __( 'Generates a warning notice with onDismiss callback' ) } + </Button> + ); }; ``` @@ -273,19 +276,14 @@ export const ExampleComponent = () => { <li key={ notice.id }>{ notice.content }</li> ) ) } </ul> - <Button - onClick={ () => - removeAllNotices() - } - > + <Button onClick={ () => removeAllNotices() }> { __( 'Clear all notices', 'woo-gutenberg-products-block' ) } </Button> - <Button - onClick={ () => - removeAllNotices( 'snackbar' ) - } - > - { __( 'Clear all snackbar notices', 'woo-gutenberg-products-block' ) } + <Button onClick={ () => removeAllNotices( 'snackbar' ) }> + { __( + 'Clear all snackbar notices', + 'woo-gutenberg-products-block' + ) } </Button> </> ); @@ -314,27 +312,29 @@ import { store as noticesStore } from '@wordpress/notices'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - const notices = useSelect( ( select ) => select( noticesStore ).getNotices() ); - const { createWarningNotice, removeNotice } = useDispatch( noticesStore ); - - return ( - <> - <Button - onClick={ () => - createWarningNotice( __( 'Warning!' ), { - isDismissible: false, - } ) - } - > - { __( 'Generate a notice' ) } - </Button> - { notices.length > 0 && ( - <Button onClick={ () => removeNotice( notices[ 0 ].id ) }> - { __( 'Remove the notice' ) } - </Button> - ) } - </> - ); + const notices = useSelect( ( select ) => + select( noticesStore ).getNotices() + ); + const { createWarningNotice, removeNotice } = useDispatch( noticesStore ); + + return ( + <> + <Button + onClick={ () => + createWarningNotice( __( 'Warning!' ), { + isDismissible: false, + } ) + } + > + { __( 'Generate a notice' ) } + </Button> + { notices.length > 0 && ( + <Button onClick={ () => removeNotice( notices[ 0 ].id ) }> + { __( 'Remove the notice' ) } + </Button> + ) } + </> + ); }; ``` @@ -392,5 +392,4 @@ _Returns_ - `Extract< ReducerAction, { type: 'REMOVE_NOTICES'; } >`: Action object. - <!-- END TOKEN(Autogenerated actions|../../../packages/notices/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core-preferences.md b/docs/reference-guides/data/data-core-preferences.md index 42b3eba536959a..bace94f750b3f7 100644 --- a/docs/reference-guides/data/data-core-preferences.md +++ b/docs/reference-guides/data/data-core-preferences.md @@ -81,5 +81,4 @@ _Parameters_ - _scope_ `string`: The preference scope (e.g. core/edit-post). - _name_ `string`: The preference name. - <!-- END TOKEN(Autogenerated actions|../../../packages/preferences/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core-reusable-blocks.md b/docs/reference-guides/data/data-core-reusable-blocks.md index c229476ca9c4b0..728281d0e48f3b 100644 --- a/docs/reference-guides/data/data-core-reusable-blocks.md +++ b/docs/reference-guides/data/data-core-reusable-blocks.md @@ -19,5 +19,4 @@ Nothing to document. Nothing to document. - <!-- END TOKEN(Autogenerated actions|../../../packages/reusable-blocks/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-rich-text.md b/docs/reference-guides/data/data-core-rich-text.md index 431a972a67176b..8c213ee9c69ec4 100644 --- a/docs/reference-guides/data/data-core-rich-text.md +++ b/docs/reference-guides/data/data-core-rich-text.md @@ -60,15 +60,15 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypeForBareElement } = useSelect( - ( select ) => select( richTextStore ), - [] - ); + const { getFormatTypeForBareElement } = useSelect( + ( select ) => select( richTextStore ), + [] + ); - const format = getFormatTypeForBareElement( 'strong' ); + const format = getFormatTypeForBareElement( 'strong' ); - return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>; -} + return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>; +}; ``` _Parameters_ @@ -92,14 +92,14 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypeForClassName } = useSelect( - ( select ) => select( richTextStore ), - [] - ); + const { getFormatTypeForClassName } = useSelect( + ( select ) => select( richTextStore ), + [] + ); - const format = getFormatTypeForClassName( 'has-inline-color' ); + const format = getFormatTypeForClassName( 'has-inline-color' ); - return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>; + return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>; }; ``` @@ -124,22 +124,22 @@ import { store as richTextStore } from '@wordpress/rich-text'; import { useSelect } from '@wordpress/data'; const ExampleComponent = () => { - const { getFormatTypes } = useSelect( - ( select ) => select( richTextStore ), - [] - ); - - const availableFormats = getFormatTypes(); - - return availableFormats ? ( - <ul> - { availableFormats?.map( ( format ) => ( - <li>{ format.name }</li> - ) ) } - </ul> - ) : ( - __( 'No Formats available' ) - ); + const { getFormatTypes } = useSelect( + ( select ) => select( richTextStore ), + [] + ); + + const availableFormats = getFormatTypes(); + + return availableFormats ? ( + <ul> + { availableFormats?.map( ( format ) => ( + <li>{ format.name }</li> + ) ) } + </ul> + ) : ( + __( 'No Formats available' ) + ); }; ``` @@ -159,5 +159,4 @@ _Returns_ Nothing to document. - <!-- END TOKEN(Autogenerated actions|../../../packages/rich-text/src/store/actions.js) --> diff --git a/docs/reference-guides/data/data-core-viewport.md b/docs/reference-guides/data/data-core-viewport.md index b9dffcaafcec1c..4534f0c1b5494f 100644 --- a/docs/reference-guides/data/data-core-viewport.md +++ b/docs/reference-guides/data/data-core-viewport.md @@ -17,16 +17,16 @@ import { store as viewportStore } from '@wordpress/viewport'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; const ExampleComponent = () => { - const isMobile = useSelect( - ( select ) => select( viewportStore ).isViewportMatch( '< small' ), - [] - ); - - return isMobile ? ( - <div>{ __( 'Mobile' ) }</div> - ) : ( - <div>{ __( 'Not Mobile' ) }</div> - ); + const isMobile = useSelect( + ( select ) => select( viewportStore ).isViewportMatch( '< small' ), + [] + ); + + return isMobile ? ( + <div>{ __( 'Mobile' ) }</div> + ) : ( + <div>{ __( 'Not Mobile' ) }</div> + ); }; ``` @@ -49,5 +49,4 @@ The actions in this package shouldn't be used directly. Nothing to document. - <!-- END TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.ts) --> diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md index c959213f8cb1ec..a6d52f560f4c96 100644 --- a/docs/reference-guides/data/data-core.md +++ b/docs/reference-guides/data/data-core.md @@ -961,5 +961,4 @@ _Parameters_ Action triggered to undo the last edit to an entity record, if any. - <!-- END TOKEN(Autogenerated actions|../../../packages/core-data/src/actions.js) --> diff --git a/packages/a11y/README.md b/packages/a11y/README.md index 4871e11fab22a7..2c1874983ae0f5 100644 --- a/packages/a11y/README.md +++ b/packages/a11y/README.md @@ -41,7 +41,6 @@ _Parameters_ - _message_ `string`: The message to be announced by assistive technologies. - _ariaLive_ `['polite' | 'assertive']`: The politeness level for aria-live; default: 'polite'. - <!-- END TOKEN(Autogenerated API docs) --> ### Background diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index 31db2ab9cfac57..57b84dcc933e11 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -49,17 +49,17 @@ _Usage_ ```jsx <Breadcrumbs - items={ [ - { label: 'Home', to: '/' }, - { label: 'Settings', to: '/settings' }, - { label: 'General' }, - ] } + items={ [ + { label: 'Home', to: '/' }, + { label: 'Settings', to: '/settings' }, + { label: 'General' }, + ] } /> ``` _Parameters_ -- _props_ `BreadcrumbsProps`: +- _props_ `BreadcrumbsProps`: - _props.items_ `BreadcrumbsProps[ 'items' ]`: The breadcrumb items to display. ### getAdminThemeColors @@ -78,7 +78,6 @@ Undocumented declaration. Undocumented declaration. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/autop/README.md b/packages/autop/README.md index 86f8b9a1419886..e1e00d1bce5f0c 100644 --- a/packages/autop/README.md +++ b/packages/autop/README.md @@ -59,7 +59,6 @@ _Returns_ - `string`: The content with stripped paragraph tags. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/blob/README.md b/packages/blob/README.md index d0e550e0336f4d..d315cdab5e4a48 100644 --- a/packages/blob/README.md +++ b/packages/blob/README.md @@ -33,16 +33,16 @@ Downloads a file, e.g., a text or readable stream, in the browser. Appropriate f Example usage: ```js - const fileContent = JSON.stringify( - { - "title": "My Post", - }, - null, - 2 - ); - const filename = 'file.json'; - - downloadBlob( filename, fileContent, 'application/json' ); +const fileContent = JSON.stringify( + { + title: 'My Post', + }, + null, + 2 +); +const filename = 'file.json'; + +downloadBlob( filename, fileContent, 'application/json' ); ``` _Parameters_ @@ -95,7 +95,6 @@ _Parameters_ - _url_ `string`: The blob URL. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index eeacd9f1db7f87..abb44a7c3849ec 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -121,8 +121,8 @@ Returns an action object used to indicate install in progress. _Parameters_ -- _blockId_ `string`: -- _isInstalling_ `boolean`: +- _blockId_ `string`: +- _isInstalling_ `boolean`: _Returns_ @@ -244,7 +244,6 @@ _Returns_ - `boolean`: Whether a request is in progress for the blocks list. - <!-- END TOKEN(Autogenerated selectors|src/store/selectors.js) --> ## Contributing to this package diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6c9bd5385dcfa0..1b246207be21a4 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -140,16 +140,16 @@ _Usage_ ```jsx function MyBlockEditor() { - const [ blocks, updateBlocks ] = useState([]); - return ( - <BlockEditorProvider - value={ blocks } - onInput={ updateBlocks } - onChange={ persistBlocks } - > - <BlockCanvas height="400px" /> - </BlockEditorProvider> - ); + const [ blocks, updateBlocks ] = useState( [] ); + return ( + <BlockEditorProvider + value={ blocks } + onInput={ updateBlocks } + onChange={ persistBlocks } + > + <BlockCanvas height="400px" /> + </BlockEditorProvider> + ); } ``` @@ -178,7 +178,7 @@ _Related_ _Parameters_ -- _props_ `BlockContextProviderProps`: +- _props_ `BlockContextProviderProps`: ### BlockControls @@ -283,12 +283,15 @@ Renders the block's configured title as a string, or empty if the title cannot b _Usage_ ```jsx -<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 17 }/> +<BlockTitle + clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" + maximumLength={ 17 } +/> ``` _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.clientId_ `string`: Client ID of block. - _props.maximumLength_ `number|undefined`: The maximum length that the block title string may be before truncated. - _props.context_ `string|undefined`: The context to pass to `getBlockLabel`. @@ -341,7 +344,7 @@ _Related_ ### ButtonBlockerAppender -> **Deprecated** +> **Deprecated** Use `ButtonBlockAppender` instead. @@ -361,11 +364,11 @@ _Related_ ### CopyHandler -> **Deprecated** +> **Deprecated** _Parameters_ -- _props_ `Object`: +- _props_ `Object`: ### createCustomColorsHOC @@ -376,12 +379,15 @@ Use this higher-order component to work with a custom set of colors. _Usage_ ```jsx -const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ]; +const CUSTOM_COLORS = [ + { name: 'Red', slug: 'red', color: '#ff0000' }, + { name: 'Blue', slug: 'blue', color: '#0000ff' }, +]; const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS ); // ... export default compose( - withCustomColors( 'backgroundColor', 'borderColor' ), - MyColorfulComponent, + withCustomColors( 'backgroundColor', 'borderColor' ), + MyColorfulComponent ); ``` @@ -407,7 +413,7 @@ _Related_ _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.label_ `?string`: A label for the control. - _props.onChange_ `( value: string ) => void`: Called when the dimension value changes. - _props.value_ `string`: The current dimension value. @@ -476,18 +482,18 @@ _Usage_ ```js // Calculate fluid font-size value from a minimum and maximum value. const fontSize = getComputedFluidTypographyValue( { - minimumFontSize: '20px', - maximumFontSize: '45px' + minimumFontSize: '20px', + maximumFontSize: '45px', } ); // Calculate fluid font-size value from a single font size. const fontSize = getComputedFluidTypographyValue( { - fontSize: '30px', + fontSize: '30px', } ); ``` _Parameters_ -- _args_ `Object`: +- _args_ `Object`: - _args.minimumViewportWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. - _args.maximumViewportWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified. - _args.fontSize_ `[string|number]`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. @@ -527,7 +533,7 @@ _Returns_ ### getFontSize - Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. +Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. _Parameters_ @@ -592,7 +598,7 @@ _Returns_ ### getPxFromCssUnit -> **Deprecated** +> **Deprecated** This function was accidentally exposed for mobile/native usage. @@ -649,7 +655,7 @@ _Related_ _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.label_ `?string`: A label for the control. - _props.onChange_ `( value: string ) => void`: Called when the height changes. - _props.value_ `string`: The current height value. @@ -730,9 +736,9 @@ Observe input changes without controlling the value: ```jsx <LinkControl - value={ link } - onChange={ setLink } - onInputChange={ ( newValue ) => console.log( newValue ) } + value={ link } + onChange={ setLink } + onInputChange={ ( newValue ) => console.log( newValue ) } /> ``` @@ -742,10 +748,10 @@ Pre-populate the search input with a default value: ```jsx <LinkControl - value={ link } - onChange={ setLink } - inputValue="wordpress" - onInputChange={ ( newValue ) => console.log( newValue ) } + value={ link } + onChange={ setLink } + inputValue="wordpress" + onInputChange={ ( newValue ) => console.log( newValue ) } /> ``` @@ -779,7 +785,7 @@ _Related_ ### MultiSelectScrollIntoView -> **Deprecated** +> **Deprecated** Scrolls the multi block selection end into view if not in view already. This is important to do after selection by keyboard. @@ -812,23 +818,23 @@ import { registerBlockType } from '@wordpress/blocks'; import { PlainText } from '@wordpress/block-editor'; registerBlockType( 'my-plugin/example-block', { - // ... - - attributes: { - content: { - type: 'string', - }, - }, - - edit( { className, attributes, setAttributes } ) { - return ( - <PlainText - className={ className } - value={ attributes.content } - onChange={ ( content ) => setAttributes( { content } ) } - /> - ); - }, + // ... + + attributes: { + content: { + type: 'string', + }, + }, + + edit( { className, attributes, setAttributes } ) { + return ( + <PlainText + className={ className } + value={ attributes.content } + onChange={ ( content ) => setAttributes( { content } ) } + /> + ); + }, } ); ``` @@ -855,7 +861,7 @@ Wrap block content with this provider and provide the same `uniqueId` prop as us _Parameters_ -- _props_ `Object`: +- _props_ `Object`: - _props.uniqueId_ `*`: Any value that acts as a unique identifier for a block instance. - _props.blockName_ `string`: Optional block name. - _props.children_ `React.JSX.Element`: React children. @@ -992,23 +998,23 @@ It contains the following utils: _Usage_ ```js -import { useBlockBindingsUtils } from '@wordpress/block-editor' +import { useBlockBindingsUtils } from '@wordpress/block-editor'; const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils(); // Update url and alt attributes. updateBlockBindings( { - url: { - source: 'core/post-meta', - args: { - key: 'url_custom_field', - }, - }, - alt: { - source: 'core/post-meta', - args: { - key: 'text_custom_field', - }, - }, + url: { + source: 'core/post-meta', + args: { + key: 'url_custom_field', + }, + }, + alt: { + source: 'core/post-meta', + args: { + key: 'text_custom_field', + }, + }, } ); // Remove binding from url attribute. @@ -1064,8 +1070,8 @@ _Usage_ ```js function MyBlock( { attributes, setAttributes } ) { - useBlockEditingMode( 'disabled' ); - return <div { ...useBlockProps() }></div>; + useBlockEditingMode( 'disabled' ); + return <div { ...useBlockProps() }></div>; } ``` @@ -1102,20 +1108,15 @@ _Usage_ import { useBlockProps } from '@wordpress/block-editor'; export default function Edit() { - - const blockProps = useBlockProps( { - className: 'my-custom-class', - style: { - color: '#222222', - backgroundColor: '#eeeeee' - } - } ) - - return ( - <div { ...blockProps }> - - </div> - ) + const blockProps = useBlockProps( { + className: 'my-custom-class', + style: { + color: '#222222', + backgroundColor: '#eeeeee', + }, + } ); + + return <div { ...blockProps }></div>; } ``` @@ -1123,7 +1124,7 @@ _Parameters_ - _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. - _options_ `Object`: Options for internal use only. -- _options.\_\_unstableIsHtml_ `boolean`: +- _options.\_\_unstableIsHtml_ `boolean`: _Returns_ @@ -1135,7 +1136,7 @@ Keeps an up-to-date copy of the passed value and returns it. If value becomes fa _Parameters_ -- _value_ `any`: +- _value_ `any`: _Returns_ @@ -1241,8 +1242,8 @@ _Usage_ ```jsx export default compose( - withColors( 'backgroundColor', { textColor: 'color' } ), - MyColorfulComponent, + withColors( 'backgroundColor', { textColor: 'color' } ), + MyColorfulComponent ); ``` @@ -1275,7 +1276,6 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.children_ `Element`: Children to be rendered. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/block-library/README.md b/packages/block-library/README.md index 21607855cfb410..c83494b6c402bc 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -32,7 +32,6 @@ _Parameters_ - _blocks_ `Array`: An optional array of the core blocks being registered. - <!-- END TOKEN(Autogenerated API docs) --> ## Registering individual blocks diff --git a/packages/block-serialization-default-parser/README.md b/packages/block-serialization-default-parser/README.md index f662e2e21411a1..7fef607a29d8f6 100644 --- a/packages/block-serialization-default-parser/README.md +++ b/packages/block-serialization-default-parser/README.md @@ -26,21 +26,27 @@ Input post: ```html <!-- wp:columns {"columns":3} --> -<div class="wp-block-columns has-3-columns"><!-- wp:column --> -<div class="wp-block-column"><!-- wp:paragraph --> -<p>Left</p> -<!-- /wp:paragraph --></div> -<!-- /wp:column --> - -<!-- wp:column --> -<div class="wp-block-column"><!-- wp:paragraph --> -<p><strong>Middle</strong></p> -<!-- /wp:paragraph --></div> -<!-- /wp:column --> - -<!-- wp:column --> -<div class="wp-block-column"></div> -<!-- /wp:column --></div> +<div class="wp-block-columns has-3-columns"> + <!-- wp:column --> + <div class="wp-block-column"> + <!-- wp:paragraph --> + <p>Left</p> + <!-- /wp:paragraph --> + </div> + <!-- /wp:column --> + + <!-- wp:column --> + <div class="wp-block-column"> + <!-- wp:paragraph --> + <p><strong>Middle</strong></p> + <!-- /wp:paragraph --> + </div> + <!-- /wp:column --> + + <!-- wp:column --> + <div class="wp-block-column"></div> + <!-- /wp:column --> +</div> <!-- /wp:columns --> ``` @@ -49,49 +55,51 @@ Parsing code: ```js import { parse } from '@wordpress/block-serialization-default-parser'; -parse( post ) === [ - { - blockName: "core/columns", - attrs: { - columns: 3 - }, - innerBlocks: [ - { - blockName: "core/column", - attrs: null, - innerBlocks: [ - { - blockName: "core/paragraph", - attrs: null, - innerBlocks: [], - innerHTML: "\n<p>Left</p>\n" - } - ], - innerHTML: '\n<div class="wp-block-column"></div>\n' - }, - { - blockName: "core/column", - attrs: null, - innerBlocks: [ - { - blockName: "core/paragraph", - attrs: null, - innerBlocks: [], - innerHTML: "\n<p><strong>Middle</strong></p>\n" - } - ], - innerHTML: '\n<div class="wp-block-column"></div>\n' - }, - { - blockName: "core/column", - attrs: null, - innerBlocks: [], - innerHTML: '\n<div class="wp-block-column"></div>\n' - } - ], - innerHTML: '\n<div class="wp-block-columns has-3-columns">\n\n\n\n</div>\n' - } -]; +parse( post ) === + [ + { + blockName: 'core/columns', + attrs: { + columns: 3, + }, + innerBlocks: [ + { + blockName: 'core/column', + attrs: null, + innerBlocks: [ + { + blockName: 'core/paragraph', + attrs: null, + innerBlocks: [], + innerHTML: '\n<p>Left</p>\n', + }, + ], + innerHTML: '\n<div class="wp-block-column"></div>\n', + }, + { + blockName: 'core/column', + attrs: null, + innerBlocks: [ + { + blockName: 'core/paragraph', + attrs: null, + innerBlocks: [], + innerHTML: '\n<p><strong>Middle</strong></p>\n', + }, + ], + innerHTML: '\n<div class="wp-block-column"></div>\n', + }, + { + blockName: 'core/column', + attrs: null, + innerBlocks: [], + innerHTML: '\n<div class="wp-block-column"></div>\n', + }, + ], + innerHTML: + '\n<div class="wp-block-columns has-3-columns">\n\n\n\n</div>\n', + }, + ]; ``` _Parameters_ @@ -102,7 +110,6 @@ _Returns_ - `ParsedBlock[]`: A block-based representation of the input HTML. - <!-- END TOKEN(Autogenerated API docs) --> ## Theory diff --git a/packages/blocks/README.md b/packages/blocks/README.md index afadc486bf4065..470b4191ed4852 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -501,7 +501,7 @@ Converts an HTML string to known blocks. Strips everything else. _Parameters_ -- _options_ `{ HTML?: string; plainText?: string; mode?: 'AUTO' | 'INLINE' | 'BLOCKS'; tagName?: string; }`: +- _options_ `{ HTML?: string; plainText?: string; mode?: 'AUTO' | 'INLINE' | 'BLOCKS'; tagName?: string; }`: - _options.HTML_ `string`: The HTML to convert. - _options.plainText_ `string`: Plain text version. - _options.mode_ `'AUTO' | 'INLINE' | 'BLOCKS'`: Handle content as blocks or inline content. _ 'AUTO': Decide based on the content passed. _ 'INLINE': Always handle as inline content, and return string. \* 'BLOCKS': Always handle as blocks, and return array of blocks. @@ -544,15 +544,15 @@ _Usage_ ```js import { _x } from '@wordpress/i18n'; -import { registerBlockBindingsSource } from '@wordpress/blocks' +import { registerBlockBindingsSource } from '@wordpress/blocks'; registerBlockBindingsSource( { - name: 'plugin/my-custom-source', - label: _x( 'My Custom Source', 'block bindings source' ), - usesContext: [ 'postType' ], - getValues: getSourceValues, - setValues: updateMyCustomValuesInBatch, - canUserEditValue: () => true, + name: 'plugin/my-custom-source', + label: _x( 'My Custom Source', 'block bindings source' ), + usesContext: [ 'postType' ], + getValues: getSourceValues, + setValues: updateMyCustomValuesInBatch, + canUserEditValue: () => true, } ); ``` @@ -576,14 +576,14 @@ import { registerBlockCollection, registerBlockType } from '@wordpress/blocks'; // Register the collection. registerBlockCollection( 'my-collection', { - title: __( 'Custom Collection' ), + title: __( 'Custom Collection' ), } ); // Register a block in the same namespace to add it to the collection. registerBlockType( 'my-collection/block-name', { - title: __( 'My First Block' ), - edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, - save: () => <div>'Hello from the saved content!</div>, + title: __( 'My First Block' ), + edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, + save: () => <div>'Hello from the saved content!</div>, } ); ``` @@ -607,20 +607,19 @@ import { __ } from '@wordpress/i18n'; import { registerBlockStyle } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; - const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - registerBlockStyle( 'core/quote', { - name: 'fancy-quote', - label: __( 'Fancy Quote' ), - } ); - } } - > - { __( 'Add a new block style for core/quote' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + registerBlockStyle( 'core/quote', { + name: 'fancy-quote', + label: __( 'Fancy Quote' ), + } ); + } } + > + { __( 'Add a new block style for core/quote' ) } + </Button> + ); }; ``` @@ -639,12 +638,12 @@ _Usage_ ```js import { __ } from '@wordpress/i18n'; -import { registerBlockType } from '@wordpress/blocks' +import { registerBlockType } from '@wordpress/blocks'; registerBlockType( 'namespace/block-name', { - title: __( 'My First Block' ), - edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, - save: () => <div>Hello from the saved content!</div>, + title: __( 'My First Block' ), + edit: () => <div>{ __( 'Hello from the editor!' ) }</div>, + save: () => <div>Hello from the saved content!</div>, } ); ``` @@ -671,19 +670,19 @@ import { registerBlockVariation } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - registerBlockVariation( 'core/embed', { - name: 'custom', - title: __( 'My Custom Embed' ), - attributes: { providerNameSlug: 'custom' }, - } ); - } } - > - __( 'Add a custom variation for core/embed' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + registerBlockVariation( 'core/embed', { + name: 'custom', + title: __( 'My Custom Embed' ), + attributes: { providerNameSlug: 'custom' }, + } ); + } } + > + __( 'Add a custom variation for core/embed' ) } + </Button> + ); }; ``` @@ -751,25 +750,25 @@ import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - // Retrieve the list of current categories. - const blockCategories = useSelect( - ( select ) => select( blocksStore ).getCategories(), - [] - ); - - return ( - <Button - onClick={ () => { - // Add a custom category to the existing list. - setCategories( [ - ...blockCategories, - { title: 'Custom Category', slug: 'custom-category' }, - ] ); - } } - > - { __( 'Add a new custom block category' ) } - </Button> - ); + // Retrieve the list of current categories. + const blockCategories = useSelect( + ( select ) => select( blocksStore ).getCategories(), + [] + ); + + return ( + <Button + onClick={ () => { + // Add a custom category to the existing list. + setCategories( [ + ...blockCategories, + { title: 'Custom Category', slug: 'custom-category' }, + ] ); + } } + > + { __( 'Add a new custom block category' ) } + </Button> + ); }; ``` @@ -787,12 +786,11 @@ _Usage_ import { setDefaultBlockName } from '@wordpress/blocks'; const ExampleComponent = () => { - - return ( - <Button onClick={ () => setDefaultBlockName( 'core/heading' ) }> - { __( 'Set the default block to Heading' ) } - </Button> - ); + return ( + <Button onClick={ () => setDefaultBlockName( 'core/heading' ) }> + { __( 'Set the default block to Heading' ) } + </Button> + ); }; ``` @@ -820,12 +818,11 @@ _Usage_ import { setGroupingBlockName } from '@wordpress/blocks'; const ExampleComponent = () => { - - return ( - <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }> - { __( 'Wrap in columns' ) } - </Button> - ); + return ( + <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }> + { __( 'Wrap in columns' ) } + </Button> + ); }; ``` @@ -910,15 +907,15 @@ import { unregisterBlockStyle } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - unregisterBlockStyle( 'core/quote', 'plain' ); - } } - > - { __( 'Remove the "Plain" block style for core/quote' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + unregisterBlockStyle( 'core/quote', 'plain' ); + } } + > + { __( 'Remove the "Plain" block style for core/quote' ) } + </Button> + ); }; ``` @@ -938,15 +935,13 @@ import { __ } from '@wordpress/i18n'; import { unregisterBlockType } from '@wordpress/blocks'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => - unregisterBlockType( 'my-collection/block-name' ) - } - > - { __( 'Unregister my custom block.' ) } - </Button> - ); + return ( + <Button + onClick={ () => unregisterBlockType( 'my-collection/block-name' ) } + > + { __( 'Unregister my custom block.' ) } + </Button> + ); }; ``` @@ -970,15 +965,15 @@ import { unregisterBlockVariation } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - unregisterBlockVariation( 'core/embed', 'youtube' ); - } } - > - { __( 'Remove the YouTube variation from core/embed' ) } - </Button> - ); + return ( + <Button + onClick={ () => { + unregisterBlockVariation( 'core/embed', 'youtube' ); + } } + > + { __( 'Remove the YouTube variation from core/embed' ) } + </Button> + ); }; ``` @@ -999,15 +994,15 @@ import { updateCategory } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; const ExampleComponent = () => { - return ( - <Button - onClick={ () => { - updateCategory( 'text', { title: __( 'Written Word' ) } ); - } } - > - { __( 'Update Text category title' ) } - </Button> -) ; + return ( + <Button + onClick={ () => { + updateCategory( 'text', { title: __( 'Written Word' ) } ); + } } + > + { __( 'Update Text category title' ) } + </Button> + ); }; ``` @@ -1031,7 +1026,7 @@ _Returns_ ### withBlockContentContext -> **Deprecated** +> **Deprecated** A Higher Order Component used to inject BlockContent using context to the wrapped component. @@ -1043,7 +1038,6 @@ _Returns_ - `T`: The same component. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/commands/README.md b/packages/commands/README.md index 9a4f7cbe547d25..cb7a243007dc27 100644 --- a/packages/commands/README.md +++ b/packages/commands/README.md @@ -115,14 +115,14 @@ import { useCommand } from '@wordpress/commands'; import { plus } from '@wordpress/icons'; useCommand( { - name: 'myplugin/my-command-name', - label: __( 'Add new post' ), - icon: plus, - category: 'command', - callback: ({ close }) => { - document.location.href = 'post-new.php'; - close(); - }, + name: 'myplugin/my-command-name', + label: __( 'Add new post' ), + icon: plus, + category: 'command', + callback: ( { close } ) => { + document.location.href = 'post-new.php'; + close(); + }, } ); ``` @@ -146,57 +146,57 @@ import { store as coreStore } from '@wordpress/core-data'; import { useMemo } from '@wordpress/element'; function usePageSearchCommandLoader( { search } ) { - // Retrieve the pages for the "search" term. - const { records, isLoading } = useSelect( - ( select ) => { - const { getEntityRecords } = select( coreStore ); - const query = { - search: !! search ? search : undefined, - per_page: 10, - orderby: search ? 'relevance' : 'date', - }; - return { - records: getEntityRecords( 'postType', 'page', query ), - isLoading: ! select( coreStore ).hasFinishedResolution( - 'getEntityRecords', - [ 'postType', 'page', query ] - ), - }; - }, - [ search ] - ); - - // Create the commands. - const commands = useMemo( () => { - return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => { - return { - name: record.title?.rendered + ' ' + record.id, - label: record.title?.rendered - ? record.title?.rendered - : __( '(no title)' ), - icon: page, - category: 'edit', - callback: ( { close } ) => { - const args = { - p: '/page', - postId: record.id, - }; - document.location = addQueryArgs( 'site-editor.php', args ); - close(); - }, - }; - } ); - }, [ records ] ); - - return { - commands, - isLoading, - }; + // Retrieve the pages for the "search" term. + const { records, isLoading } = useSelect( + ( select ) => { + const { getEntityRecords } = select( coreStore ); + const query = { + search: !! search ? search : undefined, + per_page: 10, + orderby: search ? 'relevance' : 'date', + }; + return { + records: getEntityRecords( 'postType', 'page', query ), + isLoading: ! select( coreStore ).hasFinishedResolution( + 'getEntityRecords', + [ 'postType', 'page', query ] + ), + }; + }, + [ search ] + ); + + // Create the commands. + const commands = useMemo( () => { + return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => { + return { + name: record.title?.rendered + ' ' + record.id, + label: record.title?.rendered + ? record.title?.rendered + : __( '(no title)' ), + icon: page, + category: 'edit', + callback: ( { close } ) => { + const args = { + p: '/page', + postId: record.id, + }; + document.location = addQueryArgs( 'site-editor.php', args ); + close(); + }, + }; + } ); + }, [ records ] ); + + return { + commands, + isLoading, + }; } useCommandLoader( { - name: 'myplugin/page-search', - hook: usePageSearchCommandLoader, + name: 'myplugin/page-search', + hook: usePageSearchCommandLoader, } ); ``` @@ -215,26 +215,26 @@ import { useCommands } from '@wordpress/commands'; import { plus, pencil } from '@wordpress/icons'; useCommands( [ - { - name: 'myplugin/add-post', - label: __( 'Add new post' ), - icon: plus, - category: 'command', - callback: ({ close }) => { - document.location.href = 'post-new.php'; - close(); - }, - }, - { - name: 'myplugin/edit-posts', - label: __( 'Edit posts' ), - icon: pencil, - category: 'view', - callback: ({ close }) => { - document.location.href = 'edit.php'; - close(); - }, - }, + { + name: 'myplugin/add-post', + label: __( 'Add new post' ), + icon: plus, + category: 'command', + callback: ( { close } ) => { + document.location.href = 'post-new.php'; + close(); + }, + }, + { + name: 'myplugin/edit-posts', + label: __( 'Edit posts' ), + icon: pencil, + category: 'view', + callback: ( { close } ) => { + document.location.href = 'edit.php'; + close(); + }, + }, ] ); ``` @@ -242,7 +242,6 @@ _Parameters_ - _commands_ `import('../store/actions').WPCommandConfig[]`: Array of command configs. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/compose/README.md b/packages/compose/README.md index c2a2986eb94b23..24b9f4ce0cc4e5 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -218,7 +218,7 @@ _Returns_ ### useCopyOnClick -> **Deprecated** +> **Deprecated** Copies the text to the clipboard when the element is clicked. @@ -288,12 +288,15 @@ import { useDisabled } from '@wordpress/compose'; const DisabledExample = () => { const disabledRef = useDisabled(); -return ( - <div ref={ disabledRef }> - <a href="#">This link will have tabindex set to -1</a> - <input placeholder="This input will have the disabled attribute added to it." type="text" /> - </div> -); + return ( + <div ref={ disabledRef }> + <a href="#">This link will have tabindex set to -1</a> + <input + placeholder="This input will have the disabled attribute added to it." + type="text" + /> + </div> + ); }; ``` @@ -314,14 +317,14 @@ _Usage_ ```tsx function Component( props ) { - const onClick = useEvent( props.onClick ); - useEffect( () => { - onClick(); - // Won't trigger the effect again when props.onClick is updated. - }, [ onClick ] ); - // Won't re-render Button when props.onClick is updated (if `Button` is - // wrapped in `React.memo`). - return <Button onClick={ onClick } />; + const onClick = useEvent( props.onClick ); + useEffect( () => { + onClick(); + // Won't trigger the effect again when props.onClick is updated. + }, [ onClick ] ); + // Won't re-render Button when props.onClick is updated (if `Button` is + // wrapped in `React.memo`). + return <Button onClick={ onClick } />; } ``` @@ -347,14 +350,14 @@ _Usage_ import { useFocusOnMount } from '@wordpress/compose'; const WithFocusOnMount = () => { - const ref = useFocusOnMount() - return ( - <div ref={ ref }> - <Button /> - <Button /> - </div> - ); -} + const ref = useFocusOnMount(); + return ( + <div ref={ ref }> + <Button /> + <Button /> + </div> + ); +}; ``` _Parameters_ @@ -424,10 +427,10 @@ _Parameters_ - _shortcuts_ `string[] | string`: Keyboard Shortcuts. - _callback_ `( e: ExtendedKeyboardEvent, combo: string ) => void`: Shortcut callback. - _options_ `Partial< KeyboardShortcutConfig >`: Shortcut options. -- _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`: -- _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`: -- _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`: -- _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`: +- _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`: +- _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`: +- _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`: +- _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`: ### useMediaQuery @@ -611,10 +614,10 @@ Hook that performs a shallow comparison between the previous value of an object _Usage_ ```tsx -function MyComponent(props: Record<string, any>) { - useWarnOnChange(props); +function MyComponent( props: Record< string, any > ) { + useWarnOnChange( props ); - return "Something"; + return 'Something'; } ``` @@ -625,7 +628,7 @@ _Parameters_ ### withGlobalEvents -> **Deprecated** +> **Deprecated** Higher-order component creator which, given an object of DOM event types and values corresponding to a callback function name on the component, will create or update a window event handler to invoke the callback when an event occurs. On behalf of the consuming developer, the higher-order component manages unbinding when the component unmounts, and binding at most a single event handler for the entire application. @@ -659,7 +662,6 @@ _Returns_ - `any`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/core-commands/README.md b/packages/core-commands/README.md index ca30065d5edea7..687ef3dec5891a 100644 --- a/packages/core-commands/README.md +++ b/packages/core-commands/README.md @@ -28,7 +28,6 @@ _Parameters_ Undocumented declaration. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/core-data/README.md b/packages/core-data/README.md index 822cff4e8dd95f..255e1b0acc5ec8 100644 --- a/packages/core-data/README.md +++ b/packages/core-data/README.md @@ -1038,7 +1038,7 @@ _Parameters_ - _kind_ `string`: The entity kind. - _name_ `string`: The entity name. -- _options_ `Object`: +- _options_ `Object`: - _options.id_ `[string]`: An entity ID to use instead of the context-provided one. _Returns_ @@ -1079,13 +1079,13 @@ _Usage_ import { useEntityRecord } from '@wordpress/core-data'; function PageTitleDisplay( { id } ) { - const { record, isResolving } = useEntityRecord( 'postType', 'page', id ); + const { record, isResolving } = useEntityRecord( 'postType', 'page', id ); - if ( isResolving ) { - return 'Loading...'; - } + if ( isResolving ) { + return 'Loading...'; + } - return record.title; + return record.title; } // Rendered in the application: @@ -1109,9 +1109,12 @@ function PageRenameForm( { id } ) { const { createSuccessNotice, createErrorNotice } = useDispatch( noticeStore ); - const setTitle = useCallback( ( title ) => { - page.edit( { title } ); - }, [ page.edit ] ); + const setTitle = useCallback( + ( title ) => { + page.edit( { title } ); + }, + [ page.edit ] + ); if ( page.isResolving ) { return 'Loading...'; @@ -1174,19 +1177,19 @@ _Usage_ import { useEntityRecords } from '@wordpress/core-data'; function PageTitlesList() { - const { records, isResolving } = useEntityRecords( 'postType', 'page' ); - - if ( isResolving ) { - return 'Loading...'; - } - - return ( - <ul> - {records.map(( page ) => ( - <li>{ page.title }</li> - ))} - </ul> - ); + const { records, isResolving } = useEntityRecords( 'postType', 'page' ); + + if ( isResolving ) { + return 'Loading...'; + } + + return ( + <ul> + { records.map( ( page ) => ( + <li>{ page.title }</li> + ) ) } + </ul> + ); } // Rendered in the application: @@ -1222,18 +1225,21 @@ _Usage_ import { useResourcePermissions } from '@wordpress/core-data'; function PagesList() { - const { canCreate, isResolving } = useResourcePermissions( { kind: 'postType', name: 'page' } ); - - if ( isResolving ) { - return 'Loading ...'; - } - - return ( - <div> - {canCreate ? (<button>+ Create a new page</button>) : false} - // ... - </div> - ); + const { canCreate, isResolving } = useResourcePermissions( { + kind: 'postType', + name: 'page', + } ); + + if ( isResolving ) { + return 'Loading ...'; + } + + return ( + <div> + { canCreate ? <button>+ Create a new page</button> : false } + // ... + </div> + ); } // Rendered in the application: @@ -1243,26 +1249,26 @@ function PagesList() { ```js import { useResourcePermissions } from '@wordpress/core-data'; -function Page({ pageId }) { - const { - canCreate, - canUpdate, - canDelete, - isResolving - } = useResourcePermissions( { kind: 'postType', name: 'page', id: pageId } ); - - if ( isResolving ) { - return 'Loading ...'; - } - - return ( - <div> - {canCreate ? (<button>+ Create a new page</button>) : false} - {canUpdate ? (<button>Edit page</button>) : false} - {canDelete ? (<button>Delete page</button>) : false} - // ... - </div> - ); +function Page( { pageId } ) { + const { canCreate, canUpdate, canDelete, isResolving } = + useResourcePermissions( { + kind: 'postType', + name: 'page', + id: pageId, + } ); + + if ( isResolving ) { + return 'Loading ...'; + } + + return ( + <div> + { canCreate ? <button>+ Create a new page</button> : false } + { canUpdate ? <button>Edit page</button> : false } + { canDelete ? <button>Delete page</button> : false } + // ... + </div> + ); } // Rendered in the application: @@ -1290,7 +1296,6 @@ _Changelog_ Utility type that adds permissions to any record type. - <!-- END TOKEN(Autogenerated hooks|src/hooks/index.ts) --> ## Contributing to this package diff --git a/packages/data-controls/README.md b/packages/data-controls/README.md index dfc39735985b01..8adeebba1cf34c 100644 --- a/packages/data-controls/README.md +++ b/packages/data-controls/README.md @@ -60,11 +60,11 @@ import * as actions from './actions'; import * as resolvers from './resolvers'; registerStore( 'my-custom-store', { -reducer, -controls, -actions, -selectors, -resolvers, + reducer, + controls, + actions, + selectors, + resolvers, } ); ``` @@ -102,7 +102,6 @@ _Parameters_ - _selectorName_ `string`: The selector name. - _args_ `any[]`: Arguments passed without change to the `@wordpress/data` control. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/data/README.md b/packages/data/README.md index 68613b26616d83..152026972b896b 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -306,19 +306,19 @@ import { useSelect, AsyncModeProvider } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; function BlockCount() { - const count = useSelect( ( select ) => { - return select( blockEditorStore ).getBlockCount() - }, [] ); + const count = useSelect( ( select ) => { + return select( blockEditorStore ).getBlockCount(); + }, [] ); - return count; + return count; } function App() { - return ( - <AsyncModeProvider value={ true }> - <BlockCount /> - </AsyncModeProvider> - ); + return ( + <AsyncModeProvider value={ true }> + <BlockCount /> + </AsyncModeProvider> + ); } ``` @@ -341,18 +341,16 @@ _Usage_ import { combineReducers, createReduxStore, register } from '@wordpress/data'; const prices = ( state = {}, action ) => { - return action.type === 'SET_PRICE' ? - { - ...state, - [ action.item ]: action.price, - } : - state; + return action.type === 'SET_PRICE' + ? { + ...state, + [ action.item ]: action.price, + } + : state; }; const discountPercent = ( state = 0, action ) => { - return action.type === 'START_SALE' ? - action.discountPercent : - state; + return action.type === 'START_SALE' ? action.discountPercent : state; }; const store = createReduxStore( 'my-shop', { @@ -390,10 +388,10 @@ _Usage_ import { createReduxStore } from '@wordpress/data'; const store = createReduxStore( 'demo', { - reducer: ( state = 'OK' ) => state, - selectors: { - getValue: ( state ) => state, - }, + reducer: ( state = 'OK' ) => state, + selectors: { + getValue: ( state ) => state, + }, } ); ``` @@ -424,13 +422,13 @@ _Returns_ Creates a control function that takes additional curried argument with the `registry` object. While a regular control has signature ```js -( action ) => ( iteratorOrPromise ) +( action ) => iteratorOrPromise; ``` where the control works with the `action` that it's bound to, a registry control has signature: ```js -( registry ) => ( action ) => ( iteratorOrPromise ) +( registry ) => ( action ) => iteratorOrPromise; ``` A registry control is typically used to select data or dispatch an action to a registered store. @@ -450,13 +448,15 @@ _Returns_ Creates a selector function that takes additional curried argument with the registry `select` function. While a regular selector has signature ```js -( state, ...selectorArgs ) => ( result ) +( state, ...selectorArgs ) => result; ``` that allows to select data from the store's `state`, a registry selector has signature: ```js -( select ) => ( state, ...selectorArgs ) => ( result ) +( select ) => + ( state, ...selectorArgs ) => + result; ``` that supports also selecting from other registered stores. @@ -468,14 +468,18 @@ import { store as coreStore } from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => { - return select( editorStore ).getCurrentPostId(); + return select( editorStore ).getCurrentPostId(); } ); const getPostEdits = createRegistrySelector( ( select ) => ( state ) => { - // calling another registry selector just like any other function - const postType = getCurrentPostType( state ); - const postId = getCurrentPostId( state ); - return select( coreStore ).getEntityRecordEdits( 'postType', postType, postId ); + // calling another registry selector just like any other function + const postType = getCurrentPostType( state ); + const postId = getCurrentPostId( state ); + return select( coreStore ).getEntityRecordEdits( + 'postType', + postType, + postId + ); } ); ``` @@ -545,11 +549,11 @@ _Usage_ import { keyedReducer } from '@wordpress/data'; const itemsByContext = keyedReducer( 'context' )( ( state = [], action ) => { - switch ( action.type ) { - case 'ADD_ITEM': - return [ ...state, action.item ]; - } - return state; + switch ( action.type ) { + case 'ADD_ITEM': + return [ ...state, action.item ]; + } + return state; } ); ``` @@ -579,10 +583,10 @@ _Usage_ import { createReduxStore, register } from '@wordpress/data'; const store = createReduxStore( 'demo', { - reducer: ( state = 'OK' ) => state, - selectors: { - getValue: ( state ) => state, - }, + reducer: ( state = 'OK' ) => state, + selectors: { + getValue: ( state ) => state, + }, } ); register( store ); ``` @@ -664,7 +668,7 @@ _Usage_ import { resolveSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; -resolveSelect( myCustomStore ).getPrice( 'hammer' ).then(console.log) +resolveSelect( myCustomStore ).getPrice( 'hammer' ).then( console.log ); ``` _Parameters_ @@ -761,21 +765,25 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function Button( { onClick, children } ) { - return <button type="button" onClick={ onClick }>{ children }</button> + return ( + <button type="button" onClick={ onClick }> + { children } + </button> + ); } const SaleButton = ( { children } ) => { - const { stockNumber } = useSelect( - ( select ) => select( myCustomStore ).getStockNumber(), - [] - ); - const { startSale } = useDispatch( myCustomStore ); - const onClick = useCallback( () => { - const discountPercent = stockNumber > 50 ? 10: 20; - startSale( discountPercent ); - }, [ stockNumber ] ); - return <Button onClick={ onClick }>{ children }</Button> -} + const { stockNumber } = useSelect( + ( select ) => select( myCustomStore ).getStockNumber(), + [] + ); + const { startSale } = useDispatch( myCustomStore ); + const onClick = useCallback( () => { + const discountPercent = stockNumber > 50 ? 10 : 20; + startSale( discountPercent ); + }, [ stockNumber ] ); + return <Button onClick={ onClick }>{ children }</Button>; +}; // Rendered somewhere in the application: // @@ -803,24 +811,21 @@ Note: Generally speaking, `useRegistry` is a low level hook that in most cases w _Usage_ ```js -import { - RegistryProvider, - createRegistry, - useRegistry, -} from '@wordpress/data'; +import { RegistryProvider, createRegistry, useRegistry } from '@wordpress/data'; const registry = createRegistry( {} ); const SomeChildUsingRegistry = ( props ) => { - const registry = useRegistry(); - // ...logic implementing the registry in other react hooks. + const registry = useRegistry(); + // ...logic implementing the registry in other react hooks. }; - const ParentProvidingRegistry = ( props ) => { - return <RegistryProvider value={ registry }> - <SomeChildUsingRegistry { ...props } /> - </RegistryProvider> + return ( + <RegistryProvider value={ registry }> + <SomeChildUsingRegistry { ...props } /> + </RegistryProvider> + ); }; ``` @@ -841,13 +846,16 @@ import { useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function HammerPriceDisplay( { currency } ) { - const price = useSelect( ( select ) => { - return select( myCustomStore ).getPrice( 'hammer', currency ); - }, [ currency ] ); - return new Intl.NumberFormat( 'en-US', { - style: 'currency', - currency, - } ).format( price ); + const price = useSelect( + ( select ) => { + return select( myCustomStore ).getPrice( 'hammer', currency ); + }, + [ currency ] + ); + return new Intl.NumberFormat( 'en-US', { + style: 'currency', + currency, + } ).format( price ); } // Rendered in the application: @@ -872,12 +880,12 @@ import { useSelect } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; function Paste( { children } ) { - const { getSettings } = useSelect( myCustomStore ); - function onPaste() { - // Do something with the settings. - const settings = getSettings(); - } - return <div onPaste={ onPaste }>{ children }</div>; + const { getSettings } = useSelect( myCustomStore ); + function onPaste() { + // Do something with the settings. + const settings = getSettings(); + } + return <div onPaste={ onPaste }>{ children }</div>; } ``` @@ -911,21 +919,25 @@ _Usage_ ```jsx function Button( { onClick, children } ) { - return <button type="button" onClick={ onClick }>{ children }</button>; + return ( + <button type="button" onClick={ onClick }> + { children } + </button> + ); } import { withDispatch } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; const SaleButton = withDispatch( ( dispatch, ownProps ) => { - const { startSale } = dispatch( myCustomStore ); - const { discountPercent } = ownProps; - - return { - onClick() { - startSale( discountPercent ); - }, - }; + const { startSale } = dispatch( myCustomStore ); + const { discountPercent } = ownProps; + + return { + onClick() { + startSale( discountPercent ); + }, + }; } )( Button ); // Rendered in the application: @@ -948,22 +960,26 @@ only. ```jsx function Button( { onClick, children } ) { - return <button type="button" onClick={ onClick }>{ children }</button>; + return ( + <button type="button" onClick={ onClick }> + { children } + </button> + ); } import { withDispatch } from '@wordpress/data'; import { store as myCustomStore } from 'my-custom-store'; const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => { - // Stock number changes frequently. - const { getStockNumber } = select( myCustomStore ); - const { startSale } = dispatch( myCustomStore ); - return { - onClick() { - const discountPercent = getStockNumber() > 50 ? 10 : 20; - startSale( discountPercent ); - }, - }; + // Stock number changes frequently. + const { getStockNumber } = select( myCustomStore ); + const { startSale } = dispatch( myCustomStore ); + return { + onClick() { + const discountPercent = getStockNumber() > 50 ? 10 : 20; + startSale( discountPercent ); + }, + }; } )( Button ); // Rendered in the application: @@ -1031,7 +1047,6 @@ _Returns_ - Enhanced component with merged state data props. - <!-- END TOKEN(Autogenerated API docs) --> ### batch diff --git a/packages/date/README.md b/packages/date/README.md index 1a1661ad55b5c9..075fc3ee061ee0 100644 --- a/packages/date/README.md +++ b/packages/date/README.md @@ -148,7 +148,6 @@ _Parameters_ - _dateSettings_ `DateSettings`: Settings, including locale data. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/deprecated/README.md b/packages/deprecated/README.md index 14596cd4e05faa..ee09f023356b54 100644 --- a/packages/deprecated/README.md +++ b/packages/deprecated/README.md @@ -69,7 +69,6 @@ _Type_ - `Record< string, true >` - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/dom-ready/README.md b/packages/dom-ready/README.md index 2bce2cf882b782..f3f19529152870 100644 --- a/packages/dom-ready/README.md +++ b/packages/dom-ready/README.md @@ -25,7 +25,7 @@ _Usage_ ```js import domReady from '@wordpress/dom-ready'; -domReady( function() { +domReady( function () { //do something after DOM loads. } ); ``` @@ -34,7 +34,6 @@ _Parameters_ - _callback_ `VoidFunction`: A function to execute after the DOM is ready. - <!-- END TOKEN(Autogenerated API docs) --> ## Browser support diff --git a/packages/dom/README.md b/packages/dom/README.md index fd8c3b633a46c0..ae52281b688f0a 100644 --- a/packages/dom/README.md +++ b/packages/dom/README.md @@ -148,7 +148,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### isEmpty @@ -259,7 +259,7 @@ _Returns_ _Parameters_ -- _node_ `Node`: +- _node_ `Node`: _Returns_ @@ -321,7 +321,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### removeInvalidHTML @@ -348,7 +348,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### replaceTag @@ -385,7 +385,7 @@ _Parameters_ _Returns_ -- `void`: +- `void`: ### wrap @@ -396,7 +396,6 @@ _Parameters_ - _newNode_ `Element`: The node to insert. - _referenceNode_ `Element`: The node to wrap. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 9c3b0e7fe398c1..82b106daaf6b6c 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -103,7 +103,6 @@ _Type_ - `Object` - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/editor/README.md b/packages/editor/README.md index 32da46b1bfef60..c7c921e0ce383c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -347,11 +347,11 @@ _Usage_ ```jsx <EditorProvider - post={ post } - settings={ settings } - __unstableTemplate={ template } + post={ post } + settings={ settings } + __unstableTemplate={ template } > - { children } + { children } </EditorProvider> ``` @@ -549,20 +549,17 @@ _Usage_ var __ = wp.i18n.__; var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem; -function doOnClick(){ +function doOnClick() { // To be called when the user clicks the menu item. } function MyPluginBlockSettingsMenuItem() { - return React.createElement( - PluginBlockSettingsMenuItem, - { - allowedBlocks: [ 'core/paragraph' ], - icon: 'dashicon-name', - label: __( 'Menu item text' ), - onClick: doOnClick, - } - ); + return React.createElement( PluginBlockSettingsMenuItem, { + allowedBlocks: [ 'core/paragraph' ], + icon: 'dashicon-name', + label: __( 'Menu item text' ), + onClick: doOnClick, + } ); } ``` @@ -571,16 +568,17 @@ function MyPluginBlockSettingsMenuItem() { import { __ } from '@wordpress/i18n'; import { PluginBlockSettingsMenuItem } from '@wordpress/editor'; -const doOnClick = ( ) => { - // To be called when the user clicks the menu item. +const doOnClick = () => { + // To be called when the user clicks the menu item. }; const MyPluginBlockSettingsMenuItem = () => ( - <PluginBlockSettingsMenuItem + <PluginBlockSettingsMenuItem allowedBlocks={ [ 'core/paragraph' ] } - icon='dashicon-name' + icon="dashicon-name" label={ __( 'Menu item text' ) } - onClick={ doOnClick } /> + onClick={ doOnClick } + /> ); ``` @@ -624,7 +622,7 @@ function MyDocumentSettingPlugin() { } registerPlugin( 'my-document-setting-plugin', { - render: MyDocumentSettingPlugin + render: MyDocumentSettingPlugin, } ); ``` @@ -634,12 +632,16 @@ import { registerPlugin } from '@wordpress/plugins'; import { PluginDocumentSettingPanel } from '@wordpress/editor'; const MyDocumentSettingTest = () => ( - <PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel"> + <PluginDocumentSettingPanel + className="my-document-setting-plugin" + title="My Panel" + name="my-panel" + > <p>My Document Setting Panel</p> </PluginDocumentSettingPanel> ); - registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); +registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); ``` _Parameters_ @@ -694,10 +696,7 @@ function onButtonClick() { } const MyButtonMoreMenuItem = () => ( - <PluginMoreMenuItem - icon={ more } - onClick={ onButtonClick } - > + <PluginMoreMenuItem icon={ more } onClick={ onButtonClick }> { __( 'My button title' ) } </PluginMoreMenuItem> ); @@ -733,7 +732,7 @@ const MyPluginPostPublishPanel = () => ( title={ __( 'My panel title' ) } initialOpen={ true } > - { __( 'My panel content' ) } + { __( 'My panel content' ) } </PluginPostPublishPanel> ); ``` @@ -769,7 +768,7 @@ function MyPluginPostStatusInfo() { className: 'my-plugin-post-status-info', }, __( 'My post status info' ) - ) + ); } ``` @@ -779,9 +778,7 @@ import { __ } from '@wordpress/i18n'; import { PluginPostStatusInfo } from '@wordpress/editor'; const MyPluginPostStatusInfo = () => ( - <PluginPostStatusInfo - className="my-plugin-post-status-info" - > + <PluginPostStatusInfo className="my-plugin-post-status-info"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); @@ -814,7 +811,7 @@ const MyPluginPrePublishPanel = () => ( title={ __( 'My panel title' ) } initialOpen={ true } > - { __( 'My panel content' ) } + { __( 'My panel content' ) } </PluginPrePublishPanel> ); ``` @@ -844,19 +841,16 @@ import { PluginPreviewMenuItem } from '@wordpress/editor'; import { external } from '@wordpress/icons'; function onPreviewClick() { - // Handle preview action + // Handle preview action } const ExternalPreviewMenuItem = () => ( - <PluginPreviewMenuItem - icon={ external } - onClick={ onPreviewClick } - > - { __( 'Preview in new tab' ) } - </PluginPreviewMenuItem> + <PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }> + { __( 'Preview in new tab' ) } + </PluginPreviewMenuItem> ); registerPlugin( 'external-preview-menu-item', { - render: ExternalPreviewMenuItem, + render: ExternalPreviewMenuItem, } ); ``` @@ -878,7 +872,9 @@ _Returns_ Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar. It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`. If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API: ```js -wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' ); +wp.data + .dispatch( 'core/edit-post' ) + .openGeneralSidebar( 'plugin-name/sidebar-name' ); ``` _Related_ @@ -897,17 +893,13 @@ var moreIcon = React.createElement( 'svg' ); //... svg element. function MyPluginSidebar() { return el( - PluginSidebar, - { - name: 'my-sidebar', - title: 'My sidebar title', - icon: moreIcon, - }, - el( - PanelBody, - {}, - __( 'My sidebar content' ) - ) + PluginSidebar, + { + name: 'my-sidebar', + title: 'My sidebar title', + icon: moreIcon, + }, + el( PanelBody, {}, __( 'My sidebar content' ) ) ); } ``` @@ -920,14 +912,8 @@ import { PluginSidebar } from '@wordpress/editor'; import { more } from '@wordpress/icons'; const MyPluginSidebar = () => ( - <PluginSidebar - name="my-sidebar" - title="My sidebar title" - icon={ more } - > - <PanelBody> - { __( 'My sidebar content' ) } - </PanelBody> + <PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }> + <PanelBody>{ __( 'My sidebar content' ) }</PanelBody> </PluginSidebar> ); ``` @@ -962,7 +948,7 @@ function MySidebarMoreMenuItem() { icon: moreIcon, }, __( 'My sidebar title' ) - ) + ); } ``` @@ -973,10 +959,7 @@ import { PluginSidebarMoreMenuItem } from '@wordpress/editor'; import { more } from '@wordpress/icons'; const MySidebarMoreMenuItem = () => ( - <PluginSidebarMoreMenuItem - target="my-sidebar" - icon={ more } - > + <PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }> { __( 'My sidebar title' ) } </PluginSidebarMoreMenuItem> ); @@ -1427,7 +1410,7 @@ Renders the `PostTitle` component. _Parameters_ -- _\__ `Object`: Unused parameter. +- \_\_\_ `Object`: Unused parameter. - _forwardedRef_ `Element`: Forwarded ref for the component. _Returns_ @@ -1789,7 +1772,6 @@ _Returns_ > **Deprecated** since 5.3, use `wp.blockEditor.WritingFlow` instead. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/element/README.md b/packages/element/README.md index 084efe535ebd27..160bed534ef229 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -246,8 +246,10 @@ _Usage_ import { Platform } from '@wordpress/element'; const placeholderLabel = Platform.select( { - web: __( 'Drag images, upload new ones or select files from your library.' ), - default: __( 'Add media' ), + web: __( + 'Drag images, upload new ones or select files from your library.' + ), + default: __( 'Add media' ), } ); ``` @@ -268,7 +270,11 @@ _Usage_ ```jsx import { RawHTML } from '@wordpress/element'; -const Component = () => <RawHTML><h3>Hello world</h3></RawHTML>; +const Component = () => ( + <RawHTML> + <h3>Hello world</h3> + </RawHTML> +); // Edit: <div><h3>Hello world</h3></div> // save: <h3>Hello world</h3> ``` @@ -297,9 +303,9 @@ Serializes a React element to string. _Parameters_ -- _element_ `React.ReactNode`: -- _context_ `any`: -- _legacyContext_ `Record< string, any >`: +- _element_ `React.ReactNode`: +- _context_ `any`: +- _legacyContext_ `Record< string, any >`: ### startTransition @@ -430,7 +436,6 @@ _Related_ - <https://react.dev/reference/react/useTransition> - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/escape-html/README.md b/packages/escape-html/README.md index cdd41629367bb2..5ab0c7a993056a 100644 --- a/packages/escape-html/README.md +++ b/packages/escape-html/README.md @@ -127,7 +127,6 @@ _Returns_ - `boolean`: Whether attribute is valid. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/fields/README.md b/packages/fields/README.md index 5c050e9dbf9920..a5bcf9ef05d600 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -67,7 +67,7 @@ A React component that renders a modal for creating a template part. The modal d _Parameters_ - _props_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps`: The component props. -- _props.modalTitle_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`: +- _props.modalTitle_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`: ### dateField @@ -130,15 +130,12 @@ import { MediaEdit } from '@wordpress/fields'; import type { DataFormControlProps } from '@wordpress/dataviews'; const featuredImageField = { - id: 'featured_media', - type: 'media', - label: 'Featured Image', - Edit: (props: DataFormControlProps<MyPostType>) => ( - <MediaEdit - {...props} - allowedTypes={['image']} - /> - ), + id: 'featured_media', + type: 'media', + label: 'Featured Image', + Edit: ( props: DataFormControlProps< MyPostType > ) => ( + <MediaEdit { ...props } allowedTypes={ [ 'image' ] } /> + ), }; ``` @@ -305,7 +302,6 @@ View post action for BasePost. View post revisions action for Post. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/html-entities/README.md b/packages/html-entities/README.md index fba1930770e562..1133c7df156194 100644 --- a/packages/html-entities/README.md +++ b/packages/html-entities/README.md @@ -37,7 +37,6 @@ _Returns_ - `string`: The decoded string. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/i18n/README.md b/packages/i18n/README.md index 931838f9b419cd..5c94c0207b29a0 100644 --- a/packages/i18n/README.md +++ b/packages/i18n/README.md @@ -215,7 +215,6 @@ _Returns_ - `TransformedText<Text>`: Translated text. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/kebab-case/README.md b/packages/kebab-case/README.md index 95dc844d2fc846..9170e83f6eb7e7 100644 --- a/packages/kebab-case/README.md +++ b/packages/kebab-case/README.md @@ -51,7 +51,6 @@ _Returns_ - Kebab-cased string - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md index 4a8d29338494ee..ae2e0a4a1057c1 100644 --- a/packages/keyboard-shortcuts/README.md +++ b/packages/keyboard-shortcuts/README.md @@ -47,7 +47,6 @@ _Parameters_ - _options_ `UseShortcutOptions`: Shortcut options. - _options.isDisabled_ `UseShortcutOptions[ 'isDisabled' ]`: Whether to disable the shortcut. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/keycodes/README.md b/packages/keycodes/README.md index ccdf749d6b8a36..03dcd014aacfd5 100644 --- a/packages/keycodes/README.md +++ b/packages/keycodes/README.md @@ -58,20 +58,20 @@ _Usage_ ```js // Assuming macOS: -ariaKeyShortcut.primary( 'm' ) +ariaKeyShortcut.primary( 'm' ); // "Meta+M" -ariaKeyShortcut.primaryAlt( 'm' ) +ariaKeyShortcut.primaryAlt( 'm' ); // "Meta+Alt+M" // Assuming Windows: -ariaKeyShortcut.primary( 'm' ) +ariaKeyShortcut.primary( 'm' ); // "Control+M" -ariaKeyShortcut.primaryAlt( 'm' ) +ariaKeyShortcut.primaryAlt( 'm' ); // "Control+Alt+M" -ariaKeyShortcut.primaryShift( 'del' ) +ariaKeyShortcut.primaryShift( 'del' ); // "Control+Shift+Delete" ``` @@ -199,7 +199,7 @@ _Usage_ ```js // Assuming macOS: -rawShortcut.primary( 'm' ) +rawShortcut.primary( 'm' ); // "meta+m" ``` @@ -255,7 +255,6 @@ _Returns_ Keycode for ZERO key. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md index 5be1cf657fb370..7b3fc814169bdd 100644 --- a/packages/media-utils/README.md +++ b/packages/media-utils/README.md @@ -89,7 +89,6 @@ _Parameters_ - _file_ `File`: File object. - _wpAllowedMimeTypes_ `Record< string, string > | null`: List of allowed mime types and file extensions. - <!-- END TOKEN(Autogenerated API docs) --> ## Usage diff --git a/packages/plugins/README.md b/packages/plugins/README.md index b28e4e10137080..ac2434e51442f4 100644 --- a/packages/plugins/README.md +++ b/packages/plugins/README.md @@ -52,12 +52,7 @@ var el = React.createElement; var PluginArea = wp.plugins.PluginArea; function Layout() { - return el( - 'div', - { scope: 'my-page' }, - 'Content of the page', - PluginArea - ); + return el( 'div', { scope: 'my-page' }, 'Content of the page', PluginArea ); } ``` @@ -75,9 +70,9 @@ const Layout = () => ( _Parameters_ -- _props_ `{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }`: -- _props.scope_ `string`: -- _props.onError_ `( name: WPPlugin[ 'name' ], error: Error ) => void`: +- _props_ `{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }`: +- _props.scope_ `string`: +- _props.onError_ `( name: WPPlugin[ 'name' ], error: Error ) => void`: _Returns_ @@ -134,15 +129,10 @@ import { more } from '@wordpress/icons'; const Component = () => ( <> - <PluginSidebarMoreMenuItem - target="sidebar-name" - > + <PluginSidebarMoreMenuItem target="sidebar-name"> My Sidebar </PluginSidebarMoreMenuItem> - <PluginSidebar - name="sidebar-name" - title="My Sidebar" - > + <PluginSidebar name="sidebar-name" title="My Sidebar"> Content of the sidebar </PluginSidebar> </> @@ -214,7 +204,6 @@ _Returns_ - `Component`: Enhanced component with injected context as props. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/preferences-persistence/README.md b/packages/preferences-persistence/README.md index d545866d588de6..af8f6cc4b14388 100644 --- a/packages/preferences-persistence/README.md +++ b/packages/preferences-persistence/README.md @@ -38,7 +38,7 @@ Creates a persistence layer that stores data in WordPress user meta via the REST _Parameters_ -- _options_ `Object`: +- _options_ `Object`: - _options.preloadedData_ `?Object`: Any persisted preferences data that should be preloaded. When set, the persistence layer will avoid fetching data from the REST API. - _options.localStorageRestoreKey_ `?string`: The key to use for restoring the localStorage backup, used when the persistence layer calls `localStorage.getItem` or `localStorage.setItem`. - _options.requestDebounceMS_ `?number`: Debounce requests to the API so that they only occur at minimum every `requestDebounceMS` milliseconds, and don't swamp the server. Defaults to 2500ms. @@ -47,7 +47,6 @@ _Returns_ - `Object`: A persistence layer for WordPress user meta. - <!-- END TOKEN(Autogenerated Docs|src/index.js) --> ## Contributing to this package diff --git a/packages/preferences/README.md b/packages/preferences/README.md index a1ccb6130640eb..7eaedb5841f584 100644 --- a/packages/preferences/README.md +++ b/packages/preferences/README.md @@ -244,7 +244,6 @@ _Returns_ - `*`: Is the feature enabled? - <!-- END TOKEN(Autogenerated selectors|src/store/selectors.ts) --> ## Contributing to this package diff --git a/packages/priority-queue/README.md b/packages/priority-queue/README.md index af168b615e9913..7d38649cb20691 100644 --- a/packages/priority-queue/README.md +++ b/packages/priority-queue/README.md @@ -33,7 +33,7 @@ const ctx2 = {}; // For a given context in the queue, only the last callback is executed. queue.add( ctx1, () => console.log( 'This will be printed first' ) ); -queue.add( ctx2, () => console.log( 'This won\'t be printed' ) ); +queue.add( ctx2, () => console.log( "This won't be printed" ) ); queue.add( ctx2, () => console.log( 'This will be printed second' ) ); ``` @@ -41,7 +41,6 @@ _Returns_ - `WPPriorityQueue`: Queue object with `add`, `flush` and `reset` methods. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md index a2e3fc7a3850eb..172f770fde51ce 100644 --- a/packages/react-i18n/README.md +++ b/packages/react-i18n/README.md @@ -85,7 +85,6 @@ _Returns_ - `FunctionComponent< PropsAndI18n< P > >`: The wrapped component - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/redux-routine/README.md b/packages/redux-routine/README.md index 04af72469cd242..f10c09e5a966b9 100644 --- a/packages/redux-routine/README.md +++ b/packages/redux-routine/README.md @@ -71,7 +71,6 @@ _Returns_ - `Middleware`: Co-routine runtime - <!-- END TOKEN(Autogenerated API docs) --> ## Motivation diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index 094da416c02217..b7d89af2024db8 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -174,7 +174,7 @@ _Parameters_ - _$1.text_ `[string]`: Text to create value from. - _$1.html_ `[string]`: HTML to create value from. - _$1.range_ `[Range]`: Range to create value from. -- _$1.\_\_unstableIsEditableTree_ `[boolean]`: +- _$1.\_\_unstableIsEditableTree_ `[boolean]`: _Returns_ @@ -271,8 +271,8 @@ Check if the selection of a Rich Text value is collapsed or not. Collapsed means _Parameters_ - _props_ `RichTextValue`: The rich text value to check. -- _props.start_ `RichTextValue[ 'start' ]`: -- _props.end_ `RichTextValue[ 'end' ]`: +- _props.start_ `RichTextValue[ 'start' ]`: +- _props.end_ `RichTextValue[ 'end' ]`: _Returns_ @@ -369,12 +369,12 @@ The RichTextData class is used to instantiate a wrapper around rich text values, - Create an empty instance: `new RichTextData()`. - Create one from an HTML string: `RichTextData.fromHTMLString( - '<em>hello</em>' )`. +'<em>hello</em>' )`. - Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement( - document.querySelector( 'p' ) )`. +document.querySelector( 'p' ) )`. - Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`. - Create one from a rich text value: `new RichTextData( { text: '...', - formats: [ ... ] } )`. +formats: [ ... ] } )`. ### RichTextFormat @@ -404,7 +404,7 @@ Split a Rich Text value in two at the given `startIndex` and `endIndex`, or spli _Parameters_ -- _value_ `RichTextValue`: +- _value_ `RichTextValue`: - _string_ `[number|string]`: Start index, or string at which to split. _Returns_ @@ -483,7 +483,7 @@ This hook, to be used in a format type's Edit component, returns the active elem _Parameters_ - _$1_ `Object`: Named parameters. -- _$1.ref_ `RefObject<HTMLElement>`: React ref of the element containing the editable content. +- _$1.ref_ `RefObject<HTMLElement>`: React ref of the element containing the editable content. - _$1.value_ `RichTextValue`: Value to check for selection. - _$1.settings_ `WPFormat`: The format type's settings. @@ -491,7 +491,6 @@ _Returns_ - `Element|Range`: The active element or selection range. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/router/README.md b/packages/router/README.md index 3877838b22f1a2..9964c31dfe6a8a 100644 --- a/packages/router/README.md +++ b/packages/router/README.md @@ -20,7 +20,6 @@ _This package assumes that your code will run in an **ES2015+** environment. If Undocumented declaration. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index fb8439d649634e..78658c64184eb7 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -50,14 +50,14 @@ import { ServerSideRender } from '@wordpress/server-side-render'; // import { default as ServerSideRender } from '@wordpress/server-side-render'; function Example() { - return ( - <ServerSideRender - block="core/archives" - attributes={ { showPostCounts: true } } - urlQueryArgs={ { customArg: 'value' } } - className="custom-class" - /> - ); + return ( + <ServerSideRender + block="core/archives" + attributes={ { showPostCounts: true } } + urlQueryArgs={ { customArg: 'value' } } + className="custom-class" + /> + ); } ``` @@ -85,20 +85,20 @@ import { RawHTML } from '@wordpress/element'; import { useServerSideRender } from '@wordpress/server-side-render'; function MyServerSideRender( { attributes, block } ) { - const { content, status, error } = useServerSideRender( { - attributes, - block, - } ); + const { content, status, error } = useServerSideRender( { + attributes, + block, + } ); - if ( status === 'loading' ) { - return <div>Loading...</div>; - } + if ( status === 'loading' ) { + return <div>Loading...</div>; + } - if ( status === 'error' ) { - return <div>Error: { error }</div>; - } + if ( status === 'error' ) { + return <div>Error: { error }</div>; + } - return <RawHTML>{ content }</RawHTML>; + return <RawHTML>{ content }</RawHTML>; } ``` @@ -110,7 +110,6 @@ _Returns_ - `ServerSideRenderResponse`: The server-side render response object. - <!-- END TOKEN(Autogenerated API docs) --> ## Output diff --git a/packages/shortcode/README.md b/packages/shortcode/README.md index 859fbd47dfb4f7..4657736756b739 100644 --- a/packages/shortcode/README.md +++ b/packages/shortcode/README.md @@ -126,7 +126,6 @@ _Returns_ - `string`: String representation of the shortcode. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index d8a73e2d363712..14a964402f0c7b 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -320,7 +320,6 @@ A block or theme style object accepted by `compileCSS` and `getCSSRules`. Options for `compileCSS` and `getCSSRules`. - <!-- END TOKEN(Autogenerated API docs) --> ## Glossary diff --git a/packages/sync/README.md b/packages/sync/README.md index 34acb04d4fe3a8..df4651a6948ce9 100644 --- a/packages/sync/README.md +++ b/packages/sync/README.md @@ -62,7 +62,6 @@ externals: { The major version of Yjs that is bundled and exported by this package. This can be used by third-party code to ensure that they are targeting a compatible version of Yjs. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/undo-manager/README.md b/packages/undo-manager/README.md index df09f01ef13412..32a3f5e63d4a2d 100644 --- a/packages/undo-manager/README.md +++ b/packages/undo-manager/README.md @@ -22,7 +22,6 @@ _Returns_ - `UndoManager< T >`: Undo manager. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/upload-media/README.md b/packages/upload-media/README.md index ecf4fb122e8469..40ee3ed48dc3d6 100644 --- a/packages/upload-media/README.md +++ b/packages/upload-media/README.md @@ -48,7 +48,7 @@ Adds a new item to the upload queue. _Parameters_ -- _$0_ `AddItemsArgs`: +- _$0_ `AddItemsArgs`: - _$0.files_ `AddItemsArgs[ 'files' ]`: Files - _$0.onChange_ `[AddItemsArgs[ 'onChange' ]]`: Function called each time a file or a temporary representation of the file is available. - _$0.onSuccess_ `[AddItemsArgs[ 'onSuccess' ]]`: Function called after the file is uploaded. @@ -168,5 +168,4 @@ _Returns_ - `boolean`: Whether upload is currently in progress for the given attachment. - <!-- END TOKEN(Autogenerated selectors|src/store/selectors.ts) --> diff --git a/packages/url/README.md b/packages/url/README.md index 27cf84299a315e..86159b22c20343 100644 --- a/packages/url/README.md +++ b/packages/url/README.md @@ -45,13 +45,13 @@ _Usage_ ```js const queryString = buildQueryString( { - simple: 'is ok', - arrays: [ 'are', 'fine', 'too' ], - objects: { - evenNested: { - ok: 'yes', - }, - }, + simple: 'is ok', + arrays: [ 'are', 'fine', 'too' ], + objects: { + evenNested: { + ok: 'yes', + }, + }, } ); // "simple=is%20ok&arrays%5B0%5D=are&arrays%5B1%5D=fine&arrays%5B2%5D=too&objects%5BevenNested%5D%5Bok%5D=yes" ``` @@ -87,8 +87,13 @@ Returns a URL for display. _Usage_ ```js -const displayUrl = filterURLForDisplay( 'https://www.wordpress.org/gutenberg/' ); // wordpress.org/gutenberg -const imageUrl = filterURLForDisplay( 'https://www.wordpress.org/wp-content/uploads/img.png', 20 ); // …ent/uploads/img.png +const displayUrl = filterURLForDisplay( + 'https://www.wordpress.org/gutenberg/' +); // wordpress.org/gutenberg +const imageUrl = filterURLForDisplay( + 'https://www.wordpress.org/wp-content/uploads/img.png', + 20 +); // …ent/uploads/img.png ``` _Parameters_ @@ -145,8 +150,12 @@ Returns the fragment part of the URL. _Usage_ ```js -const fragment1 = getFragment( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // '#fragment' -const fragment2 = getFragment( 'https://wordpress.org#another-fragment?query=true' ); // '#another-fragment' +const fragment1 = getFragment( + 'http://localhost:8080/this/is/a/test?query=true#fragment' +); // '#fragment' +const fragment2 = getFragment( + 'https://wordpress.org#another-fragment?query=true' +); // '#another-fragment' ``` _Parameters_ @@ -183,8 +192,12 @@ Returns the path part and query string part of the URL. _Usage_ ```js -const pathAndQueryString1 = getPathAndQueryString( 'http://localhost:8080/this/is/a/test?query=true' ); // '/this/is/a/test?query=true' -const pathAndQueryString2 = getPathAndQueryString( 'https://wordpress.org/help/faq/' ); // '/help/faq' +const pathAndQueryString1 = getPathAndQueryString( + 'http://localhost:8080/this/is/a/test?query=true' +); // '/this/is/a/test?query=true' +const pathAndQueryString2 = getPathAndQueryString( + 'https://wordpress.org/help/faq/' +); // '/help/faq' ``` _Parameters_ @@ -259,7 +272,9 @@ Returns the query string part of the URL. _Usage_ ```js -const queryString = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' +const queryString = getQueryString( + 'http://localhost:8080/this/is/a/test?query=true#fragment' +); // 'query=true' ``` _Parameters_ @@ -314,7 +329,7 @@ Determines whether the given string looks like a phone number. _Usage_ ```js -const isPhoneNumber = isPhoneNumber('+1 (555) 123-4567'); // true +const isPhoneNumber = isPhoneNumber( '+1 (555) 123-4567' ); // true ``` _Parameters_ @@ -500,7 +515,11 @@ Removes arguments from the query string of the url _Usage_ ```js -const newUrl = removeQueryArgs( 'https://wordpress.org?foo=bar&bar=baz&baz=foobar', 'foo', 'bar' ); // https://wordpress.org?baz=foobar +const newUrl = removeQueryArgs( + 'https://wordpress.org?foo=bar&bar=baz&baz=foobar', + 'foo', + 'bar' +); // https://wordpress.org?baz=foobar ``` _Parameters_ @@ -542,7 +561,6 @@ _Returns_ - `string`: Decoded URI component if possible. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/video-conversion/README.md b/packages/video-conversion/README.md index 0fcda4dcf79a05..9fc538ee2ee0ff 100644 --- a/packages/video-conversion/README.md +++ b/packages/video-conversion/README.md @@ -73,5 +73,4 @@ Message prefix for "unsupported but graceful" outcomes (no WebCodecs, unsupporte The contract is the message _prefix_, not the Error type: the worker RPC layer (comctx) serializes a thrown error to its `message` string only - the Error subclass, `name`, and `stack` do not survive the worker boundary. - <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/viewport/README.md b/packages/viewport/README.md index af304489b9e61c..f24672eb697ab6 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -101,9 +101,7 @@ _Usage_ ```jsx function MyComponent( { isMobile } ) { - return ( - <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div> - ); + return <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>; } MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent ); @@ -117,7 +115,6 @@ _Returns_ - Higher-order component. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/views/README.md b/packages/views/README.md index b1770685e0264f..0d838df13694ff 100644 --- a/packages/views/README.md +++ b/packages/views/README.md @@ -62,7 +62,7 @@ A hook that retrieves the view configuration for a given entity from the core da _Parameters_ -- _params_ `Object`: +- _params_ `Object`: - _params.kind_ `string`: The kind of the entity. - _params.name_ `string`: The name of the entity. - _params.fields_ `[?(string|string[])]`: Subset of top-level config properties to request, as an array or a comma-separated string (mapped to the REST API `_fields` parameter). When omitted, the full config is requested. @@ -71,5 +71,4 @@ _Returns_ - `Object`: An object containing the `default_view`, `default_layouts`, `view_list`, and `form` configuration for the entity. - <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/vips/README.md b/packages/vips/README.md index d862c32ee5d328..04a819e980282e 100644 --- a/packages/vips/README.md +++ b/packages/vips/README.md @@ -226,5 +226,4 @@ _Returns_ - `Promise< { buffer: ArrayBuffer | ArrayBufferLike; width: number; height: number; } >`: Rotated file data plus the new dimensions. - <!-- END TOKEN(Autogenerated API docs) --> diff --git a/packages/warning/README.md b/packages/warning/README.md index 293f01b6e76284..cc082a7f214467 100644 --- a/packages/warning/README.md +++ b/packages/warning/README.md @@ -51,7 +51,6 @@ _Parameters_ - _message_ `string`: Message to show in the warning. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/packages/wordcount/README.md b/packages/wordcount/README.md index dffb837125a9b7..28b52eed91213e 100644 --- a/packages/wordcount/README.md +++ b/packages/wordcount/README.md @@ -24,7 +24,7 @@ _Usage_ ```ts import { count } from '@wordpress/wordcount'; -const numberOfWords = count( 'Words to count', 'words', {} ) +const numberOfWords = count( 'Words to count', 'words', {} ); ``` _Parameters_ @@ -37,7 +37,6 @@ _Returns_ - `number`: The word or character count. - <!-- END TOKEN(Autogenerated API docs) --> ## Contributing to this package diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index f76498f973e188..6756d12674039d 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -1478,6 +1478,31 @@ "count": 1 } }, + "packages/format-library/src/image/index.js": { + "react-hooks/refs": { + "count": 2 + } + }, + "packages/format-library/src/language/index.js": { + "react-hooks/refs": { + "count": 2 + } + }, + "packages/format-library/src/link/inline.js": { + "react-hooks/refs": { + "count": 2 + } + }, + "packages/format-library/src/math/index.js": { + "react-hooks/refs": { + "count": 2 + } + }, + "packages/format-library/src/text-color/inline.js": { + "react-hooks/refs": { + "count": 2 + } + }, "packages/global-styles-ui/src/block-preview-panel.tsx": { "@wordpress/use-recommended-components": { "count": 1 From a8e0a16f26ad12f13678a27c825da4cda787a870 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Wed, 19 Aug 2026 17:51:38 +0530 Subject: [PATCH 29/46] fix: Remove suppressions --- tools/eslint/suppressions.json | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index 6756d12674039d..f76498f973e188 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -1478,31 +1478,6 @@ "count": 1 } }, - "packages/format-library/src/image/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/language/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/link/inline.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/math/index.js": { - "react-hooks/refs": { - "count": 2 - } - }, - "packages/format-library/src/text-color/inline.js": { - "react-hooks/refs": { - "count": 2 - } - }, "packages/global-styles-ui/src/block-preview-panel.tsx": { "@wordpress/use-recommended-components": { "count": 1 From f0191cc8e4e1e559ffd4ee8ae6cd8f2772443647 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 12:51:31 +0530 Subject: [PATCH 30/46] fix: regression in split in inline:216 --- packages/format-library/src/link/inline.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index b69483add5141d..80ca7624742a32 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -197,13 +197,17 @@ function InlineLinkUI( { // `split`'s exported TS signature only declares (value, string), but at // runtime it forwards extra args to `splitAtSelection`, which supports the // (value, startIndex, endIndex) form used here. Cast to reflect that. + // The indices are deliberately `number | undefined`: `getFormatBoundary` + // returns `EMPTY_BOUNDARIES` when the format is not found, and + // `splitAtSelection` treats an undefined index as "split at the + // selection", which is not the same as splitting at index 0. const splitValue = ( split as ( value: RichTextValue, - startIndex?: number, - endIndex?: number + startIndex?: number | undefined, + endIndex?: number | undefined ) => RichTextValue[] | undefined - )( value, boundary.start ?? 0, boundary.start ?? 0 ); + )( value, boundary.start, boundary.start ); const [ valBefore, valAfter ] = splitValue ?? []; From 17848bd5fb351c0a08c874ff6070b0bf74b8dc9d Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 13:10:15 +0530 Subject: [PATCH 31/46] fix: split related regression bugs --- packages/format-library/src/image/index.tsx | 2 +- packages/format-library/src/link/index.tsx | 4 +- packages/format-library/src/link/inline.tsx | 25 ++-- .../format-library/src/text-color/index.tsx | 11 +- .../format-library/src/text-color/inline.tsx | 7 +- packages/format-library/src/types.ts | 9 ++ tools/eslint/suppressions.json | 108 +----------------- 7 files changed, 39 insertions(+), 127 deletions(-) diff --git a/packages/format-library/src/image/index.tsx b/packages/format-library/src/image/index.tsx index c9b7a694ed4768..4c6baa4231f58e 100644 --- a/packages/format-library/src/image/index.tsx +++ b/packages/format-library/src/image/index.tsx @@ -176,7 +176,7 @@ function Edit( { alt, width: imgWidth, }: { - id: string; + id: number; url: string; alt: string; width: number; diff --git a/packages/format-library/src/link/index.tsx b/packages/format-library/src/link/index.tsx index 6248dd17a3b368..fe86606c83b218 100644 --- a/packages/format-library/src/link/index.tsx +++ b/packages/format-library/src/link/index.tsx @@ -190,8 +190,8 @@ function Edit( { name="link" icon={ linkIcon } title={ isActive ? __( 'Link' ) : title } - onClick={ ( event: MouseEvent ) => { - addLink( event.currentTarget as HTMLElement ); + onClick={ ( event: React.MouseEvent< HTMLElement > ) => { + addLink( event.currentTarget ); } } isActive={ isActive || addingLink } shortcutType="primary" diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 80ca7624742a32..738b6b485a6e81 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -209,8 +209,6 @@ function InlineLinkUI( { ) => RichTextValue[] | undefined )( value, boundary.start, boundary.start ); - const [ valBefore, valAfter ] = splitValue ?? []; - // Update the original (full) RichTextValue replacing the // target text with the *new* RichTextValue containing: // 1. The new text content. @@ -223,13 +221,22 @@ function InlineLinkUI( { // Note original formats will be lost when applying this change. // That is expected behaviour. // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179. - const newValAfter = replace( - valAfter, - richTextText, - () => newValue - ); - - newValue = concat( valBefore, newValAfter ); + if ( splitValue ) { + const [ valBefore, valAfter ] = splitValue; + const newValAfter = replace( + valAfter, + richTextText, + () => newValue + ); + + newValue = concat( valBefore, newValAfter ); + } else { + // `split` returns `undefined` when the value carries no + // selection, leaving nothing to split on. Replace within the + // full value instead: the targeted-replacement protection + // above is unavailable, but the user's edit still applies. + newValue = replace( value, richTextText, () => newValue ); + } } onChange( newValue ); diff --git a/packages/format-library/src/text-color/index.tsx b/packages/format-library/src/text-color/index.tsx index c0db36018e9a71..b3c6ed12a2fc96 100644 --- a/packages/format-library/src/text-color/index.tsx +++ b/packages/format-library/src/text-color/index.tsx @@ -12,6 +12,7 @@ import { } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; import type { RichTextValue } from '@wordpress/rich-text'; +import type { ColorObject } from '../types'; import { default as InlineColorUI, getActiveColors } from './inline'; export const transparentValue = 'rgba(0, 0, 0, 0)'; @@ -19,7 +20,7 @@ export const transparentValue = 'rgba(0, 0, 0, 0)'; const name = 'core/text-color'; const title = __( 'Highlight' ); -const EMPTY_ARRAY: string[] = []; +const EMPTY_ARRAY: ColorObject[] = []; function getComputedStyleProperty( element: HTMLElement, property: string ) { const { ownerDocument } = element; @@ -39,10 +40,12 @@ function getComputedStyleProperty( element: HTMLElement, property: string ) { } function fillComputedColors( - element: HTMLElement, + element: HTMLElement | null, { color, backgroundColor }: { color?: string; backgroundColor?: string } ) { - if ( ! color && ! backgroundColor ) { + // `element` is the editable content element, which is null before the + // rich text mounts. There are no computed styles to read without it. + if ( ! element || ( ! color && ! backgroundColor ) ) { return; } @@ -76,7 +79,7 @@ function TextColorEdit( { const colorIndicatorStyle = useMemo( () => fillComputedColors( - contentRef.current as HTMLElement, + contentRef.current, getActiveColors( value, name, colors ) ), [ contentRef, value, colors ] diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index 9a0b894af6ae34..b795c1f2e42b4f 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -18,6 +18,7 @@ import { Popover } from '@wordpress/components'; import { Tabs } from '@wordpress/ui'; import { __ } from '@wordpress/i18n'; import type { RichTextValue } from '@wordpress/rich-text'; +import type { ColorObject } from '../types'; import { textColor as settings, transparentValue } from './index'; const TABS = [ @@ -25,12 +26,6 @@ const TABS = [ { name: 'backgroundColor', title: __( 'Background' ) }, ]; -type ColorObject = { - slug: string; - color: string; - name?: string; -}; - function parseCSS( css = '' ): { color?: string; backgroundColor?: string } { return css .split( ';' ) diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index e883b3ef92d5e7..20dba86d44b60f 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -60,6 +60,15 @@ export type { BaseFormatEditProps as UnknownEditProps, }; +/** + * A colour entry from the `color.palette` theme setting. + */ +export interface ColorObject { + slug: string; + color: string; + name?: string; +} + export interface EditImageProps { value: RichTextValue; onChange: ( value: RichTextValue ) => void; diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index a01816b8f898dd..8dd74b1d7eba8c 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -7435,67 +7435,19 @@ "count": 1 } }, - "packages/format-library/src/bold/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/code/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/image/index.jsx": { + "packages/format-library/src/image/index.tsx": { "@wordpress/use-recommended-components": { "count": 1 - }, - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/italic/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/keyboard/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 } }, - "packages/format-library/src/language/index.jsx": { + "packages/format-library/src/language/index.tsx": { "@wordpress/use-recommended-components": { "count": 1 - }, - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 } }, - "packages/format-library/src/link/css-classes-setting.jsx": { + "packages/format-library/src/link/css-classes-setting.tsx": { "@wordpress/use-recommended-components": { "count": 1 - }, - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/link/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/link/inline.jsx": { - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 } }, "packages/format-library/src/link/test/css-classes-setting.jsdom.test.jsx": { @@ -7503,60 +7455,6 @@ "count": 1 } }, - "packages/format-library/src/math/index.jsx": { - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/non-breaking-space/index.jsx": { - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/strikethrough/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/subscript/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/superscript/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/text-color/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/text-color/inline.jsx": { - "react-hooks/refs": { - "count": 2 - }, - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/underline/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, - "packages/format-library/src/unknown/index.jsx": { - "react/jsx-filename-extension": { - "count": 1 - } - }, "packages/global-styles-engine/src/lock-unlock.ts": { "no-restricted-imports": { "count": 1 From ba8d3c07cea3d80eb5da9ac725b058071344ac25 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 15:59:18 +0530 Subject: [PATCH 32/46] fix: docs in registerFormatType --- packages/rich-text/README.md | 2 +- packages/rich-text/src/register-format-type.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index b7d89af2024db8..b9af2eb6b70e6d 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -314,7 +314,7 @@ Registers a new format provided a unique name and an object defining its behavio _Parameters_ - _name_ `string`: Format name. -- _settings_ `WPFormat`: Format settings. +- _settings_ `Omit<WPFormat, 'name'>`: Format settings. `name` is injected from the first argument. _Returns_ diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js index a3cb541fb2501e..c1b60405d39d0f 100644 --- a/packages/rich-text/src/register-format-type.js +++ b/packages/rich-text/src/register-format-type.js @@ -3,7 +3,7 @@ import { store as richTextStore } from './store'; /** * @typedef {Object} WPFormat * - * @property {string} [name] A string identifying the format. Must be + * @property {string} name A string identifying the format. Must be * unique across all registered formats. * @property {string} tagName The HTML tag this format will wrap the * selection with. @@ -20,8 +20,9 @@ import { store as richTextStore } from './store'; * Registers a new format provided a unique name and an object defining its * behavior. * - * @param {string} name Format name. - * @param {WPFormat} settings Format settings. + * @param {string} name Format name. + * @param {Omit<WPFormat, 'name'>} settings Format settings. `name` is injected + * from the first argument. * * @return {WPFormat|undefined} The format, if it has been successfully * registered; otherwise `undefined`. From a4519e75ae0355499eb3150f84eb00b90d2e9459 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:04:06 +0530 Subject: [PATCH 33/46] fix: 5 alais prop types FormatEditProps --- packages/format-library/src/bold/index.tsx | 4 ++-- packages/format-library/src/code/index.tsx | 4 ++-- packages/format-library/src/italic/index.tsx | 4 ++-- .../format-library/src/keyboard/index.tsx | 4 ++-- .../src/strikethrough/index.tsx | 4 ++-- .../format-library/src/subscript/index.tsx | 4 ++-- .../format-library/src/superscript/index.tsx | 4 ++-- packages/format-library/src/types.ts | 22 +++++++++---------- .../format-library/src/underline/index.tsx | 10 ++------- packages/format-library/src/unknown/index.tsx | 4 ++-- 10 files changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/format-library/src/bold/index.tsx b/packages/format-library/src/bold/index.tsx index 1df2e41bce6122..ad18ec100e310d 100644 --- a/packages/format-library/src/bold/index.tsx +++ b/packages/format-library/src/bold/index.tsx @@ -7,7 +7,7 @@ import { // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { formatBold } from '@wordpress/icons'; -import type { BoldEditProps } from '../types'; +import type { FormatEditWithVisibilityProps } from '../types'; const name = 'core/bold'; const title = __( 'Bold' ); @@ -23,7 +23,7 @@ export const bold = { onChange, onFocus, isVisible = true, - }: BoldEditProps ): React.ReactNode { + }: FormatEditWithVisibilityProps ): React.ReactNode { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } diff --git a/packages/format-library/src/code/index.tsx b/packages/format-library/src/code/index.tsx index cd9c1d58eb0b37..01942a033d2fe3 100644 --- a/packages/format-library/src/code/index.tsx +++ b/packages/format-library/src/code/index.tsx @@ -7,7 +7,7 @@ import { } from '@wordpress/block-editor'; import { code as codeIcon } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; -import type { CodeEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/code'; const title = __( 'Inline code' ); @@ -59,7 +59,7 @@ export const code = { onChange, onFocus, isActive, - }: CodeEditProps ): React.ReactNode { + }: FormatEditProps ): React.ReactNode { function onClick() { onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); diff --git a/packages/format-library/src/italic/index.tsx b/packages/format-library/src/italic/index.tsx index 500afcaf9ca03a..e71ace3fe48fc8 100644 --- a/packages/format-library/src/italic/index.tsx +++ b/packages/format-library/src/italic/index.tsx @@ -7,7 +7,7 @@ import { // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { formatItalic } from '@wordpress/icons'; -import type { BoldEditProps } from '../types'; +import type { FormatEditWithVisibilityProps } from '../types'; const name = 'core/italic'; const title = __( 'Italic' ); @@ -23,7 +23,7 @@ export const italic = { onChange, onFocus, isVisible = true, - }: BoldEditProps ) { + }: FormatEditWithVisibilityProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } diff --git a/packages/format-library/src/keyboard/index.tsx b/packages/format-library/src/keyboard/index.tsx index fc0a60ecaf09db..ba267498231504 100644 --- a/packages/format-library/src/keyboard/index.tsx +++ b/packages/format-library/src/keyboard/index.tsx @@ -3,7 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; // @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { button } from '@wordpress/icons'; -import type { CodeEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/keyboard'; const title = __( 'Keyboard input' ); @@ -13,7 +13,7 @@ export const keyboard = { title, tagName: 'kbd', className: null, - edit( { isActive, value, onChange, onFocus }: CodeEditProps ) { + edit( { isActive, value, onChange, onFocus }: FormatEditProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } diff --git a/packages/format-library/src/strikethrough/index.tsx b/packages/format-library/src/strikethrough/index.tsx index 050cb465a4ca3d..216886d0892f80 100644 --- a/packages/format-library/src/strikethrough/index.tsx +++ b/packages/format-library/src/strikethrough/index.tsx @@ -6,7 +6,7 @@ import { // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; import { formatStrikethrough } from '@wordpress/icons'; -import type { StrikethroughEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/strikethrough'; const title = __( 'Strikethrough' ); @@ -16,7 +16,7 @@ export const strikethrough = { title, tagName: 's', className: null, - edit( { isActive, value, onChange, onFocus }: StrikethroughEditProps ) { + edit( { isActive, value, onChange, onFocus }: FormatEditProps ) { function onClick() { onChange( toggleFormat( value, { type: name, title } ) ); onFocus(); diff --git a/packages/format-library/src/subscript/index.tsx b/packages/format-library/src/subscript/index.tsx index 556fbc726b2e8f..caec7dd36dbdfd 100644 --- a/packages/format-library/src/subscript/index.tsx +++ b/packages/format-library/src/subscript/index.tsx @@ -3,7 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; // @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { subscript as subscriptIcon } from '@wordpress/icons'; -import type { SubscriptEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/subscript'; const title = __( 'Subscript' ); @@ -13,7 +13,7 @@ export const subscript = { title, tagName: 'sub', className: null, - edit( { isActive, value, onChange, onFocus }: SubscriptEditProps ) { + edit( { isActive, value, onChange, onFocus }: FormatEditProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } diff --git a/packages/format-library/src/superscript/index.tsx b/packages/format-library/src/superscript/index.tsx index 3aa5745b66709a..6ac45b24407a84 100644 --- a/packages/format-library/src/superscript/index.tsx +++ b/packages/format-library/src/superscript/index.tsx @@ -3,7 +3,7 @@ import { toggleFormat } from '@wordpress/rich-text'; // @ts-expect-error Block Editor not fully typed yet. import { RichTextToolbarButton } from '@wordpress/block-editor'; import { superscript as superscriptIcon } from '@wordpress/icons'; -import type { SuperscriptEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/superscript'; const title = __( 'Superscript' ); @@ -13,7 +13,7 @@ export const superscript = { title, tagName: 'sup', className: null, - edit( { isActive, value, onChange, onFocus }: SuperscriptEditProps ) { + edit( { isActive, value, onChange, onFocus }: FormatEditProps ) { function onToggle() { onChange( toggleFormat( value, { type: name, title } ) ); } diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 20dba86d44b60f..1bf34dddfb1649 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -1,20 +1,28 @@ import type { RichTextValue } from '@wordpress/rich-text'; -interface BaseFormatEditProps { +/** + * The props every format's `edit()` receives from the rich text toolbar. + */ +export interface FormatEditProps { isActive: boolean; value: RichTextValue; onChange: ( value: RichTextValue ) => void; onFocus: () => void; } -export type BoldEditProps = BaseFormatEditProps & { isVisible?: boolean }; +/** + * `FormatEditProps` for the formats whose toolbar button can be hidden. + */ +export interface FormatEditWithVisibilityProps extends FormatEditProps { + isVisible?: boolean; +} export interface NonBreakingSpacePopoverAnchorProps { contentRef: React.RefObject< HTMLElement >; } export type NonBreakingSpaceEditProps = Pick< - BaseFormatEditProps, + FormatEditProps, 'value' | 'onChange' > & NonBreakingSpacePopoverAnchorProps; @@ -52,14 +60,6 @@ export interface EditMathProps { contentRef: React.RefObject< HTMLElement >; } -export type { - BaseFormatEditProps as CodeEditProps, - BaseFormatEditProps as StrikethroughEditProps, - BaseFormatEditProps as SubscriptEditProps, - BaseFormatEditProps as SuperscriptEditProps, - BaseFormatEditProps as UnknownEditProps, -}; - /** * A colour entry from the `color.palette` theme setting. */ diff --git a/packages/format-library/src/underline/index.tsx b/packages/format-library/src/underline/index.tsx index f80a60823eeff6..845564a42323cd 100644 --- a/packages/format-library/src/underline/index.tsx +++ b/packages/format-library/src/underline/index.tsx @@ -5,7 +5,7 @@ import { __unstableRichTextInputEvent, // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; -import type { RichTextValue } from '@wordpress/rich-text'; +import type { FormatEditProps } from '../types'; const name = 'core/underline'; const title = __( 'Underline' ); @@ -18,13 +18,7 @@ export const underline = { attributes: { style: 'style', }, - edit( { - value, - onChange, - }: { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - } ) { + edit( { value, onChange }: FormatEditProps ) { const onToggle = () => { onChange( toggleFormat( value, { diff --git a/packages/format-library/src/unknown/index.tsx b/packages/format-library/src/unknown/index.tsx index ecc530df4393d5..14da35d381c77b 100644 --- a/packages/format-library/src/unknown/index.tsx +++ b/packages/format-library/src/unknown/index.tsx @@ -4,7 +4,7 @@ import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; import { help } from '@wordpress/icons'; import type { RichTextValue } from '@wordpress/rich-text'; -import type { UnknownEditProps } from '../types'; +import type { FormatEditProps } from '../types'; const name = 'core/unknown'; const title = __( 'Clear Unknown Formatting' ); @@ -25,7 +25,7 @@ export const unknown = { title, tagName: '*', className: null, - edit( { isActive, value, onChange, onFocus }: UnknownEditProps ) { + edit( { isActive, value, onChange, onFocus }: FormatEditProps ) { if ( ! isActive && ! selectionContainsUnknownFormats( value ) ) { return null; } From f142995588cc51cb1b1297659ad5c34fb8357c05 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:06:08 +0530 Subject: [PATCH 34/46] fix: Reference LinkFormatAttributes in types.ts --- packages/format-library/src/types.ts | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 1bf34dddfb1649..e22396455d3704 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -85,14 +85,7 @@ export interface EditImageProps { export interface EditLinkProps { isActive: boolean; - activeAttributes: { - url: string; - type?: string; - id?: string; - target?: string; - rel?: string; - class?: string; - }; + activeAttributes: LinkFormatAttributes; value: RichTextValue; onChange: ( newValue: RichTextValue ) => void; onFocus: () => void; @@ -117,14 +110,7 @@ export interface LinkValue { export interface InlineLinkUIProps { isActive: boolean; - activeAttributes: { - url: string; - type?: string; - id?: string; - target?: string; - rel?: string; - class?: string; - }; + activeAttributes: LinkFormatAttributes; value: RichTextValue; onChange: ( newValue: RichTextValue ) => void; onFocusOutside: () => void; @@ -163,6 +149,9 @@ export interface LinkFormatOptions { cssClasses?: string; } +/** + * The attributes carried on an active `core/link` format. + */ export type LinkFormatAttributes = { url: string; type?: string; From 4d6a260758b9be4daa18e233d8047cd45f0c1354 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:10:18 +0530 Subject: [PATCH 35/46] fix: EditImageProps type and use InlineImageUIProps --- packages/format-library/src/image/index.tsx | 6 +++--- packages/format-library/src/types.ts | 12 ++++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/format-library/src/image/index.tsx b/packages/format-library/src/image/index.tsx index 4c6baa4231f58e..9282ab297b4211 100644 --- a/packages/format-library/src/image/index.tsx +++ b/packages/format-library/src/image/index.tsx @@ -15,7 +15,7 @@ import { MediaUploadCheck, // @ts-expect-error Block Editor not fully typed yet. } from '@wordpress/block-editor'; -import type { EditImageProps } from '../types'; +import type { EditImageProps, InlineImageUIProps } from '../types'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const name = 'core/image'; @@ -61,7 +61,7 @@ function InlineUI( { onChange, activeObjectAttributes, contentRef, -}: EditImageProps ) { +}: InlineImageUIProps ) { const style = activeObjectAttributes?.style; const alt = activeObjectAttributes?.alt; @@ -195,7 +195,7 @@ function Edit( { }, } ) ); - onFocus?.(); + onFocus(); } } render={ ( { open }: { open: () => void } ) => ( <RichTextToolbarButton diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index e22396455d3704..0e22ae2f7d71f1 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -72,8 +72,8 @@ export interface ColorObject { export interface EditImageProps { value: RichTextValue; onChange: ( value: RichTextValue ) => void; - onFocus?: () => void; - isObjectActive?: boolean; + onFocus: () => void; + isObjectActive: boolean; activeObjectAttributes: { style?: string; alt?: string | undefined; @@ -83,6 +83,14 @@ export interface EditImageProps { contentRef: React.RefObject< HTMLElement >; } +/** + * The subset of `EditImageProps` the inline image popover actually reads. + */ +export type InlineImageUIProps = Pick< + EditImageProps, + 'value' | 'onChange' | 'activeObjectAttributes' | 'contentRef' +>; + export interface EditLinkProps { isActive: boolean; activeAttributes: LinkFormatAttributes; From 1e0c73e66c76fe267402b0d8e39d2d26dc185411 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:13:22 +0530 Subject: [PATCH 36/46] fix: types in partialRight, removed it and sorted walkToStart and walkToEnd --- packages/format-library/src/link/utils.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/format-library/src/link/utils.ts b/packages/format-library/src/link/utils.ts index 1011dd0ec0c8f1..401a7bd72c1353 100644 --- a/packages/format-library/src/link/utils.ts +++ b/packages/format-library/src/link/utils.ts @@ -257,10 +257,6 @@ type WalkFn = ( formatIndex: number ) => ReturnType< typeof walkToBoundary >; -const partialRight = - ( fn: ( ...args: any[] ) => any, ...partialArgs: any[] ) => - ( ...args: any[] ) => - fn( ...args, ...partialArgs ); - -const walkToStart: WalkFn = partialRight( walkToBoundary, 'backwards' ); -const walkToEnd: WalkFn = partialRight( walkToBoundary, 'forwards' ); +const walkToStart: WalkFn = ( ...args ) => + walkToBoundary( ...args, 'backwards' ); +const walkToEnd: WalkFn = ( ...args ) => walkToBoundary( ...args, 'forwards' ); From 51d6fe4aa2a41990601ab98e715da10429b982d7 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:17:15 +0530 Subject: [PATCH 37/46] fix: Restore the doc comment for createLinkFormat function and LinkFormatOptions has correct comments --- packages/format-library/src/link/utils.ts | 12 ++++++++++++ packages/format-library/src/types.ts | 14 +++++++------- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/format-library/src/link/utils.ts b/packages/format-library/src/link/utils.ts index 401a7bd72c1353..2ad93ad0327a43 100644 --- a/packages/format-library/src/link/utils.ts +++ b/packages/format-library/src/link/utils.ts @@ -75,6 +75,18 @@ export function isValidHref( href: string ): boolean { return true; } +/** + * Generates the format object that will be applied to the link text. + * + * @param options + * @param options.url The href of the link. + * @param options.type The type of the link. + * @param options.id The ID of the link. + * @param options.opensInNewWindow Whether this link will open in a new window. + * @param options.nofollow Whether this link is marked as no follow relationship. + * @param options.cssClasses The CSS classes to apply to the link. + * @return The final format object. + */ export function createLinkFormat( { url, type, diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 0e22ae2f7d71f1..41fd98c65176a2 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -128,30 +128,30 @@ export interface InlineLinkUIProps { } /** - * Generates the format object that will be applied to the link text. + * The options accepted by `createLinkFormat`. */ export interface LinkFormatOptions { - /* + /** * The href of the link. */ url: string; - /* + /** * The type of the link. */ type?: string; - /* + /** * The ID of the link. */ id?: string; - /* + /** * Whether this link will open in a new window. */ opensInNewWindow?: boolean; - /* + /** * Whether this link is marked as no follow relationship. */ nofollow?: boolean; - /* + /** * The CSS classes to apply to the link. */ cssClasses?: string; From 144e82445d8c828905a447f5be3f87e24e085cd8 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:22:52 +0530 Subject: [PATCH 38/46] fix: Add CSSClassesSettingProps type and remove noised comments in CSSClassesSettingComponent --- .../src/link/css-classes-setting.tsx | 20 +++++++------------ packages/format-library/src/types.ts | 9 +++++++++ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/format-library/src/link/css-classes-setting.tsx b/packages/format-library/src/link/css-classes-setting.tsx index 3f169dbecfe064..20a43819ecf435 100644 --- a/packages/format-library/src/link/css-classes-setting.tsx +++ b/packages/format-library/src/link/css-classes-setting.tsx @@ -6,6 +6,7 @@ import { CheckboxControl, } from '@wordpress/components'; import { Stack, VisuallyHidden } from '@wordpress/ui'; +import type { CSSClassesSettingProps } from '../types'; /** * CSSClassesSettingComponent @@ -14,24 +15,17 @@ import { Stack, VisuallyHidden } from '@wordpress/ui'; * is shown when the toggle is enabled or when there is already a value. When * toggled off and a value exists, it resets the value to an empty string. * - * @param props - Component props. - * @param props.setting - Setting configuration object. - * @param props.value - Current link value object. - * @param props.onChange - Callback when value changes. - * @param props.setting.id - * @param props.setting.title - * @param props.value.cssClasses + * @param props - Component props. + * @param props.setting - Setting configuration object. + * @param props.value - Current link value object. + * @param props.onChange - Callback when value changes. */ const CSSClassesSettingComponent = ( { setting, value, onChange, -}: { - setting: { id: string; title: string }; - value: { cssClasses?: string }; - onChange: ( newValue: { cssClasses?: string } ) => void; -} ) => { - const hasValue = value ? !! ( value?.cssClasses?.length ?? 0 ) : false; +}: CSSClassesSettingProps ) => { + const hasValue = !! value?.cssClasses?.length; const [ isSettingActive, setIsSettingActive ] = useState( hasValue ); const instanceId = useInstanceId( CSSClassesSettingComponent ); const controlledRegionId = `css-classes-setting-${ instanceId }`; diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index 41fd98c65176a2..d3ffaf1445f49e 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -116,6 +116,15 @@ export interface LinkValue { cssClasses?: string; } +/** + * Props for the Link UI's "Additional CSS class(es)" setting. + */ +export interface CSSClassesSettingProps { + setting: { id: string; title: string }; + value?: { cssClasses?: string }; + onChange: ( newValue: { cssClasses?: string } ) => void; +} + export interface InlineLinkUIProps { isActive: boolean; activeAttributes: LinkFormatAttributes; From 930c87d6941f7caeba35601c544735834ee68623 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:42:56 +0530 Subject: [PATCH 39/46] fix: Minor feedbacks related to type casting --- .../format-library/src/language/index.tsx | 4 ++-- packages/format-library/src/link/inline.tsx | 14 +++++-------- packages/format-library/src/math/index.tsx | 2 +- .../src/non-breaking-space/index.tsx | 2 +- .../format-library/src/text-color/inline.tsx | 2 +- packages/rich-text/README.md | 2 +- packages/rich-text/src/replace.js | 20 ++++++++++--------- 7 files changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index abc0691a774961..546d97ea353af9 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -80,8 +80,8 @@ function InlineLanguageUI( { }: InlineLanguageUIProps ) { const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs - editableContentElement: contentRef.current as HTMLElement | null, - settings: language as typeof language, + editableContentElement: contentRef.current, + settings: language, } ); const [ lang, setLang ] = useState( '' ); diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 738b6b485a6e81..21ac264929d8f8 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -223,11 +223,7 @@ function InlineLinkUI( { // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179. if ( splitValue ) { const [ valBefore, valAfter ] = splitValue; - const newValAfter = replace( - valAfter, - richTextText, - () => newValue - ); + const newValAfter = replace( valAfter, richTextText, newValue ); newValue = concat( valBefore, newValAfter ); } else { @@ -235,7 +231,7 @@ function InlineLinkUI( { // selection, leaving nothing to split on. Replace within the // full value instead: the targeted-replacement protection // above is unavailable, but the user's edit still applies. - newValue = replace( value, richTextText, () => newValue ); + newValue = replace( value, richTextText, newValue ); } } @@ -271,7 +267,7 @@ function InlineLinkUI( { const anchorSettings = { ...settings, isActive }; const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs - editableContentElement: contentRef.current as HTMLElement | null, + editableContentElement: contentRef.current, settings: anchorSettings, } ); @@ -315,14 +311,14 @@ function InlineLinkUI( { > <LinkControl value={ linkValue } - onChange={ onChangeLink as any } + onChange={ onChangeLink } onRemove={ removeLink } hasRichPreviews createSuggestion={ createPageEntity && handleCreate } withCreateSuggestion={ userCanCreatePages } createSuggestionButtonText={ createButtonText } hasTextControl - settings={ LINK_SETTINGS as any } + settings={ LINK_SETTINGS } showInitialSuggestions suggestionsQuery={ { // always show Pages as initial suggestions diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index 7b77c17bbee9be..d80e6d74474bbf 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -32,7 +32,7 @@ function InlineUI( { const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs - editableContentElement: contentRef.current as HTMLElement | null, + editableContentElement: contentRef.current, settings: math, } ); diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index 7f65423759c597..b3178bc209c263 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -15,7 +15,7 @@ const title = __( 'Non breaking space' ); function PopoverAnchor( { contentRef }: NonBreakingSpacePopoverAnchorProps ) { const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs - editableContentElement: contentRef.current as HTMLElement | null, + editableContentElement: contentRef.current, settings: nonBreakingSpace, } ); diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index b795c1f2e42b4f..2598e2c551290a 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -211,7 +211,7 @@ export default function InlineColorUI( { const anchorSettings = { ...settings, isActive }; const popoverAnchor = useAnchor( { // eslint-disable-next-line react-hooks/refs - editableContentElement: contentRef.current as HTMLElement | null, + editableContentElement: contentRef.current, settings: anchorSettings, } ); diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index b9af2eb6b70e6d..32f7871c9589ab 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -357,7 +357,7 @@ _Parameters_ - _value_ `RichTextValue`: The value to modify. - _pattern_ `RegExp|string`: A RegExp object or literal. Can also be a string. It is treated as a verbatim string and is not interpreted as a regular expression. Only the first occurrence will be replaced. -- _replacement_ `Function|string`: The match or matches are replaced with the specified or the value returned by the specified function. +- _replacement_ `Function|string|RichTextValue`: The match or matches are replaced with the specified value, the value returned by the specified function, or the given rich text value. _Returns_ diff --git a/packages/rich-text/src/replace.js b/packages/rich-text/src/replace.js index bc75d6a7938ae1..5361431ff94b1c 100644 --- a/packages/rich-text/src/replace.js +++ b/packages/rich-text/src/replace.js @@ -6,15 +6,17 @@ import { normaliseFormats } from './normalise-formats'; * Search a Rich Text value and replace the match(es) with `replacement`. This * is similar to `String.prototype.replace`. * - * @param {RichTextValue} value The value to modify. - * @param {RegExp|string} pattern A RegExp object or literal. Can also be - * a string. It is treated as a verbatim - * string and is not interpreted as a - * regular expression. Only the first - * occurrence will be replaced. - * @param {Function|string} replacement The match or matches are replaced with - * the specified or the value returned by - * the specified function. + * @param {RichTextValue} value The value to modify. + * @param {RegExp|string} pattern A RegExp object or literal. Can also be + * a string. It is treated as a verbatim + * string and is not interpreted as a + * regular expression. Only the first + * occurrence will be replaced. + * @param {Function|string|RichTextValue} replacement The match or matches are + * replaced with the specified + * value, the value returned by + * the specified function, or + * the given rich text value. * * @return {RichTextValue} A new value with replacements applied. */ From be47383b3e2a3e9ba22530f20c87d76a412be143 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:52:53 +0530 Subject: [PATCH 40/46] fix: Add changelogs and update the type exportations in package.json --- packages/format-library/CHANGELOG.md | 1 + packages/format-library/package.json | 2 ++ packages/rich-text/CHANGELOG.md | 4 ++++ 3 files changed, 7 insertions(+) diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index 8ba959df13932e..2f458d651f70d7 100644 --- a/packages/format-library/CHANGELOG.md +++ b/packages/format-library/CHANGELOG.md @@ -9,6 +9,7 @@ ### Internal - Use the `.jsx` extension for JavaScript source files that contain JSX ([#80990](https://github.com/WordPress/gutenberg/pull/80990)). +- Migrate the package to TypeScript ([#79486](https://github.com/WordPress/gutenberg/pull/79486)). ## 5.54.0 (2026-08-26) diff --git a/packages/format-library/package.json b/packages/format-library/package.json index 0fcbe690028d06..01738287268fec 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -34,12 +34,14 @@ "module": "build-module/index.mjs", "exports": { ".": { + "types": "./build-types/index.d.ts", "import": "./build-module/index.mjs", "require": "./build/index.cjs" }, "./package.json": "./package.json" }, "wpScript": true, + "types": "build-types/index.d.ts", "dependencies": { "@wordpress/a11y": "file:../a11y", "@wordpress/base-styles": "file:../base-styles", diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md index be19b7a452ab51..f8bbdd0bf3c14a 100644 --- a/packages/rich-text/CHANGELOG.md +++ b/packages/rich-text/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### New Features + +- Export the `RichTextFormat` type, describing a single format applied to a range of characters within a `RichTextValue` ([#79486](https://github.com/WordPress/gutenberg/pull/79486)). + ## 7.54.0 (2026-08-26) ## 7.53.0 (2026-08-12) From a7670d9f522427bcd5b2bb14697533e10a8e51b3 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 16:53:14 +0530 Subject: [PATCH 41/46] fix: Rename non tsx files to ts --- .../src/{default-formats.tsx => default-formats.ts} | 0 packages/format-library/src/{index.tsx => index.ts} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/format-library/src/{default-formats.tsx => default-formats.ts} (100%) rename packages/format-library/src/{index.tsx => index.ts} (100%) diff --git a/packages/format-library/src/default-formats.tsx b/packages/format-library/src/default-formats.ts similarity index 100% rename from packages/format-library/src/default-formats.tsx rename to packages/format-library/src/default-formats.ts diff --git a/packages/format-library/src/index.tsx b/packages/format-library/src/index.ts similarity index 100% rename from packages/format-library/src/index.tsx rename to packages/format-library/src/index.ts From 5913bad9e0f1efb05ee6c6dbd3d8f6c8bad795b0 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 17:12:36 +0530 Subject: [PATCH 42/46] fix: Immediately show inlineui popover by removing latexToMathML --- packages/format-library/src/math/index.tsx | 2 +- packages/format-library/src/types.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index d80e6d74474bbf..eb95b0ea776a6f 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -169,7 +169,7 @@ function Edit( { onClick={ onClick } isActive={ isObjectActive } /> - { isObjectActive && latexToMathML && ( + { isObjectActive && ( <InlineUI value={ value } onChange={ onChange } diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index d3ffaf1445f49e..cb33d29121abf7 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -45,7 +45,10 @@ export interface InlineUIProps { onChange: ( value: RichTextValue ) => void; activeAttributes: Record< string, string > | null; contentRef: React.RefObject< HTMLElement >; - latexToMathML: ( + /** + * Resolves once `@wordpress/latex-to-mathml` has loaded; undefined until then. + */ + latexToMathML?: ( latex: string, options?: { displayMode?: boolean } ) => string; From 512db17e3ea0676f83ef062e180e77947c271828 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 17:29:53 +0530 Subject: [PATCH 43/46] fix: Remove activeAttributes prop as it is unused in InlineColorUI --- packages/format-library/src/text-color/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/format-library/src/text-color/index.tsx b/packages/format-library/src/text-color/index.tsx index b3c6ed12a2fc96..c5198b560f9ced 100644 --- a/packages/format-library/src/text-color/index.tsx +++ b/packages/format-library/src/text-color/index.tsx @@ -118,8 +118,6 @@ function TextColorEdit( { <InlineColorUI name={ name } onClose={ () => setIsAddingColor( false ) } - // @ts-expect-error -- InlineColorUI does not have a type for activeAttributes yet. - activeAttributes={ activeAttributes } value={ value } onChange={ onChange } contentRef={ contentRef } From 7e9e7bfe6ab94dab571a4cfc4b695680445444f1 Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 18:51:16 +0530 Subject: [PATCH 44/46] fix: Non blocking feedbacks --- .../format-library/src/language/index.tsx | 20 +++--- packages/format-library/src/link/inline.tsx | 12 ++-- packages/format-library/src/math/index.tsx | 4 +- .../src/non-breaking-space/index.tsx | 5 ++ .../format-library/src/text-color/index.tsx | 11 +--- .../format-library/src/text-color/inline.tsx | 61 +++++++------------ packages/format-library/src/types.ts | 40 +++++++++++- 7 files changed, 83 insertions(+), 70 deletions(-) diff --git a/packages/format-library/src/language/index.tsx b/packages/format-library/src/language/index.tsx index 546d97ea353af9..4367f811273425 100644 --- a/packages/format-library/src/language/index.tsx +++ b/packages/format-library/src/language/index.tsx @@ -11,22 +11,16 @@ import { Stack } from '@wordpress/ui'; import { useState } from '@wordpress/element'; import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text'; import { language as languageIcon } from '@wordpress/icons'; -import type { LanguageEditProps, InlineLanguageUIProps } from '../types'; +import type { + LanguageEditProps, + InlineLanguageUIProps, + LanguageFormat, +} from '../types'; const name = 'core/language'; const title = __( 'Language' ); -export const language: { - name: string; - title: string; - tagName: string; - className: null; - attributes: { - lang: string; - dir: string; - }; - edit: ( props: LanguageEditProps ) => React.ReactNode; -} = { +export const language = { name, title, tagName: 'bdo', @@ -36,7 +30,7 @@ export const language: { dir: 'dir', }, edit: Edit, -}; +} satisfies LanguageFormat; function Edit( { isActive, value, onChange, contentRef }: LanguageEditProps ) { const [ isPopoverVisible, setIsPopoverVisible ] = useState( false ); diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 21ac264929d8f8..6fda1afb65de3c 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -25,7 +25,11 @@ import type { RichTextValue } from '@wordpress/rich-text'; import { createLinkFormat, isValidHref, getFormatBoundary } from './utils'; import { link as settings } from './index'; import CSSClassesSettingComponent from './css-classes-setting'; -import type { InlineLinkUIProps, LinkValue } from '../types'; +import type { + InlineLinkUIProps, + LinkValue, + CSSClassesSettingProps, +} from '../types'; const LINK_SETTINGS = [ ...LinkControl.DEFAULT_LINK_SETTINGS, @@ -37,9 +41,9 @@ const LINK_SETTINGS = [ id: 'cssClasses', title: __( 'Additional CSS class(es)' ), render: ( - setting: { id: string; title: string }, - value: { cssClasses?: string }, - onChange: ( newValue: { cssClasses?: string } ) => void + setting: CSSClassesSettingProps[ 'setting' ], + value: CSSClassesSettingProps[ 'value' ], + onChange: CSSClassesSettingProps[ 'onChange' ] ) => ( <CSSClassesSettingComponent setting={ setting } diff --git a/packages/format-library/src/math/index.tsx b/packages/format-library/src/math/index.tsx index eb95b0ea776a6f..6fac0b1de359a7 100644 --- a/packages/format-library/src/math/index.tsx +++ b/packages/format-library/src/math/index.tsx @@ -12,7 +12,7 @@ import { RichTextToolbarButton } from '@wordpress/block-editor'; import { Popover } from '@wordpress/components'; import { ValidatedInputControl } from '@wordpress/ui'; import { math as icon } from '@wordpress/icons'; -import type { InlineUIProps, EditMathProps } from '../types'; +import type { InlineMathUIProps, EditMathProps } from '../types'; const name = 'core/math'; const title = __( 'Math' ); @@ -23,7 +23,7 @@ function InlineUI( { activeAttributes, contentRef, latexToMathML, -}: InlineUIProps ) { +}: InlineMathUIProps ) { const [ latex, setLatex ] = useState( activeAttributes?.[ 'data-latex' ] || '' ); diff --git a/packages/format-library/src/non-breaking-space/index.tsx b/packages/format-library/src/non-breaking-space/index.tsx index b3178bc209c263..136e801c3fb435 100644 --- a/packages/format-library/src/non-breaking-space/index.tsx +++ b/packages/format-library/src/non-breaking-space/index.tsx @@ -62,6 +62,11 @@ export const nonBreakingSpace = { ) => RichTextValue[ 'formats' ] { return ( formats, text ) => { const NBSP = '\u00a0'; + // Not a complete `RichTextValue`: the callback only receives + // `formats` and `text`. The assertion is safe because `applyFormat` + // is passed explicit indices (so it never falls back to `start`/ + // `end`), reads only `formats`, and spreads the rest through + // untouched — and only `formats` is read back out below. let record = { formats, text } as RichTextValue; let index = -1; diff --git a/packages/format-library/src/text-color/index.tsx b/packages/format-library/src/text-color/index.tsx index c5198b560f9ced..cfa24f051117fc 100644 --- a/packages/format-library/src/text-color/index.tsx +++ b/packages/format-library/src/text-color/index.tsx @@ -11,8 +11,7 @@ import { textColor as textColorIcon, } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; -import type { RichTextValue } from '@wordpress/rich-text'; -import type { ColorObject } from '../types'; +import type { ColorObject, TextColorEditProps } from '../types'; import { default as InlineColorUI, getActiveColors } from './inline'; export const transparentValue = 'rgba(0, 0, 0, 0)'; @@ -64,13 +63,7 @@ function TextColorEdit( { isActive, activeAttributes, contentRef, -}: { - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - isActive: boolean; - activeAttributes: Record< string, string >; - contentRef: React.RefObject< HTMLElement >; -} ) { +}: TextColorEditProps ) { const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings( 'color.custom', 'color.palette' diff --git a/packages/format-library/src/text-color/inline.tsx b/packages/format-library/src/text-color/inline.tsx index 2598e2c551290a..e1223cb70cf269 100644 --- a/packages/format-library/src/text-color/inline.tsx +++ b/packages/format-library/src/text-color/inline.tsx @@ -18,7 +18,11 @@ import { Popover } from '@wordpress/components'; import { Tabs } from '@wordpress/ui'; import { __ } from '@wordpress/i18n'; import type { RichTextValue } from '@wordpress/rich-text'; -import type { ColorObject } from '../types'; +import type { + ColorObject, + ColorPickerProps, + InlineColorUIProps, +} from '../types'; import { textColor as settings, transparentValue } from './index'; const TABS = [ @@ -58,26 +62,20 @@ export function parseClassName( ): { color?: string } { return className .split( ' ' ) - .reduce( - ( - accumulator: { color?: string; backgroundColor?: string }, - name - ) => { - // `colorSlug` could contain dashes, so simply match the start and end. - if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { - const colorSlug = name - .replace( /^has-/, '' ) - .replace( /-color$/, '' ); - const colorObject = getColorObjectByAttributeValues( - colorSettings, - colorSlug - ); - accumulator.color = colorObject.color; - } - return accumulator; - }, - {} - ); + .reduce( ( accumulator: { color?: string }, name ) => { + // `colorSlug` could contain dashes, so simply match the start and end. + if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { + const colorSlug = name + .replace( /^has-/, '' ) + .replace( /-color$/, '' ); + const colorObject = getColorObjectByAttributeValues( + colorSettings, + colorSlug + ); + accumulator.color = colorObject.color; + } + return accumulator; + }, {} ); } export function getActiveColors( @@ -153,17 +151,7 @@ function setColors( return applyFormat( value, { type: name, attributes } ); } -function ColorPicker( { - name, - property, - value, - onChange, -}: { - name: string; - property: 'color' | 'backgroundColor'; - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; -} ) { +function ColorPicker( { name, property, value, onChange }: ColorPickerProps ) { const colors = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().colors ?? []; @@ -195,14 +183,7 @@ export default function InlineColorUI( { onClose, contentRef, isActive, -}: { - name: string; - value: RichTextValue; - onChange: ( value: RichTextValue ) => void; - onClose: () => void; - contentRef: React.RefObject< HTMLElement >; - isActive: boolean; -} ) { +}: InlineColorUIProps ) { /* * `isActive` is not part of `WPFormat`, but `useAnchor` reads it * dynamically. Hoisting the object out of the call avoids excess property diff --git a/packages/format-library/src/types.ts b/packages/format-library/src/types.ts index cb33d29121abf7..449f99806ea17c 100644 --- a/packages/format-library/src/types.ts +++ b/packages/format-library/src/types.ts @@ -33,6 +33,42 @@ export interface LanguageEditProps { contentRef: React.RefObject< HTMLElement >; } +export interface TextColorEditProps extends FormatEditProps { + activeAttributes: Record< string, string >; + contentRef: React.RefObject< HTMLElement >; +} + +export interface InlineColorUIProps { + name: string; + onClose: () => void; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; + contentRef: React.RefObject< HTMLElement >; + isActive: boolean; +} + +export interface ColorPickerProps { + name: string; + property: 'color' | 'backgroundColor'; + value: RichTextValue; + onChange: ( value: RichTextValue ) => void; +} + +/** + * The registration object for the `core/language` format. + */ +export interface LanguageFormat { + name: string; + title: string; + tagName: string; + className: null; + attributes: { + lang: string; + dir: string; + }; + edit: ( props: LanguageEditProps ) => React.ReactNode; +} + export interface InlineLanguageUIProps { value: RichTextValue; contentRef: React.RefObject< HTMLElement >; @@ -40,7 +76,7 @@ export interface InlineLanguageUIProps { onClose: () => void; } -export interface InlineUIProps { +export interface InlineMathUIProps { value: RichTextValue; onChange: ( value: RichTextValue ) => void; activeAttributes: Record< string, string > | null; @@ -79,7 +115,7 @@ export interface EditImageProps { isObjectActive: boolean; activeObjectAttributes: { style?: string; - alt?: string | undefined; + alt?: string; className?: string; url?: string; } | null; From 590f6f3b6568509617215ca39495986c28b7274a Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 18:54:53 +0530 Subject: [PATCH 45/46] fix: Remove unused title in the applyFormat --- packages/format-library/src/code/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/format-library/src/code/index.tsx b/packages/format-library/src/code/index.tsx index 01942a033d2fe3..1b2ffac6332873 100644 --- a/packages/format-library/src/code/index.tsx +++ b/packages/format-library/src/code/index.tsx @@ -45,12 +45,7 @@ export const code = { value = remove( value, startIndex, startIndex + 1 ); value = remove( value, endIndex, endIndex + 1 ); - value = applyFormat( - value, - { type: name, title }, - startIndex, - endIndex - ); + value = applyFormat( value, { type: name }, startIndex, endIndex ); return value; }, From 2283510eb3539af772676693d09482b47c57d5be Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Tue, 1 Sep 2026 18:57:09 +0530 Subject: [PATCH 46/46] fix: Add early return if splitValue is not passed --- packages/format-library/src/link/inline.tsx | 26 +++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/format-library/src/link/inline.tsx b/packages/format-library/src/link/inline.tsx index 6fda1afb65de3c..22a4043d148fcd 100644 --- a/packages/format-library/src/link/inline.tsx +++ b/packages/format-library/src/link/inline.tsx @@ -213,6 +213,16 @@ function InlineLinkUI( { ) => RichTextValue[] | undefined )( value, boundary.start, boundary.start ); + // `splitAtSelection` returns `undefined` when the value carries no + // selection of its own, which leaves nothing to split on. Bail out + // rather than replacing within the full value: `replace` rewrites + // the first match only, so two links sharing the same text would + // silently edit the wrong one — the bug the split below exists to + // prevent. + if ( ! splitValue ) { + return; + } + // Update the original (full) RichTextValue replacing the // target text with the *new* RichTextValue containing: // 1. The new text content. @@ -225,18 +235,10 @@ function InlineLinkUI( { // Note original formats will be lost when applying this change. // That is expected behaviour. // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179. - if ( splitValue ) { - const [ valBefore, valAfter ] = splitValue; - const newValAfter = replace( valAfter, richTextText, newValue ); - - newValue = concat( valBefore, newValAfter ); - } else { - // `split` returns `undefined` when the value carries no - // selection, leaving nothing to split on. Replace within the - // full value instead: the targeted-replacement protection - // above is unavailable, but the user's edit still applies. - newValue = replace( value, richTextText, newValue ); - } + const [ valBefore, valAfter ] = splitValue; + const newValAfter = replace( valAfter, richTextText, newValue ); + + newValue = concat( valBefore, newValAfter ); } onChange( newValue );