Category: Block tests

Video block

This is a demonstration of the “video” block in WordPress. It serves a number of purposes, including displaying video uploaded to the blog itself (which we don’t recommend for blog.ryerson.ca) and embedding video hosted on an external site (like Youtube).

The video block

This is what the “Video” block looks like as of 2020, WP 5.5

This block offers the following main options:

  • Upload a video to the media library (not recommended for blog.ryerson.ca)
  • Media Library – Embed a video already uploaded to the media library (not recommended for blog.ryerson.ca)
  • Insert from URL – Embed a video using the URL of a compatible video streaming service (Youtube and Vimeo will both work here)

Note that there is no option here to paste in embed code. WordPress doesn’t always work well with embed code, for security reasons. It may strip out portions of the code, rendering it unusable or only partially functional. If a URL-based embed won’t work, you may try to paste the embed code into a Custom HTML block… but be aware that it may not work as expected.

Insert from URL – Youtube example

The URL of this Youtube video was pasted into the Video block. WP recognized that it was a Youtube URL and effectively converted this to a Youtube block.

Upload / Media Library ~ why these are not recommended for blog.ryerson.ca

Our blog.ryerson.ca network has a limited amount of space, spread across many blogs. As such, we limit each blog to a certain amount of space. Video files can take up quite a lot of space – and most are larger than the 2MB per file limit.

Instead, we recommend uploading videos to external video streaming and hosting services, then embedding them in your blog post/page.

Other pages on this site demonstrate ways to embed video content from Google Drive (which is a Ryerson-supported solution), Youtube and other sources.

Navigation block testing (Gutenberg)

Testing the upcoming Navigation Block.

201912 – This block is currently only available in the Gutenberg plugin and has not yet been rolled into WP core.

I was hoping that this block would also be able to create a TOC for a page based on headings in the page itself (anchor links). Clearly, that’s a separate item — this block is meant to move toward using blocks for all page and interface building needs (including the top menu).

So… with that in mind, I think this block also needs to have a vertical orientation option, for appearing in sidebars. I’m not loving the options, at the moment.

An example of a default navigation block with all top-level pages:

Another test (dark style)

None of the colour styles I’ve tried actually appear to do anything. Not sure if it has to do with this theme or not.

Some widget blocks

Archives block

Categories block

Tag cloud block

accessibility archives audio broken button categories contact form contributor cover css embed Google Google forms grid image images instagram latest post list media multimedia navigation paragraph podcast pullquote quote readability read more rss Ryerson-supported search shortcode tag1 tag2 tag3 tags Twitter video widget youtube

accessibility (1) archives (2) audio (3) broken (2) button (2) categories (2) contact form (3) contributor (2) cover (2) css (1) embed (6) Google (3) Google forms (2) grid (2) image (3) images (2) instagram (2) latest post (2) list (2) media (2) multimedia (2) navigation (2) paragraph (2) podcast (2) pullquote (2) quote (2) readability (1) read more (1) rss (3) Ryerson-supported (1) search (1) shortcode (2) tag1 (1) tag2 (1) tag3 (1) tags (1) Twitter (1) video (4) widget (1) youtube (4)

Search block

Meta block

There doesn’t appear to be a meta block at this time.

Latest posts block

Let’s see how we can display a blog’s latest posts, using blocks.

On this page:

“Latest posts” block

As of November 2020, the “Latest posts” block includes the following features:

  • Two display settings (list & grid – see below for examples)
  • Select the number of items to display, and the number of columns (in grid view)
  • Include content
  • Include post featured image
  • Include author
  • Include post date
  • Filter list (by category, author, …)
  • … and other features for sorting, displaying, etc.

Would like to see some layout options that match some of the themes out there (so we can limit the number of themes on the network!), but this is a good start. Someone with CSS-experience may be able to customize the look further.

Example 1: List (default)

Example 2: Grid (custom settings)

Note that I have the featured image displaying here – where a post has no featured image, the grid looks a bit off. I would recommend only displaying the featured image for blogs that add a featured image for every post (not just an image in the post – featured images can be set in the right-hand sidebar of your post).

Video demo

Video best viewed full-size

