Is there any way to add additional HTML block elements to the WYSIWYG editor config?
For example, horizontal rule or blockquote
Things like this should ideally be block level elements yes?
They aren't really suitable to be a span / label level element as it would still be wrapped by a block level paragraph / heading / pre, so you would have much less css options available to you in the front end e.g. no possibility of doing p + hr, or easily removing the default margins from the surrounding p tag.
I understand the editor has been kept lean to make the editing process simpler, but is there any plan to allow developers the ability to customise it a bit further through the JSON perhaps? That would make the client experience and front end quality a little bit more awesome : )
An option to do this would be: In your Custom types, add a unique Slice with a text field that only allows pre-formatted text, pre, dedicated to paste HTML code so the content writers can know where to Add Custom Embed or HTML code
Then you’ll need to parse the response so that it can be rendered in your project.
For the moment this would be the closest approach to add additional HTML elements to your documents. I’ll tag the @features-team so they can we aware of this feature request!
That would be a workable solution for web based projects that are using the slices mechanism, I agree. And something I'll try out in my next web based project.
In this particular project, we're not using slices, and have the article content in a single content field, as its just titles + paragraphs mostly. Also, since we're using React Native, I can't give the editors the ability to insert raw html as it would be dangerous to parse/convert random html to React tags.
However, if anyone else is using React Native, I just created a workaround, by using the pre-formatted field. I think I'm going to apply the pre field to hold custom shortcodes, so I can emulate WordPress shortcode logic. e.g. I'll put a [hr] tag within the pre field, then I can parse that within my htmlSerialiser to output a based hr in React Native. I imagine then I can create other custom shortcodes if I need further block level items, like blockquotes or custom video embeds like [video id="2"] etc.
Not the prettiest solution, and a bit over-engineered just for a hr, but I guess it will do!
Thanks for posting your work around, it’s a really good solution for others in your position.
Also your use case is very clear, it’s really helps the product team to have clear cases like this and like Paulina said we’ve let them know and added this to the feature request tracker.