From 5a2017537b6320e4ccc0768bdb7352777b557407 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 25 Sep 2019 11:55:44 +0300 Subject: [PATCH 1/7] Fixes the checkbox appearance --- .../hierarchical-term-selector.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 9c2405be98cbd3..dfb8701d8c8b21 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -8,7 +8,7 @@ import { get, unescape as unescapeString, without, find, some, invoke } from 'lo */ import { __, _x, _n, sprintf } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components'; +import { Dashicon, TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; import apiFetch from '@wordpress/api-fetch'; @@ -317,17 +317,21 @@ class HierarchicalTermSelector extends Component { const { terms = [] } = this.props; return renderedTerms.map( ( term ) => { const id = `editor-post-taxonomies-hierarchical-term-${ term.id }`; + const checked = terms.indexOf( term.id ) !== -1; return (
- - + + + { checked ? : null } + + { !! term.children.length && (
{ this.renderTerms( term.children ) } From 423704439e9f5413dc2918d7df7102388ae55b9d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 25 Sep 2019 12:16:55 +0300 Subject: [PATCH 2/7] using checkbox control --- .../hierarchical-term-selector.js | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index dfb8701d8c8b21..091cca36aecf2f 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -8,7 +8,7 @@ import { get, unescape as unescapeString, without, find, some, invoke } from 'lo */ import { __, _x, _n, sprintf } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { Dashicon, TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components'; +import { CheckboxControl, TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; import apiFetch from '@wordpress/api-fetch'; @@ -55,9 +55,8 @@ class HierarchicalTermSelector extends Component { }; } - onChange( event ) { + onChange( termId ) { const { onUpdateTerms, terms = [], taxonomy } = this.props; - const termId = parseInt( event.target.value, 10 ); const hasTerm = terms.indexOf( termId ) !== -1; const newTerms = hasTerm ? without( terms, termId ) : @@ -317,21 +316,18 @@ class HierarchicalTermSelector extends Component { const { terms = [] } = this.props; return renderedTerms.map( ( term ) => { const id = `editor-post-taxonomies-hierarchical-term-${ term.id }`; - const checked = terms.indexOf( term.id ) !== -1; return (
- - - { checked ? : null } - - + { + const termId = parseInt( term.id, 10 ); + this.onChange( termId ); + } } + label={ unescapeString( term.name ) } + /> { !! term.children.length && (
{ this.renderTerms( term.children ) } From c604286505a91492c5a59819453ef6d978fe5832 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 26 Sep 2019 20:28:34 +0300 Subject: [PATCH 3/7] fixing issues found by review --- packages/e2e-tests/specs/taxonomies.test.js | 4 ++-- .../components/post-taxonomies/hierarchical-term-selector.js | 3 --- packages/editor/src/components/post-taxonomies/style.scss | 4 ---- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index 1c88fa690be961..8ae8e372818b0b 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -31,7 +31,7 @@ describe( 'Taxonomies', () => { return page.evaluate( () => { return Array.from( document.querySelectorAll( - '.editor-post-taxonomies__hierarchical-terms-input:checked' + '.editor-post-taxonomies__hierarchical-terms-choice > .components-checkbox-control__input:checked' ) ).map( ( node ) => { return node.parentElement.querySelector( 'label' @@ -83,7 +83,7 @@ describe( 'Taxonomies', () => { await page.click( '.editor-post-taxonomies__hierarchical-terms-submit' ); // Wait for the categories to load. - await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-input:checked' ); + await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice > .components-checkbox-control__input:checked' ); let selectedCategories = await getSelectCategories(); diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 091cca36aecf2f..b3e4bbe15cae80 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -315,13 +315,10 @@ class HierarchicalTermSelector extends Component { renderTerms( renderedTerms ) { const { terms = [] } = this.props; return renderedTerms.map( ( term ) => { - const id = `editor-post-taxonomies-hierarchical-term-${ term.id }`; return (
{ const termId = parseInt( term.id, 10 ); this.onChange( termId ); diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss index 3e4f5fa263f4f3..5d9887cb742e14 100644 --- a/packages/editor/src/components/post-taxonomies/style.scss +++ b/packages/editor/src/components/post-taxonomies/style.scss @@ -10,10 +10,6 @@ margin-bottom: 8px; } -.editor-post-taxonomies__hierarchical-terms-input[type="checkbox"] { - margin-top: 0; -} - .editor-post-taxonomies__hierarchical-terms-subchoices { margin-top: 8px; margin-left: $panel-padding; From 423415a329abee6ddbdccb15ce020b545f28ea6e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 26 Sep 2019 23:03:48 +0300 Subject: [PATCH 4/7] fix for e2e --- packages/e2e-tests/specs/taxonomies.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index 8ae8e372818b0b..4a89e036fd0bd6 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -31,7 +31,7 @@ describe( 'Taxonomies', () => { return page.evaluate( () => { return Array.from( document.querySelectorAll( - '.editor-post-taxonomies__hierarchical-terms-choice > .components-checkbox-control__input:checked' + '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' ) ).map( ( node ) => { return node.parentElement.querySelector( 'label' @@ -83,7 +83,7 @@ describe( 'Taxonomies', () => { await page.click( '.editor-post-taxonomies__hierarchical-terms-submit' ); // Wait for the categories to load. - await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice > .components-checkbox-control__input:checked' ); + await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' ); let selectedCategories = await getSelectCategories(); From 22f5927d4b88e1b0810ff50169223af7f2fd2028 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 27 Sep 2019 12:03:04 +0300 Subject: [PATCH 5/7] fix test selector --- packages/e2e-tests/specs/taxonomies.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index 4a89e036fd0bd6..03b2a711bc0c6a 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -33,7 +33,7 @@ describe( 'Taxonomies', () => { return Array.from( document.querySelectorAll( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' ) ).map( ( node ) => { - return node.parentElement.querySelector( + return node.parentElement.nextSibling.querySelector( 'label' ).innerText; } ); From d1d1a07e6e23c5171b2488193fd3e43ccc855ede Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 27 Sep 2019 13:01:34 +0300 Subject: [PATCH 6/7] fix test selector pretty please --- packages/e2e-tests/specs/taxonomies.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index 03b2a711bc0c6a..f421cf448963e2 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -33,9 +33,7 @@ describe( 'Taxonomies', () => { return Array.from( document.querySelectorAll( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' ) ).map( ( node ) => { - return node.parentElement.nextSibling.querySelector( - 'label' - ).innerText; + return node.parentElement.nextSibling.innerText; } ); } ); From c984e35f17e4037f2c4ed5bd8f5a355d34e4729a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 27 Sep 2019 14:47:45 +0300 Subject: [PATCH 7/7] fix test o' c'mon! --- packages/e2e-tests/specs/taxonomies.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index f421cf448963e2..791fd79b12f8d4 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -99,7 +99,7 @@ describe( 'Taxonomies', () => { await page.reload(); // Wait for the categories to load. - await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-input:checked' ); + await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' ); selectedCategories = await getSelectCategories();