インストール

モジュールをインストールします

  1. npm install @wordpress/editor --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含めるべきです。

動作の仕組み

エディタに関する論理フローには、投稿内容のブロック表現を推測すること(パース)、投稿の状態を記述すること(表現)、投稿をDOMにレンダリングすること(レンダリング)、コンテンツを操作するためのコントロールを添付すること(UI)が含まれます。

図

エディタ要素の目的は、ユーザーがコンテンツのブロックを通じて整理された決定論的な方法で投稿の内容を操作できるようにすることです。通常、宣言的なフローでは、投稿を構成する要素は特定の順序で表現され、マシンは必要なUIコントロールを使用して出力ビューを生成できるはずです。しかし、WordPressでは、投稿の状態の表現がこの表現に適しているわけではなく、コンテンツは単一のフィールドにシリアライズされた方法で保存されているため、ブロックに関する知識すら持っていません。

この重要なステップは、シリアライズされた投稿の内容を処理し、HTMLコメントに存在する構文ヒントを使用して順序付きのブロックリストを推測する文法パースによって処理されます。エディタは、投稿要素の生のコンテンツのパースによって生成されたブロックノードの状態表現で初期化されます:wp.blocks.parse( post.content.raw )

ビジュアルエディタは、内部状態からブロックノードのリストをページに含めてレンダリングするコンポーネントです。これにより、ブロックを見つけて操作する際の命令的な処理の痕跡が取り除かれます。実際、ビジュアルエディタまたはテキストエディタは、同じ状態の表現の2つの異なる—同等に有効な—ビューです。ブロックが更新されると、投稿内容の内部表現も更新され、post_contentに保存されるためにシリアライズされます。

個々のブロックは、VisualBlockコンポーネントによって処理され、イベントハンドラを添付し、対応する属性とローカル状態を持つブロック定義のedit関数をドキュメントにレンダリングします。edit関数は、編集モードのコンポーネントのマークアップ形状です。

コンポーネント

多くのブロックが同じ複雑な動作を共有するため、ブロックのedit関数の実装を簡素化するために再利用可能なコンポーネントが提供されます。

BlockControls

ブロックのedit実装によって返されると、アイコンボタンのツールバーをレンダリングします。これは、ブロックが選択されたときにブロックレベルの変更を利用可能にするために便利です。たとえば、ブロックが整列をサポートしている場合、選択されたブロックのツールバーに整列オプションを表示したいかもしれません。

例:

  1. ( function ( editor, React ) {
  2. var el = React.createElement,
  3. BlockControls = editor.BlockControls,
  4. AlignmentToolbar = editor.AlignmentToolbar;
  5. function edit( props ) {
  6. return [
  7. // Controls: (only visible when block is selected)
  8. el(
  9. BlockControls,
  10. { key: 'controls' },
  11. el( AlignmentToolbar, {
  12. value: props.align,
  13. onChange: function ( nextAlign ) {
  14. props.setAttributes( { align: nextAlign } );
  15. },
  16. } )
  17. ),
  18. // Block content: (with alignment as attribute)
  19. el(
  20. 'p',
  21. { key: 'text', style: { textAlign: props.align } },
  22. 'Hello World!'
  23. ),
  24. ];
  25. }
  26. } )( window.wp.editor, window.React );

この例では、AlignmentToolbarBlockControls要素の子としてレンダリングすることに注意してください。これは、ブロックのテキスト整列を簡素化するために使用できる別の事前設定されたコンポーネントです。

また、BlockControlsコンポーネントにcontrolsの配列をプロップとして渡すことで、自分自身のツールバーコントロールを作成できます。各コントロールは、次のプロパティを持つオブジェクトである必要があります:

  • icon: string – コントロールのツールバーボタンに表示されるDashiconのスラッグ
  • title: string – コントロールのボタンのツールチップラベルとして表示される人間が読めるローカライズされたテキスト
  • subscript: ?string – ボタンアイコンの隣に表示されるオプションのテキスト(たとえば、見出しレベル)
  • isActive: ?boolean – コントロールがアクティブ/選択されていると見なされるかどうか。デフォルトはfalseです。

同じBlockControls要素内のコントロールのセット間に区切りを作成するには、controlsをネストされた配列(オブジェクトの配列の配列)として渡します。各コントロールのセットの間に区切りが表示されます。

RichText

リッチcontenteditable入力をレンダリングし、ユーザーにコンテンツやリンクに強調を追加するオプションを提供します。これは、https://facebook.github.io/react/docs/forms.html#controlled-componentsでの制御されたコンポーネントと似た動作をしますが、onChangeは通常、ユーザーがフィールドを退出したときに期待されるよりも頻繁にはトリガーされません。

次のプロパティ(非網羅的リスト)が利用可能です:

  • value: string – フィールドのマークアップ値。有効なマークアップのみが許可され、inlineの値と利用可能なコントロールによって決定されます。
  • onChange: Function – フィールドの値が変更されたときのコールバックハンドラで、新しい値を唯一の引数として渡します。
  • placeholder: string – フィールドの値が空のときにユーザーに表示されるテキストヒントで、同名のinputおよびtextarea属性に似ています。

例:

  1. ( function ( editor, React ) {
  2. var el = React.createElement,
  3. RichText = editor.RichText;
  4. function edit( props ) {
  5. function onChange( value ) {
  6. props.setAttributes( { text: value } );
  7. }
  8. return el( RichText, {
  9. value: props.attributes.text,
  10. onChange: onChange,
  11. } );
  12. }
  13. // blocks.registerBlockType( ..., { edit: edit, ... } );
  14. } )( window.wp.editor, window.React );

API

AlignmentToolbar

非推奨 5.3以降、wp.blockEditor.AlignmentToolbarを使用してください。

Autocomplete

非推奨 5.3以降、wp.blockEditor.Autocompleteを使用してください。

AutosaveMonitor

編集された投稿に対する変更を監視し、必要に応じて自動保存をトリガーします。

論理は簡単です:props.interval秒ごとにチェックが行われます。変更が検出された場合、props.autosave()が呼び出されます。変更と自動保存の間の時間は変動しますが、props.interval秒を超えることはありません。変更を検出する特定の方法など、詳細については以下のコードを参照してください。

