diff --git a/blocks/api/factory.js b/blocks/api/factory.js
index 004cfb115c35bf..ed1f03763e894b 100644
--- a/blocks/api/factory.js
+++ b/blocks/api/factory.js
@@ -19,18 +19,18 @@ import { getBlockType } from './registration';
 /**
  * Returns a block object given its type and attributes.
  *
- * @param  {String} name        Block name
- * @param  {Object} attributes  Block attributes
- * @return {Object}             Block object
+ * @param  {String} name             Block name
+ * @param  {Object} blockAttributes  Block attributes
+ * @return {Object}                  Block object
  */
-export function createBlock( name, attributes = {} ) {
+export function createBlock( name, blockAttributes = {} ) {
 	// Get the type definition associated with a registered block.
 	const blockType = getBlockType( name );
 
 	// Ensure attributes contains only values defined by block type, and merge
 	// default values for missing attributes.
-	attributes = reduce( blockType.attributes, ( result, source, key ) => {
-		const value = attributes[ key ];
+	const attributes = reduce( blockType.attributes, ( result, source, key ) => {
+		const value = blockAttributes[ key ];
 		if ( undefined !== value ) {
 			result[ key ] = value;
 		} else if ( source.default ) {
@@ -39,6 +39,9 @@ export function createBlock( name, attributes = {} ) {
 
 		return result;
 	}, {} );
+	if ( blockType.supportAnchor && blockAttributes.anchor ) {
+		attributes.anchor = blockAttributes.anchor;
+	}
 
 	// Blocks are stored with a unique ID, the assigned type name,
 	// and the block attributes.
diff --git a/blocks/api/parser.js b/blocks/api/parser.js
index c908414a775974..9c3ff3b513c183 100644
--- a/blocks/api/parser.js
+++ b/blocks/api/parser.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { parse as hpqParse } from 'hpq';
+import { parse as hpqParse, attr } from 'hpq';
 import { mapValues, reduce, pickBy } from 'lodash';
 
 /**
@@ -101,7 +101,7 @@ export function getBlockAttributes( blockType, rawContent, attributes ) {
 		blockType.attributes
 	);
 
-	return reduce( blockType.attributes, ( result, source, key ) => {
+	const blockAttributes = reduce( blockType.attributes, ( result, source, key ) => {
 		let value;
 		if ( sourcedAttributes.hasOwnProperty( key ) ) {
 			value = sourcedAttributes[ key ];
@@ -146,6 +146,13 @@ export function getBlockAttributes( blockType, rawContent, attributes ) {
 		result[ key ] = coercedValue;
 		return result;
 	}, {} );
+
+	// If the block supports anchor, parse the id
+	if ( blockType.supportAnchor ) {
+		blockAttributes.anchor = hpqParse( rawContent, attr( '*', 'id' ) );
+	}
+
+	return blockAttributes;
 }
 
 /**
diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js
index c5aed9e25d3220..feb6ceae9c6d4b 100644
--- a/blocks/api/serializer.js
+++ b/blocks/api/serializer.js
@@ -50,20 +50,28 @@ export function getSaveContent( blockType, attributes ) {
 	}
 
 	// Adding a generic classname
-	const addClassnameToElement = ( element ) => {
-		if ( ! element || ! isObject( element ) || ! className ) {
+	const addAdvancedAttributes = ( element ) => {
+		if ( ! element || ! isObject( element ) ) {
 			return element;
 		}
 
-		const updatedClassName = classnames(
-			className,
-			element.props.className,
-			attributes.className
-		);
+		const extraProps = {};
+		if ( !! className ) {
+			const updatedClassName = classnames(
+				className,
+				element.props.className,
+				attributes.className
+			);
+			extraProps.className = updatedClassName;
+		}
+
+		if ( blockType.supportAnchor && attributes.anchor ) {
+			extraProps.id = attributes.anchor;
+		}
 
-		return cloneElement( element, { className: updatedClassName } );
+		return cloneElement( element, extraProps );
 	};
-	const contentWithClassname = Children.map( rawContent, addClassnameToElement );
+	const contentWithClassname = Children.map( rawContent, addAdvancedAttributes );
 
 	// Otherwise, infer as element
 	return renderToString( contentWithClassname );
diff --git a/blocks/api/test/factory.js b/blocks/api/test/factory.js
index 8d1ea343252a88..a91450e5988830 100644
--- a/blocks/api/test/factory.js
+++ b/blocks/api/test/factory.js
@@ -54,6 +54,29 @@ describe( 'block factory', () => {
 			expect( block.isValid ).toBe( true );
 			expect( typeof block.uid ).toBe( 'string' );
 		} );
+
+		it( 'should keep the anchor if the block supports it', () => {
+			registerBlockType( 'core/test-block', {
+				attributes: {
+					align: {
+						type: 'string',
+					},
+				},
+				save: noop,
+				category: 'common',
+				supportAnchor: true,
+			} );
+			const block = createBlock( 'core/test-block', {
+				align: 'left',
+				anchor: 'chicken',
+			} );
+
+			expect( block.attributes ).toEqual( {
+				anchor: 'chicken',
+				align: 'left',
+			} );
+			expect( block.isValid ).toBe( true );
+		} );
 	} );
 
 	describe( 'switchToBlockType()', () => {
diff --git a/blocks/api/test/parser.js b/blocks/api/test/parser.js
index 5445f57233a8cb..49fb5a82b18ba2 100644
--- a/blocks/api/test/parser.js
+++ b/blocks/api/test/parser.js
@@ -155,6 +155,26 @@ describe( 'block parser', () => {
 				topic: 'none',
 			} );
 		} );
+
+		it( 'should parse the anchor if the block supports it', () => {
+			const blockType = {
+				attributes: {
+					content: {
+						type: 'string',
+						source: text( 'div' ),
+					},
+				},
+				supportAnchor: true,
+			};
+
+			const rawContent = '<div id="chicken">Ribs</div>';
+			const attrs = {};
+
+			expect( getBlockAttributes( blockType, rawContent, attrs ) ).toEqual( {
+				content: 'Ribs',
+				anchor: 'chicken',
+			} );
+		} );
 	} );
 
 	describe( 'createBlockWithFallback', () => {
diff --git a/blocks/api/test/serializer.js b/blocks/api/test/serializer.js
index 23c3d4b54faacc..9ddba1e639bb8e 100644
--- a/blocks/api/test/serializer.js
+++ b/blocks/api/test/serializer.js
@@ -112,6 +112,20 @@ describe( 'block serializer', () => {
 
 				expect( saved ).toBe( '<div>Bananas</div>' );
 			} );
+
+			it( 'should add an id if the block supports anchors', () => {
+				const saved = getSaveContent(
+					{
+						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+						supportAnchor: true,
+						name: 'myplugin/fruit',
+						className: false,
+					},
+					{ fruit: 'Bananas', anchor: 'my-fruit' }
+				);
+
+				expect( saved ).toBe( '<div id="my-fruit">Bananas</div>' );
+			} );
 		} );
 
 		describe( 'component save', () => {
diff --git a/blocks/inspector-controls/base-control/index.js b/blocks/inspector-controls/base-control/index.js
index 6d671320fb915b..2e21c38f494546 100644
--- a/blocks/inspector-controls/base-control/index.js
+++ b/blocks/inspector-controls/base-control/index.js
@@ -8,11 +8,12 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-function BaseControl( { id, label, className, children } ) {
+function BaseControl( { id, label, help, className, children } ) {
 	return (
 		<div className={ classnames( 'blocks-base-control', className ) }>
 			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
+			{ !! help && <p id={ id + '__help' } className="blocks-base-control__help">{ help }</p> }
 		</div>
 	);
 }
diff --git a/blocks/inspector-controls/base-control/style.scss b/blocks/inspector-controls/base-control/style.scss
index 80d89bc4036516..cf7f4c77014fc2 100644
--- a/blocks/inspector-controls/base-control/style.scss
+++ b/blocks/inspector-controls/base-control/style.scss
@@ -6,3 +6,7 @@
 	display: block;
 	margin-bottom: 5px;
 }
+
+.blocks-base-control__help {
+	font-style: italic;
+}
diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
index 55ca47b2cd4b28..b05b44f709ee3d 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -9,12 +9,12 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function CheckboxControl( { label, heading, checked, instanceId, onChange, ...props } ) {
+function CheckboxControl( { label, heading, checked, help, instanceId, onChange, ...props } ) {
 	const id = 'inspector-checkbox-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl label={ heading } id={ id }>
+		<BaseControl label={ heading } id={ id } help={ help }>
 			<input
 				id={ id }
 				className="blocks-checkbox-control__input"
@@ -22,6 +22,7 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 				value="1"
 				onChange={ onChangeValue }
 				checked={ checked }
+				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			/>
 			<label className="blocks-checkbox-control__label" htmlFor={ id }>
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index cda2074d94d533..4be3b532a3062e 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -14,12 +14,12 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function RadioControl( { label, selected, instanceId, onChange, options = [] } ) {
+function RadioControl( { label, selected, help, instanceId, onChange, options = [] } ) {
 	const id = 'inspector-radio-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } className="blocks-radio-control">
+		<BaseControl label={ label } id={ id } help={ help } className="blocks-radio-control">
 			{ options.map( ( option, index ) =>
 				<div
 					key={ ( id + '-' + index ) }
@@ -33,6 +33,7 @@ function RadioControl( { label, selected, instanceId, onChange, options = [] } )
 						value={ option.value }
 						onChange={ onChangeValue }
 						selected={ option.value === selected }
+						aria-describedby={ !! help ? id + '__help' : undefined }
 					/>
 					<label key={ option.value } htmlFor={ ( id + '-' + index ) }>
 						{ option.label }
diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
index d0fedad9e65daf..ee0e20736be54c 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/blocks/inspector-controls/range-control/index.js
@@ -9,12 +9,12 @@ import { Dashicon, withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, ...props } ) {
+function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, help, ...props } ) {
 	const id = 'inspector-range-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
 	return (
-		<BaseControl label={ label } id={ id } className="blocks-range-control">
+		<BaseControl label={ label } id={ id } help={ help } className="blocks-range-control">
 			{ beforeIcon && <Dashicon icon={ beforeIcon } size={ 20 } /> }
 			<input
 				className="blocks-range-control__slider"
@@ -22,6 +22,7 @@ function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIc
 				type="range"
 				value={ value }
 				onChange={ onChangeValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props } />
 			{ afterIcon && <Dashicon icon={ afterIcon } /> }
 			<input
diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index fa68a5635ac8bc..261ac6f789b296 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -14,16 +14,17 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function SelectControl( { label, selected, instanceId, onBlur, options = [], ...props } ) {
+function SelectControl( { label, selected, help, instanceId, onBlur, options = [], ...props } ) {
 	const id = 'inspector-select-control-' + instanceId;
 	const onBlurValue = ( event ) => onBlur( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id }>
+		<BaseControl label={ label } id={ id } help={ help }>
 			<select
 				id={ id }
 				className="blocks-select-control__input"
 				onBlur={ onBlurValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			>
 				{ options.map( ( option ) =>
diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js
index babb53d57373a4..a8fa61c08602b7 100644
--- a/blocks/inspector-controls/text-control/index.js
+++ b/blocks/inspector-controls/text-control/index.js
@@ -9,13 +9,20 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function TextControl( { label, value, instanceId, onChange, type = 'text', ...props } ) {
+function TextControl( { label, value, help, instanceId, onChange, type = 'text', ...props } ) {
 	const id = 'inspector-text-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl label={ label } id={ id }>
-			<input className="blocks-text-control__input" type={ type } id={ id } value={ value } onChange={ onChangeValue } { ...props } />
+		<BaseControl label={ label } id={ id } help={ help }>
+			<input className="blocks-text-control__input"
+				type={ type }
+				id={ id }
+				value={ value }
+				onChange={ onChangeValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
+				{ ...props }
+			/>
 		</BaseControl>
 	);
 }
diff --git a/blocks/inspector-controls/textarea-control/index.js b/blocks/inspector-controls/textarea-control/index.js
index 993783c341ebae..365a26fd5b90f7 100644
--- a/blocks/inspector-controls/textarea-control/index.js
+++ b/blocks/inspector-controls/textarea-control/index.js
@@ -9,13 +9,20 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...props } ) {
+function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, ...props } ) {
 	const id = 'inspector-textarea-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl label={ label } id={ id }>
-			<textarea className="blocks-textarea-control__input" id={ id } rows={ rows } onChange={ onChangeValue } { ...props }>
+		<BaseControl label={ label } id={ id } help={ help }>
+			<textarea
+				className="blocks-textarea-control__input"
+				id={ id }
+				rows={ rows }
+				onChange={ onChangeValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
+				{ ...props }
+			>
 				{ value }
 			</textarea>
 		</BaseControl>
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 338b7fae4105d3..7cb76a834ad202 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -9,12 +9,17 @@ import { withInstanceId, FormToggle } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function ToggleControl( { label, checked, instanceId, onChange } ) {
+function ToggleControl( { label, checked, help, instanceId, onChange } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (
-		<BaseControl label={ label } id={ id } className="blocks-toggle-control">
-			<FormToggle id={ id } checked={ checked } onChange={ onChange } />
+		<BaseControl label={ label } id={ id } help={ help } className="blocks-toggle-control">
+			<FormToggle
+				id={ id }
+				checked={ checked }
+				onChange={ onChange }
+				aria-describedby={ !! help ? id + '__help' : undefined }
+			/>
 		</BaseControl>
 	);
 }
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index a3f50f8878c433..5e4f01dc44d5a9 100644
--- a/blocks/library/heading/index.js
+++ b/blocks/library/heading/index.js
@@ -29,6 +29,8 @@ registerBlockType( 'core/heading', {
 
 	className: false,
 
+	supportAnchor: true,
+
 	attributes: {
 		content: {
 			type: 'array',
diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js
index 3f6766995333ad..3baba9c6fc03d9 100644
--- a/components/form-toggle/index.js
+++ b/components/form-toggle/index.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
  */
 import './style.scss';
 
-function FormToggle( { className, checked, id, onChange = noop, showHint = true } ) {
+function FormToggle( { className, checked, id, onChange = noop, showHint = true, ...props } ) {
 	const wrapperClasses = classnames(
 		'components-form-toggle',
 		className,
@@ -29,6 +29,7 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true
 				type="checkbox"
 				checked={ checked }
 				onChange={ onChange }
+				{ ...props }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
diff --git a/editor/sidebar/block-inspector/advanced-controls.js b/editor/sidebar/block-inspector/advanced-controls.js
new file mode 100644
index 00000000000000..66187f7e232c89
--- /dev/null
+++ b/editor/sidebar/block-inspector/advanced-controls.js
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { getBlockType, InspectorControls } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { ClipboardButton, Tooltip } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import { updateBlockAttributes } from '../../actions';
+import { getSelectedBlock, getCurrentPost } from '../../selectors';
+import { filterURLForDisplay } from '../../utils/url';
+
+/**
+ * Internal constants
+ */
+const ANCHOR_REGEX = /[\s#]/g;
+
+class BlockInspectorAdvancedControls extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			showCopyConfirmation: false,
+		};
+		this.onCopy = this.onCopy.bind( this );
+		this.setClassName = this.setClassName.bind( this );
+		this.setAnchor = this.setAnchor.bind( this );
+	}
+
+	setClassName( className ) {
+		const { selectedBlock, setAttributes } = this.props;
+		setAttributes( selectedBlock.uid, { className } );
+	}
+
+	setAnchor( anchor ) {
+		const { selectedBlock, setAttributes } = this.props;
+		setAttributes( selectedBlock.uid, { anchor: anchor.replace( ANCHOR_REGEX, '-' ) } );
+	}
+
+	componentWillUnmout() {
+		clearTimeout( this.dismissCopyConfirmation );
+	}
+
+	onCopy() {
+		this.setState( {
+			showCopyConfirmation: true,
+		} );
+
+		clearTimeout( this.dismissCopyConfirmation );
+		this.dismissCopyConfirmation = setTimeout( () => {
+			this.setState( {
+				showCopyConfirmation: false,
+			} );
+		}, 4000 );
+	}
+
+	render() {
+		const { selectedBlock, post } = this.props;
+		const blockType = getBlockType( selectedBlock.name );
+		if ( false === blockType.className && ! blockType.supportAnchor ) {
+			return null;
+		}
+
+		return (
+			<div>
+				<h3>{ __( 'Block Settings' ) }</h3>
+				{ false !== blockType.className &&
+					<InspectorControls.TextControl
+						label={ __( 'Additional CSS Class' ) }
+						value={ selectedBlock.attributes.className || '' }
+						onChange={ this.setClassName } />
+				}
+				{ blockType.supportAnchor &&
+					<div>
+						<InspectorControls.TextControl
+							label={ __( 'HTML Anchor' ) }
+							help={ __( 'Anchors lets you link directly to a section on a page.' ) }
+							value={ selectedBlock.attributes.anchor || '' }
+							onChange={ this.setAnchor } />
+						{ !! post.link && !! selectedBlock.attributes.anchor &&
+							<div className="editor-advanced-controls__anchor">
+								<ClipboardButton className="button" text={ `${ post.link }#${ selectedBlock.attributes.anchor }` } onCopy={ this.onCopy }>
+									<Tooltip text={ filterURLForDisplay( `${ post.link }#${ selectedBlock.attributes.anchor }` ) }>
+										<div>{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }</div>
+									</Tooltip>
+								</ClipboardButton>
+							</div>
+						}
+					</div>
+				}
+			</div>
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			selectedBlock: getSelectedBlock( state ),
+			post: getCurrentPost( state ),
+		};
+	},
+	{
+		setAttributes: updateBlockAttributes,
+	}
+)( BlockInspectorAdvancedControls );
diff --git a/editor/sidebar/block-inspector/class-name.js b/editor/sidebar/block-inspector/class-name.js
deleted file mode 100644
index 3e7b871c5c63c5..00000000000000
--- a/editor/sidebar/block-inspector/class-name.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { getBlockType, InspectorControls } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal Dependencies
- */
-import { updateBlockAttributes } from '../../actions';
-import { getSelectedBlock } from '../../selectors';
-
-class BlockInspectorClassName extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setClassName = this.setClassName.bind( this );
-	}
-
-	setClassName( className ) {
-		const { selectedBlock, setAttributes } = this.props;
-		setAttributes( selectedBlock.uid, { className } );
-	}
-
-	render() {
-		const { selectedBlock } = this.props;
-		const blockType = getBlockType( selectedBlock.name );
-		if ( false === blockType.className ) {
-			return null;
-		}
-
-		return (
-			<div>
-				<h3>{ __( 'Block Settings' ) }</h3>
-				<InspectorControls.TextControl
-					label={ __( 'Additional CSS Class' ) }
-					value={ selectedBlock.attributes.className }
-					onChange={ this.setClassName } />
-			</div>
-		);
-	}
-}
-
-export default connect(
-	( state ) => {
-		return {
-			selectedBlock: getSelectedBlock( state ),
-		};
-	},
-	{
-		setAttributes: updateBlockAttributes,
-	}
-)( BlockInspectorClassName );
diff --git a/editor/sidebar/block-inspector/index.js b/editor/sidebar/block-inspector/index.js
index 57a2d873477e2d..40bafa25bd28f4 100644
--- a/editor/sidebar/block-inspector/index.js
+++ b/editor/sidebar/block-inspector/index.js
@@ -14,7 +14,7 @@ import { Panel, PanelBody } from '@wordpress/components';
  * Internal Dependencies
  */
 import './style.scss';
-import BlockInspectorClassName from './class-name';
+import BlockInspectorAdvancedControls from './advanced-controls';
 import { getSelectedBlock } from '../../selectors';
 
 const BlockInspector = ( { selectedBlock } ) => {
@@ -26,7 +26,7 @@ const BlockInspector = ( { selectedBlock } ) => {
 		<Panel>
 			<PanelBody>
 				<Slot name="Inspector.Controls" />
-				<BlockInspectorClassName />
+				<BlockInspectorAdvancedControls />
 			</PanelBody>
 		</Panel>
 	);
diff --git a/editor/sidebar/block-inspector/style.scss b/editor/sidebar/block-inspector/style.scss
index 213084ca9494ff..327688ca6a2151 100644
--- a/editor/sidebar/block-inspector/style.scss
+++ b/editor/sidebar/block-inspector/style.scss
@@ -16,3 +16,20 @@
 	border-bottom: 1px solid $light-gray-500;
 	text-align: center;
 }
+
+.editor-advanced-controls__anchor {
+	display: inline-flex;
+	max-width: 100%;
+	align-items: center;
+}
+
+.editor-advanced-controls__anchor-link {
+	flex-grow: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	position: relative;
+
+	&:after {
+		@include long-content-fade( $size: 20% );
+	}
+}