From e505e02a44b36dc1e215f5500db3bdd2b43a1613 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 2 Mar 2018 17:43:19 +0000
Subject: [PATCH] Made each taxonomy appear on its own panel. (#5183)

Before all taxonomies appeared under "Categories & Tags" panel.
---
 components/panel/style.scss                   |  5 +-
 .../sidebar/block-inspector-panel/style.scss  |  4 -
 .../sidebar/post-taxonomies/index.js          | 21 ++---
 .../sidebar/post-taxonomies/taxonomy-panel.js | 46 ++++++++++
 .../post-taxonomies/flat-term-selector.js     | 35 ++++----
 .../hierarchical-term-selector.js             | 90 +++++++++----------
 editor/components/post-taxonomies/index.js    | 38 ++++----
 editor/components/post-taxonomies/style.scss  | 11 ---
 .../components/post-taxonomies/test/index.js  | 64 +++++++------
 9 files changed, 177 insertions(+), 137 deletions(-)
 create mode 100644 edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js

diff --git a/components/panel/style.scss b/components/panel/style.scss
index f7109b72b970e..649323811e1d4 100644
--- a/components/panel/style.scss
+++ b/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 {
@@ -131,7 +131,8 @@
 		max-width: 75%;
 	}
 
-	&:empty {
+	&:empty,
+	&:first-of-type {
 		margin-top: 0;
 	}
 }
diff --git a/edit-post/components/sidebar/block-inspector-panel/style.scss b/edit-post/components/sidebar/block-inspector-panel/style.scss
index 96e897f0e1811..5c6a59f1bc771 100644
--- a/edit-post/components/sidebar/block-inspector-panel/style.scss
+++ b/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;
 	}
diff --git a/edit-post/components/sidebar/post-taxonomies/index.js b/edit-post/components/sidebar/post-taxonomies/index.js
index aebae97031f71..070cc7f4c0be5 100644
--- a/edit-post/components/sidebar/post-taxonomies/index.js
+++ b/edit-post/components/sidebar/post-taxonomies/index.js
@@ -6,8 +6,6 @@ import { connect } from 'react-redux';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
 import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@wordpress/editor';
 
 /**
@@ -15,22 +13,25 @@ import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@word
  */
 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 ) => {
+					return (
+						<TaxonomyPanel taxonomy={ taxonomy }>
+							{ content }
+						</TaxonomyPanel>
+					);
+				} }
+			/>
 		</PostTaxonomiesCheck>
 	);
 }
diff --git a/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js
new file mode 100644
index 0000000000000..048458882ac09
--- /dev/null
+++ b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js
@@ -0,0 +1,46 @@
+/**
+ * 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: () => {
+			dispatch( 'core/edit-post' ).
+				toggleGeneralSidebarEditorPanel( ownProps.panelName );
+		},
+	} ) ),
+)( TaxonomyPanel );
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
index a94922c3fc812..c2a2cb34ee044 100644
--- a/editor/components/post-taxonomies/flat-term-selector.js
+++ b/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,
+				} }
+			/>
 		);
 	}
 }
diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
index b2e923888ee01..a6b450509794c 100644
--- a/editor/components/post-taxonomies/hierarchical-term-selector.js
+++ b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -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,
@@ -248,54 +248,52 @@ class HierarchicalTermSelector extends Component {
 		const inputId = `editor-post-taxonomies__hierarchical-terms-input-${ instanceId }`;
 
 		/* 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 &&
+		return [
+			...this.renderTerms( availableTermsTree ),
+			! loading && (
+				<button
+					key="term-add-button"
+					onClick={ this.onToggleForm }
+					className="button-link editor-post-taxonomies__hierarchical-terms-add"
+					aria-expanded={ showForm }
+				>
+					{ newTermButtonLabel }
+				</button>
+			),
+			showForm && (
+				<form onSubmit={ this.onAddTerm } key="hierarchical-terms-form">
+					<label
+						htmlFor={ inputId }
+						className="editor-post-taxonomies__hierarchical-terms-label"
+					>
+						{ newTermLabel }
+					</label>
+					<input
+						type="text"
+						id={ inputId }
+						className="editor-post-taxonomies__hierarchical-terms-input"
+						value={ formName }
+						onChange={ this.onChangeFormName }
+						required
+					/>
+					{ !! availableTerms.length &&
+						<TreeSelect
+							label={ parentSelectLabel }
+							noOptionLabel={ noParentOption }
+							onChange={ this.onChangeFormParent }
+							selectedId={ formParent }
+							tree={ availableTermsTree }
+						/>
+					}
 					<button
-						onClick={ this.onToggleForm }
-						className="button-link editor-post-taxonomies__hierarchical-terms-add"
-						aria-expanded={ showForm }
+						type="submit"
+						className="button editor-post-taxonomies__hierarchical-terms-submit"
 					>
-						{ newTermButtonLabel }
+						{ newTermSubmitLabel }
 					</button>
-				}
-				{ showForm &&
-					<form onSubmit={ this.onAddTerm }>
-						<label
-							htmlFor={ inputId }
-							className="editor-post-taxonomies__hierarchical-terms-label"
-						>
-							{ newTermLabel }
-						</label>
-						<input
-							type="text"
-							id={ inputId }
-							className="editor-post-taxonomies__hierarchical-terms-input"
-							value={ formName }
-							onChange={ this.onChangeFormName }
-							required
-						/>
-						{ !! availableTerms.length &&
-							<TreeSelect
-								label={ parentSelectLabel }
-								noOptionLabel={ noParentOption }
-								onChange={ this.onChangeFormParent }
-								selectedId={ formParent }
-								tree={ availableTermsTree }
-							/>
-						}
-						<button
-							type="submit"
-							className="button editor-post-taxonomies__hierarchical-terms-submit"
-						>
-							{ newTermSubmitLabel }
-						</button>
-					</form>
-				}
-			</div>
-		);
+				</form>
+			),
+		];
 		/* eslint-enable jsx-a11y/no-onchange */
 	}
 }
