Skip to content

Latest commit

 

History

History

README.md

Custom Text Formatting with WordPress Format API

This example demonstrates how to extend WordPress's rich text editing capabilities by implementing custom text formats using the Format API. Learn how to add custom formatting options to the block editor's toolbar, enabling users to apply special text styling and markup.

Key concepts covered:

  • Format API implementation
  • Custom toolbar button creation
  • Rich text formatting controls
  • Text format registration
  • Format application and removal

Format API snapshot

Example Description Tags Download .zip Live Demo
Format API Demonstrates how to use the WordPress Format API to add custom text formatting options to the editor. no-block 📦

Understanding the Example Code

Format Implementation

  1. Format Registration

    • Register format with registerFormatType
    • Define format name and tag
    • Specify format attributes
    • Configure toolbar controls
  2. Toolbar Integration

    • Custom toolbar button component
    • Format toggle functionality
    • Active state management
    • Icon and label configuration

Technical Components

Format Definition

```javascript
registerFormatType( 'block-development-examples/format', {
	title: 'Custom Format',
	tagName: 'span',
	className: 'custom-format',
	edit: ( { isActive, value, onChange } ) => {
		// Toolbar button implementation
	},
} );
```

Related Resources


Note Check the Start Guide for local development with the examples