WP Challenge #1: Block Tips

I've decided to share a few tips to help you complete and participate in the WP Challenge #1.

I won’t be focusing on each challenge specifically with each tip. These tips will be short bits of my knowledge that can be applied to every block development.

Scaffolding Blocks

Did you know that you can create all necessary files for a block with one single command line?

You’re required to have npm/npx installed but that should be there if you want to do block development since you’ll need scripts to run and compile React and other things.

You can learn everything here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

Essentially, you’d do this:

npx @wordpress/create-block@latest my-block-name

And you’d get a plugin folder my-block-name with all the files you need to create a block. It should already have the packages set such as wp-scripts.

If it’s not there, you can run:

npx @wordpress/create-block@latest --wp-scripts my-block-name

In my experience, WP scripts it’s already there and that is used to compile JavaScript and also build it to be production-ready.

In case you’re working already inside of a plugin or theme, you can scaffold blocks without any plugin files so they’re “installed” within your current directory.

npx @wordpress/create-block@latest --wp-scripts --no-plugin my-block-name

Attributes

Attributes are the database of blocks. They hold the data you want each block to hold.

Even though you don’t need to set attributes to create a block, in most cases, your blocks will hold some type of data.

To learn more about attributes, check the Attributes section in the Handbook.

If you’ve just started doing block development, don’t bother with the Attribute source part. That’s how you define where such information is stored. If you don’t define a source, it’ll be stored in the HTML comments of the block and parsed from it when such is rendered/edited.

That’s good enough for everything you need when it comes to storing and getting attribute values.

In both edit and save functions of a block, you’ll be able to retrieve the attributes. Both functions get the properties of a block passed into them.

Example of accessing them:

edit: function( props ) {
 // props.attributes -> get all attributes
 // props.attributes.text -> Get data for an attribute 
 // with key "text"
}

To set an attribute and make sure that such is being saved, we can do that with the setAttributes() function. This function expects an object of all data to be saved. In most cases, in my experience, you’ll pass one type of attribute to save

props.setAttributes({ text: value })

In most tutorials, you won’t see this type of accessing values and functions in a block. Usually, you’ll see something like edit( { attributes, setAttributes } ).

That means the same thing but shortened a bit. Since props is passed to the function, using this method of accessing data of an object, we’re making it easier for ourselves.

Use useState for temporary storage

Don’t forget about React useState.

It’s a great way of storing data while editing a block. This can be done for a lot of things such as:

• storing toggle state

• storing data such as products or posts retrieved from an API to list in a dropdown item to choose from

Example of usage is here: https://developer.wordpress.org/block-editor/reference-guides/components/date-time/

But do know that just by using useState to set a value, it won’t be saved as attribute value.

When useState is used for temporary toggle or storing posts, it doesn’t have to be accompanied by a setAttributes function.

But, if you use it to also store a value from an attribute, then, after setting the state value, call the function to set the attribute as well. Example:

const [text, setText] = useState('');

updateOnTextChange( value ) {
  setAttributes({ text: value });
  setText( value );
} 

Loading Dynamic Data to Present it

When it comes to loading data to show it somewhere (such as in a dropdown element), you need to use state.

That way you’ll be able to store the data and re-use it without needing further API calls.

Let’s see how that could be done.

Let’s say we have a dropdown element that will display post titles. We will be able to select which post to display.

First, we need to load data using the API. When doing block development, the best way to communicate with an API is using api-fetch package.

To load data only on the first render of the block, you can use useEffect from React.

const [ posts, setPosts ] = useState([]);

// Returns array of post objects 
function getPosts() { return posts }

useEffect(() => {
  const posts = getPosts();
  setPosts(posts);
}, []);

if ( posts.length === 0 ) { return <p>Loading posts... </p>}

return <SelectControl 
         options={ posts.map(function(post){ return { label: post.title, value: post.ID}}) }/>

This is an example on how you could load posts when a block is added to the editor. While there are no posts, we would display a “Loading posts…” message.

After that, a dropdown with post titles would be shown.

Conclusion

I hope some of these tips helped you learn something new. And some might’ve even given you an idea on how to solve something in one of those challenges :)