← All work

Drag-and-drop block editor for magazine articles

Editors build article layouts by dragging blocks into place, without touching HTML.

Role: Front-end developer

Demo of the block editor inserting an image carousel into a Knowable article (2 minutes 4 seconds, with audio). A screen recording with audio of the block editor on a Knowable test article, in Block Mode. The editor inserts an image carousel from the Layout menu, choosing the number of slides, drops an image into each slide, writes a caption and saves the post from the Edit Magazine Post dialog. The saved article shows the carousel with next and previous arrows, a slide counter and a caption for each slide.
A Knowable Magazine article in Block Mode. A "You may also like" block sits in the body text with a dashed blue outline. Small round icons beside it move the block up or down, open its editing tools and delete it with a bin. The Layout menu on the right lists the blocks that can be inserted.
Block Mode on a Knowable article: the controls beside a block and the Layout menu.

The problem

Magazine articles mix body text with pull-outs such as related stories, quotes, captions, newsletter promos and adverts. Laying those out meant editing raw markup, which is slow and easy to get wrong.

What I did

  1. Added a Block Mode toggle to the article page, so editing happens on the real page rather than in a separate form.
  2. Built a Layout menu listing every block an editor can insert, with the options each one needs (position, size, advert type) as dropdowns beside the button.
  3. Made article content draggable into place, with dashed outlines and a move cursor so it is clear what is being picked up and where it will land.
  4. Integrated a togglable WYSIWYG editor (Froala) into each block, so editors can make changes from an intuitive interface.
  5. Let editors move blocks around, either by drag and drop or with the arrow icons shown on the block, and remove a block completely from the page with the bin icon.
  6. Shared the same interface across the Katina and Knowable sites.

The outcome

Editors can build pages much more quickly. On Knowable they can now publish up to 8 articles a day, where on their previous publisher's site, which had a similar front-end design, they could publish only 4. The success of this publishing interface was crucial in Katina choosing Ingenta to build their site, which uses the same interface.