Commit inicial - WordPress Análisis de Precios Unitarios

- WordPress core y plugins
- Tema Twenty Twenty-Four configurado
- Plugin allow-unfiltered-html.php simplificado
- .gitignore configurado para excluir wp-config.php y uploads

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/css/howto.css

@@ -0,0 +1 @@
+@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes loading{0%{background-size:20% 50%,20% 50%,20% 50%}20%{background-size:20% 20%,20% 50%,20% 50%}40%{background-size:20% 100%,20% 20%,20% 50%}60%{background-size:20% 50%,20% 100%,20% 20%}80%{background-size:20% 50%,20% 50%,20% 100%}100%{background-size:20% 50%,20% 50%,20% 50%}}@keyframes loading{0%{background-size:20% 50%,20% 50%,20% 50%}20%{background-size:20% 20%,20% 50%,20% 50%}40%{background-size:20% 100%,20% 20%,20% 50%}60%{background-size:20% 50%,20% 100%,20% 20%}80%{background-size:20% 50%,20% 50%,20% 100%}100%{background-size:20% 50%,20% 50%,20% 50%}}:root{--rankmath-wp-adminbar-height: 0}#rank-math-howto .rank-math-media-placeholder{position:relative;display:inline-block;float:none;margin-bottom:15px;margin-left:0;text-align:left}#rank-math-howto .components-base-control__label{font-weight:600}#rank-math-howto .components-base-control__field{margin-bottom:0}#rank-math-howto .components-base-control__help{font-style:italic;margin:0}#rank-math-howto .components-text-control__input,#rank-math-howto .components-textarea-control__input{font-size:1rem;margin-bottom:0;color:#3a3a3a;border-color:#b5bfc9}#rank-math-howto .rank-math-howto-duration-label .components-toggle-control{display:inline-block;margin-left:8px}#rank-math-howto .rank-math-howto-duration-fields{margin-top:10px}#rank-math-howto .rank-math-howto-duration-fields .components-base-control{display:inline-block;width:75px;margin-right:5px}#rank-math-howto .rank-math-howto-duration-fields .components-base-control+.components-base-control{margin-bottom:0 !important}#rank-math-howto .rank-math-howto-duration-fields .components-base-control>.components-base-control__field{margin:0}#rank-math-howto .rank-math-howto-duration-fields .components-base-control:first-child{width:auto}#rank-math-howto .rank-math-howto-duration-fields .components-base-control.hidden{display:none}#rank-math-howto .rank-math-howto-duration-instructions{font-size:13px;font-style:italic;margin:10px 0 5px;opacity:.7}#rank-math-howto .rank-math-howto-estimated-cost{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}#rank-math-howto .rank-math-howto-estimated-cost>div:last-child{margin-left:10px;-ms-flex-item-align:end;align-self:flex-end}

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/scss/howto.scss

