Over the past week, I’ve been thinking a lot about George Floyd, Breonna Taylor, and Ahmaud Arbery. I have been thinking about white supremacy, the injustice that Black women and men are standing up against across the world, and all the injustices I can’t know, and don’t see.
The WordPress mission is to democratize publishing, and to me, that has always meant more than the freedom to express yourself. Democratizing publishing means giving voices to the voiceless and amplifying those speaking out against injustice. It means learning things that we otherwise wouldn’t. To me, it means that every voice has the ability to be heard, regardless of race, wealth, power, and opportunity. WordPress is a portal to commerce; it is a canvas for identity, and a catalyst for change.
While WordPress as an open source project may not be capable of refactoring unjust judicial systems or overwriting structural inequality, this does not mean that we, the WordPress community, are powerless. WordPress can’t dismantle white supremacy, but the WordPress community can invest in underrepresented groups (whose experiences cannot be substituted for) and hire them equitably. WordPress can’t eradicate prejudice, but the WordPress community can hold space for marginalized voices in our community.
There is a lot of racial, societal, and systemic injustice to fight. At times, change may seem impossible, and certainly, it’s been too slow. But I know in my heart that the WordPress community is capable of changing the world.
If you would like to learn more about how to make a difference in your own community, here are a few resources I’ve gathered from WordPressers just like you.
During the State of the Word at WordCamp US 2019, Matt Mullenweg shared that Gutenberg was used to create his slides and the presentation was powered by the Slides plugin. Using WordPress to power a slide deck isn’t an obvious choice, so we wanted to showcase the process and give some tips for making slide layouts using Gutenberg.
This post is co-written by Ella and Tammie, who (along with Mel, Mark, Enrique, Qand a cast of supporters) helped create this year’s State of the Word slide deck.
How it Started
Ella Van Durpe was selected to speak at JSConf and ReactEurope and wanted slides for her presentation.
For these new presentations, she wanted to use Reveal.js again but didn’t feel like writing all the HTML by hand. Creating blocks of content visually, without having to actually write any code, which can be published natively to the web, is exactly what Gutenberg was built for.
The plugin was prototyped quickly, with hardcoded styles on the slides and zero options. At the end of each presentation, Ella shared a brief demo of the Gutenberg-based slides and the audience was amazed.
As WordCamp US approached, Ella suggested that her plugin be used for State of the Word. Since it was such a hit with her audience members, it seemed like this would be a great chance to share it with the WordPress community as a whole.
How it Works
The plugin registers a custom post type called “presentation” and a new “slide” block. The slide block is a sort of enhanced “Group” block, which is restricted to the root of the post, but you can put any other block inside it. As a result, you have a post filled with only slides at the root and slides filled with content. This maps perfectly to the Reveal.js markup, which requires content in HTML section elements.
Since these slides each have their own design, the theme styles are disabled and styling is set from each slide. A custom presentation template is provided by the plugin to render the custom post on the front-end.
Then Ella added options to style the slides. For example, she added options to control the slide background and font, at both the document level and individual slide level. She also added Reveal.js options, which allow you to change the transition style and speed. Lastly, she added a custom CSS field to allow style overwrites.
For the State of the Word, she also added speaker notes and a speaker view.
How it’s Designed
The inspiration for the slide designs came from Blue Note album covers (which were also the inspiration for the 2011 State of the Word slides). These album covers inspired the recent “About” page in WordPress core and the starter content for the new Twenty Twenty theme. This style consists of strong, geometric shapes and simple forms with clean lines. Photography and bold typography are at the heart of this look.
Various color palettes and font pairings were explored before selecting the best combination for the presentation.
A strong photographic element was needed for the slides. Past WordCamps are a great source of photos, so we dug through years of photo galleries to find just the right shots. With colors, fonts, and photos, we laid the foundation to build the deck.
Tips for Making Gutenberg Slides
Tip One: columns are your friends
If you want slides with a precise layout, use columns. As you can see here, we used a 3 column layout to center content within a slide:
Tip Two: spacer blocks are useful
Want to really unlock the power of columns? Combine them with the spacer block! We used spacer blocks to position content over background images, like in this slide:
Tip Three: test on large screens
It’s important to preview and test your slides as you go. Make sure to design for the size and aspect ratio of the projector you’ll be using and do a visual check in presentation mode from time to time.
I’d love to make the art directed compositions easier to create.
As Gutenberg evolves, one big improvement is that art direction will get easier. Even with the improvements this year, creating some layouts in Gutenberg was trickier than expected. For the more complicated compositions, we relied on SVGs. Eventually, the need for hacks will dissolve away, and a new world of exciting possibilities will open for everyone.
Browsers offered one of our biggest learnings in this presentation, more than they would if you use Keynote or Powerpoint, for example (tools most of us have used). Often, we found that what we created in the editor varied a when viewed full-screen. We were able to mitigate this by updating the plugin to use a fixed size, instead of using the entire browser window.
Wrapping it up
If you would like to check out the State of the Word, you can watch the video and read all about it in a post.
The Slides plugin is not only available on the plugin repo, but you can also get the code from GitHub and help translate.
WordPress now powers over 1/3rd of the top 10 million sites on the web according to W3Techs. Our market share has been growing steadily over the last few years, going from 29.9% just one year ago to 33.4% now. We are, of course, quite proud of these numbers!
The path here has been very exciting. In 2005, we were celebrating 50,000 downloads. Six years later, in January 2011, WordPress was powering 13.1% of websites. And now, early in 2019, we are powering 33.4% of sites. Our latest release has already been downloaded close to 14 million times, and it was only released on the 21st of February.
Over the years WordPress has become the CMS of choice for more and more people and companies. As various businesses use WordPress, the variety of WordPress sites grows. Large enterprise businesses all the way down to small local businesses: all of them use WordPress to power their site. We love seeing that and we strive to continuously make WordPress better for all of you.
We’d like to thank everyone who works on WordPress, which is built and maintained by a huge community of volunteers that has grown alongside the CMS. This incredible community makes it possible for WordPress to keep growing while still also remaining free. And of course, we’d like to thank all of you using WordPress for using it and trusting in it. To all of you: let’s celebrate!