New Style on the Block: WolfWare WordPress Edition

Does it suddenly seem like there are clearer paths to find what you need on the NC State website? You are not imagining it — the site was updated for the first time since 2013. Now, it is easier than ever to navigate and more visually appealing. 

If you are wondering if your course website could resemble this fresh look, the answer is yes! Thanks to a WolfWare WordPress update, this Gutenberg “Block” editing style is the default setting, replacing the “Classic” style for new sites on academic, Projects and Outreach newly created sites. On existing WolfWare WordPress sites, editors can switch to the new “Block Editor” in the settings.

The Block Editor allows you to easily create interesting page layouts, enabling you to engage viewers with visual and media elements. Now, you can think about course content in terms of visual pieces which make up the page instead of thinking about page content as one document in its entirety. There are a variety of different blocks used together to make up a page such as headings, paragraphs, lists, images and more. When a Block is selected, it can be modified individually without affecting other elements on the page.

The image below shows the Block Editor screen containing different types of block content. A Paragraph Block is being edited, as indicated by the toolbar displayed above the paragraph text as well as the Paragraph block settings shown in the side panel.

Projects WolfWare WordPress Can Facilitate

“For a multi-lab course, WolfWare WordPress has been invaluable. While Moodle is great for many reasons, in this case, I can’t imagine having to make changes to so many lab Moodle pages — 12-50 lab sections depending on the semester and the course!” says Lab Supervisor Patty Aune in reference to the website designed to support the lab sections of BIO 181.

WolfWare WordPress can be used to create websites for WolfWare academic courses such as the BIO 181 Lab referenced above. In addition, it can be used to create resource or training websites for project and outreach programs, like WolfWare Outreach. If you are concerned about privacy issues, visibility and user access can be controlled through the WolfWare settings. For example, you can set the page up so only enrolled students and instructors can see use the page. And, if you add your teaching assistants (TAs) as “instructors” on the site, they will be granted full editing permissions. Many instructors at NC State and their students are already benefiting from the use of WolfWare WordPress sites.

“Critique is the most common presentation genre in the discipline of design and it is an important pedagogical tool in design courses. Creating an interactive website (a course hub/ students’ blogs) through WordPress provides a way for design students to upload their visual work, give and receive written feedback and cultivate a sense of social belonging throughout the semester,” explains Gloria Hwang. On her FTM 317: Computer-Aided Design for Apparel WolfWare WordPress site, she encourages students to post and comment in several blog categories.

While the website for FTM 317 is locked down to enrolled students, other WolfWare WordPress sites such as BIO 183 Lab and the non-credit course Writing Skills for Visiting Scholars taught by Instructor Elaine Goh are able to be viewed publicly. 

“I initially had some reservations about the Block Editor because I was so used to the classic interface — been using it for years personally as a travel blogger. However, once I figured it out, it was eye-opening. I used to add shortcodes in text mode to add some of the elements, the Block Editor is a much simpler process of adding complex elements in WordPress,” Goh said. “For example, I had to figure out the shortcode to include links in collapsible panels, but the Block Editor cuts all that time out for it. I mainly use major links, collapsible panels, and callout boxes on my website. I also included an RSS widget on my page, and the Block Editor makes it much easier to visualize the website as to how interactive it is for the students.”

She also added, “I used to hesitate when colleagues who had not used WordPress asked if they should use it for their program. But now, I would tell them to experiment with it. The Block Editor makes it much more palatable for any new users because it is a much simpler process.”

Switching Between Block and Classic Editors 

If you want to create a new WolfWare WordPress site but prefer to use the “Classic” editor, you still can do so. Or, if you are editing an existing site and want to start using the Block Editor, you can switch. You can change your editing preference in the WordPress settings on your site using the following steps.

1. Login to your WolfWare WordPress site and go to the Admin view, or Dashboard.
2. In the left navigation menu, hover over or click on Settings to show options.
3. Select Writing.
4. Next to “Default editor for all users” select your preferred editor.
5. Next to “Allow users to switch editors”, select “Yes” if you would like the availability to easily switch between Classic and Block editors without having to return to this settings page. This can be helpful if you have multiple editors on the site, but some are more comfortable using a different editor than the default.

Converting Existing Content to Blocks

If you switch to the Block editor on an existing WolfWare WordPress site, your content will automatically convert over to the new “Block” style, but it will be placed into one big block, called a Classic block. To maximize the visualization of your content, you must convert your content into separate blocks. 

1. Click on the content to display the editing toolbar above it.
2. Click on “Convert to blocks.”

The conversion may or may not be perfect, so it is important to review content to ensure everything looks, works and reads as intended. You may find that some visual elements you had previously added, such as callout boxes, now seem “broken” because they are displayed as some strange code instead. If this happens, you can most likely recreate the “broken” functionality with specific “NC State block” types, then delete the blocks that are displaying code. 

If you are interested in creating a website but feel it may be overwhelming to try to start from scratch, you can use the WolfWare WordPress Quick Start Site Shell. The preceding link goes to a demonstration site with placeholders for content that can be edited. To create a new WolfWare WordPress site using the Quick Start Site Shell, follow these steps:

1. In WolfWare, click on the gear icon to the right of the course name to access the Course Management page.
2. In the “Inactive Tools” table, locate the row for WordPress and click on the activate link in the last column.
3. On the WordPress setting page, you can choose to keep the default settings or change them. Click on the blue “help” question mark icons to learn more about each setting.
4. In the WordPress Site Copier section (located at the bottom of the page), click on the drop-down menu below “Source Site.”
5. Select “WolfWare WordPress Quick Start Site Shell (DELTA theme)”
6. Click the Update WordPress Settings button

Still need more support to create your new WordPress site? You can sign up for a Creating Class Websites with WolfWare WordPress workshop or read more about it on the WolfWare WordPress Essentials resource site.

Other helpful resources:

• OIT Gutenberg Quick Start
• Try Gutenberg 

Interested in more guided support for creating a WolfWare WordPress website for your course? Users may request an instructional consultation through LearnTech.