Generate inline background-image CSS style based on provided URL.

backgroundImageStyle( 'https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png' );

// => Object { backgroundImage: 'url(https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png)' }

Extracts block specific CSS class name generated by Gutenberg editor. By default the block CSS class name is prefixed with wp-block keyword.

blockClassName( 'wp-block-prefix-spacer custom-class-name test-class-name' );

// => string 'wp-block-prefix-spacer'

Extracts selected block style slug from the provided block specific CSS class names.

blockStyleSlug( 'wp-block-prefix-spacer is-style-fancy test-class-name' );

// => string 'fancy'

Converts a string (e.g. 'yes' or 'no') to a bool.

stringToBoolean( 'yes' );

// => boolean true

Converts a bool to a 'yes' or 'no'.

booleanToString( true );

// => string 'yes'

Creates an object composed of the (nested) picked object properties.

deepPick( { id: 1, title: { rendered: 'Hello world!' } }, [ 'title.rendered' ] );

// => Object { title: 'Hello world!' }

Generate dim CSS class name based on the provided ratio or opacity.

dimRatioClassName( 30 );

// => string 'has-background-dim-30'

Iterates over elements of input and returns all entries from collection for which predicate returns truthy.

Notice that this function preserves the order of input in the result set and is thus most useful if a collection must be filtered in an order that is specified by another collection.

filterCollectionByPredicate( [ 1, 3 ], [ { id: 1, content: {} }, { id: 2, content: {} }, { id: 3, content: {} } ] );

// => Array [ { id: 1, content: {} }, { id: 3, content: {} } ]

Generates corresponding CSS based on the provided focal point picker values. Example focal point picker value: { x: 0.5, y: 0.1 } Corresponding CSS: background-position: 50% 10%;

focalPointStyle( { x: 0.67, y: 0.65 } );

// => string '67% 65%'

Gets a formatted version of the post content provided.

formattedContent( '<span class=\"amount\"><bdi><span class=\"currency\">&pound;<\/span>11.05<\/bdi><\/span>' );

// => string '<span class="amount"><bdi><span class="currency">£</span>11.05</bdi></span>'

Extracts email addresses from mailto href link.

getMailTo( 'mailto:info@example.com,info@test.com' );

// => Array '[ 'info@example.com', 'info@test.com' ]'

Converts a given hex-unicode into an Emoji icon.

hexToEmoji( '1F603' );

// => string 😃

Check if value is classified as an array object and is not empty.

ifArray( [] );

// => boolean false

Insert an item into an array at a specific index.

insertAtIndex( [ 'a', 'd', 'c' ], 'b', 1 );

// => Array [ 'a', 'b', 'c' ]

Determine whether the content is center positioned.

isPositionCenter( 'center' );

// => boolean true

Parses a JSON string, constructing the JavaScript value or object described by the string.

jsonify( '[ { "id": 1, "title": "sunt aut facere" ,{ "id": 2, "title": "qui est esse" } ]' );

// => Object [ { id: 1, title: 'sunt aut facere' }, { id: 2, title: 'qui est esse' } ]

Determines which element has the highest occurrence (mode) in the given array.

mode( [ 'pear', 'apple', 'orange', 'apple' ] );

// => string "apple"

Validate and normalize JSON string to an array.

const options = normalizeJsonify( '[\u0022Search Engine\u0022,\u0022Social Media\u0022]' );

// => Array [ 'Search Engine', 'Social Media' ]

Creates an object composed of the (nested) picked object properties.

pickRelevantMediaFiles( imageObject );

// => Object { alt: '', caption: '', id: "21", url: 'http://dev.local/wp-content/uploads/2022/09/image.jpg' }

Generates content-position CSS class name based on provided input.

positionToClassName( 'center right' );

// => string 'is-position-center-right'

A reducer is a function accepting the previous state and action as arguments and returns an updated state value.

const [ state, dispatch ] = useReducer( reducer, value );

Removes an item from the array at a specific index.

removeAtIndex( [ 'a', 'd', 'b' ], 1 );

// => Array [ 'a', 'b' ]

Sanitizes the slug value.

sanitizeSlug( 'k e__#y@234' );

// => string k-e__-y-234

Generates an array of objects to be passed to the SelectControl component. SelectControl allow users to select from a single-option menu. It functions as a wrapper around the browser’s native <select> element.

selectOptions( [ { id: 1, title: { rendered: 'sunt aut facere' } }, { id: 2, title: { rendered: 'qui est esse' } } ], { id: 'value', 'title.rendered': 'label' } );

// => Array [ { value: 1, label: 'Hello world!' }, { value: 2, label: 'qui est esse' } ]

Generate shortcode.

shortcode( 'prefix_teams', { posts: [1, 2], number: 2 } );

// => string '[prefix_teams posts="1,2" number="2"]'

Slugifies every string, even when it contains unicode! Properly strips all HTML tags including script and style.

slugify( 'unicode is ♥' );

// => string 'unicode-is-love'

Converts empty spaces to its corresponsding HTML character entity ( ). A non-breaking space is a space that will not break into a new line. Two words separated by a non-breaking space will stick together (not break into a new line). This method is handy when breaking the words might be disruptive.

spaceToNbsp( 'Hello World! This is an example.' );

// => string 'Hello World! This is an example.'

Converts a JavaScript object or value to a JSON string.

stringify( [ { id: 1, title: 'sunt aut facere' }, { id: 2, title: 'qui est esse' } ] );

// => string '[{"id":1,"title":"sunt aut facere"},{"id":2,"title":"qui est esse"}]'

Stringify an array of objects into a query string.

stringifyQuery( [ { product: '1885' }, { action: 'hook_name' } ] );

// => string 'product=1885&action=hook_name'