Made each taxonomy appear on its own panel. (#5183)

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 {
@@ -131,7 +131,8 @@
 		max-width: 75%;
 	}
 
-	&:empty {
+	&:empty,
+	&:first-of-type {
 		margin-top: 0;
 	}
 }

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

@@ -6,31 +6,32 @@ import { connect } from 'react-redux';
 /**
  * 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 ) => {
+					return (
+						<TaxonomyPanel taxonomy={ taxonomy }>
+							{ content }
+						</TaxonomyPanel>
+					);
+				} }
+			/>
 		</PostTaxonomiesCheck>
 	);
 }

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

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

@@ -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 */
 	}
 }

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(

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