diff --git a/editor/components/post-taxonomies/index.js b/editor/components/post-taxonomies/index.js
index efe35d8963e79..a2c7481967095 100644
--- a/editor/components/post-taxonomies/index.js
+++ b/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,24 +18,24 @@ 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 ) );
-
-	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>
-	);
+	return availableTaxonomies.map( ( taxonomy ) => {
+		const TaxonomyComponent = taxonomy.hierarchical ? HierarchicalTermSelector : FlatTermSelector;
+		return (
+			<Fragment key={ `taxonomy-${ taxonomy.slug }` }>
+				{
+					taxonomyWrapper(
+						<TaxonomyComponent
+							restBase={ taxonomy.rest_base }
+							slug={ taxonomy.slug }
+						/>,
+						taxonomy
+					)
+				}
+			</Fragment>
+		);
+	} );
 }
 
 const applyConnect = connect(
diff --git a/editor/components/post-taxonomies/style.scss b/editor/components/post-taxonomies/style.scss
index e56d8078db146..bec8bfcd7fab0 100644
--- a/editor/components/post-taxonomies/style.scss
+++ b/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;
 }
diff --git a/editor/components/post-taxonomies/test/index.js b/editor/components/post-taxonomies/test/index.js
index cd0dd2ac12df6..0ddbb95d76190 100644
--- a/editor/components/post-taxonomies/test/index.js
+++ b/editor/components/post-taxonomies/test/index.js
@@ -16,38 +16,50 @@ describe( 'PostTaxonomies', () => {
 			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
 		);
 
-		expect( wrapper.children() ).toHaveLength( 0 );
+		expect( wrapper.at( 0 ) ).toHaveLength( 0 );
 	} );
 
 	it( 'should render taxonomy components for taxonomies assigned to post type', () => {
-		const taxonomies = {
-			data: [
-				{
-					name: 'Categories',
-					slug: 'category',
-					types: [ 'post', 'page' ],
-					hierarchical: true,
-					rest_base: 'categories',
-				},
-				{
-					name: 'Genres',
-					slug: 'genre',
-					types: [ 'book' ],
-					hierarchical: true,
-					rest_base: 'genres',
-				},
-			],
+		const genresTaxonomy = {
+			name: 'Genres',
+			slug: 'genre',
+			types: [ 'book' ],
+			hierarchical: true,
+			rest_base: 'genres',
 		};
 
-		const wrapper = shallow(
-			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
+		const categoriesTaxonomy = {
+			name: 'Categories',
+			slug: 'category',
+			types: [ 'post', 'page' ],
+			hierarchical: true,
+			rest_base: 'categories',
+		};
+
+		const wrapperOne = shallow(
+			<PostTaxonomies postType="book"
+				taxonomies={ {
+					data: [ genresTaxonomy, categoriesTaxonomy ],
+				} }
+			/>
 		);
 
-		expect( wrapper.children() ).toHaveLength( 1 );
-		expect( wrapper.childAt( 0 ).props() ).toEqual( {
-			label: 'Categories',
-			slug: 'category',
-			restBase: 'categories',
-		} );
+		expect( wrapperOne.at( 0 ) ).toHaveLength( 1 );
+
+		const wrapperTwo = shallow(
+			<PostTaxonomies postType="book"
+				taxonomies={ {
+					data: [
+						genresTaxonomy,
+						{
+							...categoriesTaxonomy,
+							types: [ 'post', 'page', 'book' ],
+						},
+					],
+				} }
+			/>
+		);
+
+		expect( wrapperTwo.at( 0 ) ).toHaveLength( 2 );
 	} );
 } );