registerBlockType with apiFetch

  • yarovikov

    (@yarovikov)


    4 months ago

    Hi there.
    I use wp 6.6, clean database, no any plugins, sage theme by roots.

    I have a lot of custom blocks (not acf). Currently i would like to have one js for all my blocks.
    For example this is working as well:

    const blocks = [
    'faq',
    'login-form',
    ];

    blocks.forEach(block => {
    const name =     gutengood/${block};
    registerBlockType(name, {
    title: block,
    icon: 'block-default',
    category: 'common',
    edit: (props) => {
    return (
    <Fragment>
    <InspectorControls>
    <BlockOptions name={name} props={props}/>
    </InspectorControls>
    <ServerSideRender
    block={name}
    attributes={props.attributes}
    />
    </Fragment>
    )
    },
    save: () => null,
    });
    });

    But when i’m getting the same list of blocks using rest api sometimes blocks are not initialized in the editor after edit page reload, although they are in the page code. Also i see them in dropdown (plus button). Is it possible to fix display in the editor after reloading the edit page?


    apiFetch({path: '/gutengood/v1/blocks'})
    .then((blocks) => {
    blocks.forEach(block => {
    const name =     gutengood/${block};
    registerBlockType(name, {
    title: block,
    icon: 'block-default',
    category: 'common',
    edit: (props) => {
    return (
    <Fragment>
    <InspectorControls>
    <BlockOptions name={name} props={props}/>
    </InspectorControls>
    <ServerSideRender
    block={name}
    attributes={props.attributes}
    />
    </Fragment>
    )
    },
    save: (props) => null,
    });
    });
    })
    .catch((error) => console.error(error?.message));
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    Since nobody has answered for couple of days, I recommend asking at your sage theme’s support. Where did acquire this theme?

    Thread Starter yarovikov

    (@yarovikov)

    This is not sage problem. I have tried using clean wp with twentytwentyfour theme

    {
    "name": "wp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "@wordpress/scripts": "^28.2.0"
    }
    }
    const defaultConfig = require('./node_modules/@wordpress/scripts/config/webpack.config.js');
    const path = require('path');
    module.exports = {
    ...defaultConfig,
    entry: {
    blocks: path.resolve(__dirname, 'gutenberg/blocks.js'),
    },
    output: {
    path: path.resolve(__dirname, 'assets/build'),
    filename: '[name].js',
    },
    optimization: {
    ...defaultConfig.optimization,
    },
    module: {
    ...defaultConfig.module,
    },
    plugins: [...defaultConfig.plugins],
    };
    add_action('rest_api_init', function () {
    register_rest_route("gutengood/v1", '/blocks', [
    'methods' => 'GET',
    'callback' => fn(): array => ['example', 'example-2', 'example-3'],
    'permission_callback' => '__return_true',
    ]);
    });
    import {registerBlockType} from '@wordpress/blocks';
    import {Fragment} from '@wordpress/element';
    import apiFetch from '@wordpress/api-fetch';

    apiFetch({path: '/gutengood/v1/blocks'})
    .then((blocks) => {
    blocks.forEach(block => {
    const name =     gutengood/${block};
    console.log(name)
    registerBlockType(name, {
    title: block,
    icon: 'block-default',
    category: 'common',
    edit: (props) => {
    return (
    <Fragment>
    {block}
    </Fragment>
    )
    },
    save: (props) => null,
    });
    });
    })
    .catch((error) => console.error(error?.message));

    the same result

    screenshots
    https://github.com/user-attachments/assets/a2c5f6f8-573e-4a2e-b44b-ff3522d6ea88
    after edit page reload:
    https://github.com/user-attachments/assets/18565498-972c-406d-8475-99dd982b855d
    https://github.com/user-attachments/assets/2762a8d5-67cf-47f5-b331-b09b0d70ed00

    • This reply was modified 4 months ago by yarovikov.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Tags