Skip to content

Commit

Permalink
Merge pull request #11926 from Yoast/10834-10766-how-to-faq-blocks-im…
Browse files Browse the repository at this point in the history 
…provements

How-to and FAQ blocks improvements
  • Loading branch information
Alexander Botteram authored Jan 16, 2019
2 parents 30dad28 + 683c74c commit 51a9eb8
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 228 deletions.
183 changes: 78 additions & 105 deletions css/src/structured-data-blocks.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
27 changes: 15 additions & 12 deletions js/src/structured-data-blocks/faq/components/FAQ.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* 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 @@ -63,7 +62,7 @@ export default class FAQ extends Component {
* @returns {void}
*/
onAddQuestionButtonClick() {
this.insertQuestion();
this.insertQuestion( null, [], [], false );
}

/**
Expand Down Expand Up @@ -120,17 +119,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 @@ -153,7 +152,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() message.
return;
}

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

/**
Expand Down Expand Up @@ -269,16 +272,16 @@ 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.onAddQuestionButtonClick }
className="editor-inserter__toggle"
className="editor-inserter__toggle schema-faq-add-question"
>
{ __( "Add question", "wordpress-seo" ) }
</IconButton>
Expand Down
Loading

0 comments on commit 51a9eb8

Please sign in to comment.