Customizing the output of a component of a block

  • Say I’m building a custom block that uses a RadioControl component

    How do I customize the output of the component?

    That specific compnent outputs wrapping divs around input and label elements.

    <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" value="3">
<label for="inspector-radio-control-0-2"></label>
</div>

    An example of what i would want to do is to be able to change the output to remove the wrapper div (or else). How would I do that? Is it even possible?

    • This topic was modified 2 years, 4 months ago by julianoe.
Viewing 5 replies - 1 through 5 (of 5 total)

  • You could define your own control based on that component.

    But I would ask why? Because if it is just styling issue there normally is a CSS way e.g. set the div to display inline etc

    Thread Starter julianoe

    (@julianoe)

    Thanks for taking the time to answer.
    I want to apply to that WordPress project a component that uses a list of radio inputs and labels all on same DOM level to use CSS for a simple star rating system (see here)

    The fact that the component wraps every input/label pair into an individual div makes it impossible to do it like that. That’s why I just want to get rid of the wrapping div and be able to choose the output.

    I did not see in the docs how I can create my own control/component to manipulate the data that the users inputs into the radio

    You wont find creating components in the Docs as it is just REACT – you would need to examine the WP componet and create an alternative.

    However as you are using jQuery any way why not just
    $('.rating input[type="radio"]').unwrap();
    Which in your example works on the wrapped version.

    • This reply was modified 2 years, 3 months ago by Alan Fuller.
    Thread Starter julianoe

    (@julianoe)

    Indeed I did not think of jQuery unwrap. I will try that.

    And I will try to see if I can register my own component to understand all that more thoroughly.

    Place to start https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing the output of a component of a block’ is closed to new replies.