Goal

To under­stand the mechan­ics of using advanced block based fea­tures of a con­tent man­age­ment system.

Objective

Use advanced block fea­tures to increase effi­ciency and to improve lay­out options within WordPress.

Background Reading

• https://​word​press​.org/​s​u​p​p​o​r​t​/​a​r​t​i​c​l​e​/​b​l​o​c​ks/
• https://​www​.wpbe​gin​ner​.com/​b​e​g​i​n​n​e​r​s​-​g​u​i​d​e​/​h​o​w​-​t​o​-​u​s​e​-​t​h​e​-​n​e​w​-​w​o​r​d​p​r​e​s​s​-​b​l​o​c​k​-​e​d​i​t​or/
• https://​www​.wpbe​gin​ner​.com/​b​e​g​i​n​n​e​r​s​-​g​u​i​d​e​/​h​o​w​-​t​o​-​c​r​e​a​t​e​-​a​-​r​e​u​s​a​b​l​e​-​b​l​o​c​k​-​i​n​-​w​o​r​d​p​r​e​ss/
• https://​learn​woo​.com/​w​o​r​d​p​r​e​s​s​-​b​l​o​c​k​-​e​d​i​t​or/

Exercise

Using the con­tent from a pre­vi­ous exer­cise, cre­ate a dupli­cate post to explore the lay­out and effi­ciency options of Word­Press’ Block Edi­tor. While basic in terms of web devel­op­ment, these do pro­vide options and improve­ments to the sys­tem which rivals com­peti­tor fea­tures. Advanced tech­ni­cal and aes­thetic edits are pos­si­ble with cus­tom CSS skills devel­oped later in the semester.

Part One

Pull up the post devel­oped for Exer­cise 02.01: Con­tent Man­age­ment Sys­tem (CMS) Entry and copy the text based con­tent and ref­er­ences to a new post. Using the blocks, edit the post to have more visual inter­est. Explore the use of mul­ti­ple columns, image or call out blocks, as well as quotes or addi­tional media, such as videos etc. Use the order­ing tools to repo­si­tion and exper­i­ment with the place­ment of some items. Use some of the basic con­tex­tual tools to edit size or color, though this should be used spar­ingly and care­fully, as more effi­cient tools are avail­able for exten­sive edits.

Once happy with the lay­out, take a screen­shot for sub­mis­sion to D2L.

Part Two

Nav­i­gate to the bot­tom of the sec­ond (new) post. Insert a Head­ing for an “Author Name,” a small Image to serve a graphic icon, as well as a Para­graph for a two (2) sen­tence bio. Group these indi­vid­ual blocks by select­ing them using the con­tex­tual menu to Transform the Blocks.

Cre­ate reusable block using a sim­i­lar con­tex­tual menu, and the the Options sub­menu Add to Reusable Blocks. The block is now linked to a com­mon “chunk” that can be reused and edited, but doing so changes every instance of the block, sim­i­lar to using a global color swatch or sym­bol in a draw­ing pro­gram. Update the post and select Save for both the post and the block.

Once pub­lished, insert the reusable block at the bot­tom of the orig­i­nal post with the “+” icon that is usu­ally blue. Edit the block with a small, but notice­able change, before click­ing Update, Save and then pre­view sec­ond post. Update should carry through to both posts, though you may need to refresh the page to make it vis­i­ble. Take a screen­shot of reusable block in the block edi­tor view of WordPress.

Part Three

Sub­mit both screen shots and leave a click­able links to each post via the appro­pri­ate D2L dropbox.

• The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading

Techniques

Account man­age­ment, Word­Press instal­la­tion, web hosting

Materials

Browser, Server space, Word­Press instal­la­tion, web hosting

Techniques

Word­Press Instal­la­tion, Acti­va­tion, Login

Materials

Host­ing ser­vice, host­ing account, Word­Press instal­la­tion, browser

Deadlines

Thurs­day, August 20, 2020. Exer­cise given.

Thurs­day, August 20, 2020. Exer­cise due. Home­page screen­shot uploaded to appro­pri­ate D2L Drop­box with site link in com­ments section.