Welcome to the Gutenberg Editor

So WordPress has a new editor: Gutenberg! This is the default new post with some tweaks from our playing with it. 

Customizing the text, like above, now gives more options with sizes, drop caps and colors for text in WordPress.  

First time Gutenberg user.

Of Mountains & Printing Presses

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

What you are reading now is a text block the most basic block of all. The text block has its own controls to be moved freely around the post…

… like this one, which is right aligned.

Headings are separate blocks as well, which helps with the outline and organization of your content.

A Picture is Worth a Thousand Words

Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you’ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.

Beautiful landscape
If your theme supports it, you’ll see the “wide” button on the image toolbar. Give it a try.

Try selecting and removing or editing the caption, now you don’t have to be careful about selecting the image or other text by mistake and ruining the presentation.

The Inserter Tool

Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That’s the spirit behind the inserter—the (+) button you’ll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.

Go give it a try, you may discover things WordPress can already add in to your posts that you didn’t know about. Here’s a short list of what you can currently find there:

  • Text & Headings
  • Images & Videos
  • Galleries
  • Embeds, like YouTube, Tweets, or other WordPress posts.
  • Layout blocks, like Buttons, Hero Images, Separators, etc.
  • And Lists like this one of course 🙂

Visual Editing

A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:

The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017

The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It’s always easy to add it back.

Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.

You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.

Media Rich

If you combine the new wide and full-wide alignments with galleries, you can create a very media rich layout, very quickly:

Accessibility is important — don’t forget image alt attribute

Sure, the full-wide image can be pretty big. But sometimes the image is worth it.

The above is a gallery with just two images. It’s an easier way to create visually appealing layouts, without having to deal with floats. You can also easily convert the gallery back to individual images again, by using the block switcher.

Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:

You can build any block you like, static or dynamic, decorative or plain. Here’s a pullquote block:

Code is Poetry

The WordPress community

If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.


Thanks for testing Gutenberg!

👋

Adding a self-signed SSL Certificate to localhost

In my localhost development environment, I sometimes need SSL configured for a site so I can test things as close as possible to how the production site will operate.

In my environment, Apache is configured in /usr/local/etc/httpd and the self-signed SSL certificates are stored in /usr/local/etc/httpd/ssl/<local_domain>/.

Here is the recipe to add a self-signed SSL certificate so Chrome and other browsers will allow access to the secure locally hosted site:

Add the following inside the <VirtualHost *:443> </VirtualHost> configuration for the local_domain in /usr/local/etc/httpd/extra/httpd-vhosts.conf

SSLEngine on
SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
SSLCertificateFile /usr/local/etc/httpd/ssl/<local_domain>/domain.crt
SSLCertificateKeyFile /usr/local/etc/httpd/ssl/<local_domain>/domain.key

Create domain.conf with the following content:

[req]
distinguished_name = req_distinguished_name
req_extensions = v3_req

[req_distinguished_name]