@@ -0,0 +1,106 @@
+// Common and Vendors
+@import '../../../../../../../assets/vendor/bourbon/bourbon';
+@import '../../../../../../../assets/admin/scss/mixins';
+@import '../../../../../../../assets/admin/scss/variables';
+
+// HowTo Block.
+#rank-math-howto {
+    .rank-math-media-placeholder {
+        position: relative;
+
+        display: inline-block;
+        float: none;
+
+        margin-bottom: 15px;
+        margin-left: 0;
+
+        text-align: left;
+    }
+
+    .components-base-control {
+        &__label {
+            font-weight: 600;
+        }
+
+        &__field {
+            margin-bottom: 0;
+        }
+
+        &__help {
+            font-style: italic;
+
+            margin: 0;
+        }
+    }
+
+    .components-text-control__input,
+    .components-textarea-control__input {
+        font-size: 1rem;
+
+        margin-bottom: 0;
+
+        color: #3a3a3a;
+        border-color: $gray;
+    }
+
+    .rank-math-howto {
+        &-duration {
+            &-label {
+                // Toggle Control.
+                .components-toggle-control {
+                    display: inline-block;
+
+                    margin-left: 8px;
+                }
+            }
+
+            &-fields {
+                margin-top: 10px;
+
+                .components-base-control {
+                    display: inline-block;
+
+                    width: 75px;
+                    margin-right: 5px;
+
+                    + .components-base-control {
+                        margin-bottom: 0!important;
+                    }
+
+                    > .components-base-control__field {
+                        margin: 0;
+                    }
+
+                    &:first-child {
+                        width: auto;
+                    }
+
+                    &.hidden {
+                        display: none;
+                    }
+                }
+            }
+
+            &-instructions {
+                font-size: 13px;
+                font-style: italic;
+
+                margin: 10px 0 5px;
+
+                opacity: .7;
+            }
+        }
+
+        &-estimated-cost {
+            display: flex;
+
+            flex-flow: row wrap;
+
+            > div:last-child {
+                margin-left: 10px;
+
+                align-self: flex-end;
+            }
+        }
+    }
+}

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/components/Step.js

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames'
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n'
+import { Component } from '@wordpress/element'
+import { Button } from '@wordpress/components'
+import { RichText, MediaUpload } from '@wordpress/block-editor'
+
+/**
+ * Internal dependencies
+ */
+import MediaUploader from '@blocks/shared/MediaUploader'
+import { applyFilters } from "@wordpress/hooks";
+
+/**
+ * A Step within HowTo block.
+ */
+class Step extends Component {
+	/**
+	 * Renders the component.
+	 *
+	 * @return {Component} Step editor.
+	 */
+	render() {
+		const {
+			title,
+			content,
+			visible,
+			imageID,
+			sizeSlug,
+			titleWrapper,
+			titleCssClasses,
+			contentCssClasses,
+		} = this.props
+		const wrapperClasses = classnames( 'rank-math-step-wrapper', {
+			'step-not-visible': ! visible,
+		} )
+
+		return (
+			<div className={ wrapperClasses }>
+				<div className="rank-math-item-header">
+					<RichText
+						tagName={ titleWrapper }
+						className={
+							'rank-math-howto-step-title rank-math-block-title' +
+							titleCssClasses
+						}
+						value={ title }
+						onChange={ ( newTitle ) => {
+							this.setStepProp( 'title', newTitle )
+						} }
+						placeholder={ __( 'Enter a step title', 'rank-math' ) }
+					/>
+
+					<div className="rank-math-block-actions">
+						{ applyFilters( 'rank_math_block_howto_actions', '', this.props ) }
+
+						<Button
+							className="rank-math-item-visbility"
+							icon={ visible ? 'visibility' : 'hidden' }
+							onClick={ this.toggleVisibility }
+							title={ __( 'Hide Step', 'rank-math' ) }
+						/>
+
+						<Button
+							icon="trash"
+							className="rank-math-item-delete"
+							onClick={ this.deleteStep }
+							title={ __( 'Delete Step', 'rank-math' ) }
+						/>
+					</div>
+				</div>
+
+				<MediaUpload
+					allowedTypes={ [ 'image' ] }
+					multiple={ false }
+					value={ imageID }
+					render={ ( { open } ) => (
+						<MediaUploader
+							imageID={ imageID }
+							sizeSlug={ sizeSlug }
+							open={ open }
+							addButtonLabel={ __(
+								'Add Step Image',
+								'rank-math'
+							) }
+							removeImage={ () => {
+								this.setStepProp( 'imageID', 0 )
+							} }
+						/>
+					) }
+					onSelect={ ( image ) => {
+						this.setStepProp( 'imageID', image.id )
+					} }
+				/>
+
+				<RichText
+					tagName="div"
+					className={
+						'rank-math-howto-step-content' + contentCssClasses
+					}
+					value={ content }
+					onChange={ ( newContent ) => {
+						this.setStepProp( 'content', newContent )
+					} }
+					placeholder={ __(
+						'Enter a step description',
+						'rank-math'
+					) }
+				/>
+			</div>
+		)
+	}
+
+	/**
+	 * Update step properties.
+	 *
+	 * @param {string} prop  Poperty name.
+	 * @param {string} value Property value.
+	 */
+	setStepProp( prop, value ) {
+		const { setAttributes, index } = this.props
+		const steps = [ ...this.props.steps ]
+		steps[ index ][ prop ] = value
+
+		setAttributes( { steps } )
+	}
+
+	/**
+	 * Toggle step visibility.
+	 */
+	toggleVisibility = () => {
+		const { setAttributes, index } = this.props
+		const steps = [ ...this.props.steps ]
+		steps[ index ].visible = ! this.props.visible
+
+		setAttributes( { steps } )
+	}
+
+	/**
+	 * Delete step from block.
+	 */
+	deleteStep = () => {
+		const { setAttributes, index } = this.props
+		const steps = [ ...this.props.steps ]
+		steps.splice( index, 1 )
+
+		setAttributes( { steps } )
+	}
+}
+
+export default Step

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/components/inspector.js

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash'
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n'
+import { withSelect } from '@wordpress/data'
+import { InspectorControls } from '@wordpress/block-editor'
+import { PanelBody, SelectControl, TextControl } from '@wordpress/components'
+
+/**
+ * Format array of image sizes.
+ *
+ * @param  {Array} imageSizes Array of image sizes.
+ * @return {Array} Formatted array.
+ */
+const getImageSizeOptions = ( imageSizes ) => {
+	return map( imageSizes, ( { name, slug } ) => ( {
+		value: slug,
+		label: name,
+	} ) )
+}
+
+/**
+ * Adds controls to the editor sidebar to control params.
+ *
+ * @param {Object} props This component's props.
+ */
+const Inspector = ( { imageSizes, attributes, setAttributes } ) => {
+	const imageSizeOptions = getImageSizeOptions( imageSizes )
+
+	return (
+		<InspectorControls key={ 'inspector' }>
+			<PanelBody title={ __( 'HowTo Options', 'rank-math' ) }>
+				<SelectControl
+					label={ __( 'List Style', 'rank-math' ) }
+					value={ attributes.listStyle }
+					options={ [
+						{
+							value: '',
+							label: __( 'None', 'rank-math' ),
+						},
+						{
+							value: 'numbered',
+							label: __( 'Numbered', 'rank-math' ),
+						},
+						{
+							value: 'unordered',
+							label: __( 'Unordered', 'rank-math' ),
+						},
+					] }
+					onChange={ ( listStyle ) => {
+						setAttributes( { listStyle } )
+					} }
+				/>
+
+				<SelectControl
+					label={ __( 'Title Wrapper', 'rank-math' ) }
+					value={ attributes.titleWrapper }
+					options={ [
+						{ value: 'h2', label: __( 'H2', 'rank-math' ) },
+						{ value: 'h3', label: __( 'H3', 'rank-math' ) },
+						{ value: 'h4', label: __( 'H4', 'rank-math' ) },
+						{ value: 'h5', label: __( 'H5', 'rank-math' ) },
+						{ value: 'h6', label: __( 'H6', 'rank-math' ) },
+						{ value: 'p', label: __( 'P', 'rank-math' ) },
+						{ value: 'div', label: __( 'DIV', 'rank-math' ) },
+					] }
+					onChange={ ( titleWrapper ) => {
+						setAttributes( { titleWrapper } )
+					} }
+				/>
+
+				<SelectControl
+					label={ __( 'Main Image Size', 'rank-math' ) }
+					value={ attributes.mainSizeSlug }
+					options={ imageSizeOptions }
+					onChange={ ( mainSizeSlug ) => {
+						setAttributes( { mainSizeSlug } )
+					} }
+				/>
+
+				<SelectControl
+					label={ __( 'Image Size', 'rank-math' ) }
+					value={ attributes.sizeSlug }
+					options={ imageSizeOptions }
+					onChange={ ( sizeSlug ) => {
+						setAttributes( { sizeSlug } )
+					} }
+				/>
+			</PanelBody>
+
+			<PanelBody title={ __( 'Styling Options', 'rank-math' ) }>
+				<TextControl
+					label={ __(
+						'Step Title Wrapper CSS Class(es)',
+						'rank-math'
+					) }
+					value={ attributes.titleCssClasses }
+					onChange={ ( titleCssClasses ) => {
+						setAttributes( { titleCssClasses } )
+					} }
+				/>
+
+				<TextControl
+					label={ __(
+						'Step Content Wrapper CSS Class(es)',
+						'rank-math'
+					) }
+					value={ attributes.contentCssClasses }
+					onChange={ ( contentCssClasses ) => {
+						setAttributes( { contentCssClasses } )
+					} }
+				/>
+
+				<TextControl
+					label={ __( 'Step List CSS Class(es)', 'rank-math' ) }
+					value={ attributes.listCssClasses }
+					onChange={ ( listCssClasses ) => {
+						setAttributes( { listCssClasses } )
+					} }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	)
+}
+
+export default withSelect( ( select, props ) => {
+	const { getSettings } = select( 'core/block-editor' )
+	const { imageSizes } = getSettings()
+
+	return {
+		...props,
+		imageSizes,
+	}
+} )( Inspector )

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/edit.js

