Nagi: Do not delete or modify this post
Here is page the displays all block and content types that are currently in use on RTE posts and pages. Note when we say posts and pages, we mean WordPress posts and pages (as strictly defined in WordPress). So, this is a post and this is a page, for example.
It does not cover custom page types like the homepage, cookbook pages, indexes, or category pages (whether legacy, or Rich Category Pages) and so on.
Headings (this is an H2 heading)
Note: H1 heading is used for the post or page title itself in WordPress. By design in WP they cannot be used within the post body; H2 is the highest heading available. H1 may however be used on custom page types in WordPress however, since you can do anything on a custom page.
This is an h3 Heading – Frequently used
this is an h4 heading – less commonly used
This is an H5 heading. H5’s were designed to be used as headings for “info” sections.
The idea was H5 would be used when Nagi wanted to write an “Tips and tricks” or “Did you know?” type snippets. In practice the question mark icon is too ambiguous to be useful, and she generally doesn’t use H5s. Instead we use Info Box blocks (see below).
Inline styling
Writers make extensive use of bold and italic. Punctuation like exclamation marks and emojis are also a common part of the style!!! ☺️
Hyperlinks look like this.
Subscript is occasionally used for footnotes*
*Footnotes like this. They are created by applying the “S” (as in small) size in the Typography options within the Paragraph block menu in WordPress.
Lists
Both ordered (numbered) and unordered (bullet point) lists are used extensively.
Here’s a numbered list:
Stuff goes here – Often it’s an item that’s followed by a hyphen, and then the explanation follows.
En and em dashes are not used, even though they should be. If they occur, it’s due to auto-correct.
And here’s an unordered list:
Something
and
something
Images
Typography appears with images in different forms.
Labels within images
Most common for recipe process step images, or ingredient spread images like below.
I personally dislike these all lower cap labels. I think it looks somewhat juvenile and introduces practical problems for the sake of fashion. We should get rid of it (though it will be a huge amount of work to update existing images, so perhaps we only apply to new images).
Process step images mostly do not make use of text, and only have a sequence number like so:
Captions for full size images
See the sample caption below the image.
Captions for gallery images
Gallery blocks in WordPress core have captions that are overlaid over the image like so. I believe they
Info Boxes
This is an Info Box
It’s a custom RTE callout block used to add supplementary information. It supports any content type and formatting.
For example, headings
And …
It can …
contain lists
It can also contain images.
Nagi’s Notes block
Designed by Jaywing. It looks like this:
Nagi's Notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Accordion block
Designed by Jaywing
It was designed by Jaywing.
Something goes here
Grey Italic Emphasis block
This is grey italic emphasis. Originally the intended use was a pull quote.
However Nagi tends to lack disciplined use of this style, and uses it to highlight any kind of key information she wants to draw attention to, and rarely actually uses for true pull quotes. Normally it will not run more than a line or two.
Tables
Tables are used infrequently but do appear in some recipes.
| Column heading 1 | Column heading 1 |
|---|---|
| Cell text | Cell text |
| Cell text | Cell text |
Media & Text block
The WordPress Media & Text block are only rarely used, mostly for roundups like this post. They allow compact display of an image and moderately lengthy accompanying text, packaged in a single container.
1. MALAYSIAN SATAY CHICKEN CURRY
This is EPIC!!! I was so excited when I found out we make this at RTM so hundreds of people across Sydney get to enjoy it too!! Chicken marinated in satay seasoning, simmered in a peanut satay sauce, made from store-cupboard staple spices – no jar curry paste. Reader fave!
Stephen says: This is a personal favourite. The peanut-y satay smell when this is cooking is amazing!
Recipe video typography
Recipe videos also have their own typography and animation style.
Video typography should also be part of the design system. However as this is a separate piece of work, it is not in scope for the initial typography audit.
Looping video
Used in the past for some posts, like Mirror Glaze. It contains a play button and accompanying “Click to play” CTA text.
Again, this falls under video typography so is not part of the initial scope of work for typography.
Recipe card
The recipe card is very standardised and has a rigid typographic scheme that cannot be altered by the writer.
Above the recipe card is a “Hungry for more?” CTA.
Hungry for more? Subscribe to my newsletter and follow along on Facebook, Pinterest and Instagram for all of the latest updates.
Malfatti (Italian Spinach Ricotta Dumplings in Napoli Sauce)
Ingredients
Napoli Sauce:
- 2 tbsp olive oil
- 2 garlic cloves , finely minced
- 1/2 onion , very finely diced
- 800g / 24 oz crushed tomato (or diced)
- 1 tbsp tomato paste
- 1/2 cup water
- 1 basil stem (leaves kept for the Malfatti)
- 1/2 tsp white sugar
- 3/4 tsp salt
- 1/2 tsp black pepper
Spinach for Malfatti:
- 300g / 10oz baby spinach (~6 tightly packed cups, Note 4)
- 1/2 tsp salt
Malfatti:
- 1 tbsp olive oil
- 2 cloves garlic , finely minced
- 1 eschallot (large), finely chopped (or 1/2 red onion)
- 500g / 1 lb ricotta (must be dry type, not wet and spreadable, Note 1)
- 1/4 cup (lightly packed) basil leaves, finely sliced (use stem for sauce)
- 1 egg (Note 2)
- 1 egg yolk (Note 2)
- 1 cup parmesan , finely grated
- 1/2 cup flour , plain / all-purpose
- 1/2 tsp salt
- 1/2 tsp black pepper
Serving:
- 1/4 cup parmesan , finely grated
- Basil leaves , small (optional)
Instructions
Napoli Sauce:
- Saute garlic and onion: Heat oil in a small pot or large skillet over medium heat. Add garlic and onion and cook for 3 minutes until onion is softened.
- Simmer sauce: Add remaining ingredients plus the stem of basil. Bring to a simmer, then reduce stove to low and cook, stirring every now and then, for 20 minutes. It should be fairly thick rather than a loose runny sauce.
Malfatti:
- Drain ricotta, if needed: The ricotta should be the dry and fairly crumbly type rather than wet, soft and almost spreadable. If it's wet, see Note 1 for removing excess water (wet ricotta makes Malfatti hard to shape and cook!)
- Sweat spinach: Toss spinach with 1/2 tsp salt in large colander. Leave for 20 minutes. Roll up in tea towel and squeeze tightly to remove excess liquid. Roughly chop.
- Sauté garlic, eschalot and spinach: Heat oil in a skillet over medium high heat. Add garlic and eschalot, cook for 1 minute until translucent. Add spinach and cook until just wilted. Transfer to large bowl, allow to cool.
- Malfatti mixture: Add ricotta and all remaining Malfatti ingredients into the bowl. Mix well to combine. It should be too wet to roll with hands without sticking, but still firm enough to shape into dumplings.
- Form dumplings: Using 2 dessert spoons, scoop up about 1 1/2 tablespoons of mixture then shape into a football (quenelle) using the two spoons. Place on a paper-lined tray. You should get about 24-30.
- Boil dumplings: Bring a large pot of water to the boil, then carefully put 6 dumplings in. Cook for 2 minutes, they should float to the surface. Remove with slotted spoon on to paper towel lined tray. Repeat for remaining Malfatti.
Baking:
- Preheat oven to 180°C / 350°F.
- Assemble: Pour Napoli Sauce into a baking dish, then top with Malfatti. Drizzle with extra virgin olive oil.
- Bake 15 minutes or until the Malfatti has a faint blush of gold on the surface (Note 3).
- Serve! Sprinkle baked Malfatti with parmesan and basil leaves (tear large leaves). Spoon into bowls and served as-is. No starchy side is required, think of these as like gnocchi. Just add a leafy green salad with Italian Dressing or Balsamic Dressing!
Recipe Notes:
Nutrition Information:
The Recipe Notes section of the recipe card always makes use of a numbered list (since the numbers correspond to “See <note number>” instructions given in the ingredients and method of the recipe card. Note however that there is no styling applied to the numbering, unlike the method.
The Recipes Notes section DOES in fact have built-in styling for numbered lists. You can see it here on this post’s recipe card. This post was written by JB. Nagi deliberately bypasses the automatic styling applied to numbering and uses default system styling instead because the automatic numbered list styling does not support multiple paragraphs of text for one numbered item. In the “1. Ricotta” note for example above, you can see how she has two paragraphs of text for this note. If she used the automatic styling, it would apply the number “2” to the second paragraph, which is not desired here.
In-post recipe carousel
The in-post recipe carousel is used to promote recipes related to the current one. Sometimes multiple carousels may appear.
CTA blocks below recipe card
The following CTA blocks are automatically inserted into any post when it’s created.
Comments section
Similarly the comment submission box and comment threads section is automatically added to a post.
