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-sixa-spacer custom-class-name test-class-name' );

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

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

blockStyleSlug( 'wp-block-sixa-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'

Utility to make WordPress REST API requests. It's a wrapper around window.fetch.

fetchRequest( 'https://wptest.io/demo/wp-json/wp/v2/posts' ).then( ( data ) => console.log( data ) );

// => Promise 'https://wptest.io/demo/wp-json/wp/v2/posts'

Creates a function that performs a partial deep comparison between the id of a given object to the passed value. Returns true if the object value is equivalent, otherwise false.

This function is used as the default predicate for filterCollectionByValues.

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

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

filterCollectionByValues( [ 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 😃

Insert an item into an array at a specific index.

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

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

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

isNonEmptyArray( [] );

// => boolean false

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' } ]

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

positionToClassName( 'center right' );

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

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

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

// => string "apple"

Removes an item from the array at a specific index.

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

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

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( 'sixa_teams', { posts: [1, 2], number: 2 } );

// => string '[sixa_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.'

Stringify an array of objects into a query string.

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

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

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"}]'