Copy and modify a component

How to copy over a component from Radix parent theme, to our own Sub-theme and start using that instead.

There are many use cases where you'd like to modify an original component from the Radix parent theme. The idea here is that if you are not able to modify the component using different available properties, variables, and utility classes, you can just copy the component to your own Sub-theme and modify the markup there.

For example, let's take the Block component as an example.

Step 1: Copy the component over

You can go to web/themes/contrib/radix/components directory and copy and paste the theme into your own SUBTHEME_NAME/components directory, or you can use drupal-radix-cli

Within your Sub-theme directory, open up the CLI and run:

drupal-radix-cli add

And then select the component you'd like to copy over to your Sub-theme. Once that's done, you'd see a new block component directory under the components

Now go ahead and change whatever you'd like in that component.

Note that simply copying it over doesn't make your theme read that specific component, but with drupal-radix-cli:^1.0.8 and higher, the system would automatically update your templates to load from your sub-theme instead of the parent Radix.

Now, for our theme to read our new component instead of the default Radix one, we need to update our templates, in our use case, search within your Sub-theme to see where the radix:block is being used and changed that namespace to SUBTHEME_NAME:block

For example, several templates use the block component from Radix, but imagine if we only want the local tasks to behave differently, we can change the block--local-tasks-block.html.twig template namespace accordingly, and it will pick up the new component moving forward. But with the new drupal-radix-cli It will automatically update your template files as well as shown below:

Note that within your new block directory, you can modify your scss file or create a _block.js file and do any JS work needed there, those assets will be loaded along with block.twig file thanks to SDC.