2つの注意点があります:

  • チェック時にprops.isAutosaveableがfalseの場合、チェックは毎秒再試行されます。
  • タイマーはprops.disableIntervalCheckstrueに設定することで無効にできます。そのモードでは、変更があれば即座にprops.autosave()がトリガーされます。

使用法

  1. <AutosaveMonitor interval={ 30000 } />

パラメータ

  • props Object: – コンポーネントに渡されるプロパティ。
  • props.autosave Function: – 変更を保存する必要があるときに呼び出す関数。
  • props.interval number: – 保存されていない変更と自動保存の間の最大時間(秒)。
  • props.isAutosaveable boolean: – falseの場合、変更のチェックは毎秒再試行されます。
  • props.disableIntervalChecks boolean: – trueの場合、タイマーが無効になり、変更があれば即座にprops.autosave()がトリガーされます。
  • props.isDirty boolean: – 保存されていない変更があるかどうかを示します。

BlockAlignmentToolbar

非推奨 5.3以降、wp.blockEditor.BlockAlignmentToolbarを使用してください。

BlockControls

非推奨 5.3以降、wp.blockEditor.BlockControlsを使用してください。

BlockEdit

非推奨 5.3以降、wp.blockEditor.BlockEditを使用してください。

BlockEditorKeyboardShortcuts

非推奨 5.3以降、wp.blockEditor.BlockEditorKeyboardShortcutsを使用してください。

BlockFormatControls

非推奨 5.3以降、wp.blockEditor.BlockFormatControlsを使用してください。

BlockIcon

非推奨 5.3以降、wp.blockEditor.BlockIconを使用してください。

BlockInspector

非推奨 5.3以降、wp.blockEditor.BlockInspectorを使用してください。

BlockList

非推奨 5.3以降、wp.blockEditor.BlockListを使用してください。

BlockMover

非推奨 5.3以降、wp.blockEditor.BlockMoverを使用してください。

BlockNavigationDropdown

非推奨 5.3以降、wp.blockEditor.BlockNavigationDropdownを使用してください。

BlockSelectionClearer

非推奨 5.3以降、wp.blockEditor.BlockSelectionClearerを使用してください。

BlockSettingsMenu

非推奨 5.3以降、wp.blockEditor.BlockSettingsMenuを使用してください。

BlockTitle

非推奨 5.3以降、wp.blockEditor.BlockTitleを使用してください。

BlockToolbar

非推奨 5.3以降、wp.blockEditor.BlockToolbarを使用してください。

CharacterCount

投稿内容の文字数をレンダリングします。

戻り値

  • number: 文字数。

cleanForSlug

投稿スラッグとして使用するための文字列の基本的なクリーンアップを行います

これは、WordPressコアのsanitize_title()が行うことの一部を再現しますが、スラッグがどのようになるかを近似するためにのみ設計されています。

ラテン1補助およびラテン拡張Aの文字を基本的なラテン文字に変換します。結合ダイアクリティカルマークを削除します。空白、ピリオド、およびスラッシュをハイフンに変換します。ハイフンとアンダースコアを除く残りの非単語文字を削除します。残りの文字列を小文字に変換します。オクテット、HTMLエンティティ、または他のエンコードされた文字は考慮されません。

パラメータ

  • 文字列 string: 処理されるタイトルまたはスラッグ

戻り値

  • string: 処理された文字列

ColorPalette

非推奨 5.3以降、wp.blockEditor.ColorPaletteを使用してください。

ContrastChecker

非推奨 5.3以降、wp.blockEditor.ContrastCheckerを使用してください。

CopyHandler

非推奨 5.3以降、wp.blockEditor.CopyHandlerを使用してください。

createCustomColorsHOC

非推奨 5.3以降、wp.blockEditor.createCustomColorsHOCを使用してください。

DefaultBlockAppender

非推奨 5.3以降、wp.blockEditor.DefaultBlockAppenderを使用してください。

DocumentBar

このコンポーネントは、エディタの上部にナビゲーションバーをレンダリングします。現在のドキュメントのタイトル、戻るボタン(該当する場合)、およびコマンドセンターボタンを表示します。また、「見つからない」や「同期されていない」など、ドキュメントのさまざまな状態を処理します。

使用法

  1. <DocumentBar />

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.title string: 編集中のドキュメントまたはテンプレートのタイトルにデフォルト設定されるドキュメントのタイトル。
  • props.icon IconType: ドキュメントのアイコン、デフォルトなし。(ドキュメントの投稿タイプを示すデフォルトアイコンはもはや使用されません。)

戻り値

  • JSX.Element: レンダリングされたDocumentBarコンポーネント。

DocumentOutline

ドキュメントアウトラインコンポーネントをレンダリングします。

パラメータ

  • props Object: プロパティ。
  • props.onSelect Function: アウトラインアイテムが選択されたときに呼び出される関数。
  • props.isTitleSupported boolean: タイトルがサポートされているかどうかを示します。
  • props.hasOutlineItemsDisabled boolean: アウトラインアイテムが無効になっているかどうかを示します。

戻り値

  • Component: レンダリングされるコンポーネント。

DocumentOutlineCheck

コンポーネントは、ドキュメント内に見出し(core/headingブロック)が存在するかどうかをチェックします。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component|null: レンダリングされるコンポーネントまたは見出しがある場合はnull。

EditorHistoryRedo

エディタ履歴のやり直しボタンをレンダリングします。

パラメータ

  • props Object: – プロパティ。
  • ref Ref: – フォワードされた参照。

戻り値

  • Component: レンダリングされるコンポーネント。

EditorHistoryUndo

エディタ履歴の元に戻すボタンをレンダリングします。

パラメータ

  • props Object: – プロパティ。
  • ref Ref: – フォワードされた参照。

戻り値

  • Component: レンダリングされるコンポーネント。

EditorKeyboardShortcuts

エディタのキーボードショートカットを処理します。

エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。

EditorKeyboardShortcutsRegister

エディタのキーボードショートカットを登録するためのコンポーネントです。

戻り値

  • Element: レンダリングされるコンポーネント。

EditorNotices

このコンポーネントは、エディタに表示される通知をレンダリングします。ピン留めされた通知が最初に表示され、その後に閉じることができる通知が続きます。

使用法

  1. <EditorNotices />

戻り値

  • JSX.Element: レンダリングされたEditorNoticesコンポーネント。

