0

I have a basic RadioControl that I'm using to make a custom block:

<RadioControl
            className="rating"
            label="Rating from client"
            help="Rating from 1 to 5 stars"
            selected={ attributes.rating }
            options={ [
                { label: '1 star', value: '1' },
                { label: '2 stars', value: '2' },
                { label: '3 stars', value: '3' },
                { label: '4 stars', value: '4' },
                { label: '5 stars', value: '5' },
            ] }
            onChange={ ( value ) => setAttributes( { rating: value } ) }
/>

But it wraps each group of input/label in individual divs. Is there anyway to take control of this output in the editor and, for example, remove the components-radio-control__option div??

<div class="components-radio-control__option">
    <input id="inspector-radio-control-0-2" class="components-radio-control__input" type="radio" name="inspector-radio-control-0" aria-describedby="inspector-radio-control-0__help" value="3">
    <label for="inspector-radio-control-0-2"></label>
</div>
7
  • 1
    what's the problem doing this solve for you? Removing that div will break a lot of the styling layout and formatting CSS. If you shared the reason you want to remove it then someone could write an alternative solution to your problem that doesn't involve removing the div but works better
    – Tom J Nowell
    Commented Dec 1, 2022 at 10:27
  • @TomJNowell Essentially I'm trying to implement a an elegant 5 star rating radio button, but this method of styling it needs to have the labels and inputs in the same divs, not in individual divs. See codepen.io/Julianoe/pen/ExRpwqY
    – Julien G
    Commented Dec 1, 2022 at 22:53
  • I see, perhaps RadioControl is not the best choice as what you're trying to show in the editor is not a radio control selection, but stars, it has more in common with a slide toggle than radio selectors. The irony is, WordPress already has a star rating component built in that's being used to show ratings for blocks when you search for new blocks to download in the inserter
    – Tom J Nowell
    Commented Dec 2, 2022 at 11:38
  • if you go to github.com/WordPress/gutenberg/blob/… you'll see a Stars component, and it uses the built in star icons, you could easily copy this and add in selection/click handlers, then it would be a pure CSS question of styling the stars. You wouldn't need CSS to fill in the stars as React would do that already via SVG/HTML, there's no need to try to hack the radiocontrol to do soemthing it wasn't intended for
    – Tom J Nowell
    Commented Dec 2, 2022 at 11:41
  • 1
    @TomJNowell a radio control is in fact the best course of action. Because the stars component just displays icons (a div containing a svg). What I'm doing is building a rating form element, which allows to select one only element among a list of options. That's the definition a radio and by styling a RadioControl with stars, I keep the proper accessibility and interactive backward compatibility.
    – Julien G
    Commented Dec 4, 2022 at 2:32

1 Answer 1

1

No, there's no way to remove that div from the RadioControl component. You can see in the source for the component that there are no options that will control whether that div is rendered. It will always be rendered when using that particular component.

Depending on what you actually need to do you could just use the display: contents CSS rule to essentially make the browser ignore the wrapping div.

2
  • I'm really bothered by the fact we loose control of the output with this component system... I don't see why technically it could not offer an equivalent to php filters to filter the output of a component 🤔
    – Julien G
    Commented Dec 1, 2022 at 22:55
  • There's nothing stopping you creating your own radio button control. If you modified the markup for this you would just break the styling. If you don't want the styling then you don't need the component. Commented Dec 2, 2022 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.