@wordpress/block-editor
Version:
73 lines (62 loc) • 2.01 kB
Markdown
# InspectorAdvancedControls
<img src="https://user-images.githubusercontent.com/150562/94028603-df90bf00-fdb3-11ea-9e6f-eb15c5631d85.png" width="280" alt="inspector-advanced-controls">
Inspector Advanced Controls appear under the _Advanced_ panel of a block's [InspectorControls](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) -- that is, they appear as a specific set of controls within a block's settings panels. As the name suggests, `InspectorAdvancedControls` is meant for controls that most users aren't meant to interact with most of the time, such as adding an HTML anchor or custom CSS classes to a block.
## Usage
{% codetabs %}
{% ESNext %}
```js
const {
TextControl,
} = wp.components;
const {
InspectorControls,
InspectorAdvancedControls,
} = wp.editor;
function MyBlockEdit( { attributes, setAttributes } ) {
return (
<>
<div>
{ /* Block markup goes here */ }
</div
<InspectorControls>
{ /* Regular control goes here */
</InspectorControls>
<InspectorAdvancedControls>
<TextControl
label="HTML anchor"
value={ attributes.anchor }
onChange={ ( nextValue ) => {
setAttributes( {
anchor: nextValue,
} );
} }
/>
</InspectorAdvancedControls>
</>
);
}
```
{% ES5 %}
```js
var el = wp.element.createElement,
Fragment = wp.element.Fragment,
InspectorControls = wp.editor.InspectorControls,
InspectorAdvancedControlsControls = wp.editor.InspectorAdvancedControls,
TextControl = wp.components.TextControl,
function MyBlockEdit( props ) {
return el( Fragment, null,
el( 'div', null, /* Block markup goes here */ null ),
el( InspectorControls, null, /* Regular control goes here */ null ),
el( InspectorAdvancedControls, null,
el( TextControl, {
label: 'HTML anchor',
value: props.attributes.anchor,
onChange: function( nextValue ) {
props.setAttributes( { anchor: nextValue } );
}
} )
)
);
}
```
{% end %}