Search and Replace text within the Block Editor quickly and easily.

Download from WordPress plugin repository.

You can also get the latest version from any of our release tags.

This plugin brings the familiar Search and Replace functionality that PC users have grown accustomed to while using Microsoft Word and Google Docs to the Block Editor.

Now you can easily search and replace text right in the Block Editor. Its easy and does exactly what it says. You can also match the text case using the 'Match Case | Expression' toggle.

This custom hook (action) provides a way to fire some custom logic after a search & replace activity has happened. For e.g.

import { addAction } from '@wordpress/hooks';

addAction(
	'search-replace-for-block-editor.afterSearchReplace',
	'yourNamespace',
	( params ) => {
		const { replacements, searchInput, replaceInput, pattern, status, isCaseSensitive } = params;

		if ( status ) {
			alert( `${replacements} text items were replaced successfully!` );
		}
	}
);

Parameters

• params {Object} Parms.
  • replacements {number} Number of replacements (or searches if status is false).
  • searchInput {string} The search input string.
  • replaceInput {string} The replace input string.
  • pattern {RegExp} The regex expression pattern.
  • status {boolean} The context (true for replacements, false for searches).
  • isCaseSensitive {boolean} Is search & replace operation case sensitive.
  • isRegexExpression {boolean} Is search & replace operation regex based.
  • srfbe {Object} Localized values passed to JS.

This custom hook (filter) provides the ability to include the search and replace functionality for your custom block:

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.allowedBlocks',
	'yourBlocks',
	( allowedBlocks ) => {
		if ( allowedBlocks.indexOf( 'your/block' ) === -1 ) {
			allowedBlocks.push( 'your/block' );
		}

		return allowedBlocks;
	}
);

Parameters

• allowedBlocks {string[]} List of Allowed Blocks.

This custom hook (filter) provides the ability to prevent the loading of the Search & Replace app for specific post types like so:

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.excludedPostTypes',
	'yourNamespace',
	( excludedPostTypes ) => {
		if ( ! excludedPostTypes.includes( 'page' ) ) {
			excludedPostTypes.push( 'page' );
		}

		return excludedPostTypes;
	}
);

Parameters

• excludedPostTypes {string[]} List of Allowed Blocks.

This custom hook (filter) provides the ability to customise the default regex search pattern to a preferred pattern of choice. For e.g.

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.regexPattern',
	'yourNamespace',
	( regexPattern, rawPattern, { searchInput, isCaseSensitive } ) => {
		const firstName = searchInput.split( ' ' )[0] || '';

		return new RegExp(
			`(?<!<[^>]*)${ firstName }(?<![^>]*<)`,
			isCaseSensitive ? 'g' : 'gi'
		);
	}
);

Parameters

• regexPattern {RegExp} Regex search pattern.
• rawPattern {string} Raw string pattern to be searched.
• params {Object} Params containing searchInput, replaceInput, status, isCaseSensitive, isRegexExpression, & srfbe.

This custom hook (action) provides the ability to include search and replace functionality for custom blocks with custom properties:

import { addAction } from '@wordpress/hooks';

addAction(
	'search-replace-for-block-editor.replaceBlockAttribute',
	'yourBlock',
	( replaceBlockAttribute, name, args ) => {
		const prop = 'title';

		switch ( name ) {
			case 'namespace/your-block':
				replaceBlockAttribute( args, prop );
				break;
		}
	}
);

Parameters

• replaceBlockAttribute {Function} By default, this is a function that takes in an args and property as params.
• name {string} By default, this is a string containing the name of the block.
• args {Object} By default, this is an object containing the element, pattern, text and status.

This custom hook (filter) provides a way to modify how the search and replace functionality works for custom attributes for e.g. non-text attributes or objects.

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.handleAttributeReplacement',
	'yourNamespace',
	( oldAttr, args ) => {
		const { name, pattern, handleAttributeReplacement } = args;

		if ( 'your-custom-block' === name ) {
			const newAttr = oldAttr.replace(
				pattern,
				handleAttributeReplacement
			);

			return {
				newAttr,
				isChanged: oldAttr === newAttr,
			};
		}

		return {
			newAttr: oldAttr,
			isChanged: false,
		};
	}
);

Parameters

• oldAttr {any} Old Attribute.
• name {string} Name of Block.
• pattern {RegExp} Regular Expression pattern.
• handleAttributeReplacement {Function} Replace Callback.

This custom hook (filter) provides a way for users to specify their preferred keyboard shortcut option. For e.g to use the 'K' option on your keyboard, you could do like so:

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.keyboardShortcut',
	'yourShortcut',
	( shortcut ) => {
		return {
			character: 'k',
			...shortcut,
		};
	}
);

Parameters

• shortcut {Object} By default this is an object, containing modifier and character properties which together represent the following command CMD + SHIFT + F.

This custom hook (filter) provides a way for users to specify the case sensitivity of each Search & Replace activity. For e.g. to make it case sensitive, you can do like so:

import { addFilter } from '@wordpress/hooks';

addFilter(
	'search-replace-for-block-editor.caseSensitive',
	'yourCaseSensitivity',
	( isCaseSensitive ) => {
		return true;
	}
);

Parameters

• isCaseSensitive {bool} By default, this is a falsy value.

Contributions are welcome and will be fully credited. To contribute, please fork this repo and raise a PR (Pull Request) against the master branch.

You should have the following tools before proceeding to the next steps:

• Composer
• Yarn
• Docker

To enable you start development, please run:

yarn start

This should spin up a local WP env instance for you to work with at:

http://srbe.localhost:5187

You should now have a functioning local WP env to work with. To login to the wp-admin backend, please use admin for username & password for password.

Awesome! - Thanks for being interested in contributing your time and code to this project!