Template: Sticky

This is a sticky post.

There are a few things to verify:

  • The sticky post should be distinctly recognizable in some way in comparison to normal posts. You can style the .sticky class if you are using the post_class() function to generate your post classes, which is a best practice.
  • They should show at the very top of the blog index page, even though they could be several posts back chronologically.
  • They should still show up again in their chronologically correct postion in time, but without the sticky indicator.
  • If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.

WP 6.1 Font size scale

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

Small H2 Heading

Medium H2 Heading

Large H2 Heading

Extra Large H2 Heading

Small paragraph

Medium paragraph

Large paragraph

Extra Large paragraph

WP 6.1 spacing presets

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

On this page, some group blocks have border or background color set to increase visibility.

This group has a no background color and no additional spacing set.

This group has a background color but no additional spacing set.

This group has a 1px border and padding preset 1

This group has padding preset 1

This group has a 1px border and padding preset 2

This group has a background color and padding preset 3

This group has a background color and padding preset 4

This group has a background color and padding preset 5

This group has a background color and padding preset 6

This group has a background color and padding preset 7

This group has padding preset 7

This group has a background color and margin preset 1

This group has a background color and margin preset 2

This group has a background color and margin preset 3

This group has a background color and margin preset 4

This group has a background color and margin preset 5

This group has a background color and margin preset 6

This group has a background color and margin preset 7

This group has a 1px border, padding preset 4 and margin preset 4

This group has padding preset 4 and margin preset 4

WP 6.1 Theme block category

Wind Farm

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

Navigation block with page list:

Site logo:

Site title:

Aaron

Tagline block:

Just another CampusPress Testing Network Sites site

Query loop “Title & Date” variation:

  • Template: Sticky

  • Template: Excerpt (Generated)

  • Template: Paginated

Query loop “Title & Excerpt” variation:

  • Template: Sticky

    This is a sticky post. There are a few things to verify: The sticky post should be distinctly recognizable in some way in comparison to normal posts. You can style the .sticky class if you are using the post_class() function to generate your post classes, which is a best practice. They should show at the……

  • Template: Featured Image (Horizontal)

    This post should display a featured image, if the theme supports it. Non-square images can provide some unique styling issues. This post tests a horizontal featured image.

  • Template: More Tag

    This content is before the more tag. Right after this sentence should be a “continue reading” button of some sort on list pages of themes that show full content. It won’t show on single pages or on themes showing excerpts.

  • Template: Excerpt (Defined)

    This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages. It can be longer than the automatically generated excerpts, and can have HTML tags. Continue Reading Template: Excerpt (Defined)

Query loop “Title, Date & Excerpt” variation:

  • Template: Sticky

    This is a sticky post. There are a few things to verify: The sticky post should be distinctly recognizable in some way in comparison to normal posts. You can style the .sticky class if you are using the post_class() function to generate your post classes, which is a best practice. They should show at the……

  • WP 6.1 Font size scale

    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. Small H2 Heading Medium H2 Heading Large H2 Heading Extra Large H2 Heading Small paragraph Medium paragraph Large paragraph Extra Large paragraph

  • WP 6.1 spacing presets

    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. On this page, some group blocks have border or background color set to increase visibility. This group has a no background color and no additional spacing set. This group has a background color but no additional spacing set. This group has a……

  • WP 6.1 Theme block category

    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. Navigation block with page list: Site logo: Site title: Tagline block: Query loop “Title & Date” variation: Query loop “Title & Excerpt” variation: Query loop “Title, Date & Excerpt” variation: Query loop “Image, Date & Title” variation: Avatar block: Post title block:……

Query loop “Image, Date & Title” variation:

  • Template: Sticky

  • Post Format: Gallery

  • Post Format: Gallery (Tiled)

  • Post Format: Image

Avatar block:

Post title block:

WP 6.1 Theme block category

Post excerpt:

