From 2fb50b45a537f3db87a9473b4d41e912635d8888 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 3 Dec 2018 16:23:41 +0100 Subject: [PATCH 1/9] Refactor CSS. --- css/src/structured-data-blocks.scss | 183 ++++++++---------- .../faq/components/FAQ.js | 2 +- .../how-to/components/HowTo.js | 136 ++++++------- 3 files changed, 148 insertions(+), 173 deletions(-) diff --git a/css/src/structured-data-blocks.scss b/css/src/structured-data-blocks.scss index c0fa1cf300e..b495918c0ae 100644 --- a/css/src/structured-data-blocks.scss +++ b/css/src/structured-data-blocks.scss @@ -1,21 +1,15 @@ -.schema-how-to-duration .schema-how-to-duration-input[type="number"] { - width: 40px; - margin: 0 2px; - padding: 6px 4px; - text-align: center; - -moz-appearance: textfield; - - &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } -} - -.schema-how-to-duration-time-input { - white-space: nowrap; +// Common styles. +.schema-how-to-step, +.schema-faq-section { + position: relative; + padding: 8px 4px 8px 32px; + margin: 4px 0; + border: 1px solid rgba(#9197a2, 0.25); + list-style-type: none; } -.schema-how-to-buttons { +.schema-how-to-buttons, +.schema-faq-buttons { text-align: center; button.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { @@ -24,55 +18,17 @@ } } -button.schema-how-to-duration-button.components-icon-button { - position: relative; - top: 5px; - padding: 8px 0; - - &:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { - box-shadow: none; - color: #007cba; - } -} - -input + button.schema-how-to-duration-button.components-icon-button { - padding: 8px; -} - -.schema-how-to-description { - margin: 8px 0; -} - -legend.schema-how-to-duration-legend { - float: left; - margin-top: 8px; - margin-right: 4px; -} - -.schema-how-to-step { - position: relative; - padding: 8px 4px 8px 32px; - margin: 4px 0; - border: 1px lightgrey solid; - list-style-type: none; -} - -.schema-how-to-step-mover { +.schema-how-to-step-mover, +.schema-faq-section-mover { display: inline-block; -} - -.schema-how-to-step-button { - margin: 0; -} -.schema-how-to-step-number { - position: absolute; - left: 4px; - width: 24px; - text-align: right; + .editor-block-mover__control { + display: inline-flex; + width: 36px; + height: 36px; + } } -// TinyMCE fields and placeholders .schema-how-to-step-name, .schema-faq-question { font-weight: 600; @@ -86,76 +42,93 @@ legend.schema-how-to-duration-legend { line-height: inherit; } -.schema-how-to-step-button-container { +.schema-how-to-step-button-container, +.schema-faq-section-button-container { display: inline-block; text-align: right; - .schema-how-to-step-add-media { - float: left; - } - button.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { box-shadow: none; color: #007cba; } } -#schema-how-to-duration-days { - margin-right: 8px; +.schema-how-to-step-controls-container, +.schema-faq-section-controls-container { + text-align: right; + margin-left: -28px; // compensate the 32px wrapper padding and keep a 4px space + + .dashicons-arrow-up-alt2 { + position: relative; + top: -1px; // fix dashicon shape vertical centering + } } -// FAQ styling -.schema-faq-section { - position: relative; - padding: 8px 4px 8px 32px; - margin: 4px 0; - border: 1px lightgrey solid; - list-style-type: none; +.schema-how-to-duration-button, +.how-to-step-add-media, +.schema-how-to-add-step, +.faq-section-add-media, +.schema-faq-add-question { + .dashicon { + margin-right: 4px; + } } -.schema-faq-section-mover { - display: inline-block; +// How-to block specific styles. +.schema-how-to { + padding-top: 4px; } -.schema-faq-section-button-container { - display: inline-block; +.schema-how-to-step-number { + position: absolute; + left: 4px; + width: 24px; text-align: right; +} - .schema-faq-section-add-media { - float: left; - } +.schema-how-to-duration-flex-container { + display: flex; + align-items: center; +} - button.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { - box-shadow: none; - color: #007cba; - } +.schema-how-to-duration-time-input { + display: inline-flex; + align-items: center; + flex-wrap: nowrap; } -.schema-faq-buttons { - text-align: center; +legend.schema-how-to-duration-legend { + margin-right: 4px; +} - button.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { - box-shadow: none; - color: #007cba; - } +#schema-how-to-duration-days { + margin-right: 8px; } -.schema-how-to-step-mover, -.schema-faq-section-mover { - .editor-block-mover__control { - display: inline-flex; - width: 36px; - height: 36px; +.schema-how-to-duration .schema-how-to-duration-input[type="number"] { + width: 40px; + margin: 0 2px; + padding: 6px 4px; + text-align: center; + -moz-appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } } -.schema-how-to-step-controls-container, -.schema-faq-section-controls-container { - text-align: right; - margin-left: -28px; // compensate the 32px wrapper padding and keep a 4px space +.schema-how-to-duration-button.components-icon-button { + margin-left: -8px; + vertical-align: top; // Remove descender space from inline-flex. - .dashicons-arrow-up-alt2 { - position: relative; - top: -1px; // fix dashicon shape vertical centering + &:not(:disabled):not([aria-disabled=true]):not(.is-default):hover { + box-shadow: none; + color: #007cba; } } + +.schema-how-to-description { + margin: 8px 0; +} diff --git a/js/src/structured-data-blocks/faq/components/FAQ.js b/js/src/structured-data-blocks/faq/components/FAQ.js index b547c6932b7..ac18255847b 100644 --- a/js/src/structured-data-blocks/faq/components/FAQ.js +++ b/js/src/structured-data-blocks/faq/components/FAQ.js @@ -225,7 +225,7 @@ export default class FAQ extends Component { this.insertQuestion() } - className="editor-inserter__toggle" + className="editor-inserter__toggle schema-faq-add-question" > { __( "Add question", "wordpress-seo" ) } diff --git a/js/src/structured-data-blocks/how-to/components/HowTo.js b/js/src/structured-data-blocks/how-to/components/HowTo.js index 337a50a8f71..17469a35534 100644 --- a/js/src/structured-data-blocks/how-to/components/HowTo.js +++ b/js/src/structured-data-blocks/how-to/components/HowTo.js @@ -429,7 +429,7 @@ export default class HowTo extends Component { this.insertStep() } - className="editor-inserter__toggle" + className="editor-inserter__toggle schema-how-to-add-step" > { __( "Add step", "wordpress-seo" ) } @@ -494,73 +494,75 @@ export default class HowTo extends Component { return (
- - { attributes.durationText || this.getDefaultDurationText() } - - - - this.setFocus( "days" ) } - onChange={ ( event ) => { - const newValue = this.formatDuration( event.target.value ); - setAttributes( { days: toString( newValue ) } ); - } } - placeholder="DD" - /> - - this.setFocus( "hours" ) } - placeholder="HH" - onChange={ ( event ) => { - const newValue = this.formatDuration( event.target.value, 23 ); - setAttributes( { hours: toString( newValue ) } ); - } } - /> - - - this.setFocus( "minutes" ) } - onChange={ ( event ) => { - const newValue = this.formatDuration( event.target.value, 59 ); - setAttributes( { minutes: toString( newValue ) } ); - } } - placeholder="MM" - /> - setAttributes( { hasDuration: false } ) } - /> + { attributes.durationText || this.getDefaultDurationText() } + + + + this.setFocus( "days" ) } + onChange={ ( event ) => { + const newValue = this.formatDuration( event.target.value ); + setAttributes( { days: toString( newValue ) } ); + } } + placeholder="DD" + /> + + this.setFocus( "hours" ) } + placeholder="HH" + onChange={ ( event ) => { + const newValue = this.formatDuration( event.target.value, 23 ); + setAttributes( { hours: toString( newValue ) } ); + } } + /> + + + this.setFocus( "minutes" ) } + onChange={ ( event ) => { + const newValue = this.formatDuration( event.target.value, 59 ); + setAttributes( { minutes: toString( newValue ) } ); + } } + placeholder="MM" + /> + setAttributes( { hasDuration: false } ) } + /> +
); From c6696ba3d50d789982b77806cbe894c2a069c33e Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 5 Dec 2018 16:24:05 +0100 Subject: [PATCH 2/9] Refactor focus management for the duration time UI. --- .../how-to/components/HowTo.js | 49 ++++++++++++++----- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/js/src/structured-data-blocks/how-to/components/HowTo.js b/js/src/structured-data-blocks/how-to/components/HowTo.js index 17469a35534..778123c3020 100644 --- a/js/src/structured-data-blocks/how-to/components/HowTo.js +++ b/js/src/structured-data-blocks/how-to/components/HowTo.js @@ -13,8 +13,8 @@ import buildDurationString from "../utils/buildDurationString"; import appendSpace from "../../../components/higherorder/appendSpace"; const { RichText, InspectorControls } = window.wp.editor; -const { IconButton, PanelBody, TextControl, ToggleControl } = window.wp.components; -const { Component, renderToString } = window.wp.element; +const { Button, IconButton, Dashicon, PanelBody, TextControl, ToggleControl } = window.wp.components; +const { Component, renderToString, createRef } = window.wp.element; const RichTextWithAppendedSpace = appendSpace( RichText.Content ); @@ -54,6 +54,10 @@ export default class HowTo extends Component { this.getListTypeHelp = this.getListTypeHelp.bind( this ); this.toggleListType = this.toggleListType.bind( this ); this.setDurationText = this.setDurationText.bind( this ); + this.openDuration = this.openDuration.bind( this ); + this.closeDuration = this.closeDuration.bind( this ); + this.daysInput = createRef(); + this.addTimeButton = createRef(); const defaultDurationText = this.getDefaultDurationText(); this.setDefaultDurationText( defaultDurationText ); @@ -481,14 +485,15 @@ export default class HowTo extends Component { if ( ! attributes.hasDuration ) { return ( - setAttributes( { hasDuration: true } ) } - className="schema-how-to-duration-button editor-inserter__toggle" + // Use a `Button` because at the moment `IconButton` doesn't support refs. + ); } @@ -512,12 +517,12 @@ export default class HowTo extends Component { className="schema-how-to-duration-input" type="number" value={ attributes.days } - onFocus={ () => this.setFocus( "days" ) } onChange={ ( event ) => { const newValue = this.formatDuration( event.target.value ); setAttributes( { days: toString( newValue ) } ); } } placeholder="DD" + ref={ this.daysInput } />