@wordpress/block-library 8.10.0 → 8.12.0

package/src/search/index.php

@@ -29,11 +29,11 @@ function render_block_core_search( $attributes ) {
 	$classnames          = classnames_for_block_core_search( $attributes );
 	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
 	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input          = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
-	$input_markup        = '';
-	$button_markup       = '';
+	$button_behavior     = ( ! empty( $attributes['buttonBehavior'] ) ) ? $attributes['buttonBehavior'] : 'default';
+	$button              = '';
 	$query_params_markup = '';
 	$inline_styles       = styles_for_block_core_search( $attributes );
 	$color_classes       = get_color_classes_for_block_core_search( $attributes );
@@ -44,42 +44,37 @@ function render_block_core_search( $attributes ) {
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
-
-	$label_markup = sprintf(
-		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		esc_attr( $input_id ),
-		$label_inner_html
-	);
-	if ( $show_label && ! empty( $attributes['label'] ) ) {
-		$label_classes = array( 'wp-block-search__label' );
-		if ( ! empty( $typography_classes ) ) {
-			$label_classes[] = $typography_classes;
+	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
+	if ( $label->next_tag() ) {
+		$label->set_attribute( 'for', $input_id );
+		$label->add_class( 'wp-block-search__label' );
+		if ( $show_label && ! empty( $attributes['label'] ) ) {
+			if ( ! empty( $typography_classes ) ) {
+				$label->add_class( $typography_classes );
+			}
+		} else {
+			$label->add_class( 'screen-reader-text' );
 		}
-		$label_markup = sprintf(
-			'<label for="%1$s" class="%2$s" %3$s>%4$s</label>',
-			esc_attr( $input_id ),
-			esc_attr( implode( ' ', $label_classes ) ),
-			$inline_styles['label'],
-			$label_inner_html
-		);
 	}
 
-	if ( $show_input ) {
-		$input_classes = array( 'wp-block-search__input' );
-		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
-			$input_classes[] = $border_color_classes;
-		}
-		if ( ! empty( $typography_classes ) ) {
-			$input_classes[] = $typography_classes;
+	$input         = new WP_HTML_Tag_Processor( sprintf( '<input type="search" name="s" required %s/>', $inline_styles['input'] ) );
+	$input_classes = array( 'wp-block-search__input' );
+	if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+		$input_classes[] = $border_color_classes;
+	}
+	if ( ! empty( $typography_classes ) ) {
+		$input_classes[] = $typography_classes;
+	}
+	if ( $input->next_tag() ) {
+		$input->add_class( implode( ' ', $input_classes ) );
+		$input->set_attribute( 'id', $input_id );
+		$input->set_attribute( 'value', get_search_query() );
+		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
+		if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) {
+			$input->set_attribute( 'aria-hidden', 'true' );
+			$input->set_attribute( 'tabindex', '-1' );
+			wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) );
 		}
-		$input_markup = sprintf(
-			'<input type="search" id="%s" class="%s" name="s" value="%s" placeholder="%s" %s required />',
-			$input_id,
-			esc_attr( implode( ' ', $input_classes ) ),
-			get_search_query(),
-			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['input']
-		);
 	}
 
 	if ( count( $query_params ) > 0 ) {
@@ -101,7 +96,6 @@ function render_block_core_search( $attributes ) {
 		if ( ! empty( $typography_classes ) ) {
 			$button_classes[] = $typography_classes;
 		}
-		$aria_label = '';
 
 		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
 			$button_classes[] = $border_color_classes;
@@ -111,9 +105,7 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes[] = 'has-icon';
-
+			$button_classes[]       = 'has-icon';
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
@@ -122,13 +114,18 @@ function render_block_core_search( $attributes ) {
 
 		// Include the button element class.
 		$button_classes[] = wp_theme_get_element_class_name( 'button' );
-		$button_markup    = sprintf(
-			'<button type="submit" class="%s" %s %s>%s</button>',
-			esc_attr( implode( ' ', $button_classes ) ),
-			$inline_styles['button'],
-			$aria_label,
-			$button_internal_markup
-		);
+		$button           = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
+
+		if ( $button->next_tag() ) {
+			$button->add_class( implode( ' ', $button_classes ) );
+			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
+				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
+				$button->set_attribute( 'aria-expanded', 'false' );
+			} else {
+				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
+			}
+		}
 	}
 
 	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
@@ -136,7 +133,7 @@ function render_block_core_search( $attributes ) {
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
 		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
-		$input_markup . $query_params_markup . $button_markup
+		$input . $query_params_markup . $button
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
@@ -146,7 +143,7 @@ function render_block_core_search( $attributes ) {
 		'<form role="search" method="get" action="%s" %s>%s</form>',
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
-		$label_markup . $field_markup
+		$label . $field_markup
 	);
 }
 
@@ -188,6 +185,9 @@ function classnames_for_block_core_search( $attributes ) {
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
 			$classnames[] = 'wp-block-search__button-only';
+			if ( ! empty( $attributes['buttonBehavior'] ) && 'expand-searchfield' === $attributes['buttonBehavior'] ) {
+				$classnames[] = 'wp-block-search__button-behavior-expand wp-block-search__searchfield-hidden';
+			}
 		}
 	}
 
@@ -294,10 +294,9 @@ function styles_for_block_core_search( $attributes ) {
 	$show_label       = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel'];
 
 	// Add width styles.
-	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
-	$button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
+	$has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
 
-	if ( $has_width && ! $button_only ) {
+	if ( $has_width ) {
 		$wrapper_styles[] = sprintf(
 			'width: %d%s;',
 			esc_attr( $attributes['width'] ),

package/src/search/style.scss

@@ -81,3 +81,42 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
 	margin: auto;
 }
+
+.wp-block-search__button-behavior-expand {
+	.wp-block-search__inside-wrapper {
+		transition-property: width;
+		min-width: 0 !important;
+	}
+
+	.wp-block-search__input {
+		transition-duration: 300ms;
+		flex-basis: 100%;
+	}
+
+	// !important here to override inline styles on button only deselected view.
+	&.wp-block-search__searchfield-hidden {
+		overflow: hidden;
+
+		.wp-block-search__inside-wrapper {
+			overflow: hidden;
+		}
+
+		.wp-block-search__input {
+			width: 0 !important;
+			min-width: 0 !important;
+			padding-left: 0 !important;
+			padding-right: 0 !important;
+			border-left-width: 0 !important;
+			border-right-width: 0 !important;
+			flex-grow: 0;
+			margin: 0;
+			flex-basis: 0;
+		}
+	}
+}
+
+.wp-block[data-align="right"] .wp-block-search__button-behavior-expand {
+	.wp-block-search__inside-wrapper {
+		float: right;
+	}
+}

package/src/search/view.js

@@ -0,0 +1,68 @@
+window.addEventListener( 'DOMContentLoaded', () => {
+	const hiddenClass = 'wp-block-search__searchfield-hidden';
+
+	Array.from(
+		document.getElementsByClassName(
+			'wp-block-search__button-behavior-expand'
+		)
+	).forEach( ( block ) => {
+		const searchField = block.querySelector( '.wp-block-search__input' );
+		const searchButton = block.querySelector( '.wp-block-search__button' );
+		const searchLabel = block.querySelector( '.wp-block-search__label' );
+		const ariaLabel = searchButton.getAttribute( 'aria-label' );
+		const id = searchField.getAttribute( 'id' );
+
+		const toggleSearchField = ( showSearchField ) => {
+			if ( showSearchField ) {
+				searchField.removeAttribute( 'aria-hidden' );
+				searchField.removeAttribute( 'tabindex' );
+				searchButton.removeAttribute( 'aria-expanded' );
+				searchButton.removeAttribute( 'aria-controls' );
+				searchButton.setAttribute( 'type', 'submit' );
+				searchButton.setAttribute( 'aria-label', 'Submit Search' );
+
+				return block.classList.remove( hiddenClass );
+			}
+
+			searchButton.removeAttribute( 'type' );
+			searchField.setAttribute( 'aria-hidden', 'true' );
+			searchField.setAttribute( 'tabindex', '-1' );
+			searchButton.setAttribute( 'aria-expanded', 'false' );
+			searchButton.setAttribute( 'aria-controls', id );
+			searchButton.setAttribute( 'aria-label', ariaLabel );
+			return block.classList.add( hiddenClass );
+		};
+
+		const hideSearchField = ( e ) => {
+			if ( ! e.target.closest( '.wp-block-search' ) ) {
+				return toggleSearchField( false );
+			}
+
+			if ( e.key === 'Escape' ) {
+				searchButton.focus();
+				return toggleSearchField( false );
+			}
+		};
+
+		const handleButtonClick = ( e ) => {
+			if ( block.classList.contains( hiddenClass ) ) {
+				e.preventDefault();
+				searchField.focus();
+				toggleSearchField( true );
+			}
+		};
+
+		searchButton.removeAttribute( 'type' );
+		searchField.addEventListener( 'keydown', ( e ) => {
+			hideSearchField( e );
+		} );
+		searchButton.addEventListener( 'click', handleButtonClick );
+		searchButton.addEventListener( 'keydown', ( e ) => {
+			hideSearchField( e );
+		} );
+		if ( searchLabel ) {
+			searchLabel.addEventListener( 'click', handleButtonClick );
+		}
+		document.body.addEventListener( 'click', hideSearchField );
+	} );
+} );

package/src/separator/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/separator",
 	"title": "Separator",
 	"category": "design",

package/src/shortcode/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/shortcode",
 	"title": "Shortcode",
 	"category": "widgets",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"text": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/site-logo/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-logo",
 	"title": "Site Logo",
 	"category": "theme",

package/src/site-logo/index.php

@@ -13,7 +13,7 @@
  * @return string The render.
  */
 function render_block_core_site_logo( $attributes ) {
-	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
+	$adjust_width_height_filter = static function ( $image ) use ( $attributes ) {
 		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}

package/src/site-tagline/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",

package/src/site-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-title",
 	"title": "Site Title",
 	"category": "theme",

package/src/social-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-link",
 	"title": "Social Icon",
 	"category": "widgets",
@@ -24,7 +24,9 @@
 	"usesContext": [
 		"openInNewTab",
 		"showLabels",
+		"iconColor",
 		"iconColorValue",
+		"iconBackgroundColor",
 		"iconBackgroundColorValue"
 	],
 	"supports": {

package/src/social-link/edit.js

@@ -6,11 +6,15 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+
 import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
@@ -32,46 +36,75 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
-} ) => (
-	<URLPopover anchor={ popoverAnchor } onClose={ () => setPopover( false ) }>
-		<form
-			className="block-editor-url-popover__link-editor"
-			onSubmit={ ( event ) => {
-				event.preventDefault();
-				setPopover( false );
-			} }
+	clientId,
+} ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
+	return (
+		<URLPopover
+			anchor={ popoverAnchor }
+			onClose={ () => setPopover( false ) }
 		>
-			<div className="block-editor-url-input">
-				<URLInput
-					__nextHasNoMarginBottom
-					value={ url }
-					onChange={ ( nextURL ) =>
-						setAttributes( { url: nextURL } )
-					}
-					placeholder={ __( 'Enter address' ) }
-					disableSuggestions={ true }
+			<form
+				className="block-editor-url-popover__link-editor"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					setPopover( false );
+				} }
+			>
+				<div className="block-editor-url-input">
+					<URLInput
+						__nextHasNoMarginBottom
+						value={ url }
+						onChange={ ( nextURL ) =>
+							setAttributes( { url: nextURL } )
+						}
+						placeholder={ __( 'Enter address' ) }
+						disableSuggestions={ true }
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
+					/>
+				</div>
+				<Button
+					icon={ keyboardReturn }
+					label={ __( 'Apply' ) }
+					type="submit"
 				/>
-			</div>
-			<Button
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
-			/>
-		</form>
-	</URLPopover>
-);
+			</form>
+		</URLPopover>
+	);
+};
 
 const SocialLinkEdit = ( {
 	attributes,
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
-	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
+	const {
+		showLabels,
+		iconColor,
+		iconColorValue,
+		iconBackgroundColor,
+		iconBackgroundColorValue,
+	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
+		[ `has-${ iconColor }-color` ]: iconColor,
+		[ `has-${ iconBackgroundColor }-background-color` ]:
+			iconBackgroundColor,
 	} );
 
 	// Use internal state instead of a ref to make sure that the component
@@ -143,6 +176,7 @@ const SocialLinkEdit = ( {
 							setAttributes={ setAttributes }
 							setPopover={ setPopover }
 							popoverAnchor={ popoverAnchor }
+							clientId={ clientId }
 						/>
 					) }
 				</Button>

package/src/social-link/index.php

@@ -47,7 +47,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service,
+			'class' => 'wp-social-link wp-social-link-' . $service . block_core_social_link_get_color_classes( $block->context ),
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);
@@ -337,3 +337,24 @@ function block_core_social_link_get_color_styles( $context ) {
 
 	return implode( '', $styles );
 }
