- インストール
- 動作の仕組み
- コンポーネント
- API
- AlignmentToolbar
- Autocomplete
- AutosaveMonitor
- BlockAlignmentToolbar
- BlockControls
- BlockEdit
- BlockEditorKeyboardShortcuts
- BlockFormatControls
- BlockIcon
- BlockInspector
- BlockList
- BlockMover
- BlockNavigationDropdown
- BlockSelectionClearer
- BlockSettingsMenu
- BlockTitle
- BlockToolbar
- CharacterCount
- cleanForSlug
- ColorPalette
- ContrastChecker
- CopyHandler
- createCustomColorsHOC
- DefaultBlockAppender
- DocumentBar
- DocumentOutline
- DocumentOutlineCheck
- EditorHistoryRedo
- EditorHistoryUndo
- EditorKeyboardShortcuts
- EditorKeyboardShortcutsRegister
- EditorNotices
- EditorProvider
- EditorSnackbars
- EntitiesSavedStates
- ErrorBoundary
- FontSizePicker
- getColorClassName
- getColorObjectByAttributeValues
- getColorObjectByColorValue
- getFontSize
- getFontSizeClass
- getTemplatePartIcon
- InnerBlocks
- Inserter
- InspectorAdvancedControls
- InspectorControls
- LocalAutosaveMonitor
- MediaPlaceholder
- MediaUpload
- mediaUpload
- MediaUploadCheck
- MultiSelectScrollIntoView
- NavigableToolbar
- ObserveTyping
- PageAttributesCheck
- PageAttributesOrder
- PageAttributesPanel
- PageAttributesParent
- PageTemplate
- PanelColorSettings
- PlainText
- PluginBlockSettingsMenuItem
- PluginDocumentSettingPanel
- PluginMoreMenuItem
- PluginPostPublishPanel
- PluginPostStatusInfo
- PluginPrePublishPanel
- PluginPreviewMenuItem
- PluginSidebar
- PluginSidebarMoreMenuItem
- PostAuthor
- PostAuthorCheck
- PostAuthorPanel
- PostComments
- PostDiscussionPanel
- PostExcerpt
- PostExcerptCheck
- PostExcerptPanel
- PostFeaturedImage
- PostFeaturedImageCheck
- PostFeaturedImagePanel
- PostFormat
- PostFormatCheck
- PostLastRevision
- PostLastRevisionCheck
- PostLastRevisionPanel
- PostLockedModal
- PostPendingStatus
- PostPendingStatusCheck
- PostPingbacks
- PostPreviewButton
- PostPublishButton
- PostPublishButtonLabel
- PostPublishPanel
- PostSavedState
- PostSchedule
- PostScheduleCheck
- PostScheduleLabel
- PostSchedulePanel
- PostSlug
- PostSlugCheck
- PostSticky
- PostStickyCheck
- PostSwitchToDraftButton
- PostSyncStatus
- PostTaxonomies
- PostTaxonomiesCheck
- PostTaxonomiesFlatTermSelector
- PostTaxonomiesHierarchicalTermSelector
- PostTaxonomiesPanel
- PostTemplatePanel
- PostTextEditor
- PostTitle
- PostTitleRaw
- PostTrash
- PostTrashCheck
- PostTypeSupportCheck
- PostURL
- PostURLCheck
- PostURLLabel
- PostURLPanel
- PostVisibility
- PostVisibilityCheck
- PostVisibilityLabel
- privateApis
- registerEntityAction
- RichText
- RichTextShortcut
- RichTextToolbarButton
- ServerSideRender
- SkipToSelectedBlock
- store
- storeConfig
- TableOfContents
- TextEditorGlobalKeyboardShortcuts
- ThemeSupportCheck
- TimeToRead
- transformStyles
- unregisterEntityAction
- UnsavedChangesWarning
- URLInput
- URLInputButton
- URLPopover
- useEntitiesSavedStatesIsDirty
- usePostScheduleLabel
- usePostURLLabel
- usePostVisibilityLabel
- userAutocompleter
- VisualEditorGlobalKeyboardShortcuts
- Warning
- withColorContext
- withColors
- withFontSizes
- WordCount
- WritingFlow
- このパッケージへの貢献
インストール
モジュールをインストールします
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
実装によって返されると、アイコンボタンのツールバーをレンダリングします。これは、ブロックが選択されたときにブロックレベルの変更を利用可能にするために便利です。たとえば、ブロックが整列をサポートしている場合、選択されたブロックのツールバーに整列オプションを表示したいかもしれません。
例:
( function ( editor, React ) {
var el = React.createElement,
BlockControls = editor.BlockControls,
AlignmentToolbar = editor.AlignmentToolbar;
function edit( props ) {
return [
// Controls: (only visible when block is selected)
el(
BlockControls,
{ key: 'controls' },
el( AlignmentToolbar, {
value: props.align,
onChange: function ( nextAlign ) {
props.setAttributes( { align: nextAlign } );
},
} )
),
// Block content: (with alignment as attribute)
el(
'p',
{ key: 'text', style: { textAlign: props.align } },
'Hello World!'
),
];
}
} )( window.wp.editor, window.React );
この例では、AlignmentToolbar
をBlockControls
要素の子としてレンダリングすることに注意してください。これは、ブロックのテキスト整列を簡素化するために使用できる別の事前設定されたコンポーネントです。
また、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
属性に似ています。
例:
( function ( editor, React ) {
var el = React.createElement,
RichText = editor.RichText;
function edit( props ) {
function onChange( value ) {
props.setAttributes( { text: value } );
}
return el( RichText, {
value: props.attributes.text,
onChange: onChange,
} );
}
// blocks.registerBlockType( ..., { edit: edit, ... } );
} )( window.wp.editor, window.React );
API
AlignmentToolbar
Autocomplete
AutosaveMonitor
編集された投稿に対する変更を監視し、必要に応じて自動保存をトリガーします。
論理は簡単です:props.interval
秒ごとにチェックが行われます。変更が検出された場合、props.autosave()
が呼び出されます。変更と自動保存の間の時間は変動しますが、props.interval
秒を超えることはありません。変更を検出する特定の方法など、詳細については以下のコードを参照してください。
2つの注意点があります:
- チェック時に
props.isAutosaveable
がfalseの場合、チェックは毎秒再試行されます。 - タイマーは
props.disableIntervalChecks
をtrue
に設定することで無効にできます。そのモードでは、変更があれば即座にprops.autosave()
がトリガーされます。
使用法
<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
BlockControls
BlockEdit
BlockEditorKeyboardShortcuts
非推奨 5.3以降、
wp.blockEditor.BlockEditorKeyboardShortcuts
を使用してください。
BlockFormatControls
BlockIcon
BlockInspector
BlockList
BlockMover
BlockNavigationDropdown
BlockSelectionClearer
BlockSettingsMenu
BlockTitle
BlockToolbar
CharacterCount
投稿内容の文字数をレンダリングします。
戻り値
cleanForSlug
投稿スラッグとして使用するための文字列の基本的なクリーンアップを行います
これは、WordPressコアのsanitize_title()が行うことの一部を再現しますが、スラッグがどのようになるかを近似するためにのみ設計されています。
ラテン1補助およびラテン拡張Aの文字を基本的なラテン文字に変換します。結合ダイアクリティカルマークを削除します。空白、ピリオド、およびスラッシュをハイフンに変換します。ハイフンとアンダースコアを除く残りの非単語文字を削除します。残りの文字列を小文字に変換します。オクテット、HTMLエンティティ、または他のエンコードされた文字は考慮されません。
パラメータ
- 文字列
string
: 処理されるタイトルまたはスラッグ
戻り値
ColorPalette
ContrastChecker
CopyHandler
createCustomColorsHOC
DefaultBlockAppender
DocumentBar
このコンポーネントは、エディタの上部にナビゲーションバーをレンダリングします。現在のドキュメントのタイトル、戻るボタン(該当する場合)、およびコマンドセンターボタンを表示します。また、「見つからない」や「同期されていない」など、ドキュメントのさまざまな状態を処理します。
使用法
<DocumentBar />
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.title
string
: 編集中のドキュメントまたはテンプレートのタイトルにデフォルト設定されるドキュメントのタイトル。 - props.icon
IconType
: ドキュメントのアイコン、デフォルトなし。(ドキュメントの投稿タイプを示すデフォルトアイコンはもはや使用されません。)
戻り値
DocumentOutline
ドキュメントアウトラインコンポーネントをレンダリングします。
パラメータ
- props
Object
: プロパティ。 - props.onSelect
Function
: アウトラインアイテムが選択されたときに呼び出される関数。 - props.isTitleSupported
boolean
: タイトルがサポートされているかどうかを示します。 - props.hasOutlineItemsDisabled
boolean
: アウトラインアイテムが無効になっているかどうかを示します。
戻り値
DocumentOutlineCheck
コンポーネントは、ドキュメント内に見出し(core/headingブロック)が存在するかどうかをチェックします。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
EditorHistoryRedo
エディタ履歴のやり直しボタンをレンダリングします。
パラメータ
- props
Object
: – プロパティ。 - ref
Ref
: – フォワードされた参照。
戻り値
EditorHistoryUndo
エディタ履歴の元に戻すボタンをレンダリングします。
パラメータ
- props
Object
: – プロパティ。 - ref
Ref
: – フォワードされた参照。
戻り値
EditorKeyboardShortcuts
エディタのキーボードショートカットを処理します。
エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。
EditorKeyboardShortcutsRegister
エディタのキーボードショートカットを登録するためのコンポーネントです。
戻り値
EditorNotices
このコンポーネントは、エディタに表示される通知をレンダリングします。ピン留めされた通知が最初に表示され、その後に閉じることができる通知が続きます。
使用法
<EditorNotices />
戻り値
EditorProvider
このコンポーネントは、新しい投稿編集コンテキストを確立し、新しい投稿エディタ(またはテンプレートエディタを持つ投稿)のエントリポイントとして機能します。
投稿、ページ、テンプレート、カスタム投稿タイプ、パターン、テンプレートパーツなど、多くの投稿タイプをサポートしています。
すべての変更は@wordpress/core-data
ストアに対して行われます。
使用法
<EditorProvider
post={ post }
settings={ settings }
__unstableTemplate={ template }
>
{ children }
</EditorProvider>
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.post
[Object]
: 編集する投稿オブジェクト。これは必須です。 - props.__unstableTemplate
[Object]
: 編集された投稿をラップするテンプレートオブジェクト。これはオプションで、投稿タイプがテンプレートをサポートしている場合(投稿やページなど)のみ使用できます。 - props.settings
[Object]
: エディタに使用する設定オブジェクト。これはオプションで、デフォルト設定を上書きするために使用できます。 - props.children
[Element]
: BlockEditorProviderコンテキストが適用される子要素。これはオプションです。
戻り値
EditorSnackbars
エディタスナックバーコンポーネントをレンダリングします。
戻り値
EntitiesSavedStates
保存されたエンティティの状態を管理するコンポーネントをレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.close
Function
: ダイアログを閉じるための関数。 - props.renderDialog
Function
: ダイアログをレンダリングするための関数。
戻り値
ErrorBoundary
ErrorBoundaryは、子コンポーネントツリー内のJavaScriptエラーをキャッチし、それらのエラーをログに記録し、フォールバックUIを表示するために使用されます。
これは、getDerivedStateFromErrorおよびcomponentDidCatchのライフサイクルメソッドを使用して、子コンポーネントツリー内のエラーをキャッチします。
getDerivedStateFromErrorは、エラーがスローされた後にフォールバックUIをレンダリングするために使用され、componentDidCatchはエラー情報をログに記録するために使用されます。
FontSizePicker
getColorClassName
getColorObjectByAttributeValues
非推奨 5.3以降、
wp.blockEditor.getColorObjectByAttributeValues
を使用してください。
getColorObjectByColorValue
非推奨 5.3以降、
wp.blockEditor.getColorObjectByColorValue
を使用してください。
getFontSize
getFontSizeClass
getTemplatePartIcon
名前によって対応するアイコンを取得するためのヘルパー関数です。
パラメータ
- iconName
string
: アイコンの名前。
戻り値
InnerBlocks
Inserter
InspectorAdvancedControls
非推奨 5.3以降、
wp.blockEditor.InspectorAdvancedControls
を使用してください。
InspectorControls
LocalAutosaveMonitor
エディタ内の投稿のローカル自動保存を監視します。いくつかのフックと関数を使用して自動保存の動作を管理します:
useAutosaveNotice
フック:ローカル自動保存が存在する場合、ユーザーにローカル自動保存を復元するよう促す通知の作成を管理します。useAutosavePurge
フック:成功した保存が行われた後にローカル自動保存を排出します。hasSessionStorageSupport
関数:現在の環境がブラウザのsessionStorageをサポートしているかどうかをチェックします。LocalAutosaveMonitor
コンポーネント:AutosaveMonitor
コンポーネントを使用して、指定された間隔で自動保存を実行します。
このモジュールは、sessionStorageのサポートをチェックし、それに基づいてLocalAutosaveMonitor
コンポーネントを条件付きでエクスポートします。
MediaPlaceholder
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
MultiSelectScrollIntoView
非推奨 5.3以降、
wp.blockEditor.MultiSelectScrollIntoView
を使用してください。
NavigableToolbar
ObserveTyping
PageAttributesCheck
投稿タイプがページ属性をサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: – コンポーネントのプロパティ。 - props.children
Element
: – レンダリングされる子コンポーネント。
戻り値
PageAttributesOrder
ページの順序を設定するためのエディタインターフェース内の数値入力をレンダリングします。このコンポーネントは現在コアでは使用されていませんが、後方互換性のために保持されています。
戻り値
PageAttributesPanel
ページ属性パネルコンポーネントをレンダリングします。
戻り値
PageAttributesParent
指定されたページの親ページを選択するためのエディタインターフェース内のドロップダウンメニューをレンダリングします。
戻り値
PageTemplate
投稿テンプレートを選択および管理するためのドロップダウンメニューを提供します。
ドロップダウンメニューには、メニューを切り替えるためのボタン、利用可能なテンプレートのリスト、およびテンプレートの作成と編集のオプションが含まれます。
戻り値
PanelColorSettings
PlainText
PluginBlockSettingsMenuItem
ブロック設定メニューに新しいアイテムをレンダリングします。
使用法
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
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,
} );
}
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
const doOnClick = () => {
// To be called when the user clicks the menu item.
};
const MyPluginBlockSettingsMenuItem = () => (
<PluginBlockSettingsMenuItem
allowedBlocks={ [ 'core/paragraph' ] }
icon="dashicon-name"
label={ __( 'Menu item text' ) }
onClick={ doOnClick }
/>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.allowedBlocks
[Array]
: アイテムが表示されるブロック名のリストを含む配列。存在しない場合は、任意のブロックに対してレンダリングされます。複数のブロックが選択されている場合、すべてが許可リストに含まれている場合にのみ表示されます。 - props.icon
[WPBlockTypeIconRender]
: Dashiconアイコンスラッグ文字列、またはSVG WP要素。 - props.label
string
: メニューアイテムのテキスト。 - props.onClick
Function
: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。 - props.small
[boolean]
: ラベルをレンダリングするかどうか。 - props.role
[string]
: メニューアイテムのARIAロール。
戻り値
PluginDocumentSettingPanel
ドキュメントサイドバーのステータス&可用性パネルの下にアイテムをレンダリングします。
使用法
// Using ES5 syntax
var el = React.createElement;
var __ = wp.i18n.__;
var registerPlugin = wp.plugins.registerPlugin;
var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
function MyDocumentSettingPlugin() {
return el(
PluginDocumentSettingPanel,
{
className: 'my-document-setting-plugin',
title: 'My Panel',
name: 'my-panel',
},
__( 'My Document Setting Panel' )
);
}
registerPlugin( 'my-document-setting-plugin', {
render: MyDocumentSettingPlugin,
} );
// Using ESNext syntax
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
const MyDocumentSettingTest = () => (
<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 } );
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.name
string
: 必須。パネルの機械に優しい名前。 - props.className
[string]
: 行に追加されるオプションのクラス名。 - props.title
[string]
: パネルの上部に表示されるタイトル - props.icon
[WPBlockTypeIconRender]
: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。 - props.children
Element
: レンダリングされる子要素
戻り値
PluginMoreMenuItem
Plugins
グループのメニューアイテムをMore Menu
ドロップダウンにレンダリングし、提供されたプロップに応じてボタンまたはリンクとして使用できます。コンポーネント内のテキストはメニューアイテムラベルとして表示されます。
使用法
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
function onButtonClick() {
alert( 'Button clicked.' );
}
function MyButtonMoreMenuItem() {
return wp.element.createElement(
PluginMoreMenuItem,
{
icon: moreIcon,
onClick: onButtonClick,
},
__( 'My button title' )
);
}
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginMoreMenuItem } from '@wordpress/editor';
import { more } from '@wordpress/icons';
function onButtonClick() {
alert( 'Button clicked.' );
}
const MyButtonMoreMenuItem = () => (
<PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
{ __( 'My button title' ) }
</PluginMoreMenuItem>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.href
[string]
:href
が提供されている場合、メニューアイテムはボタンではなくアンカーとして表されます。これはアンカーのhref
属性に対応します。 - props.icon
[WPBlockTypeIconRender]
: メニューアイテムラベルの左側にレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。 - props.onClick
[Function]
: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。 - props.other
[...*]
: 追加のプロップは、基盤となるButtonコンポーネントに渡されます。
戻り値
PluginPostPublishPanel
投稿の公開フロー(ユーザーが投稿を公開した後に開くサイドパネル)に提供されたコンテンツをレンダリングします。
使用法
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginPostPublishPanel } from '@wordpress/editor';
const MyPluginPostPublishPanel = () => (
<PluginPostPublishPanel
className="my-plugin-post-publish-panel"
title={ __( 'My panel title' ) }
initialOpen={ true }
>
{ __( 'My panel content' ) }
</PluginPostPublishPanel>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.className
[string]
: パネルに追加されるオプションのクラス名。 - props.title
[string]
: パネルの上部に表示されるタイトル。 - props.initialOpen
[boolean]
: パネルを初期状態で開くかどうか。タイトルが提供されていない場合は常に開かれます。 - props.icon
[WPBlockTypeIconRender]
: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。 - props.children
Element
: レンダリングされる子要素
戻り値
PluginPostStatusInfo
ドキュメントサイドバーのサマリーパネルに行をレンダリングします。これは、機能に基づいて名付けられ、実装されていることに注意する必要があります。
使用法
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;
function MyPluginPostStatusInfo() {
return React.createElement(
PluginPostStatusInfo,
{
className: 'my-plugin-post-status-info',
},
__( 'My post status info' )
);
}
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginPostStatusInfo } from '@wordpress/editor';
const MyPluginPostStatusInfo = () => (
<PluginPostStatusInfo className="my-plugin-post-status-info">
{ __( 'My post status info' ) }
</PluginPostStatusInfo>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.className
[string]
: 行に追加されるオプションのクラス名。 - props.children
Element
: レンダリングされる子要素。
戻り値
PluginPrePublishPanel
公開フロー(ユーザーがメインエディタから「公開」を最初に押したときに開くサイドパネル)に提供されたコンテンツをレンダリングします。
使用法
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginPrePublishPanel } from '@wordpress/editor';
const MyPluginPrePublishPanel = () => (
<PluginPrePublishPanel
className="my-plugin-pre-publish-panel"
title={ __( 'My panel title' ) }
initialOpen={ true }
>
{ __( 'My panel content' ) }
</PluginPrePublishPanel>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.className
[string]
: パネルに追加されるオプションのクラス名。 - props.title
[string]
: パネルの上部に表示されるタイトル。 - props.initialOpen
[boolean]
: パネルを初期状態で開くかどうか。タイトルが提供されていない場合は常に開かれます。 - props.icon
[WPBlockTypeIconRender]
: サイドバーがツールバーにピン留めされているときにレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。 - props.children
Element
: レンダリングされる子要素
戻り値
PluginPreviewMenuItem
プレビューのドロップダウンにメニュー項目をレンダリングします。提供されたプロパティに応じてボタンまたはリンクとして使用できます。コンポーネント内のテキストはメニュー項目のラベルとして表示されます。
使用法
import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { external } from '@wordpress/icons';
function onPreviewClick() {
// Handle preview action
}
const ExternalPreviewMenuItem = () => (
<PreviewDropdownMenuItem icon={ external } onClick={ onPreviewClick }>
{ __( 'Preview in new tab' ) }
</PreviewDropdownMenuItem>
);
registerPlugin( 'external-preview-menu-item', {
render: ExternalPreviewMenuItem,
} );
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.href
[string]
:href
が提供されると、メニュー項目はボタンの代わりにアンカーとしてレンダリングされます。これはアンカーのhref
属性に対応します。 - props.icon
[WPBlockTypeIconRender]
: メニュー項目のラベルの左側にレンダリングされるアイコン。Dashicon スラグまたは SVG WP 要素である可能性があります。 - props.onClick
[Function]
: ユーザーがメニューアイテムをクリックしたときに実行されるコールバック関数。 - props.other
[...*]
: 追加のプロパティは、基盤となる MenuItem コンポーネントに渡されます。
戻り値
PluginSidebar
有効化されるとサイドバーをレンダリングします。PluginSidebar
内の内容はサイドバー内のコンテンツとして表示されます。また、isPinnable
フラグが true
に設定されていると、自動的に対応する PluginSidebarMenuItem
コンポーネントがレンダリングされます。サイドバーを表示したい場合は、PluginSidebarMoreMenuItem
コンポーネントまたは wp.data.dispatch
API を使用できます:
wp.data
.dispatch( 'core/edit-post' )
.openGeneralSidebar( 'plugin-name/sidebar-name' );
関連
- PluginSidebarMoreMenuItem
使用法
// Using ES5 syntax
var __ = wp.i18n.__;
var el = React.createElement;
var PanelBody = wp.components.PanelBody;
var PluginSidebar = wp.editor.PluginSidebar;
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' ) )
);
}
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
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>
);
パラメータ
- 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
コンポーネントをアクティブにするために使用できます。コンポーネント内のテキストはメニュー項目のラベルとして表示されます。
使用法
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
var moreIcon = React.createElement( 'svg' ); //... svg element.
function MySidebarMoreMenuItem() {
return React.createElement(
PluginSidebarMoreMenuItem,
{
target: 'my-sidebar',
icon: moreIcon,
},
__( 'My sidebar title' )
);
}
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginSidebarMoreMenuItem } from '@wordpress/editor';
import { more } from '@wordpress/icons';
const MySidebarMoreMenuItem = () => (
<PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }>
{ __( 'My sidebar title' ) }
</PluginSidebarMoreMenuItem>
);
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.target
string
: このメニュー項目によってアクティブにしたいターゲットサイドバーを識別する文字列。指定したサイドバーに与えたname
プロパティと同じである必要があります。 - props.icon
[WPBlockTypeIconRender]
: メニューアイテムラベルの左側にレンダリングされるDashiconアイコンスラッグ文字列、またはSVG WP要素。
戻り値
PostAuthor
投稿の著者を選択するためのコンポーネントをレンダリングします。
戻り値
PostAuthorCheck
投稿タイプが著者をサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostAuthorPanel
投稿著者パネルコンポーネントをレンダリングします。
戻り値
PostComments
コメントのステータスを管理するためのフォームです。
戻り値
PostDiscussionPanel
このコンポーネントは、現在の投稿のコメントおよびピンバック設定を更新することを可能にします。内部的には、現在の投稿が上記をサポートしているかどうか、discussion-panel
パネルが有効になっているかどうかをチェックします。
戻り値
PostExcerpt
投稿の抜粋のための編集可能なテキストエリアをレンダリングします。テンプレート、テンプレートパーツ、およびパターンは、excerpt
フィールドを意味的に説明として使用します。さらに、テンプレートとテンプレートパーツは、REST API で excerpt
フィールドを description
としてオーバーライドします。このコンポーネントは、適切なラベリングと編集されたエンティティの更新を処理します。
パラメータ
- props
Object
: – コンポーネントのプロパティ。 - props.hideLabelFromVision
[boolean]
: – テキストエリアのラベルを視覚的に隠すかどうか。 - props.updateOnBlur
[boolean]
: – 変更時に投稿を更新するか、ローカル状態を使用してフォーカスが外れたときに更新するか。
PostExcerptCheck
投稿タイプが抜粋フィールドをサポートしているかどうかを確認するコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
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
: 通知を管理するための操作。
戻り値
PostFeaturedImageCheck
投稿タイプがフィーチャー画像をサポートし、テーマが投稿サムネイルをサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostFeaturedImagePanel
投稿のフィーチャー画像のパネルをレンダリングします。
パラメータ
- props
Object
: プロパティ。 - props.withPanelBody
boolean
: パネルボディを含めるかどうか。デフォルトは true です。
戻り値
PostFormat
PostFormat
投稿フォーマットを変更することを可能にし、現在の投稿に対する提案を提供するコンポーネントです。
使用法
<PostFormat />
戻り値
PostFormatCheck
投稿フォーマットが存在するかどうかを確認するコンポーネントです。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: レンダリングする子要素。
戻り値
PostLastRevision
投稿の最後のリビジョンを表示するためのコンポーネントをレンダリングします。
戻り値
PostLastRevisionCheck
投稿が 1 つ以上のリビジョンを持っている場合にその子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostLastRevisionPanel
投稿の最後のリビジョンを表示するためのパネルをレンダリングします。
戻り値
PostLockedModal
他のユーザーによって編集のためにロックされている投稿があるときに表示されるモーダルコンポーネントです。このモーダルは、ロック状態に関する情報と、引き継ぐかエディタを終了するオプションを提供します。
戻り値
PostPendingStatus
投稿の保留ステータスを表示および切り替えるためのコンポーネントです。
戻り値
PostPendingStatusCheck
このコンポーネントは、現在の投稿の公開ステータスを確認します。投稿がすでに公開されているか、ユーザーに公開する権限がない場合は null を返します。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostPingbacks
WordPress 投稿でピンバックとトラックバックを有効または無効にするためのコントロールをレンダリングします。
PostPreviewButton
プレビュー用の新しいウィンドウまたはタブを開くボタンをレンダリングし、このウィンドウに中間メッセージを書き込み、実際のプレビューロinkに移動します。投稿が表示できない場合はボタンはレンダリングされず、保存できない場合は無効になります。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.className
string
: ボタンのクラス名。 - props.textContent
string
: ボタンのテキストコンテンツ。 - props.forceIsAutosaveable
boolean
: 自動保存を強制するかどうか。 - props.role
string
: ボタンの役割属性。 - props.onPreview
Function
: プレビューイベントのコールバック関数。
戻り値
PostPublishButton
PostPublishButtonLabel
公開ボタンのラベルをレンダリングします。
戻り値
PostPublishPanel
PostSavedState
投稿が保存されているかどうかを示し、保存ボタンを提供するコンポーネントです。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.forceIsDirty
?boolean
: 投稿をダーティとしてマークすることを強制するかどうか。
戻り値
PostSchedule
PostSchedule コンポーネントをレンダリングします。投稿をスケジュールすることを可能にします。
パラメータ
- props
Object
: プロパティ。 - props.onClose
Function
: コンポーネントを閉じるための関数。
戻り値
PostScheduleCheck
投稿に公開アクションがある場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostScheduleLabel
PostScheduleLabel コンポーネントをレンダリングします。
パラメータ
- props
Object
: プロパティ。
戻り値
PostSchedulePanel
Post Schedule Panel コンポーネントをレンダリングします。
戻り値
PostSlug
PostSlug コンポーネントをレンダリングします。投稿スラグを編集するためのコントロールを提供します。
戻り値
PostSlugCheck
投稿タイプがスラグをサポートしている場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostSticky
PostSticky コンポーネントをレンダリングします。スティッキーポスト機能のためのチェックボックスコントロールを提供します。
戻り値
PostStickyCheck
投稿にスティッキーアクションがある場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: レンダリングされる子要素。
戻り値
PostSwitchToDraftButton
投稿をドラフトステータスに切り替えることを可能にするボタンコンポーネントをレンダリングします。
戻り値
PostSyncStatus
投稿の同期ステータスをレンダリングします。
戻り値
PostTaxonomies
投稿に関連付けられたタクソノミーをレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.taxonomyWrapper
Function
: 各タクソノミーコンポーネントのラッパー関数。
戻り値
PostTaxonomiesCheck
現在の投稿タイプがタクソノミーを持っている場合にのみ、その子要素をレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: レンダリングする子コンポーネント。
戻り値
PostTaxonomiesFlatTermSelector
フラットタームセレクターコンポーネントをレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.slug
string
: タクソノミーのスラグ。 - props.__nextHasNoMarginBottom
boolean
: 将来のバージョンでデフォルトになるマージンなしスタイルを選択することを開始します。現在は WordPress 7.0 に予定されています。(これが発生した場合、プロパティは安全に削除できます。)
戻り値
PostTaxonomiesHierarchicalTermSelector
階層タームセレクター。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.slug
string
: タクソノミースラグ。
戻り値
PostTaxonomiesPanel
特定のタクソノミーのためのパネルをレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.taxonomy
Object
: タクソノミーオブジェクト。 - props.children
Element
: 子コンポーネント。
戻り値
PostTemplatePanel
現在のエディタ設定とユーザー権限に基づいてテンプレートコントロールを表示します。
戻り値
PostTextEditor
ビジュアルおよびテキストモードでコンテンツとともに投稿テキストエディタを表示します。
戻り値
PostTitle
PostTitle
コンポーネントをレンダリングします。
パラメータ
- _
Object
: 未使用のパラメータ。 - forwardedRef
Element
: コンポーネントのフォワーディッドリファレンス。
戻り値
PostTitleRaw
PostTrash
エディタ内で投稿ゴミ箱ボタンと確認ダイアログを表示します。
パラメータ
- An
?{onActionPerformed: Object}
: onActionPerformed 関数を含むオブジェクト。
戻り値
PostTrashCheck
投稿をゴミ箱に入れることができる場合にのみ、その子要素をレンダリングするラッパーコンポーネントです。
パラメータ
- props
Object
: – コンポーネントのプロパティ。 - props.children
Element
: – レンダリングされる子コンポーネント。
戻り値
PostTypeSupportCheck
現在のエディタ投稿タイプが指定された supportKeys
プロパティのいずれかをサポートしている場合にのみ、自身の子要素をレンダリングするコンポーネントです。
パラメータ
- props
Object
: プロパティ。 - props.children
Element
: 投稿タイプがサポートされている場合にレンダリングされる子要素。 - props.supportKeys
(string|string[])
: テストするキーの文字列または文字列配列。
戻り値
PostURL
PostURL
コンポーネントをレンダリングします。
使用法
<PostURL />
パラメータ
- onClose
Function
: ポップオーバーが閉じられたときに実行されるコールバック関数。
戻り値
PostURLCheck
投稿 URL が有効で表示可能かどうかを確認します。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: 子コンポーネント。
戻り値
PostURLLabel
投稿 URL のラベルコンポーネントを表します。
戻り値
PostURLPanel
PostURLPanel
コンポーネントをレンダリングします。
戻り値
PostVisibility
ユーザーが投稿の可視性を設定できるようにします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.onClose
Function
: ポップオーバーが閉じられたときに呼び出される関数。
戻り値
PostVisibilityCheck
現在の投稿が編集(公開)できるかどうかを判断し、この情報を提供されたレンダリング関数に渡します。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.render
Function
: コンポーネントをレンダリングする関数。canEdit
プロパティを持つオブジェクトを受け取ります。
戻り値
PostVisibilityLabel
現在の投稿の可視性設定のラベルを返します。
戻り値
privateApis
registerEntityAction
新しい DataViews アクションを登録します。
これは実験的な API であり、変更される可能性があります。現在は Gutenberg プラグインでのみ利用可能です。
パラメータ
RichText
RichTextShortcut
RichTextToolbarButton
ServerSideRender
SkipToSelectedBlock
store
エディタ名前空間のストア定義。
関連
タイプ
storeConfig
投稿エディタデータストアの設定。
関連
タイプ
TableOfContents
目次コンポーネントをレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.hasOutlineItemsDisabled
boolean
: アウトライン項目が無効かどうか。 - props.repositionDropdown
boolean
: ドロップダウンを再配置するかどうか。 - ref
Element.ref
: コンポーネントの ref。
戻り値
TextEditorGlobalKeyboardShortcuts
エディタのキーボードショートカットを処理します。
エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。
ThemeSupportCheck
現在のテーマが特定の機能をサポートしているかどうかを確認し、サポートされている場合は子要素をレンダリングします。
パラメータ
- props
Object
: コンポーネントのプロパティ。 - props.children
Element
: テーマが指定された機能をサポートしている場合にレンダリングされる子要素。 - props.supportKeys
string|string[]
: チェックするテーマサポートのキー。
戻り値
TimeToRead
コンテンツ内の読み取り時間を表示するコンポーネントです。
戻り値
transformStyles
unregisterEntityAction
DataViews アクションの登録を解除します。
これは実験的な API であり、変更される可能性があります。現在は Gutenberg プラグインでのみ利用可能です。
パラメータ
UnsavedChangesWarning
エディタを離れる前に未保存の変更がある場合、ユーザーに警告します。投稿エディタおよびサイトエディタと互換性があります。
戻り値
URLInput
URLInputButton
URLPopover
useEntitiesSavedStatesIsDirty
エンティティがダーティ(編集済み)かどうかを判断し、選択された/未選択のエンティティを管理する方法を提供するカスタムフックです。
戻り値
Object
: 次のプロパティを含むオブジェクト: – dirtyEntityRecords: ダーティエンティティレコードの配列。 – isDirty: ダーティエンティティレコードがあるかどうかを示すブール値。 – setUnselectedEntities: 未選択のエンティティを設定する関数。 – unselectedEntities: 未選択のエンティティの配列。
usePostScheduleLabel
投稿スケジュールのラベルを取得するためのカスタムフックです。
パラメータ
- options
Object
: フックのオプション。 - options.full
boolean
: フルラベルを取得するかどうか。デフォルトは false です。
戻り値
usePostURLLabel
投稿 URL のラベルを取得するためのカスタムフックです。
戻り値
usePostVisibilityLabel
現在の投稿の可視性設定のラベルを取得します。
戻り値
userAutocompleter
ユーザーのメンションを補完するコンポーネントです。
タイプ
VisualEditorGlobalKeyboardShortcuts
エディタのキーボードショートカットを処理します。
エディタモードの切り替え、気を散らさないモードの切り替え、元に戻す/やり直し、投稿の保存、リストビューの切り替え、サイドバーの切り替えなど、さまざまなキーボードショートカットの機能を提供します。
Warning
withColorContext
withColors
withFontSizes
WordCount
投稿コンテンツの単語数をレンダリングします。
戻り値
WritingFlow
非推奨 5.3 以降、
wp.blockEditor.WritingFlow
を使用してください。
このパッケージへの貢献
これはグーテンベルクプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。
このパッケージやグーテンベルク全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。