EditorProvider

このコンポーネントは、新しい投稿編集コンテキストを確立し、新しい投稿エディタ(またはテンプレートエディタを持つ投稿)のエントリポイントとして機能します。

投稿、ページ、テンプレート、カスタム投稿タイプ、パターン、テンプレートパーツなど、多くの投稿タイプをサポートしています。

すべての変更は@wordpress/core-dataストアに対して行われます。

使用法

  1. <EditorProvider
  2. post={ post }
  3. settings={ settings }
  4. __unstableTemplate={ template }
  5. >
  6. { children }
  7. </EditorProvider>

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.post [Object]: 編集する投稿オブジェクト。これは必須です。
  • props.__unstableTemplate [Object]: 編集された投稿をラップするテンプレートオブジェクト。これはオプションで、投稿タイプがテンプレートをサポートしている場合(投稿やページなど)のみ使用できます。
  • props.settings [Object]: エディタに使用する設定オブジェクト。これはオプションで、デフォルト設定を上書きするために使用できます。
  • props.children [Element]: BlockEditorProviderコンテキストが適用される子要素。これはオプションです。

戻り値

  • JSX.Element: レンダリングされたEditorProviderコンポーネント。

EditorSnackbars

エディタスナックバーコンポーネントをレンダリングします。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

EntitiesSavedStates

保存されたエンティティの状態を管理するコンポーネントをレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.close Function: ダイアログを閉じるための関数。
  • props.renderDialog Function: ダイアログをレンダリングするための関数。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

ErrorBoundary

ErrorBoundaryは、子コンポーネントツリー内のJavaScriptエラーをキャッチし、それらのエラーをログに記録し、フォールバックUIを表示するために使用されます。

これは、getDerivedStateFromErrorおよびcomponentDidCatchのライフサイクルメソッドを使用して、子コンポーネントツリー内のエラーをキャッチします。

getDerivedStateFromErrorは、エラーがスローされた後にフォールバックUIをレンダリングするために使用され、componentDidCatchはエラー情報をログに記録するために使用されます。

FontSizePicker

非推奨 5.3以降、wp.blockEditor.FontSizePickerを使用してください。

getColorClassName

非推奨 5.3以降、wp.blockEditor.getColorClassNameを使用してください。

getColorObjectByAttributeValues

非推奨 5.3以降、wp.blockEditor.getColorObjectByAttributeValuesを使用してください。

getColorObjectByColorValue

非推奨 5.3以降、wp.blockEditor.getColorObjectByColorValueを使用してください。

getFontSize

非推奨 5.3以降、wp.blockEditor.getFontSizeを使用してください。

getFontSizeClass

非推奨 5.3以降、wp.blockEditor.getFontSizeClassを使用してください。

getTemplatePartIcon

名前によって対応するアイコンを取得するためのヘルパー関数です。

パラメータ

  • iconName string: アイコンの名前。

戻り値

  • Object: 対応するアイコン。

InnerBlocks

非推奨 5.3以降、wp.blockEditor.InnerBlocksを使用してください。

Inserter

非推奨 5.3以降、wp.blockEditor.Inserterを使用してください。

InspectorAdvancedControls

非推奨 5.3以降、wp.blockEditor.InspectorAdvancedControlsを使用してください。

InspectorControls

非推奨 5.3以降、wp.blockEditor.InspectorControlsを使用してください。

LocalAutosaveMonitor

エディタ内の投稿のローカル自動保存を監視します。いくつかのフックと関数を使用して自動保存の動作を管理します:

  • useAutosaveNoticeフック:ローカル自動保存が存在する場合、ユーザーにローカル自動保存を復元するよう促す通知の作成を管理します。
  • useAutosavePurgeフック:成功した保存が行われた後にローカル自動保存を排出します。
  • hasSessionStorageSupport関数:現在の環境がブラウザのsessionStorageをサポートしているかどうかをチェックします。
  • LocalAutosaveMonitorコンポーネント:AutosaveMonitorコンポーネントを使用して、指定された間隔で自動保存を実行します。

このモジュールは、sessionStorageのサポートをチェックし、それに基づいてLocalAutosaveMonitorコンポーネントを条件付きでエクスポートします。

MediaPlaceholder

非推奨 5.3以降、wp.blockEditor.MediaPlaceholderを使用してください。

MediaUpload

非推奨 5.3以降、wp.blockEditor.MediaUploadを使用してください。

mediaUpload

ファイルアップロードボタンがアクティブ化されたときにメディアファイルをアップロードします。現在の投稿IDを注入するmediaUpload()のラッパーです。

パラメータ

  • $0 Object: 関数に渡されるパラメータオブジェクト。
  • $0.additionalData ?Object: リクエストに含める追加データ。
  • $0.allowedTypes string: アップロード可能なメディアのタイプの配列。設定されていない場合はすべてのタイプが許可されます。
  • $0.filesList Array: ファイルのリスト。
  • $0.maxUploadFileSize ?number: サイトで許可される最大アップロードサイズ(バイト)。
  • $0.onError Function: エラーが発生したときに呼び出される関数。
  • $0.onFileChange Function: ファイルまたはファイルの一時的な表現が利用可能になるたびに呼び出される関数。

MediaUploadCheck

非推奨 5.3以降、wp.blockEditor.MediaUploadCheckを使用してください。

MultiSelectScrollIntoView

非推奨 5.3以降、wp.blockEditor.MultiSelectScrollIntoViewを使用してください。

NavigableToolbar

非推奨 5.3以降、wp.blockEditor.NavigableToolbarを使用してください。

ObserveTyping

非推奨 5.3以降、wp.blockEditor.ObserveTypingを使用してください。

PageAttributesCheck

投稿タイプがページ属性をサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: – コンポーネントのプロパティ。
  • props.children Element: – レンダリングされる子コンポーネント。

戻り値

  • Component|null: レンダリングされた子コンポーネントまたはページ属性がサポートされていない場合はnull。

PageAttributesOrder

ページの順序を設定するためのエディタインターフェース内の数値入力をレンダリングします。このコンポーネントは現在コアでは使用されていませんが、後方互換性のために保持されています。

戻り値

  • Component: レンダリングされるコンポーネント。

PageAttributesPanel

ページ属性パネルコンポーネントをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PageAttributesParent

