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

Jump to bottom

Add new category form improvements #2588

Merged
merged 7 commits into from
Sep 1, 2017
Merged

Add new category form improvements #2588

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b5d7815
Add missing labels and instanceId.
afercia Aug 28, 2017
304e385
Merge branch 'master' into update/add-new-category-form-improvements
afercia Aug 28, 2017
c176ac0
Keep the form open.
afercia Aug 29, 2017
f7a48d5
Fix focus styles using proper CSS classes.
afercia Aug 29, 2017
08a59b6
Improve spacing and translations, remove the plus sign.
afercia Aug 29, 2017
585830c
Merge branch 'master' into update/add-new-category-form-improvements
afercia Aug 29, 2017
f769c91
Sidebar: Remove form state toggle after term save
aduth Sep 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
66 changes: 45 additions & 21 deletions editor/sidebar/post-taxonomies/hierarchical-term-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import { unescape as unescapeString, without, groupBy, map, repeat, find } from
/**
* WordPress dependencies
*/
import { __ } from 'i18n';
import { __, _x } from 'i18n';
import { Component } from '@wordpress/element';
import { withInstanceId } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -114,7 +115,7 @@ class HierarchicalTermSelector extends Component {
adding: false,
formName: '',
formParent: '',
showForm: false,
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess we could drop it entirely here

showForm: true,
availableTerms: newAvailableTerms,
availableTermsTree: this.buildTermsTree( newAvailableTerms ),
} );
Expand Down Expand Up @@ -198,46 +199,70 @@ class HierarchicalTermSelector extends Component {

render() {
const { availableTermsTree, availableTerms, formName, formParent, loading, adding, showForm } = this.state;
const { label, slug } = this.props;
const { label, slug, instanceId } = this.props;

const newTermLinkLabel = slug === 'category' ? __( '+ Add New Category' ) : __( '+ Add New Term' );
const newTermLabel = slug === 'category' ? __( 'Add New Category' ) : __( 'Add New Term' );
const defaultParentLabel = slug === 'category' ? __( '-- Parent Category --' ) : __( '-- Parent Term --' );
const newTermButtonLabel = slug === 'category' ? __( 'Add new category' ) : __( 'Add new term' );
const newTermLabel = slug === 'category' ? __( 'Category Name' ) : __( 'Term Name' );
const parentSelectLabel = slug === 'category' ? __( 'Parent Category' ) : __( 'Parent Term' );
const noParentOption = slug === 'category' ? _x( 'None', 'category' ) : _x( 'None', 'term' );
const newTermSubmitLabel = slug === 'category' ? __( 'Add Category' ) : __( 'Add Term' );
const inputId = `editor-post-taxonomies__hierarchical-terms-input-${ instanceId }`;
const selectId = `editor-post-taxonomies__hierarchical-terms-select-${ instanceId }`;

/* eslint-disable jsx-a11y/no-onchange */
return (
<div className="editor-post-taxonomies__hierarchical-terms-selector">
<h4 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h4>
{ this.renderTerms( availableTermsTree ) }
{ ! loading &&
<button onClick={ this.onToggleForm } className="button-link">
{ newTermLinkLabel }
<button
onClick={ this.onToggleForm }
className="button-link editor-post-taxonomies__hierarchical-terms-add"
aria-expanded={ showForm }
>
{ newTermButtonLabel }
</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"
placeholder={ newTermLabel }
value={ formName }
onChange={ this.onChangeFormName }
/>
{ !! availableTerms.length &&
<select
className="editor-post-taxonomies__hierarchical-terms-input"
value={ formParent }
onChange={ this.onChangeFormParent }
>
<option value="">{ defaultParentLabel }</option>
{ this.renderParentSelectorOptions( availableTermsTree ) }
</select>
<div>
<label
htmlFor={ selectId }
className="editor-post-taxonomies__hierarchical-terms-label"
>
{ parentSelectLabel }
</label>
<select
id={ selectId }
className="editor-post-taxonomies__hierarchical-terms-input"
value={ formParent }
onChange={ this.onChangeFormParent }
>
<option value="">{ noParentOption }</option>
{ this.renderParentSelectorOptions( availableTermsTree ) }
</select>
</div>
}
<button
type="submit"
className="editor-post-taxonomies__hierarchical-terms-submit"
className="button editor-post-taxonomies__hierarchical-terms-submit"
disabled={ adding }
>
{ newTermLabel }
{ newTermSubmitLabel }
</button>
</form>
}
Expand All @@ -258,5 +283,4 @@ export default connect(
return editPost( { [ restBase ]: terms } );
},
}
)( HierarchicalTermSelector );

)( withInstanceId( HierarchicalTermSelector ) );
10 changes: 8 additions & 2 deletions editor/sidebar/post-taxonomies/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,17 @@
margin-left: $panel-padding;
}

.editor-post-taxonomies__hierarchical-terms-submit {
.button.editor-post-taxonomies__hierarchical-terms-submit,
.button-link.editor-post-taxonomies__hierarchical-terms-add {
margin-top: 10px;
}

.editor-post-taxonomies__hierarchical-terms-input {
.editor-post-taxonomies__hierarchical-terms-label {
display: inline-block;
margin-top: 10px;
}

.editor-post-taxonomies__hierarchical-terms-input {
margin-top: 5px;
width: 100%;
}