What are reusable blocks and why do you want to use them?

This can best be explained by an example. Over at 7 Generation Games, we have a new project under way to create organize the hundreds of videos, presentations and activities we’ve developed with our games into a teacher resource site. Most of these fall into one of a few categories. For example, we have 19 math videos from Fish Lake.

Whenever a lot of posts have the exact same structure, you have a use for reusable blocks.

Take a look at this post on the Fractions on a Number Line video.

  1. It has a subheading (h3 tag) with the main point of the video.
  2. This is followed by a short paragraph describing the video, with a background color of light blue.
  3. Next is the video. IMPORTANT – although Gutenberg does allow you to just enter a url and hit return for a video to be shown in a regular post, I found this did NOT work for reusable blocks. When I used embed instead, it worked fine.
  4. After the video is a heading (h2 tag) telling you this video is from an awesome game we make.
  5. Next are two links, one for getting the game for computers,
  6. Another link for the app store for iPads.
  7. Then there is an image from the game and
  8. A short paragraph describing the game.

How to create a reusable block

Select everything you want in the reusable block. In my case, it is all 8 of those blocks listed above. Then, click on the 3 dots at the top of the block menu and in the drop down menu select ADD TO Reusable blocks.

Give it a name, save it and now you have a reusable block.

How to use a reusable block

A reusable block as “copy-and-paste”

You have two options. The first is to just use the block as-is. Say, I just wanted to include an ad in blog posts, or some call to action, like signing up for our newsletter. Then, I could just insert that block like I do any other block – paragraph, image, etc. and this would be pre-populated with the content. Done.

Reusable blocks as templates

The more common option for me is going to be to modify that block, using it as a template. So, I insert the block just like I do any other block. Then, I click on the block I just inserted and select convert to regular block.

Don’t forget to convert to regular block or your edits will be made everywhere you used that block!

Now that I have it converted to a regular block, I can change the first heading, the description and paste in the url for the new video. My post is done. Not only does this save me time, but if I want to hand the task off to someone else, say a new intern, they have a ready-made format.

Another advantage is if I do need to change something everywhere, I can do it with one click. A few years ago, the site we had been using to sell our Mac and Windows games went out of business. It would have been really helpful to have had something like this so that I did not have to go in and change every page where there was a link to the old site.

So, yeah, reusable blocks have converted me to Gutenberg. (Converted , get it? Oh, never mind.)

Fish Lake fractions game with Native American girl stepping on stones across a creek

Like math? You’ll love this game.

Get Fish Lake here for Mac or Windows

or … want Fish Lake for iPad ? Get it in the app store

Around our office, there are a lot of haters of the Gutenberg editor. However, I’ve found quite a few new features that are hard not to like. Here are just a few of them.

The cover block type

Say you’d like to have a background image for your text, like the one below. Just use the COVER block. Well, when I do that and put in the text and hyperlink it, the text is blue which is a hard color to read against that background color. So, I select the text and in the Color Settings in the right block settings, I pick white. Voila! Click the box below and check out AzTech: The Story Begins.

If you change your mind and transform the cover block back to a regular old image, then the text overlaid becomes the caption for the image, but where’s the fun in that?

You can change all kinds of attributes of the background images, for example, the opacity here was set to 60% and for the next image below to 40%.

The button block type

The button block does exactly what you might guess, it creates a button, with an optional link. You can easily change the background and text color just by selecting from the right panel under block settings (as in panel on your right, not as in correct panel, well, actually, that, too. I think this would be even more useful if you could combine it with the cover block, but, as of now, alas, that is not an option.

Sadly, buttons are not allowed here )-:

The columns block type

It’s funny given how much people made fun of me for using tables in my websites way back when we were making them with GoLive, that now we are back to something approximating tables. Also, you can see from the example below that you can get some pretty slick designs just with the Gutenberg editor out of the box. In the past, you’d need to do backflips with additional CSS to get the layout exactly how you wanted it.

Here is the new teacher resource site I’m working on