+
+/**
+ * Returns CSS classes for icon and icon background colors.
+ *
+ * @param array $context Block context passed to Social Sharing Link.
+ *
+ * @return string CSS classes for link's icon and background colors.
+ */
+function block_core_social_link_get_color_classes( $context ) {
+	$classes = array();
+
+	if ( array_key_exists( 'iconColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconColor'] . '-color';
+	}
+
+	if ( array_key_exists( 'iconBackgroundColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconBackgroundColor'] . '-background-color';
+	}
+
+	return ' ' . implode( ' ', $classes );
+}

package/src/social-links/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-links",
 	"title": "Social Icons",
 	"category": "widgets",
@@ -41,7 +41,9 @@
 	"providesContext": {
 		"openInNewTab": "openInNewTab",
 		"showLabels": "showLabels",
+		"iconColor": "iconColor",
 		"iconColorValue": "iconColorValue",
+		"iconBackgroundColor": "iconBackgroundColor",
 		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {

package/src/social-links/style.scss

@@ -142,3 +142,13 @@
 		padding-right: calc((2/3) * 1em);
 	}
 }
+
+// Ensure the Snapchat label is visible when no custom
+// icon color or background color is set.
+.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) {
+	.wp-social-link-snapchat {
+		.wp-block-social-link-label {
+			color: #000;
+		}
+	}
+}

package/src/spacer/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/spacer",
 	"title": "Spacer",
 	"category": "design",

package/src/spacer/controls.js

@@ -81,6 +81,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ false }
+						showSideInLabel={ false }
 					/>
 				</View>
 			) }

package/src/style.scss

@@ -51,6 +51,7 @@
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
+@import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";

package/src/table/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/table",
 	"title": "Table",
 	"category": "text",

package/src/table-of-contents/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",

package/src/tag-cloud/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/tag-cloud",
 	"title": "Tag Cloud",
 	"category": "widgets",

package/src/template-part/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/template-part",
 	"title": "Template Part",
 	"category": "theme",

package/src/template-part/edit/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,10 @@ export default function TemplatePartEdit( {
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
+				isMissing:
+					hasResolvedEntity &&
+					( ! entityRecord ||
+						Object.keys( entityRecord ).length === 0 ),
 				area: _area,
 			};
 		},

package/src/template-part/edit/utils/hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies