I’m looking for a way to create the green lines/circles animation featured on this website:?https://leoburnett.com/us. After inspecting the site, I found that it’s a video (https://leoburnett.com/videos/underline.webm). However, I’m unsure how to implement this in WordPress.

It seems much easier to do with code, but I’m completely lost when it comes to using the Gutenberg builder (astra theme). Could anyone please point me to a tutorial or guide that explains how to do this? I’ve tried using the “classic” Gutenberg shortcode, but it didn’t work. Thanks in advance!

____

Holiis! Estoy buscando la forma de realizar esta animación de las lineas/circulos verdes https://leoburnett.com/us y tras inspeccionar la web muestra que es un video (https://leoburnett.com/videos/underline.webm). Sin embargo, no sé cómo implementarlo en el WordPress.

En código me parece mucho más sencillo pero desde el build de Gutenberg no tengo ni idea

?PORFA alguien que sepa de algun tutorial que lo explique? Lo he intentado con el shortcode “clasico” de Gutem y no lo asimila… ?Gracias!

How a include the web storie block like i do with the embeds, paragraphs and others.

The function who allow the blocks

function gutenberg_allowed_blocks() {
	return array(
		'core/paragraph',
		'core/video',
		'core/list',
		'core/heading',
		'core/embed'
	);
}
add_filter( 'allowed_block_types', 'gutenberg_allowed_blocks' );

View post on imgur.com

I would like to add TURNSTILE with jetformbuilder by crocoblock, basically this form builder works with Gutemberg.

There is a tutorial how to add it or its possible to implement it on some other way?

Best regards!

Here’s a question for both WP and React developers. I want to develop a custom Gutemberg block using the official create-block library. For UX reasons, I would like this block to have a drag-and-drop sorting system, like the gif bellow. But I haven’t found a solution. There’s this library https://github.com/lucprincen/gutenberg-sortable, but it’s obsolete and won’t compile.

Any ideas? Here’s a simplified code that you can improve.

import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import metadata from "./block.json";
import { useBlockProps } from "@wordpress/block-editor";

registerBlockType(metadata.name, {
	attributes: {
		items: {
			type: "array",
			default: ["carrot", "cabbage", "zucchini"],
		},
	},

	edit: (props) => {
		const blockProps = useBlockProps();
		const {
			attributes: { items },
			setAttributes,
		} = props;

		const sortItems = (sortedItems) => {
			setAttributes({ items: sortedItems });
		};

		return (
			<div {...blockProps}>
				{items.map((item) => (
					<div className="item">{item}</div>
				))}
			</div>
		);
	},

	save: (props) => {
		const blockProps = useBlockProps.save();
		const {
			attributes: { items },
		} = props;

		return (
			<div {...blockProps}>
				{items.map((item) => (
					<div className="item">{item}</div>
				))}
			</div>
		);
	},
});

The block type displays and saves content and a date.

I’m trying to save the creation date for every block by setting a postDate value on the block type attributes. And I could successfully save this value using the save function.

However, the value is not updated on every block creation, it stays the same and every block has the same postDate value (the creation of the first block) passed to the database.

I need it to be updated so it can be saved in the “save” function. It needs to be updated only once, when a block is created.

This is the workflow I’m trying to achieve:

User creates a block / user edits the block / edits and hits the “Update” button (preferably the first option) -> postDate for that block is saved only once

User creates a different block -> same process occurs. Each block has its postDate value saved. The value can not be altered by subsequent edits

here is the function:

registerBlockType(metadata.name, {
    attributes: {
        content: {
            type: "string",
            source: "html",
            selector: "h2",
        },
        postDate: {
            type: "string",
            default: moment().tz("Europe/Paris").locale("fr").format(), 
        },
        blockId: {
            type: "string",
        },
    },

    edit({ attributes, setAttributes, clientId }) {
        const blockProps = useBlockProps();

        const { postDate, blockId } = attributes;

        React.useEffect(() => {
            if (!blockId) {
                setAttributes({ blockId: clientId });
            }
        }, []);


        const TEMPLATE = [["core/paragraph", {}]];

        const ALLOWED_BLOCKS = useMemo(
            () =>
                wp.blocks
                    .getBlockTypes()
                    .filter((block) => block.name !== metadata.name)
                    .map((block) => block.name),
            [metadata.name]
        );

        return (
            <div className="wp-post-live-block">
                <time dateTime={postDate}>
                    {moment(postDate).format("D/M H:mm:ss")}
                </time>
                <RichText
                    {...blockProps}
                    tagName="h2"
                    value={attributes.content}
                    onChange={(content) => setAttributes({ content })}
                    placeholder={__("Add title")}
                />
                <InnerBlocks template={TEMPLATE} allowedBlocks={ALLOWED_BLOCKS} />
            </div>
        );
    },

    save({ attributes }) {
        const blockProps = useBlockProps.save();
        const { postDate, blockId } = attributes;

        return (
            <div data-timestamp={postDate} id={blockId} className="wp-post-live-block">
                <RichText.Content
                    {...blockProps}
                    tagName="h2"
                    value={attributes.content}
                />
                <InnerBlocks.Content />
            </div>
        );
    },
});

I’ve tried setting the postDate value on the useEffect tool, inside the if (!blockId) condition. However, this makes the function try to update the value on every render.

Where can I hook the setAttribute(postDate) so that it updates only once, when the block is created?

Can anyone help me solve?