With the columns block, you can specify the number of columns, and you can even split some of the columns. If I wanted, I could split my English as a Second Language block above into two, Spanish and Lakota.

Of course, the nice thing about columns is that they, hopefully, are more responsive than tables. I say hopefully because the theme I am working with turns this into a very nice layout with all the blocks underneath each other for phones, but for smaller iPads it shows two sets of two boxes and then the last two underneath each other with a bunch of white space on the side. Oh well, nothing is perfect – yet.

Change is hard, but the new editor promises to be worth it

There are quite a few other new types in Gutenberg that I haven’t needed to use yet, but I am sure I will in the future, and some older features that seem to be significantly improved. If, like most of us in the office, found yourself swearing at WordPress because you’re existing site was working just fine and now you have to learn all this new $#@! when you really don’t have time, you might want to re-think that position.

I had more than the two tips on becoming a better programmer than I gave in the last post but I had run out of margarita. Now, being replenished with tequila and fresh lime by The Invisible Developer, here are two more. He often tells me that I should refer to myself as a developer and not a programmer because that is beneath me. I have never pretended to be cool. I started with punched cards as a programmer and a programmer I will remain. At least until the second margarita.

margarita
It’s Friday!

If you aren’t familiar with github, you could have gone to Chris Hemedinger’s super demo at SAS Global Forum. We use github for version control and it is indispensable for that. When you have several people working on the same program, I can edit files, you can, too, and we all upload and download the latest versions without copying over each other’s code. If you are on a project with more than one developer, once you have used a git repository, you’ll fight anyone who tries to take it away.

Because it is so good for sharing, github is used a lot for open source projects and for people just making their code publicly available.

The main thing I learned that I didn’t know is that there is a https://github.com/sassoftware

I had just assumed since SAS is a private company and definitely not open source that there would not be much available. I was wrong.

Whatever language you use, there is probably a github for it.

Here is a funny thing. When I first started learning JavaScript, I scavenged github to find examples of people making simple games like tic-tac-toe , Memory or mazes. I’d modify the code to do what I wanted and I thought all of these people were so much smarter than me.

After I learned a bit more, sometimes I saw functions or libraries in the code that didn’t do anything and I realized that a lot of these people had done the exact same thing as me – copied someone else’s code and modified it for their purposes.

Start by copying code from github, but don’t stop there

If you ask me – and even if you don’t, I’m going to tell you anyway – it is absolutely fine to download code from someone else’s repository on github and tweak it a little for your own purposes. However, don’t stop there! Dive into it. Figure out what each function does, try to understand their logic.

A better person than me would have their own public git repository. Oh well, I have a bucket of private ones for work and I’ve been writing this blog for 11 years, so that will have to do. YOU should definitely have public repository, though. Changing the subject here …

Git Repositories that are NOT python, R or Viya

The top repositories almost all entail either integrating SAS and Python (not surprising because it is open source) or Viya or Visual Analytics (presumably because it is expensive and SAS wants to promote it). There are also a smattering of SAS-and-R repositories in the top hits and repositories for SAS and iOS and SAS and Android. I’m not interested in any of that at the moment.

Right now, I am super-swamped but I should have some free time over the summer, so here are my personal interests I am marking for later. With 116 repositories, any SAS aficionado should find something of interest, and remember, this is just the sassoftware repository. There are additional repositories of individual users, like the last one I noted below

SAS Studio Tasks is an area I’d like to learn more about, as in writing your own custom tasks.

Data mining is an area I am ALWAYS wanting to brush up on more . This library of flow diagrams for specific data mining topics looks really cool.

Not a SAS Institute repository, this one from Michael Friendly is on macros and looks super cool.

As I mentioned above, I started using github for JavaScript code and there are TONS of repositories for just about any language that would tickle your fancy (what exactly IS a fancy, anyway?)

I have more tips but it will have to wait for another margarita and since my grandchildren are spending the weekend and just invaded my office, that will have to wait.