In this post, I’ll be going through
Text Blocks [ Block Name | Block Type | CSS Class ]
A Short Description goes here.
Paragraph
core/paragraph .wp-block-paragraph
Text gradient support.
Text Animation
Carved Text
Heading
core/heading .wp-block-heading
Text gradient support.
List
core/list .wp-block-list
Right icon circular background.
Quote
core/quote .wp-block-quote
Quote icons block variation.
Classic
Code
core/code .wp-block-code
Code Title (Code Type Identifier) + Code snippet copy button.
VS Code like feel (Like numbers on left side.
Fixed height code + Expand
Details
Can we make heading with different background color and summary with another, more light colour.
Automatic closing.
Preformatted
core/preformatted .wp-block-preformatted
Pullquote
core/pullquote .wp-block-pullquote
Table
Table core/table .wp-block-table
Making it mobile Responsive
More control on setting column widths.
Verse
Verse core/verse .wp-block-verse
Media Blocks
A short description goes here.
Image
core/image .wp-block-image
Gallery
core/gallery .wp-block-gallery
Audio
core/audio .wp-block-audio
Cover
core/cover .wp-block-cover
File
core/file .wp-block-file
Media & Text
core/media-text .wp-block-media-text
Video
core/video .wp-block-video
Buttons (new 5.4)
Buttons core/buttons .wp-block-buttons
Button core/button .wp-block-button
Button Icon Support
GPT: I want to customise my WordPress Button Blocks Hover state with green background and white text color. Please tell me, where I can put code for this in my child theme, additional css or any other place along with code. Also tell me how and from where I can remove existing code for hover state.
Sticky Button (Being sticked at the button of the page or with right & bottom padding.)
I.e. Email us button with an icon.
Button (deprecated)
Columns
Columns core/columns .wp-block-columns
Column core/column .wp-block-column
Grid
Group
Group core/group .wp-block-group
Row
Row core/row .wp-block-row
Stack
Stack core/stack .wp-block-stack
Parallax Effect using Stack + Position: sticky;
→ Cards ( Services | Features)
PPT on WordPress Page
Text Columns (deprecated)
More
Page Break
Separator
Separator core/separator .wp-block-separator
Different Styles Variation
Spacer
Spacer core/spacer .wp-block-spacer
Horizontal Spacer?
Group(with gradient and no padding>spacer with height 2px.
Widgets Blocks
A short description goes here.
Archives
Archives core/archives .wp-block-archives
Calendar (new in 5.3)
Calendar core/calendar .wp-block-calendar
Categories List
Categories core/categories .wp-block-categories
Custom HTML
Latest Comments
Latest Comments core/latest-comments .wp-block-latest-comments
Latest Posts
Latest Posts core/latest-posts .wp-block-latest-posts
Page List (new in 5.8)
RSS (new in 5.3)
RSS core/rss .wp-block-rss
Search (new in 5.3)
Search core/search .wp-block-search
Shortcode
Shortcode core/shortcode .wp-block-shortcode
Social Icons (new in 5.4)
Social Icons core/social-links .wp-block-social-links
Tag Cloud (new in 5.3)
Tag Cloud core/tag-cloud .wp-block-tag-cloud
Theme Blocks
A short description goes here.
Navigation (new in 5.9)
Navigation core/navigation .wp-block-navigation
I want to add text “Menu” for my WordPress Hamburger Menu and “Close” when clicked to open, applicable for Mobile Menu
Cant we achieve this with only additional css, targeting wp-block-navigation__responsive-container only
I don’t want to limit this for screen readers only. It should be visible normally.
Just changing hamburger icon to custom png or svg with an clock-wise rotational animation
Custom Link
Home Link
Submenu
Log in & Log-out
Background Colour
Radius
Site Logo (new in 5.8)
Site Logo core/site-logo .wp-block-site-logo
Site Title (new in 5.8)
Site Title core/site-title .wp-block-site-title
Site Tagline (new in 5.8)
Site Tagline core/site-tagline .wp-block-site-tagline
Query Loop(new in 5.8)
Query core/query .wp-block-query
Post Template
Post Template core/post-template .wp-block-post-template
Post Title (new in 5.8)
Post Title core/post-title .wp-block-post-title
Post Excerpt (new in 5.8)
Post Excerpt core/post-excerpt .wp-block-post-excerpt
Post Featured Image (new in 5.8)
Post Featured Image core/post-featured-image .wp-block-post-featured-image
Post Content (new in 5.8)
Post Content core/post-content .wp-block-post-content
Read More core/read-more .wp-block-read-more
Post Author
Post Author core/post-author .wp-block-post-author
Post Author Biography
Checkout Author section on this blog: https://blog.tbhcreative.com/user-friendly-link-state-design/
author-bio {
margin: 60px 0 100px 60px;
padding: 60px 60px 0 60px;
border: 2px solid #ffc609;
}
Author Image (Margin: -20px 40px -40 -100)
Wrapper under a column:
Post Author Name
Post Date (new in 5.8)
Post Date core/post-date .wp-block-post-date
Post Modified Date
Post Categories (new in 5.8)
Post Tags (new in 5.8)
Pagination
Posts List
Avatar
Post Navigation Link
Next Post
Previous post
Read More (new in 5.9)
Comments (new in 6.1)
Comments core/comments .wp-block-comments
Comments Title
Comment Template
Comment Author Name
Comment Date
Comment Content
Comment Reply Link
Comment Edit Link
Comment Pagination
Post Comments Form
Post Comment (deprecated)
Login/out (new in 5.8)
Term Description (new in 5.9)
Archive Title (new in 5.9)
Search Results Title (new in 6.1)
Template Part (new in 5.9)
Template Part core/template-part .wp-block-template-part
Embed Blocks
Short Description goes here.
Embed
Embed (Generic) core/embed .wp-block-embed
Twitter core/embed .wp-block-embed-twitter
YouTube
YouTube core/embed .wp-block-embed-youtube
WordPress
SoundCloud
Spotify
Flickr
Vimeo
Vimeo core/embed .wp-block-embed-vimeo
Animoto
CloudUp
Crowdsignal
Dailymotion
Imgur
Issuu
Kickstarter
Mixcloud
Pocket Casts
ReverbNation
Screencast
Scribd
Slideshare
SmugMug
Speaker Deck
TikTok (new in 5.4)
TED
Tumblr
VideoPress
WordPress.tv
Amazon Kindle
Wolfram
Facebook core/embed .wp-block-embed-facebook
Instagram core/embed .wp-block-embed-instagram
Learn more about the Embeds in this support article: Embeds.