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.

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

How-to and FAQ blocks improvements #11926

Merged
merged 13 commits into from
Jan 16, 2019
Prev Previous commit
Next Next commit
Keep focus on the bottom Add button and use speak.
  • Loading branch information
afercia committed Dec 7, 2018
commit 55ee84282884d32c2b5071f1c8b07f21aa9015e8
24 changes: 14 additions & 10 deletions js/src/structured-data-blocks/faq/components/FAQ.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* External dependencies */
import React from "react";
import PropTypes from "prop-types";
import isUndefined from "lodash/isUndefined";
import { __ } from "@wordpress/i18n";
import { speak } from "@wordpress/a11y";

/* Internal dependencies */
import Question from "./Question";
Expand Down Expand Up @@ -92,17 +92,17 @@ export default class FAQ extends Component {
/**
* Inserts an empty Question into a FAQ block at the given index.
*
* @param {number} [index] The index of the Question after which a new Question should be added.
* @param {array|string} [question] The question of the new Question.
* @param {array|string} [answer] The answer of the new Question.
* @param {bool} [focus=true] Whether or not to focus the new Question.
* @param {number} [index] Optional. The index of the Question after which a new Question should be added.
* @param {array|string} [question] Optional. The question of the new Question. Default: empty.
* @param {array|string} [answer] Optional. The answer of the new Question. Default: empty.
* @param {bool} [focus=true] Optional. Whether or not to focus the new Question. Default: true.
*
* @returns {void}
*/
insertQuestion( index, question = [], answer = [], focus = true ) {
insertQuestion( index = null, question = [], answer = [], focus = true ) {
const questions = this.props.attributes.questions ? this.props.attributes.questions.slice() : [];

if ( isUndefined( index ) ) {
if ( index === null ) {
index = questions.length - 1;
}

Expand All @@ -125,7 +125,11 @@ export default class FAQ extends Component {

if ( focus ) {
setTimeout( this.setFocus.bind( this, `${ index + 1 }:question` ) );
// When moving focus to a newly created question, return and don't use the speak() messaage.
return;
}

speak( __( "New question added", "wordpress-seo" ) );
}

/**
Expand Down Expand Up @@ -216,15 +220,15 @@ export default class FAQ extends Component {
}

/**
* Retrieves a button to add a step to the front of the list.
* Retrieves a button to add a question at the end of the FAQ list.
*
* @returns {Component} The button for adding add a step.
* @returns {Component} The button to add a question.
*/
getAddQuestionButton() {
return (
<IconButton
icon="insert"
onClick={ () => this.insertQuestion() }
onClick={ () => this.insertQuestion( null, [], [], false ) }
className="editor-inserter__toggle schema-faq-add-question"
>
{ __( "Add question", "wordpress-seo" ) }
Expand Down
26 changes: 15 additions & 11 deletions js/src/structured-data-blocks/how-to/components/HowTo.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* External dependencies */
import PropTypes from "prop-types";
import HowToStep from "./HowToStep";
import isUndefined from "lodash/isUndefined";
import styled from "styled-components";
import { __ } from "@wordpress/i18n";
import { speak } from "@wordpress/a11y";
import toString from "lodash/toString";
import get from "lodash/get";

Expand Down Expand Up @@ -165,19 +165,19 @@ export default class HowTo extends Component {
}

/**
* Inserts an empty step into a how-to block at the given index.
* Inserts an empty Step into a how-to block at the given index.
*
* @param {number} [index] The index of the step after which a new step should be added.
* @param {string} [name] The name of the new step.
* @param {string} [text] The text of the new step.
* @param {bool} [focus=true] Whether or not to focus the new step.
* @param {number} [index] Optional. The index of the Step after which a new Step should be added.
* @param {array|string} [name] Optional. The title of the new Step. Default: empty.
* @param {array|string} [text] Optional. The description of the new Step. Default: empty.
* @param {bool} [focus=true] Optional. Whether or not to focus the new Step. Default: true.
*
* @returns {void}
*/
insertStep( index, name = [], text = [], focus = true ) {
insertStep( index = null, name = [], text = [], focus = true ) {
const steps = this.props.attributes.steps ? this.props.attributes.steps.slice() : [];

if ( isUndefined( index ) ) {
if ( index === null ) {
index = steps.length - 1;
}

Expand All @@ -200,7 +200,11 @@ export default class HowTo extends Component {

if ( focus ) {
setTimeout( this.setFocus.bind( this, `${ index + 1 }:name` ) );
// When moving focus to a newly created step, return and don't use the speak() messaage.
return;
}

speak( __( "New step added", "wordpress-seo" ) );
}

/**
Expand Down Expand Up @@ -424,15 +428,15 @@ export default class HowTo extends Component {
}

/**
* A button to add a step to the front of the list.
* Retrieves a button to add a step at the end of the How-to list.
*
* @returns {Component} a button to add a step
* @returns {Component} The button to add a step.
*/
getAddStepButton() {
return (
<IconButton
icon="insert"
onClick={ () => this.insertStep() }
onClick={ () => this.insertStep( null, [], [], false ) }
className="editor-inserter__toggle schema-how-to-add-step"
>
{ __( "Add step", "wordpress-seo" ) }
Expand Down