WordPress Block Editor – Block Settings: Advanced
This tutorial is part of our series on using common block settings in the WordPress Block Editor Settings Section.
In this tutorial, you will learn how to use a block’s advanced settings.
For a complete understanding of how to use the WordPress Block Editor, see the other tutorials in this series:
- WordPress Block Editor: Block Settings
- How To Use The WordPress Block Settings Section
- How To Use WordPress Blocks
***
Block Settings – Advanced
Many types of blocks allow you to use advanced settings and options.
Note: A block’s Advanced settings may include additional options depending on which blocks you select and what plugins and themes are installed on your site.
Note: Block types that support advanced properties must be selected in the content editor area to display the Advanced settings in the Block Settings panel.
If you need help using block settings, see this tutorial: WordPress Block Editor: Block Settings
View Advanced Settings
To access the Advanced settings for a block that supports advanced properties:
- Select the block.
- Select the Block settings panel to view the Advanced settings option.
- Enter information into the advanced property fields (see below).
Advanced Properties
You can edit and customize the following settings and options in blocks that support advanced settings:
Title Attribute
The title attribute can be used to add text for a tooltip, an image credit or a description of the image, etc.
Note: many devices and browsers do not display this text. To learn more, go here: The Title Attribute.
HTML Anchor
This lets you create a unique web address to send users directly to this block using a unique jump link URL.
Using HTML Anchors
To create a Jump Link, enter a word or two (no spaces allowed, but hyphens, underscores, colons, and periods are ok) into the HTML anchor field in the Advanced block settings section to create a unique web address (e.g. useful-heading).
Next, select the element in your content that you want to add a jump link to and enter your HTML anchor text preceded by a hash symbol (#).
Press Enter to add this link, then save and publish/update your post or page.
Users can now go directly to the section of your content (i.e. the block) tagged with the HTML anchor by either:
- Clicking on the internal link in the content, or
- Entering the link’s unique URL in their web browser (e.g. https://yourdomain.com/page-slug/#useful-heading).
Additional CSS Class(es)
This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit.
Note: This requires having knowledge of CSS (Cascading Style Sheets).
WordPress Block Editor Advanced Settings – FAQs
Here are frequently asked questions about WordPress Block Editor Advanced settings:
What are Advanced Settings in the WordPress Block Editor?
Advanced Settings in the WordPress Block Editor provide additional customization options for blocks beyond the basic settings. They allow users to fine-tune various aspects of blocks to meet their specific design and functionality needs.
How do I access Advanced Settings for a block?
To access Advanced Settings for a block, select the block you want to customize in the Block Editor. Then, click on the block’s settings menu (typically represented by three dots or a gear icon) and choose “Advanced” or “Advanced Settings” from the dropdown menu.
What options are available in Advanced Settings?
Advanced Settings offer a range of options depending on the type of block. Common options include additional CSS classes, HTML anchor links, block visibility settings, and block-specific attributes or settings.
Can I add custom CSS classes to blocks using Advanced Settings?
Yes, Advanced Settings allow users to add custom CSS classes to blocks. This enables users to apply custom styling or functionality to specific blocks using CSS rules defined in their theme or custom CSS.
What is the purpose of HTML anchor links in Advanced Settings?
HTML anchor links in Advanced Settings allow users to create anchor points within blocks. This enables users to link to specific sections within a page or post, improving navigation and user experience.
Are Advanced Settings available for all blocks in the Block Editor?
Advanced Settings availability may vary depending on the block type and the WordPress theme or plugins installed. However, many blocks offer Advanced Settings to provide users with enhanced customization options.
Additional Block Settings
Click on a tutorial from the list below to learn about using other common block settings in the WordPress block editor.
***
For more tutorials in this series, go here:
- The WordPress Block Editor (Gutenberg)
- How To Use WordPress Blocks
- How To Use The WordPress Block Editing Toolbar
- How To Use The WordPress Block Editor Content Area
- How To Use The WordPress Block Editor Settings Section
- WordPress Block Editor: Block Settings
***
Updated: July 5th, 2024