@@ -0,0 +1,290 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash'
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n'
+import { Fragment } from '@wordpress/element'
+import { applyFilters } from '@wordpress/hooks'
+import {
+	Button,
+	Dashicon,
+	TextControl,
+	ToggleControl,
+} from '@wordpress/components'
+import {
+	BlockControls,
+	AlignmentToolbar,
+	RichText,
+	MediaUpload,
+	useBlockProps,
+} from '@wordpress/block-editor'
+
+/**
+ * Internal dependencies
+ */
+import Step from './components/Step'
+import Inspector from './components/inspector'
+import generateId from '@helpers/generateId'
+import MediaUploader from '@blocks/shared/MediaUploader'
+
+/**
+ * Add an empty Step into block.
+ *
+ * @param {Object} props Block props.
+ */
+const addNew = ( props ) => {
+	const { steps } = props.attributes
+	const newSteps = isEmpty( steps ) ? [] : [ ...steps ]
+	newSteps.push( {
+		id: generateId( 'howto-step' ),
+		title: '',
+		content: '',
+		visible: true,
+	} )
+
+	props.setAttributes( { steps: newSteps } )
+}
+
+/**
+ * Toggle duration form visibility.
+ *
+ * @param {Object} props Block props
+ */
+const toggleDuration = ( props ) => {
+	props.setAttributes( {
+		hasDuration: ! props.attributes.hasDuration,
+	} )
+}
+
+/**
+ * When an image selected.
+ *
+ * @param {Object} image Seelected image object.
+ * @param {Object} props Block props.
+ */
+const onSelectImage = ( image, props ) => {
+	const { setAttributes } = props
+
+	setAttributes( { imageID: image.id } )
+}
+
+/**
+ * Remove image from step.
+ *
+ * @param {Object} props Block props.
+ */
+const removeImage = ( props ) => {
+	const { setAttributes } = props
+
+	setAttributes( { imageID: 0 } )
+}
+
+/**
+ * Render Steps component.
+ *
+ * @param {Object} props Block props.
+ * @return {Array} Array of step editor.
+ */
+const renderSteps = ( props ) => {
+	const {
+		steps,
+		sizeSlug,
+		titleWrapper,
+		titleCssClasses,
+		contentCssClasses,
+	} = props.attributes
+	if ( isEmpty( steps ) ) {
+		return null
+	}
+
+	return steps.map( ( step, index ) => {
+		return (
+			<li key={ step.id }>
+				<Step
+					{ ...step }
+					index={ index }
+					key={ step.id + '-step' }
+					steps={ steps }
+					setAttributes={ props.setAttributes }
+					sizeSlug={ sizeSlug }
+					titleWrapper={ titleWrapper }
+					titleCssClasses={ titleCssClasses }
+					contentCssClasses={ contentCssClasses }
+				/>
+			</li>
+		)
+	} )
+}
+
+/**
+ * HowTo block edit component.
+ *
+ * @param {Object} props Block props.
+ */
+export default ( props ) => {
+	const { className, isSelected, attributes, setAttributes } = props
+	const { imageID, mainSizeSlug, textAlign } = attributes
+	const blockProps = useBlockProps()
+
+	return (
+		<div { ...blockProps }>
+			<div
+				id="rank-math-howto"
+				className={ 'rank-math-block ' + className }
+			>
+				{ isSelected && <Inspector { ...props } /> }
+				{ isSelected && (
+					<Fragment>
+						<BlockControls>
+							<AlignmentToolbar
+								value={ textAlign }
+								onChange={ ( nextTextAlignment ) =>
+									props.setAttributes( {
+										textAlign: nextTextAlignment,
+									} )
+								}
+							/>
+						</BlockControls>
+					</Fragment>
+				) }
+
+				<MediaUpload
+					allowedTypes={ [ 'image' ] }
+					multiple={ false }
+					value={ imageID }
+					render={ ( { open } ) => (
+						<div className="rank-math-howto-final-image">
+							<MediaUploader
+								imageID={ imageID }
+								sizeSlug={ mainSizeSlug }
+								open={ open }
+								addButtonLabel={ __(
+									'Add Final Image',
+									'rank-math'
+								) }
+								removeImage={ () => {
+									removeImage( props )
+								} }
+							/>
+						</div>
+					) }
+					onSelect={ ( image ) => {
+						onSelectImage( image, props )
+					} }
+				/>
+
+				<RichText
+					style={ { textAlign } }
+					tagName="div"
+					className="rank-math-howto-description"
+					value={ attributes.description }
+					onChange={ ( description ) => {
+						setAttributes( { description } )
+					} }
+					placeholder={ __(
+						'Enter a main description',
+						'rank-math'
+					) }
+				/>
+
+				<div className={ 'rank-math-howto-duration' }>
+					<div
+						className={
+							'components-base-control rank-math-howto-duration-label'
+						}
+					>
+						<span>{ __( 'Duration', 'rank-math' ) }</span>
+
+						<ToggleControl
+							checked={ attributes.hasDuration }
+							onChange={ () => {
+								toggleDuration( props )
+							} }
+						/>
+					</div>
+
+					<div
+						className={
+							'rank-math-howto-duration-fields' +
+							( attributes.hasDuration ? '' : ' hidden' )
+						}
+					>
+						<TextControl
+							value={ attributes.timeLabel }
+							placeholder={ __( 'Total time:', 'rank-math' ) }
+							onChange={ ( timeLabel ) => {
+								setAttributes( { timeLabel } )
+							} }
+						/>
+
+						<TextControl
+							type="number"
+							value={ attributes.days }
+							placeholder={ __( 'DD', 'rank-math' ) }
+							onChange={ ( days ) => {
+								setAttributes( { days } )
+							} }
+						/>
+
+						<TextControl
+							type="number"
+							value={ attributes.hours }
+							placeholder={ __( 'HH', 'rank-math' ) }
+							onChange={ ( hours ) => {
+								setAttributes( { hours } )
+							} }
+						/>
+
+						<TextControl
+							type="number"
+							value={ attributes.minutes }
+							placeholder={ __( 'MM', 'rank-math' ) }
+							onChange={ ( minutes ) => {
+								setAttributes( { minutes } )
+							} }
+						/>
+					</div>
+
+					<div
+						className={
+							'rank-math-howto-duration-instructions' +
+							( attributes.hasDuration ? '' : ' hidden' )
+						}
+					>
+						{ __(
+							'Optional, use first field to describe the duration.',
+							'rank-math'
+						) }
+					</div>
+				</div>
+
+				{ applyFilters( 'rank_math_block_howto_data', '', props ) }
+
+				<ul style={ { textAlign } }>{ renderSteps( props ) }</ul>
+
+				<Button
+					variant="primary"
+					onClick={ () => {
+						addNew( props )
+					} }
+				>
+					{ __( 'Add New Step', 'rank-math' ) }
+				</Button>
+
+				<a
+					href="http://rankmath.com/blog/howto-schema/"
+					title={ __( 'More Info', 'rank-math' ) }
+					target="_blank"
+					rel="noopener noreferrer"
+					className={ 'rank-math-block-info' }
+				>
+					<Dashicon icon="info" />
+				</a>
+			</div>
+		</div>
+	)
+}

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/example.js