指定されたページの親ページを選択するためのエディタインターフェース内のドロップダウンメニューをレンダリングします。

戻り値

  • Component|null: レンダリングされるコンポーネント。投稿タイプが階層的でない場合はnullを返します。

PageTemplate

投稿テンプレートを選択および管理するためのドロップダウンメニューを提供します。

ドロップダウンメニューには、メニューを切り替えるためのボタン、利用可能なテンプレートのリスト、およびテンプレートの作成と編集のオプションが含まれます。

戻り値

  • JSX.Element: レンダリングされたClassicThemeControlコンポーネント。

PanelColorSettings

非推奨 5.3以降、wp.blockEditor.PanelColorSettingsを使用してください。

PlainText

非推奨 5.3以降、wp.blockEditor.PlainTextを使用してください。

PluginBlockSettingsMenuItem

ブロック設定メニューに新しいアイテムをレンダリングします。

使用法

  1. // Using ES5 syntax
  2. var __ = wp.i18n.__;
  3. var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
  4. function doOnClick() {
  5. // To be called when the user clicks the menu item.
  6. }
  7. function MyPluginBlockSettingsMenuItem() {
  8. return React.createElement( PluginBlockSettingsMenuItem, {
  9. allowedBlocks: [ 'core/paragraph' ],
  10. icon: 'dashicon-name',
  11. label: __( 'Menu item text' ),
  12. onClick: doOnClick,
  13. } );
  14. }
  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
  4. const doOnClick = () => {
  5. // To be called when the user clicks the menu item.
  6. };
  7. const MyPluginBlockSettingsMenuItem = () => (
  8. <PluginBlockSettingsMenuItem
  9. allowedBlocks={ [ 'core/paragraph' ] }
  10. icon="dashicon-name"
  11. label={ __( 'Menu item text' ) }
  12. onClick={ doOnClick }
  13. />
  14. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.allowedBlocks [Array]: アイテムが表示されるブロック名のリストを含む配列。存在しない場合は、任意のブロックに対してレンダリングされます。複数のブロックが選択されている場合、すべてが許可リストに含まれている場合にのみ表示されます。
  • props.icon [WPBlockTypeIconRender]: Dashiconアイコンスラッグ文字列、またはSVG WP要素。
  • props.label string: メニューアイテムのテキスト。
  • props.onClick Function: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。
  • props.small [boolean]: ラベルをレンダリングするかどうか。
  • props.role [string]: メニューアイテムのARIAロール。

戻り値

  • Component: レンダリングされるコンポーネント。

PluginDocumentSettingPanel

ドキュメントサイドバーのステータス&可用性パネルの下にアイテムをレンダリングします。

使用法

  1. // Using ES5 syntax
  2. var el = React.createElement;
  3. var __ = wp.i18n.__;
  4. var registerPlugin = wp.plugins.registerPlugin;
  5. var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
  6. function MyDocumentSettingPlugin() {
  7. return el(
  8. PluginDocumentSettingPanel,
  9. {
  10. className: 'my-document-setting-plugin',
  11. title: 'My Panel',
  12. name: 'my-panel',
  13. },
  14. __( 'My Document Setting Panel' )
  15. );
  16. }
  17. registerPlugin( 'my-document-setting-plugin', {
  18. render: MyDocumentSettingPlugin,
  19. } );
  1. // Using ESNext syntax
  2. import { registerPlugin } from '@wordpress/plugins';
  3. import { PluginDocumentSettingPanel } from '@wordpress/editor';
  4. const MyDocumentSettingTest = () => (
  5. <PluginDocumentSettingPanel
  6. className="my-document-setting-plugin"
  7. title="My Panel"
  8. name="my-panel"
  9. >
  10. <p>My Document Setting Panel</p>
  11. </PluginDocumentSettingPanel>
  12. );
  13. registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.name string: 必須。パネルの機械に優しい名前。
  • props.className [string]: 行に追加されるオプションのクラス名。
  • props.title [string]: パネルの上部に表示されるタイトル
  • props.icon [WPBlockTypeIconRender]: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。
  • props.children Element: レンダリングされる子要素

戻り値

  • Component: レンダリングされるコンポーネント。

PluginMoreMenuItem

PluginsグループのメニューアイテムをMore Menuドロップダウンにレンダリングし、提供されたプロップに応じてボタンまたはリンクとして使用できます。コンポーネント内のテキストはメニューアイテムラベルとして表示されます。

使用法

  1. // Using ES5 syntax
  2. var __ = wp.i18n.__;
  3. var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
  4. var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
  5. function onButtonClick() {
  6. alert( 'Button clicked.' );
  7. }
  8. function MyButtonMoreMenuItem() {
  9. return wp.element.createElement(
  10. PluginMoreMenuItem,
  11. {
  12. icon: moreIcon,
  13. onClick: onButtonClick,
  14. },
  15. __( 'My button title' )
  16. );
  17. }
  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginMoreMenuItem } from '@wordpress/editor';
  4. import { more } from '@wordpress/icons';
  5. function onButtonClick() {
  6. alert( 'Button clicked.' );
  7. }
  8. const MyButtonMoreMenuItem = () => (
  9. <PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
  10. { __( 'My button title' ) }
  11. </PluginMoreMenuItem>
  12. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.href [string]: hrefが提供されている場合、メニューアイテムはボタンではなくアンカーとして表されます。これはアンカーのhref属性に対応します。
  • props.icon [WPBlockTypeIconRender]: メニューアイテムラベルの左側にレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。
  • props.onClick [Function]: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。
  • props.other [...*]: 追加のプロップは、基盤となるButtonコンポーネントに渡されます。

戻り値

  • Component: レンダリングされるコンポーネント。

PluginPostPublishPanel

投稿の公開フロー(ユーザーが投稿を公開した後に開くサイドパネル)に提供されたコンテンツをレンダリングします。

使用法

  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginPostPublishPanel } from '@wordpress/editor';
  4. const MyPluginPostPublishPanel = () => (
  5. <PluginPostPublishPanel
  6. className="my-plugin-post-publish-panel"
  7. title={ __( 'My panel title' ) }
  8. initialOpen={ true }
  9. >
  10. { __( 'My panel content' ) }
  11. </PluginPostPublishPanel>
  12. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.className [string]: パネルに追加されるオプションのクラス名。
  • props.title [string]: パネルの上部に表示されるタイトル。
  • props.initialOpen [boolean]: パネルを初期状態で開くかどうか。タイトルが提供されていない場合は常に開かれます。
  • props.icon [WPBlockTypeIconRender]: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。
  • props.children Element: レンダリングされる子要素

戻り値

  • Component: レンダリングされるコンポーネント。

PluginPostStatusInfo

ドキュメントサイドバーのサマリーパネルに行をレンダリングします。これは、機能に基づいて名付けられ、実装されていることに注意する必要があります。

使用法

  1. // Using ES5 syntax
  2. var __ = wp.i18n.__;
  3. var PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;
  4. function MyPluginPostStatusInfo() {
  5. return React.createElement(
  6. PluginPostStatusInfo,
  7. {
  8. className: 'my-plugin-post-status-info',
  9. },
  10. __( 'My post status info' )
  11. );
  12. }
  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginPostStatusInfo } from '@wordpress/editor';
  4. const MyPluginPostStatusInfo = () => (
  5. <PluginPostStatusInfo className="my-plugin-post-status-info">
  6. { __( 'My post status info' ) }
  7. </PluginPostStatusInfo>
  8. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.className [string]: 行に追加されるオプションのクラス名。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: レンダリングされるコンポーネント。

PluginPrePublishPanel

公開フロー(ユーザーがメインエディタから「公開」を最初に押したときに開くサイドパネル)に提供されたコンテンツをレンダリングします。

使用法

  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginPrePublishPanel } from '@wordpress/editor';
  4. const MyPluginPrePublishPanel = () => (
  5. <PluginPrePublishPanel
  6. className="my-plugin-pre-publish-panel"
  7. title={ __( 'My panel title' ) }
  8. initialOpen={ true }
  9. >
  10. { __( 'My panel content' ) }
  11. </PluginPrePublishPanel>
  12. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.className [string]: パネルに追加されるオプションのクラス名。
  • props.title [string]: パネルの上部に表示されるタイトル。
  • props.initialOpen [boolean]: パネルを初期状態で開くかどうか。タイトルが提供されていない場合は常に開かれます。
  • props.icon [WPBlockTypeIconRender]: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。
  • props.children Element: レンダリングされる子要素

戻り値

  • Component: レンダリングされるコンポーネント。

PluginPreviewMenuItem

プレビューのドロップダウンにメニュー項目をレンダリングします。提供されたプロパティに応じてボタンまたはリンクとして使用できます。コンポーネント内のテキストはメニュー項目のラベルとして表示されます。

使用法

  1. import { __ } from '@wordpress/i18n';
  2. import { PluginPreviewMenuItem } from '@wordpress/editor';
  3. import { external } from '@wordpress/icons';
  4. function onPreviewClick() {
  5. // Handle preview action
  6. }
  7. const ExternalPreviewMenuItem = () => (
  8. <PreviewDropdownMenuItem icon={ external } onClick={ onPreviewClick }>
  9. { __( 'Preview in new tab' ) }
  10. </PreviewDropdownMenuItem>
  11. );
  12. registerPlugin( 'external-preview-menu-item', {
  13. render: ExternalPreviewMenuItem,
  14. } );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.href [string]: href が提供されると、メニュー項目はボタンの代わりにアンカーとしてレンダリングされます。これはアンカーの href 属性に対応します。
  • props.icon [WPBlockTypeIconRender]: メニュー項目のラベルの左側にレンダリングされるアイコン。Dashicon スラグまたは SVG WP 要素である可能性があります。
  • props.onClick [Function]: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。
  • props.other [...*]: 追加のプロパティは、基盤となる MenuItem コンポーネントに渡されます。

戻り値

  • Component: レンダリングされたメニュー項目コンポーネント。

PluginSidebar

有効化されるとサイドバーをレンダリングします。PluginSidebar 内の内容はサイドバー内のコンテンツとして表示されます。また、isPinnable フラグが true に設定されていると、自動的に対応する PluginSidebarMenuItem コンポーネントがレンダリングされます。サイドバーを表示したい場合は、PluginSidebarMoreMenuItem コンポーネントまたは wp.data.dispatch API を使用できます:

  1. wp.data
  2. .dispatch( 'core/edit-post' )
  3. .openGeneralSidebar( 'plugin-name/sidebar-name' );

関連

  • PluginSidebarMoreMenuItem

使用法

  1. // Using ES5 syntax
  2. var __ = wp.i18n.__;
  3. var el = React.createElement;
  4. var PanelBody = wp.components.PanelBody;
  5. var PluginSidebar = wp.editor.PluginSidebar;
  6. var moreIcon = React.createElement( 'svg' ); //... svg element.
  7. function MyPluginSidebar() {
  8. return el(
  9. PluginSidebar,
  10. {
  11. name: 'my-sidebar',
  12. title: 'My sidebar title',
  13. icon: moreIcon,
  14. },
  15. el( PanelBody, {}, __( 'My sidebar content' ) )
  16. );
  17. }
  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PanelBody } from '@wordpress/components';
  4. import { PluginSidebar } from '@wordpress/editor';
  5. import { more } from '@wordpress/icons';
  6. const MyPluginSidebar = () => (
  7. <PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }>
  8. <PanelBody>{ __( 'My sidebar content' ) }</PanelBody>
  9. </PluginSidebar>
  10. );

