Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blocks: Put anchor inside block inspector's Advanced section #3475

Closed
wants to merge 1 commit into from
Closed

Blocks: Put anchor inside block inspector's Advanced section #3475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blocks/hooks/anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function addInspectorControl( element, props ) {
if ( hasBlockSupport( props.name, 'anchor' ) && props.focus ) {
element = [
cloneElement( element, { key: 'edit' } ),
<InspectorControls key="inspector">
<InspectorControls.Advanced key="inspector">
<InspectorControls.TextControl
label={ __( 'HTML Anchor' ) }
help={ __( 'Anchors lets you link directly to a section on a page.' ) }
Expand All @@ -67,7 +67,7 @@ export function addInspectorControl( element, props ) {
anchor: nextValue,
} );
} } />
</InspectorControls>,
</InspectorControls.Advanced>,
];
}

Expand Down
9 changes: 9 additions & 0 deletions blocks/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ export default function InspectorControls( { children } ) {
);
}

function InspectorAdvancedControls( { children } ) {
return (
<Fill name="Inspector.AdvancedControls">
{ children }
</Fill>
);
}

InspectorControls.Advanced = InspectorAdvancedControls;
InspectorControls.BaseControl = BaseControl;
InspectorControls.CheckboxControl = CheckboxControl;
InspectorControls.RadioControl = RadioControl;
Expand Down
8 changes: 4 additions & 4 deletions components/slot-fill/slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { noop, map, isString } from 'lodash';
import { noop, map, isString, identity } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -45,7 +45,7 @@ class Slot extends Component {
}

render() {
const { name, bubblesVirtually = false } = this.props;
const { name, bubblesVirtually = false, renderFills = identity } = this.props;
const { getFills = noop } = this.context;

if ( bubblesVirtually ) {
Expand All @@ -54,7 +54,7 @@ class Slot extends Component {

return (
<div ref={ this.bindNode }>
{ map( getFills( name ), ( fill ) => {
{ renderFills( map( getFills( name ), ( fill ) => {
const fillKey = fill.props.instanceId;
return Children.map( fill.props.children, ( child, childIndex ) => {
if ( ! child || isString( child ) ) {
Expand All @@ -63,7 +63,7 @@ class Slot extends Component {
const childKey = `${ fillKey }---${ child.key || childIndex }`;
return cloneElement( child, { key: childKey } );
} );
} ) }
} ) ) }
</div>
);
}
Expand Down
46 changes: 27 additions & 19 deletions editor/components/block-inspector/advanced-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
* External dependencies
*/
import { connect } from 'react-redux';
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { getBlockType, InspectorControls } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { PanelBody, Slot } from '@wordpress/components';

/**
* Internal Dependencies
Expand All @@ -30,25 +31,32 @@ class BlockInspectorAdvancedControls extends Component {
}

render() {
const { selectedBlock } = this.props;
const blockType = getBlockType( selectedBlock.name );
if ( false === blockType.className ) {
return null;
}

return (
<PanelBody
className="editor-advanced-controls"
initialOpen={ false }
title={ __( 'Advanced' ) }
>
{ false !== blockType.className &&
<InspectorControls.TextControl
label={ __( 'Additional CSS Class' ) }
value={ selectedBlock.attributes.className || '' }
onChange={ this.setClassName } />
}
</PanelBody>
<Slot
name="Inspector.AdvancedControls"
renderFills={ ( fills ) => {
Copy link
Member

@aduth aduth Nov 15, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a valuable feature (to hook into rendering when we know that fills exist, or alternatively when no fills exist, see #1343).

Do you think it might be more simple to use if implemented as a Function-as-Child (a more common pattern)?

<Slot name="Inspector.AdvancedControls">
	{ ( fills ) => <div>{ fills }</div> }
</Slot>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is another way of doing it. Personally, I feel a bit awkward about treating this.props.children as a function. However, I'm fine with both patterns as long as they do their work :)

const { selectedBlock } = this.props;
const blockType = getBlockType( selectedBlock.name );
if ( false === blockType.className && isEmpty( fills ) ) {
return null;
}

return (
<PanelBody
className="editor-advanced-controls"
initialOpen={ false }
title={ __( 'Advanced' ) }
>
{ false !== blockType.className &&
<InspectorControls.TextControl
label={ __( 'Additional CSS Class' ) }
value={ selectedBlock.attributes.className || '' }
onChange={ this.setClassName } />
}
{ fills }
</PanelBody>
);
} } />
);
}
}
Expand Down