Unable to edit component : manage/Blocks/Text/Edit.jsx

Plone Support Customizing Plone
1

I'm trying to create a custom text editor for Volto , but unable to component shadow it.

I have tried these two methods :

  1. Creating the manage/Blocks/Text/Edit.jsx in customizations and adding changes to it.
  2. Creating a new component and changing the blocksConfig.text.edit : newComponent in config.js.

I have restarted my server after adding new components in customization folder.

Both the methods are not working for me, although I was able to component shadow a NewsItemView component from theme. But not able to setup for manage blocks.
I'm using yeoman volto generator.

Any inputs / helps will be appreciated :pray:

1 Like
2

Maybe adding a bit of code will help others.
I followed this and it worked for me: 9. Brief introduction to Volto blocks – Volto Hands-On — Plone Training 2023 documentation

3

Some more context :

Screenshot 2023-04-17 at 4.15.53 PM
Screenshot 2023-04-17 at 4.15.53 PM857×75 1.24 KB

I am trying to customize this component, I can see in the react dev-tools that this is being render by volto-slate/src/blocks/Text/TextBlockEdit.jsx which renders a text edit component based on detached prop. I would want to replace this with always rendering my custom EditText component, I have created a customizations/packages/volto-slate/src/blocks/Text/TextBlockEdit.jsx file and added this code in it.


import React from 'react';

const TextBlockEdit = (props) => {
  return <h1>My custom text edit block</h1>
};

export default TextBlockEdit

This does not override the default component.