diff --git a/packages/schema-blocks/src/instructions/blocks/ClassName.ts b/packages/schema-blocks/src/instructions/blocks/ClassName.ts index 008009c01..358884903 100644 --- a/packages/schema-blocks/src/instructions/blocks/ClassName.ts +++ b/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; } } diff --git a/packages/schema-blocks/src/instructions/blocks/Date.tsx b/packages/schema-blocks/src/instructions/blocks/Date.tsx index 2a9889792..7c26471f0 100644 --- a/packages/schema-blocks/src/instructions/blocks/Date.tsx +++ b/packages/schema-blocks/src/instructions/blocks/Date.tsx @@ -125,7 +125,7 @@ export default class Date extends BlockInstruction { const dateFormat = Date.getDateFormat(); - return
; + return ; } /** diff --git a/packages/schema-blocks/src/instructions/blocks/Select.tsx b/packages/schema-blocks/src/instructions/blocks/Select.tsx index 049f177b3..35eab8ec2 100644 --- a/packages/schema-blocks/src/instructions/blocks/Select.tsx +++ b/packages/schema-blocks/src/instructions/blocks/Select.tsx @@ -6,6 +6,12 @@ import { RenderEditProps, RenderSaveProps } from "../../core/blocks/BlockDefinit import { BlockValidationResult } from "../../core/validation"; import { defaultValidate } from "../../functions/validators/defaultValidate"; +/** + * 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 + return