Illustration not Building

 

 

 

 

 

 

 

Here’s another take on Content Blocks. This basic idea envisions Content blocks as Inserts into a post rather than the building blocks of a post. This seems a lot closer to how people create blogs, which is to say, they have some content and then they use images, maps, tables, charts, block quotes, etc. to illustrate that text.

Start a new post and you have a single edit surface with all the formatting and Content Blocks along the top along with an extra large “Publish” button.

New Post Single Page

 

At the bottom you have layout choices and it defaults to a single page. Since the scheduling and other advanced options are… well, advanced… they get hidden in a drop down where novices don’t have to see them.

Publish Dropdown

 

To change the layout you click on one of the layouts which is displayed visually below the edit surface.

Two Column

 

The lines delineating the layout are grey rather than black to indicate that it’s all part of one page.

Two Columns and Footer

And it includes the ability to have both simple column layouts and more complex column + footer layouts. I imagine that this would be something that the theme would control – some themes, for simplicity sake turning off the function totally and only allowing single page posts.

Rather than introducing a new UI concept – the circle with a plus in it – for Content Block insertion, both Content Blocks and text simply insert at the cursor.

Cursor

 

And text looses focus in the areas you’re not editing, allowing you to focus down on one section at a time.

Text Focus

 

Content Blocks default on insertion to the full width of a given section.

Content Block Default

 

Content Blocks also “snap” to sections when moved.

Content Block Snap

 

However, and this is an important difference between this concept and Mel’s – Content Blocks do NOT live on the same layer as text. They are inserts that all act exactly like images do currently – that is to say that they push them out of the way. And since Content Blocks don’t live on the same layer as text, they can span columns like so:

Content  Block Drag and Drop

 

This allows for things like block quotes across columns which is a decently common layout.

While text is NOT all Content Blocks like in Mel’s mockup, it can behave like a content block for the purposes of dragging and dropping.

Drag and Drop Text

 

A few final thoughts:

  • While I’m all for simplifying, I’m not a fan at all of the context sensitive floating format bar. I strongly prefer all the formatting and Content Block insertion options to be visible at all times and in a constant location.
  • I think the idea of “everything is a content block including text” is interesting in theory. But in practice it doesn’t jive with the way I go about making posts. Posts aren’t a random collection of paragraphs that can be reordered for emphasis. They are stories with a beginning, middle and end. Moving whole paragraphs of text around is much, much rarer than shifting around a photo trying to find the best place for it, or adding a chart or a block quote.
  • Text Boxes (such as Code, Quote, Tweet) etc. are fundamentally different than other Content Blocks because whenever the user sees text he or she will expect to be able to use the formatting palette on it. To me, those Text Box type Content Blocks should be associated more with the formatting bar rather than the rest of the content blocks.
  • If we’re going to allow for changing layout mid post, we will need clear, common sense rules about how text and Content Blocks reflow. This is going to be a thorny thorny problem.
    • Along with that, there’s a difference between having a post of two independent columns, and a post of two columns where text wraps from the end of the first column up to the top of the next. Also thorny.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s