There’s no direct way to apply a custom class to a portion of text within a paragraph block without tweaking the HTML. The ‘highlight‘ feature you mentioned is close, but it doesn’t let you specify a custom class.
To add a custom class, you need to edit the HTML and manually add a custom class. If want to try it, here how you can do it.
In your paragraph, select the words or phrase you want to apply the class to. Next, click on the three dots in the block toolbar (it’s called the ‘More options‘ menu) and choose ‘Edit as HTML‘.
Now, in the HTML view, you’ll see your text. Wrap the words you want to style with a <span>
tag and add your class. Something like this: This is your example <span class="your-custom-class">paragraph</span> in to highlight.
Replace your-custom-class
with whatever class name you’ve defined in your CSS.
And that’s it! The words you wrapped in the span tag will now have your custom class applied. You can then style this class however you like in your theme’s CSS file.
Related Posts:
- Add To Gutenberg Sidebar
- How to detect the usage of Gutenberg
- Possible to use @wordpress/create-block with multiple blocks?
- What is the advantage of ‘register_block_type’ (the PHP function) when creating custom blocks?
- The Block Editor: Disable “Color settings” in the specific block
- Serialize custom block with InnerBlock
- What replaces wpColorPicker in Gutenberg?
- Gutenberg Range Control default from meta value
- Find all the places where a block type is used
- Why is the new Gutenberg editor so narrow, and how to make it wider?
- WP Blocks – Gutenberg – not rendering $content
- Why does the custom HTML block not preserve the HTML characters?
- Can’t get dynamic Gutenberg block to render on the frontend
- Gutenberg change/remove “Write your story” placeholder in custom blocks
- How do I listen for a change in an innerBlock child?
- How to enable Gutenberg Block Editor on taxonomy term pages?
- What’s the absolute minimum code that I need to create a dynamic block?
- Add custom attributes to link in Gutenberg
- How do I add a Gutenberg editor to a custom options page
- Custom Gutenberg Block: Excluding an allowed block from InnerBlock’s templateLock={‘all’}
- Determine if block has already been registered
- InnerBlocks breaks Flexbox and CSS Grid styles
- Is there a way to set the gutenberg color palette outside the theme?
- Gutenberg get withState variable in save function
- Gutenberg block JavaScript localisation on Polyglots does not work
- how define elements type in attributes type array of gutenberg blocks
- Convert GMT time to local time in Gutenberg Block Editor
- Restrict heading level in Gutenberg block `core/heading`
- How do I disable or hide the Layout block setting in the Group block
- Cleaning up after block dismount
- I cant see Block Editor with v5.7
- How to update block attribute after format is applied?
- How to add a class to the link of the default Gutenberg Button block?
- How to identify what templates are being loaded in a block-based theme [closed]
- Check if current page is using blocks (Gutenberg) or is legacy
- Add support for ‘alignnone’ to Gutenberg block align controls?
- How do I replace a audio gutenberg block to native audio wordpress
- Converting a theme to Gutenberg but some styles are missing in the front end [closed]
- How to generate block ID for use in post_content JSON data
- Where in a WordPress installation is the code for the default Gutenberg blocks located? [duplicate]
- Display selected image in the MediaPlaceholder component
- ACF and Gutenberg block, how to use blocks without ?
- Submitting a block to the .org repo: do I submit compiled code, or source code? [closed]
- Using 2 HTML blocks in Gutenberg to wrap content with div
- Add button to Block toolbar: toggleFormat is undefined
- In a block transform, how do I insert innerBlocks?
- What is the name of the user capability to read a reusable block?
- Gutenberg – Prevent Column Nesting in the Visual Editor
- How to remove whitespaces from source of posts created through WordPress Gutenberg editor
- Gutenberg blocks (block editor) with get_the_excerpt and get_the_content, using ACF
- Basic use of useState
- Gutenburg: Remove border of selected block
- Sort Posts by Sticky then by Latest date using the Latest Posts Block
- Unwanted white space next to inputs added within `PluginDocumentSettingPanel` using “
- apiFetch() returns infinite requests
- ToolbarDropdownMenu component missing from @wordpress/scripts package
- Gutenberg Custom Block Not Validating – Ideas?
- Gutenberg dynamic block render_callback gives null for $post
- Editing HTML structure of Gutenberg layout recent post?
- How to add srcdoc attribute to YouTube oEmbed in Gutenberg oEmbed Block
- Pass props / function to InnerBlocks
- Possible to add the title of a custom gutenberg block to the edit screen?
- Post Format Link using Guttenberg
- How do I hide the UI for specific Gutenberg Blocks?
- Creating a Dynamic InnerBlock that updates depending on state
- Resizing images on page
- Error After Installing Gutenberg plugin (caused by attempt to stop WP from stripping out tags)
- Block validation failed – escaped HTML in content save
- Add media dynamically on gutenberg block
- FormTokenField passing objects to value property
- Trying to save an object into post meta with wp.data.dispatch(‘core/editor’).editpost
- Core Block Columns Attributes for Innerblocks Template
- WordPress – Increase number of posts in “Add Link” dialogue
- How to condition appearance of a gutenberg block via wp_is_mobile
- Can I strip WordPress classes from blocks?
- How to list all registered blocks
- How to automatically reload style variant .json?
- Strange behavior of blocks in the editor
- Block editor not loading with rest api custom code
- In Full Site Editing, how do I get the templates I created to appear in the site editor when populating a new page?
- Block validation: Block validation failed – Custom WordPress Gutenberg Block Fails In Editor when reloaded
- How can I prevent a user from selecting exactly one of two (not both or none) categories on a post?
- How to add a tooltip for MediaReplaceFlow from @wordpress/block-editor
- Star Rating block is not present from list of blocks or from / shortcut
- Gutenberg: is is possible to get the current permalink of the post?
- WordPress custom Block showing error in Posts editor but working in Pages editor
- Implementation of React-Datepicker component with Gutenberg in WordPress
- Innerblocks isn’t adding new blocks when template changes
- What happened to the Menu Order option for posts (for ordering posts by Menu Order in Block Editor (Gutenberg)?
- How to prevent the core/group block from being ungrouped?
- Get FontSize from the InspectorControls Standard Control (typography.fontSize)
- Splide carousel block – innerBlocks not selectable after innerBlocks change
- Translating Gutenberg Block – JSON Translation Files Not Loading
- ServerSideRender crashes block in editor
- TT3 make img in 2nd column same height as content of 1st column
- How to get Gutenberg pattern sync status for custom pattern listings table?
- Add/remove capability for blocks theme nav menu
- what is the function of the view.js file?
- What is the correct way to send Markdown code via the API?
- How do I edit a block pattern of mine?