Add support for Block Tunes API?

[johnpuddephatt]

Currently Block Tunes are not available when rendering content.

Tunes are stored separate to a block's data. Here's an example for an image with a tune called "blockWidthTune":

{
  "id":"4njDtOcDe2",
  "type":"image",
  "data":{
    "file":{
      "url":"/storage/images/tTVQFcY2KCNDXWHvKRX8VjdkOifWJK6aDdKQpqk8.jpg",
      "thumbnails": ["/storage/images/tTVQFcY2KCNDXWHvKRX8VjdkOifWJK6aDdKQpqk8_small.jpg"]
    },
    "caption":""
  },
  "tunes":{
    "blockWidthTune":"wide"
  }
}

In NovaEditorJsConverter.php, only the block data key gets passed to the view, e.g.

$this->addRender(
  "list",
  fn($block) => view("nova-editor-js::list", $block["data"])->render()
);

We cannot change to passing the data and tunes separately like ['data' => $block['data'], 'tunes' => $block['tunes']] without rewriting all the block views, so perhaps the best way to pass the tunes would be to merge them with the block data, like so:

$this->addRender(
    "list",
    fn($block) => view(
        "nova-editor-js::list",
        array_merge($block["data"], ["tunes" => $block["tunes"] ?? []])
    )->render()
);

To prevent collision with an existing data key with the name 'tunes', the key could perhaps be changed to "_tunes".

Happy to open a PR but wanted to seek input first!

[johnpuddephatt]

I think this isn't possible until the editorjs PHP package adds tunes support.

There is an issue open there (which I opened a year ago but forgot about) https://github.com/editor-js/editorjs-php/issues/54

I've just created a PR (https://github.com/editor-js/editorjs-php/pull/59) will update if it gets merged.

[roelofr]

I never heard of the Block Tunes API, and it seems to be a bit under-documented (only the API spec seems to be available, but a real demo doesn't seem to be in the docs).

If it gets added to the upstream package, we might be able to add it, but I think it might be a bit out-of-scope for this package.

Block Tunes seems to be more for a "you're editing inline and want to make changes" feature, not a "here's a simple block editor for Nova". Nova hasn't really picked up as a full-fledged WordPress like CMS, more as an admin panel. that's pretty opinionated against full-page components (which you'd really want before even adding tools like the Block Tunes API).

[johnpuddephatt]

The block tunes API was only introduced about 18 months ago. There are a couple of example packages linked to on the plugin page which show how it can be used.

I'm not sure I agree that you'd need to be using a full page editor before wanting to use tunes – they can be used to do simple things like set text alignment. On the site I'm working on at the minute I've used it to introduce image alignment options "wide" and "fullwidth" that function just like those in Wordpress. I've been able to do this by not using this packages built-in cast so I'm happy to park this issue (at least until editorjs-php makes changes that enable it).

...that's pretty opinionated against full-page components

I understand what you mean. There's nothing forcing a custom field to use Nova's though is there? Or at least to not use it when a particular meta value is set (like ->fullWidth() or ->seamless() or something)

Bit off-topic but on the site I'm working on at the minute I'm using a bit of CSS to display Editor.js more 'seamlessly' and I really like how this feels for editing long-form content like blog posts. (despite being a bit of a hack it's pretty robust and works responsively).

[roelofr]

There's nothing forcing a custom field to use Nova's though is there? Or at least to not use it when a particular meta value is set

No, there isn't, but the UI just doesn't seem very friendly to wide editors, although your styled version does more seem like it'd be a good fit and to incorporate in the dark mode patch.

---

I didn't know the "Tunes" API was basically the same as that "full width" toggle on images. Maybe there's something to be arranged with hooks, just like we're doing with the custom fields. It'd still need to be incorporated upstream first though...

[desaintflorent]

@johnpuddephatt could you share the css you are using in your screenshot to have the editor.js displayed like this ? How you are doing it ? I'm also looking to integrate the editor like this 👌

[johnpuddephatt]

I have this in the boot method of App\Providers\NovaServiceProvider: https://pastebin.com/YbB50Qas . This chucks the CSS in the footer of Nova, not the most sophisticated approach but it works.

You might also need ->stacked() on your NovaEditorJSField .