Made each taxonomy appear on its own panel.

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

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 );

edit-post/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress Dependencies
  */
-import { registerReducer, withRehydratation, loadAndPersist } from '@wordpress/data';
+import { registerReducer, registerSelectors, registerActions, withRehydratation, loadAndPersist } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,6 +10,8 @@ import reducer from './reducer';
 import enhanceWithBrowserSize from './mobile';
 import { BREAK_MEDIUM } from './constants';
 import applyMiddlewares from './middlewares';
+import * as selectors from './selectors';
+import * as actions from './actions';
 
 /**
  * Module Constants
@@ -22,6 +24,8 @@ const store = applyMiddlewares(
 );
 
 loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
+registerSelectors( MODULE_KEY, selectors );
+registerActions( MODULE_KEY, actions );
 enhanceWithBrowserSize( store, BREAK_MEDIUM );
 
 export default store;

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

@@ -151,7 +151,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 );
 
@@ -171,7 +171,6 @@ class FlatTermSelector extends Component {
 
 		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 }

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

@@ -214,7 +214,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,
@@ -243,7 +243,6 @@ 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>
 				{ this.renderTerms( availableTermsTree ) }
 				{ ! loading &&
 					<button

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,12 +1,6 @@
 .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;
+	margin-top: 5px;
 }
 
 .editor-post-taxonomies__hierarchical-terms-choice {

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',
 		} );