Merge branch 'release/8.2' into trunk

* release/8.2:
  Bump version number
  Add Gutenblock changelog items
  Remove unused import
  Improve JsDocs and remove unnecessary Fragment
  Move import to correct category
  Use HOC to append space
  Fix codestyle
  Add spaces within HowTo and FAQ block
  Rename FAQ HTML elements
  Rename classes (part 1) and change strong to H2

# Conflicts:
#	js/src/structured-data-blocks/how-to/components/HowTo.js

css/src/structured-data-blocks.scss

@@ -76,7 +76,7 @@ legend.schema-how-to-duration-legend {
 
 .schema-how-to-step-name,
 .schema-faq-title,
-.schema-faq-question-question {
+.schema-faq-question {
 	font-weight: 600;
 }
 
@@ -98,24 +98,24 @@ legend.schema-how-to-duration-legend {
 }
 
 // FAQ styling
-.schema-faq-question {
+.schema-faq-section {
 	position: relative;
 	padding: 8px 4px 8px 32px;
 	margin: 4px 0;
 	border: 1px lightgrey solid;
 	list-style-type: none;
 }
 
-.schema-faq-question-mover {
+.schema-faq-section-mover {
 	position: absolute;
 	top: 0;
 	left: -29px;
 }
 
-.schema-faq-question-button-container {
+.schema-faq-section-button-container {
 	text-align: right;
 
-	.schema-faq-question-add-media {
+	.schema-faq-section-add-media {
 		float: left;
 	}
 

js/src/components/higherorder/appendSpace.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from "react";
+
+/**
+ * A higher order component that appends a space to the given component.
+ *
+ * @param {ReactComponent} WrappedComponent The component to append a space to.
+ * @returns {ReactComponent} The component with an appended space.
+ */
+const appendSpace = function( WrappedComponent ) {
+	return class ComponentWithAppendedSpace extends React.Component {
+		render() {
+			return(
+				<Fragment>
+					<WrappedComponent { ...this.props }/>
+					{ " " }
+				</Fragment>
+			);
+		}
+	};
+};
+
+export default appendSpace;

js/src/structured-data-blocks/faq/components/FAQ.js

@@ -7,11 +7,15 @@ import { __ } from "@wordpress/i18n";
 /* Internal dependencies */
 import Question from "./Question";
 import { stripHTML } from "../../../helpers/stringHelpers";
+import appendSpace from "../../../components/higherorder/appendSpace";
 
 const { RichText } = window.wp.editor;
 const { IconButton } = window.wp.components;
 const { Component, renderToString } = window.wp.element;
 
+const QuestionContentWithAppendedSpace = appendSpace( Question.Content );
+const RichTextContentWithAppendedSpace = appendSpace( RichText.Content );
+
 /**
  * A FAQ block component.
  */
@@ -267,7 +271,7 @@ export default class FAQ extends Component {
 							onMoveUp={ () => this.swapQuestions( index, index - 1 ) }
 							onMoveDown={ () => this.swapQuestions( index, index + 1 ) }
 							isFirst={ index === 0 }
-							isLast={ index === attributes.questions.length-1 }
+							isLast={ index === attributes.questions.length - 1 }
 						/>
 					);
 				}
@@ -284,18 +288,18 @@ export default class FAQ extends Component {
 	 * @returns {Component} The component representing a FAQ block.
 	 */
 	static Content( attributes ) {
-		let { title, questions, className } = attributes;
+		const { title, questions, className } = attributes;
 
 		let questionList = questions ? questions.map( ( question ) =>
-			<Question.Content { ...question } />
+			<QuestionContentWithAppendedSpace { ...question } />
 		) : null;
 
 		const classNames = [ "schema-faq", className ].filter( ( i ) => i ).join( " " );
 
 		return (
 			<div className={ classNames }>
-				<RichText.Content
-					tagName="strong"
+				<RichTextContentWithAppendedSpace
+					tagName="h2"
 					className="schema-faq-title"
 					value={ title }
 					id={ stripHTML( renderToString( title ) ).toLowerCase().replace( /\s+/g, "-" ) }
@@ -311,14 +315,14 @@ export default class FAQ extends Component {
 	 * @returns {Component} The FAQ block editor.
 	 */
 	render() {
-		let { attributes, setAttributes, className } = this.props;
+		const { attributes, setAttributes, className } = this.props;
 
 		const classNames = [ "schema-faq", className ].filter( ( i ) => i ).join( " " );
 
 		return (
 			<div className={ classNames }>
 				<RichText
-					tagName="p"
+					tagName="h2"
 					className="schema-faq-title"
 					value={ attributes.title }
 					isSelected={ this.state.focus === "title" }

js/src/structured-data-blocks/faq/components/Question.js

@@ -1,11 +1,17 @@
 /* External dependencies */
+import React from "react";
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
 
 const { Component } = window.wp.element;
 const { IconButton } = window.wp.components;
 const { RichText, MediaUpload } = window.wp.editor;
 
+/* Internal dependencies */
+import appendSpace from "../../../components/higherorder/appendSpace";
+
+const RichTextWithAppendedSpace = appendSpace( RichText.Content );
+
 /**
  * A Question and answer pair within a FAQ block.
  */
@@ -23,14 +29,14 @@ export default class Question extends Component {
 			insertQuestion,
 		} = this.props;
 
-		return <div className="schema-faq-question-button-container">
+		return <div className="schema-faq-section-button-container">
 			<MediaUpload
 				onSelect={ ( media ) => this.onSelectImage( media ) }
 				type="image"
 				value={ attributes.id }
 				render={ ( { open } ) => (
 					<IconButton
-						className="schema-faq-question-button editor-inserter__toggle faq-question-add-media"
+						className="schema-faq-section-button editor-inserter__toggle faq-section-add-media"
 						icon="insert"
 						onClick={ open }
 					>
@@ -39,14 +45,14 @@ export default class Question extends Component {
 				) }
 			/>
 			<IconButton
-				className="schema-faq-question-button editor-inserter__toggle"
+				className="schema-faq-section-button editor-inserter__toggle"
 				icon="trash"
 				label={ __( "Delete question", "wordpress-seo" ) }
 				onClick={ removeQuestion }
 			>
 			</IconButton>
 			<IconButton
-				className="schema-faq-question-button editor-inserter__toggle"
+				className="schema-faq-section-button editor-inserter__toggle"
 				icon="insert"
 				label={ __( "Insert question", "wordpress-seo" ) }
 				onClick={ insertQuestion }
@@ -61,7 +67,7 @@ export default class Question extends Component {
 	 * @returns {Component} The buttons.
 	 */
 	getMover() {
-		return <div className="schema-faq-question-mover">
+		return <div className="schema-faq-section-mover">
 			{ ! this.props.isFirst &&
 			<IconButton
 				className="editor-block-mover__control"
@@ -134,16 +140,16 @@ export default class Question extends Component {
 	 */
 	static Content( question ) {
 		return(
-			<div className={ "schema-faq-question" } key={ question.id }>
-				<RichText.Content
+			<div className={ "schema-faq-section" } key={ question.id }>
+				<RichTextWithAppendedSpace
 					tagName="strong"
-					className="schema-faq-question-question"
+					className="schema-faq-question"
 					key={ question.id + "-question" }
 					value={ question.question }
 				/>
-				<RichText.Content
+				<RichTextWithAppendedSpace
 					tagName="p"
-					className="schema-faq-question-answer"
+					className="schema-faq-answer"
 					key={ question.id + "-answer" }
 					value={ question.answer }
 				/>
@@ -169,9 +175,9 @@ export default class Question extends Component {
 		let { id, question, answer } = attributes;
 
 		return (
-			<div className="schema-faq-question" key={ id } >
+			<div className="schema-faq-section" key={ id } >
 				<RichText
-					className="schema-faq-question-question"
+					className="schema-faq-question"
 					tagName="p"
 					onSetup={ ( ref ) => editorRef( "question", ref ) }
 					key={ id + "-question" }
@@ -183,7 +189,7 @@ export default class Question extends Component {
 					keepPlaceholderOnFocus={ true }
 				/>
 				<RichText
-					className="schema-faq-question-answer"
+					className="schema-faq-answer"
 					tagName="p"
 					onSetup={  ( ref ) => editorRef( "answer", ref )  }
 					key={ id + "-answer" }

js/src/structured-data-blocks/how-to/components/HowTo.js

@@ -10,11 +10,14 @@ import get from "lodash/get";
 /* Internal dependencies */
 import { stripHTML } from "../../../helpers/stringHelpers";
 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 RichTextWithAppendedSpace = appendSpace( RichText.Content );
+
 /**
  * Modified Text Control to provide a better layout experience.
  *
@@ -474,10 +477,10 @@ export default class HowTo extends Component {
 							{ durationText }
 							 
 						</span>
-						{ timeString }.
+						{ timeString + ". " }
 					</p>
 				}
-				<RichText.Content
+				<RichTextWithAppendedSpace
 					tagName="p"
 					className="schema-how-to-description"
 					value={ description }
@@ -529,20 +532,6 @@ export default class HowTo extends Component {
 		this.props.setAttributes( { unorderedList: checked } );
 	}
 
-	/**
-	 * Sets the duration text to describe the time the guide in the how-to block takes.
-	 *
-	 * @param {string} text The text to describe the duration.
-	 *
-	 * @returns {void}
-	 */
-	setDurationText( text ) {
-		if ( text === "" ) {
-			text = this.getDefaultDurationText();
-		}
-		this.props.setAttributes( { durationText: text } );
-	}
-
 	/**
 	 * Returns the help text for this how-to block"s list type.
 	 *
@@ -561,15 +550,10 @@ export default class HowTo extends Component {
 	 *
 	 * @param {boolean} unorderedList     Whether to show the list as an unordered list.
 	 * @param {string}  additionalClasses The additional CSS classes to add to the list.
-	 * @param {string}  durationText      The text to describe the duration.
 	 *
 	 * @returns {Component} The controls to add to the sidebar.
 	 */
-	getSidebar( unorderedList, additionalClasses, durationText ) {
-		if ( durationText === this.getDefaultDurationText() ) {
-			durationText = "";
-		}
-
+	getSidebar( unorderedList, additionalClasses ) {
 		return <InspectorControls>
 			<PanelBody title={ __( "Settings", "wordpress-seo" ) } className="blocks-font-size">
 				<SpacedTextControl
@@ -578,13 +562,6 @@ export default class HowTo extends Component {
 					onChange={ this.addCSSClasses }
 					help={ __( "Optional. This can give you better control over the styling of the steps.", "wordpress-seo" ) }
 				/>
-				<SpacedTextControl
-					label={ __( "Describe the duration of the instruction:", "wordpress-seo" ) }
-					value={ durationText }
-					onChange={ this.setDurationText }
-					help={ __( "Optional. Customize how you want to describe the duration of the instruction", "wordpress-seo" ) }
-					placeholder={ this.getDefaultDurationText() }
-				/>
 				<ToggleControl
 					label={ __( "Unordered list", "wordpress-seo" ) }
 					checked={ unorderedList }
@@ -626,7 +603,7 @@ export default class HowTo extends Component {
 					{ this.getSteps() }
 				</ul>
 				<div className="schema-how-to-buttons">{ this.getAddStepButton() }</div>
-				{ this.getSidebar( attributes.unorderedList, attributes.additionalListCssClasses, attributes.durationText ) }
+				{ this.getSidebar( attributes.unorderedList, attributes.additionalListCssClasses ) }
 			</div>
 		);
 	}

js/src/structured-data-blocks/how-to/components/HowToStep.js

@@ -1,11 +1,15 @@
 /* External dependencies */
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
+import appendSpace from "../../../components/higherorder/appendSpace";
 
 const { Component } = window.wp.element;
 const { IconButton } = window.wp.components;
 const { RichText, MediaUpload } = window.wp.editor;
 
+const RichTextWithAppendedSpace = appendSpace( RichText );
+const RichTextContentWithAppendedSpace = appendSpace( RichText.Content );
+
 /**
  * A How-to step within a How-to block.
  */
@@ -150,13 +154,13 @@ export default class HowToStep extends Component {
 	static Content( step ) {
 		return(
 			<li className={ "schema-how-to-step" } key={ step.id } >
-				<RichText.Content
+				<RichTextContentWithAppendedSpace
 					tagName="strong"
 					className="schema-how-to-step-name"
 					key={ step.id + "-name" }
 					value={ step.name }
 				/>
-				<RichText.Content
+				<RichTextContentWithAppendedSpace
 					tagName="p"
 					className="schema-how-to-step-text"
 					key={ step.id + "-text" }
@@ -193,7 +197,7 @@ export default class HowToStep extends Component {
 						: ( index + 1 ) + "."
 					}
 				</span>
-				<RichText
+				<RichTextWithAppendedSpace
 					className="schema-how-to-step-name"
 					tagName="p"
 					onSetup={ ( ref ) => editorRef( "name", ref ) }
@@ -205,7 +209,7 @@ export default class HowToStep extends Component {
 					setFocusedElement={ () => onFocus( "name" ) }
 					keepPlaceholderOnFocus={ true }
 				/>
-				<RichText
+				<RichTextWithAppendedSpace
 					className="schema-how-to-step-text"
 					tagName="p"
 					onSetup={ ( ref ) => editorRef( "text", ref ) }

package.json

@@ -140,6 +140,6 @@
     "yoastseo": "https://github.com/Yoast/YoastSEO.js.git#develop"
   },
   "yoast": {
-    "pluginVersion": "8.2-RC5"
+    "pluginVersion": "8.2-RC6"
   }
 }

readme.txt

@@ -111,6 +111,8 @@ Release Date: September 11th, 2018
 
 Enhancements:
 
+* Introduces a How-To block in Gutenberg to create a How-to guide in an SEO-friendly way. Read more about the Gutenblocks in [https://yoa.st/gutenblocks](our release post).
+* Introduces a FAQ block in Gutenberg to list your Frequently Asked Questions in an SEO-friendly way. Read more about the Gutenblocks in [https://yoa.st/gutenblocks](our release post).
 * Adds readability analysis for Polish.
 * On Multisite environments, in addition to the site domain, path and ID, also site titles are now present in the site selection dropdowns.
 

wp-seo-main.php

@@ -15,7 +15,7 @@
  * {@internal Nobody should be able to overrule the real version number as this can cause
  *            serious issues with the options, so no if ( ! defined() ).}}
  */
-define( 'WPSEO_VERSION', '8.2-RC5' );
+define( 'WPSEO_VERSION', '8.2-RC6' );
 
 
 if ( ! defined( 'WPSEO_PATH' ) ) {