パラメータ

  • props Object: 要素のプロパティ。
  • props.name string: サイドバーを識別する文字列。プラグインのスコープ内で登録されたすべてのサイドバーに対して一意である必要があります。
  • props.className [string]: サイドバー本体に追加されるオプションのクラス名。
  • props.title string: サイドバーの上部に表示されるタイトル。
  • props.isPinnable [boolean]: サイドバーをツールバーにピン留めすることを許可するかどうか。true に設定されると、自動的に対応するメニュー項目もレンダリングされます。
  • props.icon [WPBlockTypeIconRender]: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。

PluginSidebarMoreMenuItem

Plugins グループのメニュー項目を More Menu ドロップダウンにレンダリングし、対応する PluginSidebar コンポーネントをアクティブにするために使用できます。コンポーネント内のテキストはメニュー項目のラベルとして表示されます。

使用法

  1. // Using ES5 syntax
  2. var __ = wp.i18n.__;
  3. var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
  4. var moreIcon = React.createElement( 'svg' ); //... svg element.
  5. function MySidebarMoreMenuItem() {
  6. return React.createElement(
  7. PluginSidebarMoreMenuItem,
  8. {
  9. target: 'my-sidebar',
  10. icon: moreIcon,
  11. },
  12. __( 'My sidebar title' )
  13. );
  14. }
  1. // Using ESNext syntax
  2. import { __ } from '@wordpress/i18n';
  3. import { PluginSidebarMoreMenuItem } from '@wordpress/editor';
  4. import { more } from '@wordpress/icons';
  5. const MySidebarMoreMenuItem = () => (
  6. <PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }>
  7. { __( 'My sidebar title' ) }
  8. </PluginSidebarMoreMenuItem>
  9. );

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.target string: このメニュー項目によってアクティブにしたいターゲットサイドバーを識別する文字列。指定したサイドバーに与えた name プロパティと同じである必要があります。
  • props.icon [WPBlockTypeIconRender]: メニューアイテムラベルの左側にレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。

