WordPress Gutenberg Blocks Example: Creating a Hero Image Block with Inspector Controls, Color Palette, and Media Upload (Part 2) September 11, 2018 by Jim Schofield This is the second part of an article in a series on creating WordPress Gutenberg blocks. Here is part 1. If you want to pick up where we are, here is the repository. We left off last time with a Gutenberg hero image block that had centered text over an image. We added the ability to edit that text and change the text color. It started to get a little long, so the homework I left off with was to set up the overlay so that it would also be able to be changed with a color palette option in InspectorControls. We still have yet to use the wonderful MediaUpload component. The repo for this in all its finished glory is here if you would desire it. Let’s do this. How I hooked up the ColorPalette to our transparent overlay There are many ways to skin a cat. Here is the route I chose: I will apply an opacity to our to our overlay through the css, but since the color of the background will be determined by the content editor I’ll apply that color inline. .wp-block-firstgutyblocks-hero-image .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: rgba(150,0,0,.3); <- old*/ opacity: .3; } In our index.js, I will be adding an overlayColor attribute and add that as an inline style on my overlay div: ... attributes: { textString: { type: 'array', source: 'children', selector: 'h2', }, fontColor: { type: 'string', default: 'black' }, overlayColor: { // new! type: 'string', default: 'orange' } }, ... edit(props) { const { setAttributes, attributes, className, focus } = props; const { fontColor, overlayColor } = props.attributes; ... <div className={className} style={{ backgroundImage: `url('http://placehold.it/1440x700')`, backgroundSize: 'cover', backgroundPosition: 'center' }}> <div className="overlay" style={{ background: overlayColor }} {/*NEW!*/} ></div> <RichText tagName="h2" className="content" value={attributes.textString} onChange={onTextChange} placeholder="Enter your text here!" style={{color: fontColor}} /> </div> Orange is a temporary choice just to make sure it’s working. And tada! Here we have it if we reload the editor! Okay, so now let’s add another ColorPalette component in the InspectorControls and hook it up so the user could change the color: ... // Adding an attribute handler function onOverlayColorChange(changes) { setAttributes({ overlayColor: changes }) } ... //Adding another control to the InspectorControls <InspectorControls> <div> <strong>Select a font color:</strong> <ColorPalette value={fontColor} onChange={onTextColorChange} /> </div> <div> <strong>Select an overlay color:</strong> <ColorPalette value={overlayColor} onChange={onOverlayColorChange} /> </div> </InspectorControls>, An we now can edit text, edit the text color, AND change the overlay color. Spiffy Uploading a background image using MediaUpload It’s super nice that the gutenberg editor gives us a bunch of components through wp.block that we can use. Another component that is super nice is MediaUpload that does a lot of work for us. MediaUpload is a component that uses what’s called render props. You don’t have to go into detail about what those are, just realize they’re a thing and they’re very similar to Higher Order Components. (And If you want to see a really great talk about why these things exist and how React has evolved with these sorts of things, here’s a really great talk on it.) ANYWAY! Let’s pull in the Media Upload, and create a new attribute that will hold our picture’s url. const { registerBlockType, } = wp.blocks; { RichText, InspectorControls, ColorPalette, MediaUpload // Thanks wp.editor! } = wp.editor; ... attributes: { textString: { type: 'array', source: 'children', selector: 'h2', }, fontColor: { type: 'string', default: 'black' }, overlayColor: { type: 'string', default: null // let's get rid of the annoying orange }, backgroundImage: { type: 'string', default: null, // no image by default! } }, Now, let’s place our MediaUpload component: <InspectorControls> <div> <strong>Select a font color:</strong> <ColorPalette value={fontColor} onChange={onTextColorChange} /> </div> <div> <strong>Select an overlay color:</strong> <ColorPalette value={overlayColor} onChange={onOverlayColorChange} /> </div> <div> <strong>Select a background image:</strong> <MediaUpload onSelect={(imageObject) => console.log(imageObject)} type="image" value={backgroundImage} // make sure you destructured backgroundImage from props.attributes! render={({ open }) => ( <button onClick={open}> Upload Image! </button> )} /> </div> </InspectorControls>, A few things to note here: The “onSelect” attribute is where we will eventually handle the new picture and save it’s url to “backgroundImage”. For now, we will console.log this thing to see what MediaUpload gives us after we select an image The most confusing part is the render attribute. Basically whatever is returned inside the parentheses (in this case the <button> markup) will be shown in the editor. MediaUpload doesn’t add anything more, but it does let you have that “open” function. Whatever element is bound to that with onClick will be hooked up to open the MediaUpload library. So if all goes well you can load the block, click the button, upload and select and image, and then check the console… MediaUpload wraps our button and allows us to make a button that opens up our media library. Once we select an image, MediaUpload returns that image object. For now, we set that to simply console.log the object. MediaUpload and the object it returns If you look closely, you notice that there’s a “sizes” property on this object? inside of that we have lots of things that are served up by WordPress… WordPress does it’s thing and resizes your image with different dimensions it would ordinarily use with srcset. In this case, my picture was very large so I get a full, large, medium, and thumbnail. In our case, I’m going to use “full” since these images are supposed to be large, detailed, full resolution things. There’s room for optimizing and file size later! So here’s the point, we need to create a function that will handle this object and setAttributes: function onImageSelect(imageObject) { setAttributes({ backgroundImage: imageObject.sizes.full.url }) } ... <div> <strong>Select a background image:</strong> <MediaUpload onSelect={onImageSelect} type="image" value={backgroundImage} render={({ open }) => ( <button onClick={open}> Upload Image! </button> )} /> </div> ... //We need to make sure our div styles use this image! <div className={className} style={{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }} > Now, instead of logging the image when you select it, onImageSelect will set the attribute with the url of our image. You should see the image automatically change when you select it. Edit: One thing I forgot to mention I forgot to make this explicit when I first posted this. We need to make sure that this background image shows up when we hit update! Here is what my save() method looks like now. save(props) { const { attributes, className } = props; const { fontColor, backgroundImage } = props.attributes; return ( <div className={className} style={{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }}> <div className="overlay"></div> <h2 class="content" style={{ color: fontColor }}>{attributes.textString}</h2> </div> ); } Summary That was a a lot, but I hope that through this process this gives you ideas how to wire up your own custom block. In these past two posts we Structured the markup of a block to create an image hero Learned how to use InspectorControl, ColorPalette, and MediaUpload Used both css and inline styles Thoughts? Comments? Please post below or hit me up on twitter: @jschof