Made each taxonomy appear on its own panel.

Before all taxonomies appeared under "Categories & Tags" panel.

Author: jorgefilipecosta

components/panel/style.scss

@@ -63,7 +63,7 @@
 }
 .components-panel__body.is-opened > .components-panel__body-title {
 	margin: -1 * $panel-padding;
-	margin-bottom: 0;
+	margin-bottom: 5px;
 }
 
 .components-panel__body-toggle.components-button {

edit-post/components/sidebar/block-inspector-panel/style.scss

@@ -6,10 +6,6 @@
 		margin: 0 0 1em 0;
 	}
 
-	&.is-opened > .components-panel__body-title {
-		margin-bottom: 5px;
-	}
-
 	.components-panel__body-toggle {
 		color: $dark-gray-500;
 	}

edit-post/components/sidebar/post-taxonomies/index.js

@@ -2,35 +2,38 @@
  * External Dependencies
  */
 import { connect } from 'react-redux';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
 import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
 import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
+import TaxonomyPanel from './taxonomy-panel';
 
 /**
  * Module Constants
  */
 const PANEL_NAME = 'post-taxonomies';
 
-function PostTaxonomies( { isOpened, onTogglePanel } ) {
+function PostTaxonomies() {
 	return (
 		<PostTaxonomiesCheck>
-			<PanelBody
-				title={ __( 'Categories & Tags' ) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostTaxonomiesForm />
-			</PanelBody>
+			<PostTaxonomiesForm
+				taxonomyWrapper={ ( content, taxonomy ) => {
+					const slug = get( taxonomy, [ 'slug' ] );
+					return (
+						<TaxonomyPanel taxonomy={ taxonomy } key={ `taxonomy-panel-${ slug }` }>
+							{ content }
+						</TaxonomyPanel>
+					);
+				} }
+			/>
 		</PostTaxonomiesCheck>
 	);
 }

edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js

@@ -0,0 +1,48 @@
+/**
+ * External Dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/element';
+import { PanelBody } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+function TaxonomyPanel( { taxonomy, isOpened, onTogglePanel, children } ) {
+	const taxonomyMenuName = get( taxonomy, [ 'labels', 'menu_name' ] );
+	if ( ! taxonomyMenuName ) {
+		return null;
+	}
+	return (
+		<PanelBody
+			title={ taxonomyMenuName }
+			opened={ isOpened }
+			onToggle={ onTogglePanel }
+		>
+			{ children }
+		</PanelBody>
+	);
+}
+
+export default compose(
+	withSelect( ( select, ownProps ) => {
+		const slug = get( ownProps.taxonomy, [ 'slug' ] );
+		const panelName = slug ? `taxonomy-panel-${ slug }` : '';
+		return {
+			panelName,
+			isOpened: slug ?
+				select( 'core/edit-post' ).isEditorSidebarPanelOpened( panelName ) :
+				false,
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => ( {
+		onTogglePanel: () => {
+			if ( ownProps.panelName ) {
+				return dispatch( 'core/edit-post' ).
+					toggleGeneralSidebarEditorPanel( ownProps.panelName );
+			}
+		},
+	} ) ),
+)( TaxonomyPanel );

editor/components/post-taxonomies/flat-term-selector.js

@@ -160,7 +160,7 @@ class FlatTermSelector extends Component {
 	}
 
 	render() {
-		const { label, slug, taxonomy } = this.props;
+		const { slug, taxonomy } = this.props;
 		const { loading, availableTerms, selectedTerms } = this.state;
 		const termNames = availableTerms.map( ( term ) => term.name );
 		const newTermPlaceholderLabel = get(
@@ -178,24 +178,21 @@ class FlatTermSelector extends Component {
 		const removeTermLabel = sprintf( _x( 'Remove %s: %%s', 'term' ), singularName );
 
 		return (
-			<div className="editor-post-taxonomies__flat-terms-selector">
-				<h3 className="editor-post-taxonomies__flat-terms-selector-title">{ label }</h3>
-				<FormTokenField
-					value={ selectedTerms }
-					displayTransform={ unescapeString }
-					suggestions={ termNames }
-					onChange={ this.onChange }
-					onInputChange={ this.searchTerms }
-					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-					disabled={ loading }
-					placeholder={ newTermPlaceholderLabel }
-					messages={ {
-						added: termAddedLabel,
-						removed: termRemovedLabel,
-						remove: removeTermLabel,
-					} }
-				/>
-			</div>
+			<FormTokenField
+				value={ selectedTerms }
+				displayTransform={ unescapeString }
+				suggestions={ termNames }
+				onChange={ this.onChange }
+				onInputChange={ this.searchTerms }
+				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+				disabled={ loading }
+				placeholder={ newTermPlaceholderLabel }
+				messages={ {
+					added: termAddedLabel,
+					removed: termRemovedLabel,
+					remove: removeTermLabel,
+				} }
+			/>
 		);
 	}
 }

editor/components/post-taxonomies/hierarchical-term-selector.js

@@ -9,7 +9,7 @@ import { stringify } from 'querystring';
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
+import { Component, compose, Fragment } from '@wordpress/element';
 import { TreeSelect, withAPIData, withInstanceId, withSpokenMessages } from '@wordpress/components';
 import { buildTermsTree } from '@wordpress/utils';
 
@@ -221,7 +221,7 @@ class HierarchicalTermSelector extends Component {
 	}
 
 	render() {
-		const { label, slug, taxonomy, instanceId } = this.props;
+		const { slug, taxonomy, instanceId } = this.props;
 		const { availableTermsTree, availableTerms, formName, formParent, loading, showForm } = this.state;
 		const labelWithFallback = ( labelProperty, fallbackIsCategory, fallbackIsNotCategory ) => get(
 			taxonomy,
@@ -249,8 +249,7 @@ class HierarchicalTermSelector extends Component {
 
 		/* eslint-disable jsx-a11y/no-onchange */
 		return (
-			<div className="editor-post-taxonomies__hierarchical-terms-selector">
-				<h3 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h3>
+			<Fragment>
 				{ this.renderTerms( availableTermsTree ) }
 				{ ! loading &&
 					<button
@@ -294,7 +293,7 @@ class HierarchicalTermSelector extends Component {
 						</button>
 					</form>
 				}
-			</div>
+			</Fragment>
 		);
 		/* eslint-enable jsx-a11y/no-onchange */
 	}

editor/components/post-taxonomies/index.js

@@ -2,13 +2,13 @@
  * External Dependencies
  */
 import { connect } from 'react-redux';
-import { filter, includes } from 'lodash';
+import { filter, identity, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withAPIData } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,23 +18,26 @@ import HierarchicalTermSelector from './hierarchical-term-selector';
 import FlatTermSelector from './flat-term-selector';
 import { getCurrentPostType } from '../../store/selectors';
 
-export function PostTaxonomies( { postType, taxonomies } ) {
+export function PostTaxonomies( { postType, taxonomies, taxonomyWrapper = identity } ) {
 	const availableTaxonomies = filter( taxonomies.data, ( taxonomy ) => includes( taxonomy.types, postType ) );
-
+	const taxonomyComponents = availableTaxonomies.map( ( taxonomy ) => {
+		const TaxonomyComponent = taxonomy.hierarchical ? HierarchicalTermSelector : FlatTermSelector;
+		return taxonomyWrapper(
+			<TaxonomyComponent
+				key={ taxonomy.slug }
+				restBase={ taxonomy.rest_base }
+				slug={ taxonomy.slug }
+			/>,
+			taxonomy
+		);
+	} );
+
+	// Fragment is used because enzyme shallow does not seems to handle correctly components returning just arrays.
+	// Using debug method it was possible to verify shallow always output <undefined /> when arrays are used.
 	return (
-		<div>
-			{ availableTaxonomies.map( ( taxonomy ) => {
-				const TaxonomyComponent = taxonomy.hierarchical ? HierarchicalTermSelector : FlatTermSelector;
-				return (
-					<TaxonomyComponent
-						key={ taxonomy.slug }
-						label={ taxonomy.name }
-						restBase={ taxonomy.rest_base }
-						slug={ taxonomy.slug }
-					/>
-				);
-			} ) }
-		</div>
+		<Fragment>
+			{ taxonomyComponents }
+		</Fragment>
 	);
 }
 

editor/components/post-taxonomies/style.scss

@@ -1,14 +1,3 @@
-.editor-post-taxonomies__flat-terms-selector,
-.editor-post-taxonomies__hierarchical-terms-selector {
-	margin-top: $panel-padding;
-}
-
-.editor-sidebar .editor-post-taxonomies__flat-terms-selector-title,
-.editor-sidebar .editor-post-taxonomies__hierarchical-terms-selector-title {
-	display: block;
-	margin-bottom: 10px;
-}
-
 .editor-post-taxonomies__hierarchical-terms-choice {
 	margin-bottom: 5px;
 }

editor/components/post-taxonomies/test/index.js

@@ -45,7 +45,6 @@ describe( 'PostTaxonomies', () => {
 
 		expect( wrapper.children() ).toHaveLength( 1 );
 		expect( wrapper.childAt( 0 ).props() ).toEqual( {
-			label: 'Categories',
 			slug: 'category',
 			restBase: 'categories',
 		} );