戻り値

  • Component: レンダリングされるコンポーネント。

PostAuthor

投稿の著者を選択するためのコンポーネントをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PostAuthorCheck

投稿タイプが著者をサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component|null: レンダリングされるコンポーネント。投稿タイプが著者をサポートしていない場合や、利用可能な著者がいない場合は null を返します。

PostAuthorPanel

投稿著者パネルコンポーネントをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PostComments

コメントのステータスを管理するためのフォームです。

戻り値

  • JSX.Element: レンダリングされた PostComments コンポーネント。

PostDiscussionPanel

このコンポーネントは、現在の投稿のコメントおよびピンバック設定を更新することを可能にします。内部的には、現在の投稿が上記をサポートしているかどうか、discussion-panel パネルが有効になっているかどうかをチェックします。

戻り値

  • JSX.Element|null: レンダリングされた PostDiscussionPanel コンポーネント。

PostExcerpt

投稿の抜粋のための編集可能なテキストエリアをレンダリングします。テンプレート、テンプレートパーツ、およびパターンは、excerpt フィールドを意味的に説明として使用します。さらに、テンプレートとテンプレートパーツは、REST API で excerpt フィールドを description としてオーバーライドします。このコンポーネントは、適切なラベリングと編集されたエンティティの更新を処理します。

パラメータ

  • props Object: – コンポーネントのプロパティ。
  • props.hideLabelFromVision [boolean]: – テキストエリアのラベルを視覚的に隠すかどうか。
  • props.updateOnBlur [boolean]: – 変更時に投稿を更新するか、ローカル状態を使用してフォーカスが外れたときに更新するか。

PostExcerptCheck

投稿タイプが抜粋フィールドをサポートしているかどうかを確認するコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: レンダリングされるコンポーネント。

PostExcerptPanel

投稿タイプが抜粋をサポートし、抜粋の編集を許可する場合にレンダリングされます。

戻り値

  • JSX.Element: レンダリングされた PostExcerptPanel コンポーネント。

PostFeaturedImage

投稿のフィーチャー画像を管理するためのコンポーネントをレンダリングします。

パラメータ

  • props Object: プロパティ。
  • props.currentPostId number: 現在の投稿の ID。
  • props.featuredImageId number: フィーチャー画像の ID。
  • props.onUpdateImage Function: 画像が更新されたときに呼び出される関数。
  • props.onRemoveImage Function: 画像が削除されたときに呼び出される関数。
  • props.media Object: フィーチャー画像を表すメディアオブジェクト。
  • props.postType string: 投稿タイプ。
  • props.noticeUI Element: 通知を表示するための UI。
  • props.noticeOperations Object: 通知を管理するための操作。

戻り値

  • Element: レンダリングされるコンポーネント。

PostFeaturedImageCheck

投稿タイプがフィーチャー画像をサポートし、テーマが投稿サムネイルをサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: レンダリングされるコンポーネント。

PostFeaturedImagePanel

投稿のフィーチャー画像のパネルをレンダリングします。

パラメータ

  • props Object: プロパティ。
  • props.withPanelBody boolean: パネルボディを含めるかどうか。デフォルトは true です。

戻り値

  • Component|null: レンダリングされるコンポーネント。フィーチャー画像のエディターパネルが無効になっている場合は Null を返します。

PostFormat

PostFormat 投稿フォーマットを変更することを可能にし、現在の投稿に対する提案を提供するコンポーネントです。

使用法

  1. <PostFormat />

戻り値

  • JSX.Element: レンダリングされた PostFormat コンポーネント。

PostFormatCheck

投稿フォーマットが存在するかどうかを確認するコンポーネントです。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: レンダリングする子要素。

戻り値

  • Component|null: レンダリングされたコンポーネントまたは投稿フォーマットが無効な場合は null を返します。

PostLastRevision

投稿の最後のリビジョンを表示するためのコンポーネントをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PostLastRevisionCheck

投稿が 1 つ以上のリビジョンを持っている場合にその子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component|null: 投稿が 1 つ以上のリビジョンを持っている場合にレンダリングされる子コンポーネント、そうでない場合は null を返します。

PostLastRevisionPanel

投稿の最後のリビジョンを表示するためのパネルをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PostLockedModal

他のユーザーによって編集のためにロックされている投稿があるときに表示されるモーダルコンポーネントです。このモーダルは、ロック状態に関する情報と、引き継ぐかエディタを終了するオプションを提供します。

戻り値

  • JSX.Element|null: レンダリングされた PostLockedModal コンポーネント。

PostPendingStatus

投稿の保留ステータスを表示および切り替えるためのコンポーネントです。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

PostPendingStatusCheck

このコンポーネントは、現在の投稿の公開ステータスを確認します。投稿がすでに公開されているか、ユーザーに公開する権限がない場合は null を返します。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • JSX.Element|null: レンダリングされる子要素または投稿がすでに公開されているか、ユーザーに公開する権限がない場合は null を返します。

PostPingbacks

WordPress 投稿でピンバックとトラックバックを有効または無効にするためのコントロールをレンダリングします。

PostPreviewButton