Example 3: An excerpt-style list (custom settings)

For this example, I used the list type of display, and then modified the settings to include an excerpt, the author and date, the thumbnail (with the alignment set to the left). I have also limited the list to posts in the category “Block tests”.

RSS feed block

This is much more limited than the “Latest Posts” block, if you are looking to display posts from the local blog. The RSS feed block is intended to display a list of posts from *another* source, using its RSS feed (i.e. another blog).

As of November 2020, this block includes the following features:

  • Set number of items to display
  • Display author
  • Display date
  • Display excerpt (specify number of words)
RSS Error: WP HTTP Error: A valid URL was not provided.

Audio embed using blocks

Audio block

Using an uploaded audio file

Soundcloud block

Google Audio

Important settings on the Google audio file

  • Open sharing up (either public, or shared with the class specifically and let them know to check their Google session before accessing the blog)
  • Ensure downloding is enabled – if it is disabled, the playback will not work.

Audio block – using a Google URL?

Shared to anyone with the link. Does this even work?

This only worked with a special version of the URL from Google AND only when I’m logged into my Ryerson Google account. Not sure how to get this to work widely.

https://drive.google.com/u/1/uc?export=download&id=0B9LKEddT6B_1V3RNcnh0SXZkUDg
Where the id= includes the ID code from the file uploaded.

Below, I’m trying the version of the URL without the /u/1 (which references our domain somehow). It doesn’t work when I preview it – but does it work publicly? (no)

Embed code from Google

Just the link…

Here is just the sharing link from Google:

https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0SXZkUDg/view?usp=sharing

Quote and pullquote blocks

This page demonstrates some features of the ‘Quote’ and ‘Pullquote’ blocks.

Quote block

Regular quote style. This is supposed to be a quote, but I don’t have one that I can readily refer to here. I should find a good one to test with, because people do say and write some fun things.

Me, 2019.

Large quote style. This is supposed to be a quote, but I don’t have one that I can readily refer to here. I should find a good one to test with, because people do say and write some fun things.

Me, 2019.

Pullquote block

I’m writing a paragraph to see how the pullquote dealy works. I’m writing a paragraph to see how the pullquote dealy works. I’m writing a paragraph to see how the pullquote dealy works. I’m writing a paragraph to see how the pullquote dealy works. I’m writing a paragraph to see how the pullquote dealy works. I’m writing a paragraph to see how the pullquote dealy works.

When you first add a pullquote, it centres it and puts it in the middle. I can’t seem to get it to go back to that, after trying the left or right align.

Me

I don’t quite understand how this is supposed to work, unless it’s only useful in a table or column structure.

This is the pullquote block.

Not all of the styling seems to work.

Me

Weird. OK, I just added a new Paragraph block and it defaulted to add it to the right of my pullquote. That’s probably how it’s supposed to work, but it wasn’t obvious.

Let’s demonstrate some of the weird styling that I don’t think works properly.

This is my pullquote. It looks wrong in the editor. The text should be white.

Me

Paragraph block

This is a normal paragraph block.

This paragraph has a drop cap. This can easily be done by clicking the ‘drop cap’ button in the block settings.

Indent the first line of a paragraph

Option #1 – CSS Class

This paragraph needs to begin with an indent. What’s the best way to do that? A special CSS class would help, but you need to determine whether ALL paragraphs need to begin with an indent, or only specific ones. The following code can be used if you want to specify a paragraph that should have an indent at the start. Note that clicking a few spaces at the beginning of a paragraph block won’t work because they will be removed upon publishing.


/* To indent the first line of a paragraph block */

.indented-first-line {
text-indent: 1em !important;
}

Option #2 – Use ‘Classic’ block instead

     Using Classic. The leading spaces will not be stripped out upon publishing. This paragraph needs to begin with an indent. What’s the best way to do that? A special CSS class would help, but you need to determine whether ALL paragraphs need to begin with an indent, or only specific ones. The following code can be used if you want to specify a paragraph that should have an indent at the start.

RSS block

A quick test of the new RSS block introduced in Gutenberg 5.0.

Another sample feed

RSS Error: WP HTTP Error: A valid URL was not provided.