\nThis package is still experimental. \u201cExperimental\u201d means this is an early implementation subject to drastic and breaking changes.\n<\/div>\n

The Interface Package contains the basis to start a new WordPress screen as Edit Post or Edit Site. The package offers a data store and a set of components. The store is useful to contain common data required by a screen (e.g., active areas). The information is persisted across screen reloads. The components allow one to implement functionality like a sidebar or menu items. Third-party plugins can extend them by default.<\/p>\n

Installation<\/h2>\n

Install the module<\/p>\n

npm install @wordpress\/interface --save\n<\/code><\/pre>\nThis package assumes that your code will run in an ES2015+<\/strong> environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress\/babel-preset-default<\/code><\/a> in your code.<\/em><\/p>\n
API Usage<\/h2>\nComplementary Areas<\/h3>\nThis component was named after a complementary landmark<\/a> \u2013 a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.<\/p>\n
ComplementaryArea<\/code> and ComplementaryArea.Slot<\/code> form a slot fill pair to render complementary areas. Multiple ComplementaryArea<\/code> components representing different complementary areas may be rendered at the same time, but only one appears on the slot depending on which complementary area is enabled.<\/p>\n
It is possible to control which complementary is enabled by using the store:<\/p>\n
Below are some examples of how to control the active complementary area using the store:<\/p>\n
wp.data\n    .select( 'core\/interface' )\n    .getActiveComplementaryArea( 'core' );\n\/\/ -> \"edit-post\/document\"\n\nwp.data\n    .dispatch( 'core\/interface' )\n    .enableComplementaryArea( 'core', 'edit-post\/block' );\n\nwp.data\n    .select( 'core\/interface' )\n    .getActiveComplementaryArea( 'core' );\n\/\/ -> \"edit-post\/block\"\n\nwp.data\n    .dispatch( 'core\/interface' )\n    .disableComplementaryArea( 'core' );\n\nwp.data\n    .select( 'core\/interface' )\n    .getActiveComplementaryArea( 'core' );\n\/\/ -> null\n<\/code><\/pre>\nPinned Items<\/h3>\nPinnedItems<\/code> and PinnedItems.Slot<\/code> form a slot fill pair to render pinned items (or areas) that act as a list of favorites similar to browser extensions listed in the Chrome Menu.<\/p>\n
Example usage: ComplementaryArea<\/code> component makes use of PinnedItems<\/code> and automatically adds a pinned item for the complementary areas marked as a favorite.<\/p>\nwp.data.select( 'core\/interface' ).isItemPinned( 'core', 'edit-post-block-patterns\/block-patterns-sidebar' );\n\/\/ -> false\n\nwp.data.dispatch( 'core\/interface' ).pinItem( 'core', 'edit-post-block-patterns\/block-patterns-sidebar' );\n\nwp.data.select( 'core\/interface' ).isItemPinned( 'core', 'edit-post-block-patterns\/block-patterns-sidebar' );\n\/\/ -> true\n\nwp.data.dispatch( 'core\/interface' ).unpinItem( 'core', 'edit-post-block-patterns\/block-patterns-sidebar' );\n\nwp.data.select( 'core\/interface' ).isItemPinned( 'core', 'edit-post-block-patterns\/block-patterns-sidebar' ); -> false\n<\/code><\/pre>\nPreferences<\/h3>\nThe interface package provides some helpers for implementing editor preferences.<\/p>\nFeatures<\/h4>\nFeatures are boolean values used for toggling specific editor features on or off.<\/p>\n
Set the default values for any features on editor initialization:<\/p>\nimport { dispatch } from '@wordpress\/data';\nimport { store as interfaceStore } from '@wordpress\/interface';\n\nfunction initialize() {\n    \/\/ ...\n\n    dispatch( interfaceStore ).setFeatureDefaults(\n        'namespace\/editor-or-plugin-name',\n        {\n            myFeatureName: true,\n        }\n    );\n\n    \/\/ ...\n}\n<\/code><\/pre>\nUse the toggleFeature<\/code> action and the isFeatureActive<\/code> selector to toggle features within your app:<\/p>\nwp.data\n    .select( 'core\/interface' )\n    .isFeatureActive( 'namespace\/editor-or-plugin-name', 'myFeatureName' ); \/\/ true\nwp.data\n    .dispatch( 'core\/interface' )\n    .toggleFeature( 'namespace\/editor-or-plugin-name', 'myFeatureName' );\nwp.data\n    .select( 'core\/interface' )\n    .isFeatureActive( 'namespace\/editor-or-plugin-name', 'myFeatureName' ); \/\/ false\n<\/code><\/pre>\nContributing to this package<\/h2>\nThis is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm<\/a> and used by WordPress<\/a> as well as other software projects.<\/p>\n
To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide<\/a>.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134521,"menu_order":427,"template":"","meta":{"footnotes":""},"class_list":["post-134569","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":14,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134569\/revisions"}],"predecessor-version":[{"id":159665,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134569\/revisions\/159665"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134521"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Preferences<\/h3>\nThe interface package provides some helpers for implementing editor preferences.<\/p>\n

Features<\/h4>\nFeatures are boolean values used for toggling specific editor features on or off.<\/p>\nSet the default values for any features on editor initialization:<\/p>\n

Preferences<\/h3>\n
The interface package provides some helpers for implementing editor preferences.<\/p>\n