@wordpress/components 21.3.0 → 22.1.0

package/src/text/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ describe( 'Text', () => {
 	describe( 'snapshot tests', () => {
 		test( 'should render correctly', () => {
 			const { container } = render( <Text>Lorem ipsum.</Text> );
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 
@@ -92,11 +92,11 @@ describe( 'Text', () => {
 	} );
 
 	test( 'should render highlighted words', async () => {
-		const wrapper = render(
+		const { container } = render(
 			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
 		);
-		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
-		const words = await wrapper.findAllByText( 'm' );
+		expect( container.firstChild?.childNodes ).toHaveLength( 5 );
+		const words = await screen.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
 	} );
@@ -116,7 +116,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
 		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );

package/src/text-control/index.tsx

@@ -62,8 +62,6 @@ function UnforwardedTextControl(
 /**
  * TextControl components let users enter and edit text.
  *
- *
- * @example
  * ```jsx
  * import { TextControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

package/src/text-control/stories/index.tsx

@@ -17,12 +17,11 @@ const meta: ComponentMeta< typeof TextControl > = {
 	component: TextControl,
 	title: 'Components/TextControl',
 	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-		value: {
-			control: { type: null },
-		},
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		type: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: {

package/src/toggle-control/README.md

@@ -44,14 +44,16 @@ If this property is added, a label will be generated using label property as the
 ### help
 
 If this property is added, a help text will be generated using help property as the content.
+For controlled components the `help` prop can also be a function which will return a help text
+dynamically depending on the boolean `checked` parameter.
 
--   Type: `String|WPElement`
+-   Type: `String|WPElement|Function`
 -   Required: No
 
 ### checked
 
 If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
-If no value is passed the toggle will be unchecked.
+If no value is passed the toggle will be an uncontrolled component with unchecked initial value.
 
 -   Type: `Boolean`
 -   Required: No
@@ -74,5 +76,5 @@ A function that receives the checked state (boolean) as input.
 
 The class that will be added with `components-base-control` and `components-toggle-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-control` are used.
 
-Type: String
-Required: No
+-		Type: `String`
+-		Required: No

package/src/toggle-control/index.tsx

@@ -64,8 +64,19 @@ export function ToggleControl( {
 
 	let describedBy, helpLabel;
 	if ( help ) {
-		describedBy = id + '__help';
-		helpLabel = typeof help === 'function' ? help( checked ) : help;
+		if ( typeof help === 'function' ) {
+			// `help` as a function works only for controlled components where
+			// `checked` is passed down from parent component. Uncontrolled
+			// component can show only a static help label.
+			if ( checked !== undefined ) {
+				helpLabel = help( checked );
+			}
+		} else {
+			helpLabel = help;
+		}
+		if ( helpLabel ) {
+			describedBy = id + '__help';
+		}
 	}
 
 	return (

package/src/toggle-control/types.ts

@@ -13,10 +13,8 @@ export type ToggleControlProps = Pick<
 	FormToggleProps,
 	'checked' | 'disabled'
 > &
-	Pick<
-		BaseControlProps,
-		'__nextHasNoMarginBottom' | 'help' | 'className'
-	> & {
+	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'className' > & {
+		help?: ReactNode | ( ( checked: boolean ) => ReactNode );
 		/**
 		 * The label for the toggle.
 		 */

package/src/toggle-group-control/stories/index.tsx

@@ -81,6 +81,7 @@ Default.args = {
 		{ value: 'right', label: 'Right' },
 		{ value: 'justify', label: 'Justify' },
 	].map( mapPropsToOptionComponent ),
+	isBlock: true,
 	label: 'Label',
 };
 
@@ -121,14 +122,15 @@ WithIcons.args = {
 		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
 		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
 	].map( mapPropsToOptionIconComponent ),
+	isBlock: false,
 };
 
 /**
- * A borderless style may be preferred in some contexts.
+ * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Borderless: ComponentStory< typeof ToggleGroupControl > =
+export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
 	Template.bind( {} );
-Borderless.args = {
+Deselectable.args = {
 	...WithIcons.args,
-	__experimentalIsBorderless: true,
+	isDeselectable: true,
 };

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -52,7 +52,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -61,21 +60,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
-  box-shadow: transparent;
   left: 0;
   position: absolute;
   top: 2px;
@@ -142,6 +140,11 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   user-select: none;
   width: 100%;
   z-index: 2;
+  color: #1e1e1e;
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+  color: #fff;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -158,123 +161,174 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   background: #fff;
 }
 
+.emotion-14:active {
+  background: transparent;
+}
+
 .emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.emotion-19 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
   color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;
 }
 
-.emotion-16 {
-  color: #fff;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-19 {
+    transition-duration: 0ms;
+  }
 }
 
-.emotion-16:active {
-  background: transparent;
+.emotion-19::-moz-focus-inner {
+  border: 0;
 }
 
-.emotion-17 {
-  font-size: 13px;
-  line-height: 1;
+.emotion-19:active {
+  background: #fff;
 }
 
-<div
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-1"
-      role="radiogroup"
-    >
-      <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
       <div
-        class="emotion-10 emotion-11"
-        role="presentation"
-        style="transform: translateX(0px); transition: none; width: 0px;"
-      />
-      <div
-        class="emotion-12 emotion-13"
-        data-active="true"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="true"
-          aria-label="Uppercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
-          data-value="uppercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-2"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-17 emotion-18"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-              />
-            </svg>
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-12 emotion-13"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-1"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="Lowercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
-          data-value="lowercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-3"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+          role="presentation"
+          style="transform: translateX(0px); transition: none; width: 0px;"
+        />
+        <div
+          class="emotion-12 emotion-13"
         >
-          <div
-            class="emotion-17 emotion-18"
+          <button
+            aria-checked="true"
+            aria-label="Uppercase"
+            class="emotion-14 components-toggle-group-control-option-base"
+            data-value="uppercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-2"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="emotion-15 emotion-16"
             >
-              <path
-                d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-              />
-            </svg>
-          </div>
-        </button>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-12 emotion-13"
+        >
+          <button
+            aria-checked="false"
+            aria-label="Lowercase"
+            class="emotion-19 components-toggle-group-control-option-base"
+            data-value="lowercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-3"
+            role="radio"
+            tabindex="-1"
+          >
+            <div
+              class="emotion-15 emotion-16"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -333,7 +387,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -342,17 +395,17 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -421,80 +474,84 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 13px;
   line-height: 1;
 }
 
-<div
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
-    >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-0"
-      role="radiogroup"
+      class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
-      <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="false"
-          aria-label="R"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="rigas"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-0"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-13 emotion-14"
-          >
-            R
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-0"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="J"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="jack"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-1"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="R"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="rigas"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-0"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              R
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
         >
-          <div
-            class="emotion-13 emotion-14"
+          <button
+            aria-checked="false"
+            aria-label="J"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="jack"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-1"
+            role="radio"
+            tabindex="-1"
           >
-            J
-          </div>
-        </button>
+            <div
+              class="emotion-13 emotion-14"
+            >
+              J
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>