プレビュー用の新しいウィンドウまたはタブを開くボタンをレンダリングし、このウィンドウに中間メッセージを書き込み、実際のプレビューロinkに移動します。投稿が表示できない場合はボタンはレンダリングされず、保存できない場合は無効になります。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.className string: ボタンのクラス名。
  • props.textContent string: ボタンのテキストコンテンツ。
  • props.forceIsAutosaveable boolean: 自動保存を強制するかどうか。
  • props.role string: ボタンの役割属性。
  • props.onPreview Function: プレビューイベントのコールバック関数。

戻り値

  • JSX.Element|null: レンダリングされたボタンコンポーネント。

PostPublishButton

公開ボタンをレンダリングします。

PostPublishButtonLabel

公開ボタンのラベルをレンダリングします。

戻り値

  • string: 公開ボタンのラベル。

PostPublishPanel

投稿を公開するためのパネルをレンダリングします。

PostSavedState

投稿が保存されているかどうかを示し、保存ボタンを提供するコンポーネントです。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.forceIsDirty ?boolean: 投稿をダーティとしてマークすることを強制するかどうか。

戻り値

  • import('react').ComponentType: コンポーネント。

PostSchedule

PostSchedule コンポーネントをレンダリングします。投稿をスケジュールすることを可能にします。

パラメータ

  • props Object: プロパティ。
  • props.onClose Function: コンポーネントを閉じるための関数。

戻り値

  • Component: レンダリングされるコンポーネント。

PostScheduleCheck

投稿に公開アクションがある場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: – レンダリングされるコンポーネントまたは公開アクションがない場合は null を返します。

PostScheduleLabel

PostScheduleLabel コンポーネントをレンダリングします。

パラメータ

  • props Object: プロパティ。

戻り値

  • Component: レンダリングされるコンポーネント。

PostSchedulePanel

Post Schedule Panel コンポーネントをレンダリングします。

戻り値

  • Component: レンダリングされるコンポーネント。

PostSlug

PostSlug コンポーネントをレンダリングします。投稿スラグを編集するためのコントロールを提供します。

戻り値

  • Component: レンダリングされるコンポーネント。

PostSlugCheck

投稿タイプがスラグをサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: レンダリングされるコンポーネント。

PostSticky

PostSticky コンポーネントをレンダリングします。スティッキーポスト機能のためのチェックボックスコントロールを提供します。

戻り値

  • Component: レンダリングされるコンポーネント。

PostStickyCheck

投稿にスティッキーアクションがある場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: レンダリングされる子要素。

戻り値

  • Component: レンダリングされるコンポーネントまたは投稿タイプが「投稿」でない場合、または hasStickyAction が false の場合は null を返します。

PostSwitchToDraftButton

投稿をドラフトステータスに切り替えることを可能にするボタンコンポーネントをレンダリングします。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

PostSyncStatus

投稿の同期ステータスをレンダリングします。

戻り値

  • JSX.Element|null: レンダリングされた同期ステータスコンポーネント。

PostTaxonomies

投稿に関連付けられたタクソノミーをレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.taxonomyWrapper Function: 各タクソノミーコンポーネントのラッパー関数。

戻り値

  • Array: 表示されるタクソノミーを表す JSX 要素の配列。

PostTaxonomiesCheck

現在の投稿タイプがタクソノミーを持っている場合にのみ、その子要素をレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: レンダリングする子コンポーネント。

戻り値

  • Component|null: 現在の投稿タイプにタクソノミーがない場合は、レンダリングされた子コンポーネントまたは null を返します。

PostTaxonomiesFlatTermSelector

フラットタームセレクターコンポーネントをレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.slug string: タクソノミーのスラグ。
  • props.__nextHasNoMarginBottom boolean: 将来のバージョンでデフォルトになるマージンなしスタイルを選択することを開始します。現在は WordPress 7.0 に予定されています。(これが発生した場合、プロパティは安全に削除できます。)

戻り値

  • JSX.Element: レンダリングされたフラットタームセレクターコンポーネント。

PostTaxonomiesHierarchicalTermSelector

階層タームセレクター。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.slug string: タクソノミースラグ。

戻り値

  • Element: 階層タームセレクターコンポーネント。

PostTaxonomiesPanel

特定のタクソノミーのためのパネルをレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.taxonomy Object: タクソノミーオブジェクト。
  • props.children Element: 子コンポーネント。

戻り値

  • Component: レンダリングされたタクソノミーパネル。

PostTemplatePanel

現在のエディタ設定とユーザー権限に基づいてテンプレートコントロールを表示します。

戻り値

  • JSX.Element|null: レンダリングされた PostTemplatePanel コンポーネント。

PostTextEditor

ビジュアルおよびテキストモードでコンテンツとともに投稿テキストエディタを表示します。

戻り値

  • JSX.Element|null: レンダリングされた PostTextEditor コンポーネント。

PostTitle

PostTitle コンポーネントをレンダリングします。

パラメータ

  • _ Object: 未使用のパラメータ。
  • forwardedRef Element: コンポーネントのフォワーディッドリファレンス。

戻り値

  • Component: レンダリングされた PostTitle コンポーネント。

PostTitleRaw

文書化されていない宣言です。

PostTrash

エディタ内で投稿ゴミ箱ボタンと確認ダイアログを表示します。

パラメータ

  • An ?{onActionPerformed: Object}: onActionPerformed 関数を含むオブジェクト。

戻り値

  • JSX.Element|null: レンダリングされた PostTrash コンポーネント。

PostTrashCheck

投稿をゴミ箱に入れることができる場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。

パラメータ

  • props Object: – コンポーネントのプロパティ。
  • props.children Element: – レンダリングされる子コンポーネント。

戻り値

  • Component|null: 投稿をゴミ箱に入れることができない場合は、レンダリングされる子コンポーネントまたは null を返します。

PostTypeSupportCheck

現在のエディタ投稿タイプが指定された supportKeys プロパティのいずれかをサポートしている場合にのみ、自身の子要素をレンダリングするコンポーネントです。

パラメータ

  • props Object: プロパティ。
  • props.children Element: 投稿タイプがサポートされている場合にレンダリングされる子要素。
  • props.supportKeys (string|string[]): テストするキーの文字列または文字列配列。

戻り値

  • Component: レンダリングされるコンポーネント。

PostURL

PostURL コンポーネントをレンダリングします。

使用法

  1. <PostURL />

パラメータ

  • onClose Function: ポップオーバーが閉じられたときに実行されるコールバック関数。

戻り値

  • Component: レンダリングされた PostURL コンポーネント。

PostURLCheck

投稿 URL が有効で表示可能かどうかを確認します。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: 子コンポーネント。

戻り値

  • Component|null: 投稿 URL が有効で表示可能な場合は子コンポーネント、そうでない場合は null を返します。

PostURLLabel

投稿 URL のラベルコンポーネントを表します。

戻り値

  • Component: PostURLLabel コンポーネント。

PostURLPanel

PostURLPanel コンポーネントをレンダリングします。

戻り値

  • JSX.Element: レンダリングされた PostURLPanel コンポーネント。

PostVisibility

ユーザーが投稿の可視性を設定できるようにします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.onClose Function: ポップオーバーが閉じられたときに呼び出される関数。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

PostVisibilityCheck

現在の投稿が編集(公開)できるかどうかを判断し、この情報を提供されたレンダリング関数に渡します。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.render Function: コンポーネントをレンダリングする関数。canEdit プロパティを持つオブジェクトを受け取ります。

戻り値

  • JSX.Element: レンダリングされたコンポーネント。

PostVisibilityLabel

現在の投稿の可視性設定のラベルを返します。

戻り値

  • string: 投稿の可視性ラベル。

privateApis

文書化されていない宣言です。

registerEntityAction

新しい DataViews アクションを登録します。

これは実験的な API であり、変更される可能性があります。現在は Gutenberg プラグインでのみ利用可能です。

パラメータ

  • kind string: エンティティの種類。
  • name string: エンティティの名前。
  • config Action: アクションの設定。

RichText

非推奨 5.3 以降、wp.blockEditor.RichText を使用してください。

RichTextShortcut

非推奨 5.3 以降、wp.blockEditor.RichTextShortcut を使用してください。

RichTextToolbarButton

非推奨 5.3 以降、wp.blockEditor.RichTextToolbarButton を使用してください。

ServerSideRender

文書化されていない宣言です。

SkipToSelectedBlock

非推奨 5.3 以降、wp.blockEditor.SkipToSelectedBlock を使用してください。

store

エディタ名前空間のストア定義。

関連

タイプ

  • Object

storeConfig

投稿エディタデータストアの設定。

関連

タイプ

  • Object

TableOfContents

目次コンポーネントをレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.hasOutlineItemsDisabled boolean: アウトライン項目が無効かどうか。
  • props.repositionDropdown boolean: ドロップダウンを再配置するかどうか。
  • ref Element.ref: コンポーネントの ref。

戻り値

  • JSX.Element: レンダリングされた目次コンポーネント。

TextEditorGlobalKeyboardShortcuts

エディタのキーボードショートカットを処理します。

エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。

ThemeSupportCheck

現在のテーマが特定の機能をサポートしているかどうかを確認し、サポートされている場合は子要素をレンダリングします。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.children Element: テーマが指定された機能をサポートしている場合にレンダリングされる子要素。
  • props.supportKeys string|string[]: チェックするテーマサポートのキー。

戻り値

  • JSX.Element|null: テーマが指定された機能をサポートしている場合にレンダリングされる子要素、そうでない場合は null を返します。

TimeToRead

コンテンツ内の読み取り時間を表示するコンポーネントです。

戻り値

  • JSX.Element: レンダリングされた TimeToRead コンポーネント。

transformStyles

文書化されていない宣言です。

unregisterEntityAction

DataViews アクションの登録を解除します。

これは実験的な API であり、変更される可能性があります。現在は Gutenberg プラグインでのみ利用可能です。

パラメータ

  • kind string: エンティティの種類。
  • name string: エンティティの名前。
  • actionId string: アクション ID。

UnsavedChangesWarning

エディタを離れる前に未保存の変更がある場合、ユーザーに警告します。投稿エディタおよびサイトエディタと互換性があります。

戻り値

  • Component: コンポーネント。

URLInput

非推奨 5.3 以降、wp.blockEditor.URLInput を使用してください。

URLInputButton

非推奨 5.3 以降、wp.blockEditor.URLInputButton を使用してください。

URLPopover

非推奨 5.3 以降、wp.blockEditor.URLPopover を使用してください。

useEntitiesSavedStatesIsDirty

エンティティがダーティ(編集済み)かどうかを判断し、選択された/未選択のエンティティを管理する方法を提供するカスタムフックです。

戻り値

  • Object: 次のプロパティを含むオブジェクト: – dirtyEntityRecords: ダーティエンティティレコードの配列。 – isDirty: ダーティエンティティレコードがあるかどうかを示すブール値。 – setUnselectedEntities: 未選択のエンティティを設定する関数。 – unselectedEntities: 未選択のエンティティの配列。

usePostScheduleLabel

投稿スケジュールのラベルを取得するためのカスタムフックです。

パラメータ

  • options Object: フックのオプション。
  • options.full boolean: フルラベルを取得するかどうか。デフォルトは false です。

戻り値

  • string: 投稿スケジュールのラベル。

usePostURLLabel

投稿 URL のラベルを取得するためのカスタムフックです。

戻り値

  • string: フィルタリングされデコードされた投稿 URL ラベル。

usePostVisibilityLabel

現在の投稿の可視性設定のラベルを取得します。

戻り値

  • string: 投稿の可視性ラベル。

userAutocompleter

ユーザーのメンションを補完するコンポーネントです。

タイプ

  • WPCompleter

VisualEditorGlobalKeyboardShortcuts

エディタのキーボードショートカットを処理します。

エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。

Warning

非推奨 5.3 以降、wp.blockEditor.Warning を使用してください。

withColorContext

非推奨 5.3 以降、wp.blockEditor.createCustomColorsHOC を使用してください。

withColors

非推奨 5.3 以降、wp.blockEditor.withColors を使用してください。

withFontSizes

非推奨 5.3 以降、wp.blockEditor.withFontSizes を使用してください。

WordCount

投稿コンテンツの単語数をレンダリングします。

戻り値

  • JSX.Element|null: レンダリングされた WordCount コンポーネント。

WritingFlow

非推奨 5.3 以降、wp.blockEditor.WritingFlow を使用してください。

このパッケージへの貢献

これはグーテンベルクプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやグーテンベルク全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。