This test post was generated using the block theme Emptytheme in WordPress 6.1.1. Navigation block with page list: Site logo: Site title: Tagline block: Query loop “Title & Date” variation: Query loop “Title & Excerpt” variation: Query loop “Title, Date & Excerpt” variation: Query loop “Image, Date & Title” variation: Avatar block: Post title block:……

Post featured image:

Wind Farm

Post author:

Post date:

Categories:

,

Tags:

Next post & previous post:

Read More:

Read more: WP 6.1 Theme block category

Comments block:

Login/out:

Author biography block:

Term description, archive title, search results title can not be shown on single posts.

WP 6.1 Widgets block category

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

Archives block:

November 2024
M T W T F S S
 123
45678910
11121314151617
18192021222324
252627282930  

Categories list:

Custom HTML:

test

Latest comments:

  1. Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in…

Latest posts:

Page list block:

RSS block:

Shortcode block:

Social links:

Tag cloud:

8BIT alignment captions categories chat Codex Columns comments content περιεχόμενο content περιεχόμενο css edge case embeds excerpt featured image formatting gallery html image jetpack layout link markup post Post Formats quote Sample shortcode standard status sticky Success Swagger Tags template test tag tiled title trackbacks twitter Unseen video videopress WordPress wordpress.tv

WP 6.1 Design category blocks

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

One single column inside a columns block.

Column one. The background color is on the single column.

Column two

Column one. The background color is on the parent columns block.

Column two

Column three

Group with paragraph inside. Below are the group block variations:

Row

Row

Stack

Stack

More block:

Continue reading WP 6.1 Design category blocks

WP 6.1 Media category blocks

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

Image block:

dsc20050727_091048_222

Gallery:

Audio:

Cover:

Wind Farm

Write title…

Fixed background

Repeated background

Fixed and Repeated background

dsc20050727_091048_222

Duotone

Rain Ripples

Top left

Rain Ripples

Top center

Rain Ripples

Top right

Rain Ripples

Center left

Rain Ripples

Center right

Rain Ripples

Bottom left

Rain Ripples

Bottom center

Rain Ripples

Bottom right

Boardwalk

This is the Media & Text block with an image on the left.

Image Alignment 1200x4002

This is the Media & Text block with a cropped image on the left

This is the Media & Text block with a video the right.

WP 6.1 Text category blocks

This test post was generated using the block theme Emptytheme in WordPress 6.1.1.

Paragraph

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
  • List
  • List
  1. List
  2. List
  1. List
    • List

Quote block

citation

classic block

code block
Preformatted block

Pull quote

Citation
table celltable cell two
table cell threetable cell four
Table caption
header label oneheader label two
table celltable cell two
table cell threetable cell four
footer label onefooter label two
Table caption
Verse block

Hello world!

Welcome to your brand new blog at CampusPress Testing Network Sites.

To get started, simply log in, edit or delete this post and check out all the other options available to you.

Block: Image

Welcome to image alignment! If you recognize this post, it is because these are blocks that have been converted from the classic Markup: Image Alignment post. The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. Be sure to try it in RTL mode. Left should stay left and right should stay right for both reading directions.

On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. If the theme has added support for align wide, images can also be wide and full width. Be sure to test this page in RTL mode.

In addition, they also get the options of the image dimensions 25%, 50%, 75%, 100% or a set width and height.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300
Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

Imagine that we would find a use for the extra wide image! This image has the wide width alignment:

Image Alignment 1200x4002

Can we go bigger? This image has the full width alignment:

Image Alignment 1200x4002

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! One last thing: The last item in this post’s content is a thumbnail floated right. Make sure any elements after the content are clearing properly.

Block: Button

Button blocks are not semantically buttons, but links inside a styled div. 

If you do not add a link, a link tag without an anchor will be used.

Check to make sure that the text wraps correctly when the button has more than one line of text, and when it is extra long.

Buttons have three styles: 

If the theme has a custom color palette, test that background color and text color settings work correctly. 

Now lets test how buttons display together with large texts.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio.

Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna.

Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.