@@ -0,0 +1,18 @@
+/**
+ * HowTo eample for in block preview pane.
+ *
+ * @type {Object}
+ */
+export default {
+	attributes: {
+		steps: [
+			{
+				visible: true,
+				titleWrapper: 'div',
+				title: 'Step # 1',
+				content:
+					'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+			},
+		],
+	},
+}

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks'
+
+/**
+ * Internal dependencies
+ */
+import example from './example'
+import edit from './edit'
+import save from './save'
+import transforms from './transforms'
+
+/**
+ * Register HowTo block.
+ */
+registerBlockType(
+	'rank-math/howto-block',
+	{
+		example,
+		edit,
+		save,
+		transforms,
+	}
+)

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/save.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash'
+
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor'
+
+/**
+ * Save block for display on front
+ *
+ * @param {Object} props This component's props.
+ */
+export default ( props ) => {
+	const { steps, titleWrapper } = props.attributes
+
+	if ( isEmpty( steps ) ) {
+		return null
+	}
+
+	return (
+		<div { ...useBlockProps.save() }>
+			{ steps.map( ( step, index ) => {
+				if ( false === step.visible ) {
+					return null
+				}
+
+				return (
+					<div className="rank-math-howto-step" key={ index }>
+						{ step.title && (
+							<RichText.Content
+								tagName={ titleWrapper }
+								value={ step.title }
+								className="rank-math-howto-title"
+							/>
+						) }
+
+						{ step.content && (
+							<RichText.Content
+								tagName="div"
+								value={ step.content }
+								className="rank-math-howto-content"
+							/>
+						) }
+					</div>
+				)
+			} ) }
+		</div>
+	)
+}

wp-content/plugins/seo-by-rank-math/includes/modules/schema/blocks/howto/assets/src/transforms.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks'
+
+/**
+ * Internal dependencies
+ */
+import generateId from '@helpers/generateId'
+
+/**
+ * Transform yoast howto block.
+ *
+ * @type {Array}
+ */
+export default {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'yoast/how-to-block' ],
+			transform: ( yoast ) => {
+				const steps = yoast.steps.map( ( step ) => {
+					return {
+						visible: true,
+						id: generateId( 'howto-step' ),
+						title: step.jsonName,
+						content: step.jsonText,
+					}
+				} )
+
+				const attributes = {
+					steps,
+					titleWrapper: 'h3',
+					hasDuration: yoast.hasDuration,
+					days: yoast.days,
+					hours: yoast.hours,
+					minutes: yoast.minutes,
+					description: yoast.jsonDescription,
+					className: yoast.className,
+					listStyle: yoast.unorderedList ? 'unordered' : '',
+				}
+
+				return createBlock( 'rank-math/howto-block', attributes )
+			},
+		},
+	],
+}