craftcms / craftcms/cms

Inserting Matrix-like Blocks Within a WYSIWYG Editor

Open
#3,238 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
3.6k
Forks
705
Avg merge
1d 5h
Merged PRs (30d)
134

Description

Without a doubt, Matrix is one of Craft's killer features, and is incredibly useful as a way to organize a site's content -- especially from a developer standpoint. And though I think it's still pretty elegant from a writer/editor standpoint, I think it could even be a bit more elegant.

I've been thinking about this in light of my own blog, which runs on Craft using Matrix blocks. A sample entry might consist of the following blocks:

  • Text block
  • Image block
  • Text block
  • Image block
  • Text block
  • Video block
  • Text block

But say I want to insert an image block in the middle of the first text block. Right now, I'd have to create an additional text block in the correct position, and then cut and paste the text from the first text block into the new one. Then I can add an image block between them.

This isn't a huge deal, but as I frequently edit and rearrange blocks in the course of creating an entry -- especially one that's longer and more involved -- having to cut up my text into blocks in the UI can become a bit of a chore.

But with this approach, I'd simply insert an image block between the paragraphs (since each paragraph would essentially be a self-contained block). I'd still have all of the benefits of the current Matrix approach (e.g., complete control over front-end markup, granular control via Matrix block fields), but a more straightforward and elegant writing experience, as well.

I realize this could get messy because Matrix blocks can have WYSIWYG fields, and then the question becomes whether those WYSIWYG fields also have the ability to contain content blocks within them. So maybe this is just limited to one level.

And FWIW, I don't see this as quite the same feature as nested Matrix fields (#812) or hierarchical Matrix fields (#827). There are some similarities, but I see this as more like Statamic's "Bard" fieldtype, the recently released Ghost 2.0, or even CKEditor's Block toolbar (i.e., an extended editor interface) than anything else.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the Matrix and WYSIWYG behavior described in the issue, along with the referenced Bard, Ghost 2.0, and CKEditor Block toolbar approaches. Clarify whether support is limited to one nesting level and define the editor and content-model scope; done when the insertion workflow and acceptance cases are agreed.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
content, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.