Extending Image block in 0.6

[bigclumsyoaf]

We are using v0.6, and would like to create/extend a custom image block to do things like float left/right, add a caption and selecting custom sizes. I know there are examples in the custom blocks repo, but these don't work with version 0.6.

Do you have any examples that work in 0.6, or pointers where to start?

[raffij]

I can do an update tomorrow at some point for you.

On Thu, Apr 14, 2016 at 4:14 PM, Daryl notifications@github.com wrote:

We are using v0.6, and would like to create/extend a custom image block to do things like float left/right, add a caption and selecting custom sizes. I know there are examples in the custom blocks repo, but these don't work with version 0.6.

Do you have any examples that work in 0.6, or pointers where to start?

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/madebymany/sir-trevor-js/issues/457

[bigclumsyoaf]

Awesome, thanks a lot.

[raffij]

In the latest version you'll find we've removed jQuery and as a result the majority of existing blocks will require a little work to make them compatible with the latest version. Docs are coming soon, but here's an example.

Any problems let me know. This is using es6 templates and object.assign, so assuming you are using babel, but could be modified to not be using these functions.

import SirTrevor from 'sir-trevor';

module.exports = (function() {

  const templateHTML = (data) => `
    <div class="st-image">
      <img src="${data.file.url}" class="st-image__img" />
      <div class="st-image__meta">
        <div class="st-image__meta-item">
          <div class="st-image__meta-item-label">Caption</div>
          <input type="text" name="caption" class="js-caption" value="${data.caption}" />
        </div>
      </div>
    </div>
  `;

  return SirTrevor.Blocks.Image.extend({

    loadData: function(data) {
      const defaultData = {
        file: {
          url: ""
        },
        caption: ""
      };

      data = Object.assign({}, defaultData, data);

      this.inputs.style.display = 'none';
      this.editor.innerHTML = templateHTML(data);
      this.editor.style.display = '';
    },

    onDrop: function(transferData) {
      var file = transferData.files[0],
          urlAPI = (typeof URL !== "undefined") ? URL : (typeof webkitURL !== "undefined") ? webkitURL : null;

      // Handle one upload at a time
      if (/image/.test(file.type)) {
        this.loading();

        this.loadData({
          file: {
            url: urlAPI.createObjectURL(file)
          }
        });

        this.uploader(
          file,
          function(data) {
            this.setData(data);
            this.ready();
          },
          function(error) {
            this.addMessage(i18n.t('blocks:image:upload_error'));
            this.ready();
          }
        );
      }
    }
  })
})();

You'll find because the caption has a name attribute this will be picked up by the data serialisation. However if you want to include a checkbox or selectbox then you'll need to do your own data serialisation for the block using a function such as:

_serializeData: function() {
  return {
    caption: this.el.querySelector('.js-caption').value
  };
},

[SgtOddball]

Ahh that explains why I didn't notice my own version falling over. (I use jQuery elsewhere for other functions so it's not triggered any weirdness)

That said I've only run a test version of 0.6, I haven't moved off 0.5 for some of the bigger projects where I've been using it.

[raffij]

@SgtOddball i'm going to start updating the docs today. Part of that will be creating and customising a block example.

The main change was to remove the $el as the convention of naming didn't make sense when we aren't using jQuery anymore.

I did however leave in the convenience method:

$: function(selector) {
  return this.el.querySelectorAll(selector);
}

I wrote some migration notes a while back: https://github.com/madebymany/sir-trevor-js/blob/master/docs/migrations/0.5-0.6.md

[SgtOddball]

Ooooh documentation! With regards to the blocks i've done, i'd ignored the using the $el for the most part as I'll admit I could never quite follow what the hell it was doing so It was never a big issue. But if the docs are up in the near future I'll look over this again and see what i need to do to fully migrate everything.

[marioschubert]

Will it be possible to add other blocks as image description? I would like to add text and list blocks.

[raffij]

Sorry don't understand your request.

You mean you want to add text and lists to a description field in an image block? On Fri, 6 May 2016 at 17:51, Mario Schubert notifications@github.com wrote:

Will it be possible to add other blocks as image description? I would like to add text and list blocks.

— You are receiving this because you commented.

Reply to this email directly or view it on GitHub https://github.com/madebymany/sir-trevor-js/issues/457#issuecomment-217496169

[marioschubert]

Please see the screenshot :-)

[raffij]

Ok. So you want blocks within blocks.

This isn't something possible with the core project, but I think others have done something similar.

You might find you can get what you want by using the scribe list plugin too. This will allow you to use the text block and have lists within it.

Search issues or closed pull requests for columns or inner blocks and that might give you some answers.

On Fri, 6 May 2016 at 19:08, Mario Schubert notifications@github.com wrote:

Please see the screenshot :-)

[image: ste_inside_image_block] https://cloud.githubusercontent.com/assets/1107183/15082098/33d8df8e-13c6-11e6-8ddd-6d3e648fb895.png

— You are receiving this because you commented.

Reply to this email directly or view it on GitHub https://github.com/madebymany/sir-trevor-js/issues/457#issuecomment-217517472

[marioschubert]

Yes, thank you.

It would be really great, if nesting would become a core functionality. At least as an optional feature.

[raffij]

@marioschubert we won't be supporting this functionality.

Someone that's done some work that might help you is the following. https://github.com/Upplication/sir-trevor-blocks

Take a look at the columns feature for some inspiration