[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = <local_domain>

Generate the key:

sudo openssl genrsa -out domain.key 2048

sudo openssl rsa -in domain.key -out domain.key.rsa

sudo openssl req -new -key domain.key.rsa -subj /CN=<local_domain> -out domain.csr -config domain.conf

sudo openssl x509 -req -extensions v3_req -days 3650 -in domain.csr -signkey domain.key.rsa -out domain.crt -extfile domain.conf

Add the key to the keychain in OSX:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain domain.crt

Restart Apache

sudo apachectl -k restart

Why do I need a website? I’m on Social Media

You are busy. You have an active community on a social media network like Facebook and your time is limited. It is easy to Tweet or to post a photo to your Facebook page, but your website has not been updated for so long that you have forgotten how to edit it.

Is it even worth having a website now, when your audience is always on social media? Are websites still relevant?

Some key points to think about before abandoning your website for a social media site:

Durability: Will the social media site stick around?

Remember MySpace? Friendster? Did you ever use Xanga? or Digg? Some of these sites are still around, others are long gone.

See R.I.P. – Top 10 Failed Social Media Sites or The Social Media Graveyard for lists of dead social media sites.

Reachability: Will your audience see your message?

With social media sites, there is a “firehose” of constant messages and so it is easy for your content to get lost in the rapid stream of updates. Even if you are posting at opportune times, you won’t reach everybody you hope to.

Feedback and analytics (available for most social media sites) can give you a good idea of how well your content is doing.

Findability: How easy is it to find your online presence?

Try a Google search for your brand’s online presence. How many of the results point to your content on social media?

Next, try to find your content using the search feature of a social media channel.

A previous post from this blog appears on the first page of Google results for a search of the title of the post (“what does it cost to make a website and get online”).

Search results for the title of a blog post that was shared on social media

This article has been shared on our Facebook page several times (most recently 2 October via Buffer).

And yet, it does not appear in Facebook’s search results:

Search results for the blog article shared on Facebook

Usability: How easy is it to update your website?

Perhaps the reason your website is out of date is that you don’t have an easy method to keep it up to date. We recommend using a Content Management System like WordPress or TYPO3 that is customised for your situation. Talk to us about how we can help simplify your content

Respect the user’s language choice

I regularly travel to different countries and language regions and often need to access information online. Although I understand parts of some other languages, I prefer to use English because I operate fastest in English. I have my browser set to English and this delivers my preferred language to the websites I visit. But they don’t all respect that.

I am amazed at the number of international websites that use my location information and then assume I want to use the major language associated with that location. I don’t! I want to use my preferred language.

If you have a multi-lingual website, please make it user-friendly (or ask your web developer to help).

How to start a web presence for free and why you shouldn’t

You can start a web presence for zero financial investment. But you probably shouldn’t.

An effective web presence connects you with your audience in many different channels on the web. With your website as the hub of your web presence, your participation on social media creates a connection with people and feeds traffic to your website.

Website/Blog

There are many free hosted blogs such as WordPress and Blogger that give you a good level of control with a range of layout and theme options.

Blogger hosted site
We use Blogger for our technical support blog

These are ideal for informational sites, but they usually have limited features and limit the interactivity.

Website Content

Your website content needs to communicate what your audience wants to know about you or your organization. Your content needs to be relevant and unique because search engines give more authority to unique relevant content and this is what your visitors will be looking for.

We recommend that you don’t build your own website. Many websites are focussed on what the owners want to say, instead of focussing on what their audience wants to know.

A third party to help you create your website with a fresh perspective and provide the professional technical expertise you need. This is especially important when your website needs to provide interaction as well as information.

Content Management Systems

Many content management systems are open source and available for free. We use WordPress or TYPO3 for many of our customers. You will need to spend time customizing these and install extensions/plugins to suit your needs. You may need coding skills.

Website Design

You can get free design templates for content management systems, however these tend to be generic and for a unique look to your website you will need to customize these with your branding. This can be time consuming and requires skills in HTML/CSS/Javascript.

Email

You can register an email account with many webmail service providers (Gmail, Hotmail, Yahoo etc.) but piggybacking on another domain is not as professional as having your own.

It is usually easy to set up webmail services to use your own domain name for email.

Domain names

You can get a free domain name from http://www.freedomain.co.nr.

.nr is the Internet country code top-level domain (ccTLD) for Nauru, a tiny island nation in the Pacific. “co.nr” is not an official hierarchy; it is a domain (www.co.nr) owned by a company who offers free subdomain redirection services.

Free, but only for individuals and so it is not as professional as a top level domain (like .com, .org, .info etc.) or other ccTLD that is easily recognized by your audience.

You could get a free subdomain from a provider, but you are reliant on them continuing to provide the service and again it is less professional.

We recommend that you purchase a good domain name that is relevant to your web presence. It will become part of your online branding.

Security Certificates

Securing the communication with your website builds trust not only with your website visitors, but also search engines. You can get free security certificates from Let’s Encrypt, however, these have some limitations.

For higher level security you should purchase a security certificate that meets your needs.

Social Media

You can join most social media sites for free and these allow you to create personal profiles as well as pages that you build about your products/services or website.

Many people get social media wrong or miss opportunities by doing it themselves. We recommend working with an experienced web presence agency so you get the maximum benefits from social media.

Need help?

If you are confident that you can do it yourself and have the time to invest, you can build a web presence for zero or low cost. For a quicker path to success, work with a web presence provider you trust and ask for help where you need it.

Vista Interactive provides a one-stop-shop for your web presence needs. Contact us for help with your project.