P2 877 fix jobs html

packages/schema-blocks/src/instructions/blocks/ClassName.ts

@@ -1,5 +1,5 @@
 import BlockInstruction from "../../core/blocks/BlockInstruction";
-import { RenderEditProps } from "../../core/blocks/BlockDefinition";
+import { RenderEditProps, RenderSaveProps } from "../../core/blocks/BlockDefinition";
 
 /**
  * ClassName instruction.
@@ -21,10 +21,17 @@ export default class ClassName extends BlockInstruction {
 	 * on the frontend, so the Twenty Twenty One
 	 * theme works correctly.
 	 *
-	 * @returns "yoast-inner-container"
+	 * @param props The saved props.
+	 *
+	 * @returns The current set classname with the "yoast-inner-container"
 	 */
-	save(): string {
-		return "yoast-inner-container";
+	save( props: RenderSaveProps ): string {
+		let className = "yoast-inner-container";
+		if ( props.attributes.className ) {
+			className = `${ props.attributes.className } ${ className }`;
+		}
+
+		return className;
 	}
 }
 

packages/schema-blocks/src/instructions/blocks/Date.tsx

@@ -124,7 +124,7 @@ export default class Date extends BlockInstruction {
 
 		const dateFormat = Date.getDateFormat();
 
-		return <div><time dateTime={ date }>{ dateI18n( dateFormat, date, false ) }</time></div>;
+		return <time dateTime={ date }>{ dateI18n( dateFormat, date, false ) }</time>;
 	}
 
 	/**

packages/schema-blocks/src/instructions/blocks/Select.tsx

@@ -6,6 +6,12 @@ import BlockInstruction from "../../core/blocks/BlockInstruction";
 import { RenderEditProps, RenderSaveProps } from "../../core/blocks/BlockDefinition";
 import { attributeExists, attributeNotEmpty } from "../../functions/validators";
 
+/**
+ * A name of a standard HTML element.
+ * E.g. "span" or "div".
+ */
+type IntrinsicElement = keyof JSX.IntrinsicElements;
+
 /**
  * Select (a drop-down box) instruction.
  */
@@ -39,6 +45,10 @@ export default class Select extends BlockInstruction {
 		 * The default selected value.
 		 */
 		defaultValue?: string;
+		/**
+		 * The tagname to render the output as.
+		 */
+		tag?: IntrinsicElement;
 	};
 
 	/**
@@ -52,11 +62,15 @@ export default class Select extends BlockInstruction {
 		const { label, name, hideLabelFromVision } = this.options;
 
 		const value = props.attributes[ name ] as string;
+		let TagName: IntrinsicElement = "span";
+		if ( this.options.tag ) {
+			TagName = this.options.tag;
+		}
 
-		return <span data-id={ name } data-value={ value }>
+		return <TagName data-id={ name } data-value={ value }>
 			{ ! hideLabelFromVision && <strong>{ label }:</strong> }
 			{ this.label( value ) + " " }
-		</span>;
+		</TagName>;
 	}
 
 	/**

packages/schema-blocks/tests/instructions/blocks/ClassName.test.ts

@@ -1,5 +1,5 @@
 import ClassName from "../../../src/instructions/blocks/ClassName";
-import { RenderEditProps } from "../../../src/core/blocks/BlockDefinition";
+import { RenderEditProps, RenderSaveProps } from "../../../src/core/blocks/BlockDefinition";
 
 describe( "The ClassName instruction", () => {
 	it( "can correctly render in the editor", () => {
@@ -18,7 +18,12 @@ describe( "The ClassName instruction", () => {
 
 	it( "can correctly render on the frontend", () => {
 		const className = new ClassName( 10, { name: "some_name" } );
+		const props: RenderSaveProps = {
+			attributes: {
+				className: "class-name",
+			},
+		};
 
-		expect( className.save() ).toEqual( "yoast-inner-container" );
+		expect( className.save( props ) ).toEqual( "class-name yoast-inner-container" );
 	} );
 } );

packages/schema-blocks/tests/instructions/blocks/__snapshots__/Date.test.ts.snap

@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`The Date instruction returns the correct React components to render when the post is saved. 1`] = `
-<div>
-  <time
-    dateTime="2020-21-01"
-  >
-    2020-21-01
-  </time>
-</div>
+<time
+  dateTime="2020-21-01"
+>
+  2020-21-01
+</time>
 `;