Block names must be strings.

When I use a JS solution only I still get the same error that the block names should be strings

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import Edit from './edit';
import Save from './save';
import './editor.scss';
import './style.scss';
import './view.js';

registerBlockType('wpvillain/line-block', {
    apiVersion: 3,
    title: __('Line Block', 'line-block'),
    icon: 'minus',
    category: 'design',
    description: __('A block that adds a customizable line.', 'line-block'),
    attributes: {
        thickness: {
            type: 'number',
            default: 1.5,
        },
        color: {
            type: 'string',
            default: '#e0bd5f',
        },
        width: {
            type: 'string',
            default: '120%',
        },
        borderStyle: {
            type: 'string',
            default: 'solid',
        },
    },
    supports: {
        html: false,
    },
    edit: Edit,
    save: Save,
});

And reading https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-registration/ we should use block.json to register on server side as well..

Reading https://discourse.roots.io/t/building-blocks-based-on-block-json-using-roots-bud-instead-of-wordpress-scripts/25265/5 is seems we need to register all server side additionaly if we want to use block.json.

Moved block back to a @wordpress/create-block setup where matters are registered and block.json works. But I have issuse adding styling to div wrapper

lock validation: Expected attributes [Array(3)]0: (3)?['class', 'wp-block-wpvillain-line-block', true]length: 1[[Prototype]]: Array(0)[
    [
        "class",
        "wp-block-wpvillain-line-block",
        true
    ]
], instead saw 
[
    [
        "style",
        "width:100%;",
        true
    ],
    [
        "class",
        "wp-block-wpvillain-line-block",
        true
    ]
]

save.js needs to be improved :

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into post_content.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function save({ attributes }) {
	const { thickness, color, width, borderStyle } = attributes;

	return (
		<div {...useBlockProps.save()} className="wp-block-wpvillain-line-block">
			<hr
				className="custom-line-block"
				style={{
					borderTop: ${thickness}px ${borderStyle} ${color || '#e0bd5f'},
					width: width,
				}}
			/>
		</div>
	);
}

I have 100% for div in style.scss and editor.scss and I set it to 120% in block.json which is not good but apparently I also should not add className as that normally is already added and style as added causes issues causing an additional array.

• This reply was modified 3 months ago by Rhand.

I would recommend that you report your problem with ‘Block names must be strings.’ to the Gutenberg team: https://github.com/WordPress/gutenberg/issues

For the 2nd problem, take a look at the example for save in the manual: https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-edit-save/

Thanks. @threadi . Made some progress with a more barebone <hr> . So now save.js with

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into post_content.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function save({ attributes }) {
    const { width, borderColor, borderStyle, borderWidth } = attributes;

    return (
        <hr
            {...useBlockProps.save({
                style: {
                    width,
                    borderTopColor: borderColor,
                    borderTopStyle: borderStyle,
                    borderTopWidth: borderWidth
                }
            })}
        />
    );
}

and now all styling only gets applied to that main block selector. For edit.js I have this now though not quite done:

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPalette, SelectControl, RangeControl } from '@wordpress/components';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
    const { width, borderColor, borderStyle, borderWidth } = attributes;
    const blockProps = useBlockProps({
        style: {
            width,
            borderTopColor: borderColor,
            borderTopStyle: borderStyle,
            borderTopWidth: borderWidth
        }
    });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__("Line Settings", "hr-line")} initialOpen={true}>
                    <RangeControl
                        label={__("Width (%)", "hr-line")}
                        value={parseInt(width)}
                        onChange={(newWidth) => setAttributes({ width: ${newWidth}% })}
                        min={10}
                        max={100}
                    />
                    <RangeControl
                        label={__("Border Width (px)", "hr-line")}
                        value={parseInt(borderWidth)}
                        onChange={(newBorderWidth) => setAttributes({ borderWidth: ${newBorderWidth}px })}
                        min={1}
                        max={10}
                    />
                    <SelectControl
                        label={__("Border Style", "hr-line")}
                        value={borderStyle}
                        options={[
                            { label: __("Solid", "hr-line"), value: "solid" },
                            { label: __("Dashed", "hr-line"), value: "dashed" },
                            { label: __("Dotted", "hr-line"), value: "dotted" }
                        ]}
                        onChange={(newBorderStyle) => setAttributes({ borderStyle: newBorderStyle })}
                    />
                    <ColorPalette
                        label={__("Border Color", "hr-line")}
                        value={borderColor}
                        onChange={(newColor) => setAttributes({ borderColor: newColor })}
                    />
                </PanelBody>
            </InspectorControls>
            <hr {...blockProps} />
        </>
    );
}

Only briefly had some issues with caching and error that html was loaded in with <div> and not with <hr> as in the save method. Hard to empty out all the cache and it seems the WordPress package has no real solution for that as far as I can see. But perhaps I missed something.

Issue from before with Block names must be strings. was perhaps because Bud only registers on the client side and not the server side. Was now working on it in WordPress @wordpress/create-block plugin so that loads all automatically. Not sure. Working on that later on. Now as separate plugin.

issue width the width or the line only now:

<RangeControl
      label={__("Width (%)", "hr-line")}
      value={parseInt(width)}
      onChange={(newWidth) => setAttributes({ width: ${newWidth}% })}
      min={10}
      max={100}
  />

It currently is limited by the stack and does not cover the full width of the stack due to some CSS settings, padding in particular. Padding dded to keep stack just as wide as other stacks. Perhaps I need to work with minimum width or something.. to keep the line at a certain minimal size. Or stack min width… But working on that.

Will also work on renewed integration in theme and Sage width Bud, but only when I can avoid registration issues as I had earlier. Will keep this thread open for now.

Did read this comment on using Bud for blocks and the registration of them:

It’s worth pointing out that we don’t actually register any blocks with the server. We just enqueue or don’t enqueue scripts and styles as needed, depending on the context of the request provided by functions like \has_block.

So, if you wanted to register your block using block.json it should be possible to only use the Roots helpers in development:

if (import.meta.webpackHot) {
  roots.register.blocks('@src/blocks')
  import.meta.webpackHot.accept(console.error);
} 

And then handle registration how WordPress documents it. 

https://discourse.roots.io/t/building-blocks-based-on-block-json-using-roots-bud-instead-of-wordpress-scripts/25265/5

So I would still need something like

/**
 * Registers the block using the metadata loaded from the block.json file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.www.ads-software.com/reference/functions/register_block_type/
 */
function create_block_line_block_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_line_block_block_init' );

added to setup.php and that I missed before.

• This reply was modified 3 months ago by Rhand.

Yes, that is of course necessary. As I didn’t know ‘Bud’ and had never used it, I didn’t realise that it didn’t come across clearly. Did you solve a problem with it? Then you are welcome to set the topic to solved.