Joen A. 8:48 am on January 25, 2017
Tags: core-editor ( 19 )

What Are Little Blocks Made Of?

At the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. of the 2017 editor focus is the is idea of introducing blocks (or sections) which help “make it easy what today might take shortcodes, custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., or ‘mystery meat’ embed discovery”. How do we do that?

Let’s start with paragraphs as blocks/sections. If we count a paragraph as a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. or section you can manipulate, here’s how that could look:

You can still type type type but you create blocks along the way. When you mean to insert content that isn’t text, click the plus (or perhaps as a power-user feature, type / on a newline, SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.-style?), to invoke the insert menu:

Click an item to insert it, or pick it using arrow keys.

One of the interactions we need to figure out here, is what happens when you press Enter, as you’re writing. Over chat in the past week it was suggested we might want to tweak the default behavior so that Enter inserts just a single linebreak, and a new paragraph is created with two linebreaks. (The pertinent bits of the chat starts here, or you can read this summary).

Let’s discuss these mockups, data structure, linebreaks and lots more in Wednesdays editor chat, Wednesday January 25th 19:00 CET! And please keep the feedback coming, here and in #core-editor Slack, the feedback already given has been amazing.

The next immediate goal is to start building s. It’ll be a blast! 🚀

Joen Asmussen 8:49 am on January 25, 2017
Wanted to also take a moment to highlight a few items of excellent feedback received since last time. Johan Falk suggested this video presentation — warmly recommended. This whole thread from Mark Root-Wiley, and ideas of focusing on different flows by Chemical Sailor. Finally this video from Reid Peifer is a call for exciting things to happen in content creation, really interesting.
Those are just a few, it’s all great stuff, thanks and keep it coming!
- Tammie Lister 3:48 pm on January 25, 2017
  Reid’s talk was awesome @joen, made me think of the following points while listening:
  - The point about WordPress existing to get ideas out into the world is interesting as to how we can get a frictionless, fast experience.
  - A really good talk to wake the mind up to what we should be focusing on.
  - Content being dictated to by the development post is so much something we should avoid. I agree we have that situation now.
  - The shift in focus from templates to blocks is one I really feel strongly needs to happen also. Thinking in smaller forms is far more natural for humans and we can enable users through this.
  - Joen Asmussen 7:48 am on January 26, 2017
    Perfect summary 🚀
- Tammie Lister 3:52 pm on January 25, 2017
  As we progress can we get some visual flows worked out for user flows? What different people need and want from an editor. We can draw on research and even get new research we need to support this.
  I’m asking for an asset here as I feel it will help focus and frame discussions, it will make us judge from our own headspaces a little less.
- Andrew Roberts 5:04 pm on January 25, 2017
  Here are the slides from the video above ^
  Interesting walk through WordPress post editor experience over the years: https://2015.vancouver.wordcamp.org/files/2015/08/Reid-ReimagineContent.pdf
  - Joen Asmussen 7:48 am on January 26, 2017
    🌟
Michael 10:09 am on January 25, 2017
I really appreciate the direction this idea is going. Making differentiation between different content blocks possible is a big thing IMHO. What I did not get out of the discussion until now, though, is, whether these content blocks are just a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. change or whether this change will allow to access content blocks on a program level, too.
What I mean is: Will get_the_content() be supplemented by a “Content LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.” that does not output one final (content-) blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., but an object containing various little blocks that I then could modify in, say, a template or a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party?
I really look forward to finally get rid of so many plugins which I currently use to basically simulate the behavior that new editor will hopefully bring natively.
- J.D. Grimes 2:03 pm on January 25, 2017
  This is an interesting question. I think that right now the proposal is that the post content will still be stored in the post’s post_content field as a complete string, just as it was before. So, get_the_content() would still return the same kind of thing that it used to return. The main changes right now are just UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. focused, the underlying code won’t evolve much, at least not until later. See the Editor Technical Overview published last week.
afraithe 10:36 am on January 25, 2017
Interesting concept, but I can’t believe we are still talking about the P vs BR thing though, what about alignment, text flowing around other content, , it’s simply not how the web works today, and at a certain point they actually didn’t have BR in HTML5 draft, but it eventually made it in there for legacy reasons.
The first thing I learned in school was “thau shalt not press enter”, unless you really had too and it was a valid paragraph, text should always flow and naturaly break depending on the constrained width of whatever you are typing in.
If you really want a paragraph to be one line, use css style it by removing the padding/margin.
I do agree it is going to be very interesting to see some concepts around this, but as per the video you posted from Reid, at the end (the QA) he explains he doesn’t think a radical change is needed, a progressive evolvement and innovation of the content experience is what he is looking for. And I think that is key, while we might be able to take a good leap now in 2017 and set a good foundation, a slow progression and innovation of the experience is a much better long term goal. causing less issues with end user experience and help avoid frustrations, cause everytime you change something, you cause friction and frustration, regardless of how innovative the solution you might think it is.
I can’t help by think of the extreme amount of different usecases where WP is used and how even small changes can have awesome or devestating effects depending on that.
Control is also a valid point, Reid talks about his customers screwing up the page layout by adding a video to a small box etc. Context aware blocks, only allowing what is intended and filtering heavily might be a key factor, I have always been a favor of highly restricting the functionality until the customer actually needs it, we see so many faulty implementations of TinyMCE where they take the stock config or “fully featured” config and that’s the extent of the integration. The more tightly and care is taken when doing the integration, the better the experience will be for the end user creating content.
- FolioVision 11:55 pm on January 26, 2017
  afraithe, your teacher’s rules probably apply to prose:
  The first thing I learned in school was “thau shalt not press enter”, unless you really had too and it was a valid paragraph, text should always flow and naturaly break depending on the constrained width of whatever you are typing in.
  they certainly do not apply to poetry.
  indeed,
  it’s difficult to get text editors to work so well
  with words
  slipping like streams,
  as that old
  engine, the typewriter.
  Here’s what the text looked like before the comment editor here got to it. Each space, each line had its purpose.
  It would be a real achievement if we could create a WordPress editor with which one could deliver even free verse. We are starting afresh with text editing. It would behoove us to aim high.
  PS. I’m far from sure that TinyMCE should be along for the ride as it’s about the most destructive JS editor I work with.
  - FolioVision 11:55 am on January 27, 2017
    My reply doesn’t make much sense without the image attached. Somehow it didn’t make it in last time.
    Trying again:
    I hope the visual illustration helps. Further down, Joen talks about a “poetry” blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. (normally a poet must struggle with either code or pre to get free verse formatting across but neither work particularly well). That’s a great idea.
Davide 'Folletto' Casali 12:16 pm on January 25, 2017
You can still type type type but you create blocks along the way.
This is excellent. It’s probably the most important thing in dealing with blocks in a text-top editor: the flow of text has to feel always uninterrupted, always “hands on keyboard” has to be possible (as much as possible ofc).
Click an item to insert it, or pick it using arrow keys.
I know it’s super early, and we’ll iterate a lot on this, so take this bit with a pinch of salt:
1. Having a scrollbar inside that kind of control might get tricky. Not just for difference in how it would look across platforms (we might need a custom scrollbar control as other big players use, i.e. Facebook notifications) but also because might feel a bit cramped once it scales up.
2. Search there is excellent. Power user feature for sure, but should work well: type type type type → shortcut for panel → type panel name → enter → boom. I’d note however that could even be an “implicit” search as it’s for power users: typing works like a search, but there’s no visible control.
3. We need to be very careful on scaling this up. WordPress isn’t like “minimal” blogging tools out there: we need to strike the perfect balance between a minimal UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. that is intuitive with the most used blocks, and one that scales up. 🙂
Over chat in the past week it was suggested we might want to tweak the default behavior so that Enter inserts just a single linebreak, and a new paragraph is created with two linebreaks.
If I’m aware for having tried to do the same in some of my past designs that is a contested topic. TinyMCE (3.x) even provides a flag to toggle behavior (`force_br_newlines`, `force_p_newlines`, `forced_root_block`), even if even the documentation can’t avoid the controversy by stating “This option is set to false by default since paragraphs is a much better concept”.
Personally I’m ok with both choices there, even if I’ve a preference for enter doing just a single line break as in my view is more “obvious” of user intent. I also have anecdotal experience of explaining `shift+enter` to many people and everyone was “I had no idea I could! I always tried to do it! Thanks!”.
However, that behaviour has to be reviewed as well as a blank line will wrap to a paragraph (thus, no new line anymore) invisibly. I think it’s possible, but it’s something we’ll have to iterate and design with care. I have the impression (maybe mistaken) that most app that go for “Enter as a new paragraph” do that just because it’s simpler to build.
- Mel Choyce 5:06 pm on January 25, 2017
  3. We need to be very careful on scaling this up. WordPress isn’t like “minimal” blogging tools out there: we need to strike the perfect balance between a minimal UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. that is intuitive with the most used blocks, and one that scales up. 🙂
  This is my only concern with the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-picking interface, is that we’ll need to make sure it does scale — especially once we’re using it for layout and customization, too.
  Quick sketch:
  - Joen Asmussen 5:16 pm on January 25, 2017
    ❤️
- Joen Asmussen 7:50 am on January 26, 2017
  We need to be very careful on scaling this up. WordPress isn’t like “minimal” blogging tools out there: we need to strike the perfect balance between a minimal UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. that is intuitive with the most used blocks, and one that scales up.
  💫 Perfect. Great feedback.
J.D. Grimes 1:57 pm on January 25, 2017
I just want to second what others have said: I really like the direction this is going. The proposed UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. looks like it would be very clean, and easy to navigate using only the keyboard, which is really nice. Looking forward to watching this develop further!
- Joen Asmussen 5:16 pm on January 25, 2017
  💚
Jon Brown 2:39 pm on January 25, 2017
“Enter” should open a paragraph tag by default. “Enter-enter” should result in an empty paragraph tag set (blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. element), not a line break (inline element).
The UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. behavior I’m not clear on is on how selecting a new block element type should behave in these two scenarios
1. Select a different element type when the cursor is in an empty element
2. Select a different element type when the the current element is not empty
In (1) it seems handy to to just convert the empty element to a different block type. However, in (2) the user might expect it to close the current block and open a new one.
I’d also suggest that “clicking” the paragraph symbol currently floating out left should allow one to change the block type.
- Davide 'Folletto' Casali 3:52 pm on January 25, 2017
  In (1) it seems handy to to just convert the empty element to a different blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. type. However, in (2) the user might expect it to close the current block and open a new one.
  I think it’s part of the research and design work to be done there. If blocks are created seamlessly (imagine like when you are in a H2 “block” and you start a new line, converting to a p “block”, happens seamlessly) it’s probably very fluid in both cases, we just need to make sure we’re exploring all the details. 🙂
  I’d also suggest that “clicking” the paragraph symbol currently floating out left should allow one to change the block type.
  I was reflecting on this too. It’s a good idea to iterate on, as not every block will be able to convert to any other block, so we need to iterate a bit on the design there. 🙂
  - Mel Choyce 5:10 pm on January 25, 2017
    I’d also suggest that “clicking” the paragraph symbol currently floating out left should allow one to change the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. type.
    I was reflecting on this too. It’s a good idea to iterate on, as not every block will be able to convert to any other block, so we need to iterate a bit on the design there. 🙂
    FWIW, this is how SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. posts work:
    It’s a nice interaction 👍
    - Joen Asmussen 5:17 pm on January 25, 2017
      I dig that.
    - Andrew Roberts 5:17 pm on January 25, 2017
      We also need to think about moving blocks within a post and between posts (e.g. a new post in a different window):
      a) Do we still use select-cut-paste?
      and/or
      b) Drag-and-drop of blocks.
      - Joen Asmussen 7:52 am on January 26, 2017
        A good dogma to adopt, probably, is that you should always be able to do everything you need to do, without ever having to drag and drop. That’s not to say drag and drop isn’t valuable — just that we can’t count on it on mobile, and even on some small desktop screens it’s a fiddly experience.
        Drag and drop can perhaps be seen as a progressive enhancement.
      - Matt Mullenweg 3:23 pm on January 26, 2017
        I think to start ctrl + A only selects all within the box you’re inside. Pasting from someplace else gets converted to blocks (if it needs to) on paste. If you want to copy across blocks to another you’ll need to drop to HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites..
    - Davide 'Folletto' Casali 5:45 pm on January 25, 2017
      That’s a good example, thanks!
      It makes even more clear how “switching” works well only if they are similar: all the above are basically text, so they can switch well from one to another.
      Our sections need to do more than that, so we need to take care about it: we shouldn’t show a “bullet list” if the user is trying to switch away from “image”, but we should show “gallery”.
      A basic idea: sections could for example declare what section type they are compatible with, so the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. will just show “compatible switches”.
      - Joen Asmussen 7:52 am on January 26, 2017
        A basic idea: sections could for example declare what section type they are compatible with, so the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. will just show “compatible switches”.
        ❤️❤️❤️
    - Ben Dunkle 12:49 am on January 27, 2017
      Made me think of this:
      P icon fades in to the left of blinking cursor when user hits return, invites discovery and when clicked/tapped reveals a list of blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. types
      - Joen Asmussen 9:00 am on January 27, 2017
        ❤️❤️
        Thanks also for bringing mockups to the table! It’s a great way to increase communication bandwidth!
Tammie Lister 3:07 pm on January 25, 2017
This is a really great starting point. One thing this solves that I’ve seen a lot of users (even myself) get frustrated by is not having controls where you are interacting. That’s a huge thing to give users.
- Morten Rand-Hendriksen 3:43 pm on January 25, 2017
  Enter as new paragraph and Shift+Enter as line break are industry standards. Changing this behavior would be confusing for users.
  LinkedIn Pulse has modality similar to what is proposed here that may be a workaround: whenever a new paragraph is created, a symbol appears in the left margin allowing the author to change the content type for the paragraph. If nothing is done, the paragraph stays. If the symbol is activated, a menu appears with other content types. This allows the author to “type type type” as you say and then insert other content when they feel like it in a natural flow.
  - Davide 'Folletto' Casali 3:58 pm on January 25, 2017
    Enter as new paragraph and Shift+Enter as line break are industry standards.
    Can you elaborate on this being industry standard? Medium and Word do it, but Google Docs and Pages don’t. All are major players, so it doesn’t seem there’s a standard there.
    - Andrea Fercia 8:59 pm on January 25, 2017
      On Google Docs, they look paragraphs to me.
      https://cldup.com/g60e-LCDI4.png
      Tested just writing a few single and double line breaks. Then export from GDocs to .docx format and open it with Pages then View > Show invisibles. Or, even better, export from GDocs in htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. format and then inspect the source, you will see the paragraphs.
    - Morten Rand-Hendriksen 7:44 am on January 26, 2017
      Word processing applications treat the Enter key as a paragraph key and Shift + Enter as line break. Google Docs does this, it just doesn’t add padding under each paragraph by default.
      Altering this behavior in WordPress would cause unexpected behavior for anyone used to writing in a standard word processor like Word, Google Docs, or any other application.
    - Joen Asmussen 8:00 am on January 26, 2017
      Perhaps putting so much emphasis on enter as break, double enter as paragraph was a mistake for this post, putting it in a “done deal” light.
      Everyone thinking about this should take a read at the backlog in the #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor chat, it starts here. The suggestion is clearly posed as an assumption, meaning it’s something we should try, get a feel for, and evaluate. It would be great for this phase if everyone could keep an open mind for bold suggestions like this, and think squarely on whether or not it actually improves the user experience.
      The discussion goes further back to here, which is perhaps even better reading:
      curious your thoughts on one of our most sacred cows: the behavior of the enter key. since forever it’s created a new paragraph, and we have the hidden ctrl+enter combo for a single line break. this is different than most editors, including the behavior in our own text/htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. editor — does it still make sense? I don’t recall it ever being a conscious decision on the double-line-break behavior, it’s just how tinymce worked when we brought it in
      A key bit that needs all the emphasis it can get is here:
      don’t want to get caught up on the under-the-hood markup rather than the user expectation and behavior, which is what I’m most interested in. Totally agnostic how we implement it to try it out — whether it’s a zero-margin paragraph, an actual BR, whatever, important thing is when someone pushes “enter” they get a single break instead of two
      I prefer it when people use double breaks between paragraphs, but there are plenty of legitimate reasons not to (and not to use a list), like poetry
      Remember, we are still explorers in this phase. Let’s be curious! 🌠
    - Ben Dunkle 12:13 pm on January 26, 2017
      The only thing I can think of that doesn’t do the whole enter=new paragraph, shift-enter (ctrl-enter? ) = new line/line break thing is a text editor; e.g. Atom, Sublime, etc.
    - Birgit Pauli-Haack 9:41 pm on January 27, 2017
      My experience is that quite a few users, if not the majority, don’t know that there is a shift+enter available to them. I watched hundreds of users producing content on WordPress and almost everyone thinks like this: 1 Enter = line break, 2x Enter = paragraph is definitely worth testing.
      There doesn’t seem to be an explicit “Industry Standard” just a defacto one when Microsoft developers made the decision in the late eighties, and everyone followed their lead. WordPress shouldn’t be afraid of moving away from it.
      I learned typing on a typewriter where 1 Enter = line break and 2x Enter = Paragraph. It’s in my genes, haha.
      - ChemicalSailor 1:15 pm on January 29, 2017
        I think even the majority of people who use Word (i.e those who don’t use it all the time, just need a basic document writer) still do 2x enter for paragraphs because they don’t know or care about standardized formatting. The same people will make headings by selecting the text, increasing the font size and making it bold. If I remember rightly Word actually has a “Normal” format which supports this behaviour and is default; “Paragraph” has to be selected.
        Joen Asmussen 7:26 am on January 31, 2017
        🚀
  - Jon Brown 6:49 am on January 26, 2017
    In the context of WP’s visual editor my I agree with the inter here with the expectation that:
    enter = close blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., open new block, with
    being the default block element.
    shift-enter = line break within the current block element (p,
    However, I wouldn’t call that a “standard”.
    I’m accustomed to that behavior only when shift by itself is “submit” (ie. Facebook status post for example). There are plenty of contradictory examples though, for example in the context of Apple iMessage alt/option-return is a line break, not shift-enter.
  - Matt Mullenweg 3:25 pm on January 26, 2017
    We’ve done it one way for a decade, let’s try the opposite and see how it feels after a few months of usage in betaBeta A of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process..
  - Mark Root-Wiley 4:49 pm on January 26, 2017
    I’m strongly in the pro-Paragraph camp, but I am really curious about use-cases for both. (As Morten has pointed out, a lot of content-focused applications already use this as their default behavior.)
    I train a lot of WordPress users, and here are the three primary uses of BRs I see once they know SHIFT + RETURN in rough order of frequency:
    Fake Headings (Bold/Underline/Italic + BR, which is bad for accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and site design consistency)
    Contact information like addresses (no problem here)
    Micromanaging line-lengths for the screen they’re using with no regard toward responsiveness and portability (not good)
    Importantly, I don’t think either #1 or #3 would show up during betaBeta A of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. testing since “average” beta-testers know better and who would catch them?
    The two pro-BR use-cases I’ve heard are [appropriately for WordPress]:
    Code (Worth noting that the code editor uses BR as default RETURN behavior, so this doesn’t seem as relevant. The relevant use case is writing code for public display.)
    Poetry
    I’ve never seen either case on a person’s site who I’ve helped (though I did write a WordPress permalink support limmerick one time…). Further, people writing code must be those most-likely to know the existing shortcut for BR.
    Most importantly: Changing this behavior would add key strokes to just writing a normal blog post!
    I’m not against experimenting or playing around with things, but:
    I at least want to have some idea of the goals/use-cases for trying. (experimental hypothesis)
    It sounds like this may be technically challenging. While that shouldn’t be a reason alone to stop an idea, is this really the best use of our amazing editor developer’s time?
    Can people share other use-cases (not just personal preference) for easier single linebreaks?
    - FolioVision 12:05 am on January 27, 2017
      Well articulated, Mark. I firmly agree with Morton that we don’t want to destroy decades of text editing tradition without an overwhelmingly good reason. Single return is a paragraph. Shift-return (or Enter key on an extended keyboard) is a line-break.
      At this point, WordPress is mainstream software, ladies and gentlemen, not a competitor of Dean Allen’s iconoclastic Textile weblog engine (great software by the way). I feel like we technophiles could really create trouble for the end users by prescribing rather than enabling in this case.
      - Joen Asmussen 9:16 am on January 27, 2017
        If it’s an easy change, it’s absolutely worth prototyping and testing. We probably can’t say with any kind of certainty that this change will be good or bad or “breaking” without actually trying it out, getting a feel for it, actually writing real blog posts with the . At this point we are working with assumptions, on both sides of the argument. Which is fine, so long as we are open to testing those assumptions and making thoughtful decisions.
        Enter, shift enter, their behavior changes all the time based on context. If you are in a messenger, Enter is usually “Send” and Shift Enter is (a single) newline. If you’re in a textarea, enter is almost always a single newline. If you are in a desktop editor, enter is almost always a single newline.
        All this 👆 is about the behavior of the Enter key. We can make the markup whatever we think is best, whether through `wpautop` or something else.
        FolioVision 11:42 am on January 27, 2017
        Thanks Joen for your clear reply.
        If you are in a messenger, Enter is usually “Send” and Shift Enter is (a single) newline. If you’re in a textarea, enter is almost always a single newline.
        Yet this is exactly what worries me: the gold standard for text editing in WordPress will be instant messenger clients. Weblog and CMS software are not chat. CMS function is to communicate thoughtfully composed longer posts. Instant messenger is for quick, back and forth, generally not for archiving.
        That the infrastructure of WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. is SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. seems to have warped people’s perception of web publishing. While we may live in Slack, our clients live in web publishing. They already have Twitter and Facebook for ephemeral communication. The last thing they need is more instant messaging software.
        Let us not turn technical work tools into fashion statements. Bell bottoms were never practical as work wear.
Ian Stewart 4:36 pm on January 25, 2017
perhaps as a power-user feature, type / on a newline, SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.-style?
Just noting that I love this idea. 🙂
- Andrew Roberts 4:45 pm on January 25, 2017
  I’ve had the thought that a text editor can behave like SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. et al. It is a terminal, in a way.
  The hot trends around AI and “app stores” for chat interfaces have interesting implications for text editing, and may be what we are working on here.
- Mel Choyce 6:13 pm on January 25, 2017
  +1. Balsamiq has a shortcut like this, too, that’s super handy.
- ChemicalSailor 11:29 pm on January 25, 2017
  If a power user invokes the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. picker from the keyboard the natural thing will then be to search for the block and hit enter, so just the search box should be enough.
  Likewise, if someone clicks the icon to open the block picker, they are probably going to want to browse through to pick what they want, no search box required.
  - Joen Asmussen 8:03 am on January 26, 2017
    This is an interesting idea, thinking of the insertion dialog as the same piece of UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., but with different “sizes” depending on how it’s invoked.
    For example if we invoke it from the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. type indicator on the left, it should probably only show blocks that are compatible with a conversion. For instance if you click the picker on a paragraph, probably not show image, as that would be a destructive change.
    🌟
Andrew Roberts 4:52 pm on January 25, 2017
Not meaning to go too far off track… but a lot of design discussions around conversational/chat UIs could be interesting to us. Each “message” in a chat could be thought of like a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. And the different block-types thought of as mini-applications.
Here is an interesting backgrounder: https://medium.com/the-layer/the-future-of-conversational-ui-belongs-to-hybrid-interfaces-8a228de0bdb5#.mkcgpkeqj
There are differences, of course. Our content needs to remain editable and easily reordered.
- Joen Asmussen 8:05 am on January 26, 2017
  Great link, thanks for sharing!
  Command-line-esque interfaces seem to have a great strength especially to power-users. Could be a good way to allow the editor to cater to both those, and casual audiences.
  We should probably be prudent in our adoption of conversational UIs in general, and keep in mind some of the history that has made it popular in recent years. Dan Grover of WeChat wrote an amazing post on this which provides a lot of nuance: http://dangrover.com/blog/2016/04/20/bots-wont-replace-apps.html
Ben Dunkle 5:54 pm on January 25, 2017
The enter/return key should always create a new paragraph. Savvy users know to hit shift-return for a line break. So there shouldn’t even be a paragraph option in insert menu.
- ChemicalSailor 11:08 pm on January 25, 2017
  Savvy users know to hit shift-return for a line break.
  But it’s the non-savvy users you have to watch out for. What you’re saying is that savvy users can differentiate between a line break and a paragraph; flipping this on it’s head, they would know to use 2 returns to create a paragraph if that’s how it was programmed.
  I actually think automatic paragraph by default is correct, but just making this point because I’ve seen people do multiple returns because they don’t understand that paragraphs are automatically done for you.
  (I was going to write “they don’t understand HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. has semantics” but then I thought “they don’t understand they’re writing HTML, or know what HTML is”)
  - Ben Dunkle 5:28 pm on January 26, 2017
    This might be a problem if a user types a one-line paragraph and hits return, which might be a rare occurrence. If the text runs to two or more lines, and the user hits return, shouldn’t the editor indicate the new paragraph by adding extra space after the last line of the previous paragraph? I’m seeing that this isn’t the case in the text box I’m typing in now, but I think the extra space would clear up some confusion.
    - ChemicalSailor 10:29 pm on January 26, 2017
      shouldn’t the editor indicate the new paragraph by adding extra space after the last line of the previous paragraph?
      This is what happens already I believe, or at least it can be set by a theme in editor CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.. Doesn’t stop people from doing multiple breaks.
      I’ve seen a lot of one line paragraphs. Not saying it’s correct but it happens.
- Joy 7:59 pm on January 26, 2017
  Non-savvy users could try to nest paragraphs, if it’s on a menu. The one thing I’ve seen over and over is the user tries to adds space between things, not understanding that the browser is in charge of condensing the white space to reflow the text. It’s often used when an image is aligned left or right (so it’s usually using ‘float’) and the text is shorter than the image, so whatever is next is flowed around the image also.
  That brings up the question of having a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to clear floats. It’s invisible, but quite essential.
  - Joen Asmussen 8:57 am on January 27, 2017
    This is a really astute observation.
    As we improve the way images are handled, it would be really nice if having to worry about clearing floats is not something users need to do.
    If all else fails, I’d love to see a “Separator” blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. It would intrinsically behave as a “float clearer”, and users should be able to change the appearance between a few presets, one of which could be “invisible”.
    Incidentally, a “poet block” has been suggested! It would respect both spaces and linebreaks 😊
Ian Stewart 6:58 pm on January 25, 2017
I took some notes!
https://wordpress.slack.com/archives/core-editor/p1485367316001790
- Joen shared his first design proposals for Blocks at an atomic and simple level
https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of/
- Reminded everyone to contribute, contribute, contribute; these designs are not set in stone.
- Lots of discussion about how this could work out
- Especially in the context of _inline_ vs _block-level_ blocks
It’s been determined that NOW is the time to start prototyping with simple s. It’s the best way to answer further questions.
https://wordpress.slack.com/archives/core-editor/p1485370036002040
- Matías says there are a few things we can in parallel
- BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and basic interactions (visuals, hover, click to select, moving things around).
- More complex blocks (quotes with citation and multiple paragraphs, images with captions).
- Editing flow for blocks and caret (how does TinyMCE fit, linebreaks).
- A performant parser to infer blocks and render them back.
A can be anything that makes your idea interactive
— iseulde
Ephox has a of mixed blocks http://fiddle.tinymce.com/block/ and a cool “inlite” theme http://codepen.io/tinymce/pen/Gqmkja
Joen’s summary:
- Lots of good feedback on the mockups, how you drag them around, how you format text inside, how you might put a dropcap in one paragraph but not the other
- Questions around inserting fully inline images, how is it done? Button on the formatting bar?
- Concerns about over-blocking, and making the _type type type_ experience cumbersome
- Discussions on live preview vs. abstracted live preview, good question posed: “for a text block, why _wouldn’t_ the text render as it would on the front end? not why _would_ it”
- On live preview — knowing whether it’s something we mean to do in the future helps inform decisions today, even if we start with abstracted preview
- It’s time to start prototyping:
- Block UI and basic interactions (visuals, hover, click to select, moving things around).
- More complex blocks (quotes with citation and multiple paragraphs, images with captions).
- Editing flow for blocks and caret (how does TinyMCE fit, linebreaks).
- A performant parser to infer blocks and render them back.
- ChemicalSailor 11:22 pm on January 25, 2017
  A performant parser to infer blocks and render them back.
  This is a must have. I think my users would ignore any icons that were H1 or H2 etc, but it should be pretty easy to tell that a few words on a separate line is a heading. Likewise, what a list looks like.
  If selection of blocks can be done automatically as much as possible, it should minimise the amount of UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. needed.
  - Joen Asmussen 8:06 am on January 26, 2017
    If selection of blocks can be done automatically as much as possible, it should minimise the amount of UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. needed.
    🌟
  - Joy 8:05 pm on January 26, 2017
    You have to consider the editor is used for two modes: 1 is initial entry and 2 is allowing changes to existing markup. If I want to change a list to a bunch of headings (expanding an outline perhaps), do I have to switch to HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. mode to do it?
    - ChemicalSailor 10:38 pm on January 26, 2017
      Good point. I guess headings are surrounded by whitespace (the visual type). If I had a list, hit return after the first point and then started typing out a paragraph it stops looking like a list, so we should be able to recognise it’s probably a heading and reformat.
      What I’m suggesting is (really) intelligent defaults to help users get started. It should always be able to be overridden, like you would now by hitting the list button to deactivate.
      - Joen Asmussen 8:59 am on January 27, 2017
        What I’m suggesting is (really) intelligent defaults to help users get started.
        🎯
    - Joen Asmussen 8:59 am on January 27, 2017
      How some of these bits play out we’ll hopefully know more about when testing s. But it would seem a prudent goal to have the new editor be as good as or better a tool for applying formatting to your text — anything else would feel like a failure.
Ahmad Awais 7:10 pm on January 25, 2017
Interesting mockups!
Feature parity with the current editor is going to be tricky!
To provide a consistent editing experience, you need consistent both data and predictable behaviors. The DOM is unfortunately, lacking on both of these to be a high-quality data store. The solution for modern editors is to maintain its own document model to represent its contents.
We would also need to discuss some edge cases for theme devs who’re probably using the editor’s content creatively. And how will metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box fit in the blocks model, I think s around it would also help make things clearer.
Anywho, let’s move forward with the s!
- Jon Brown 7:05 am on January 26, 2017
  I think having parity between the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and DOM is critical for theme developers to be able to trust content and hence provide predictability to to users.
  The biggest existing issue with this is how line breaks are handled/used to create whitespace between paragraphs. Again, I remind people
  elements are inline and _can be styled_ to do things other than new lines in certain cases:
  ref: https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element
  This only got weird when TinyMCE/WordPress started making weird assumptions about what a user wanted to used line breaks and paragraph tags unpredictably.
  - afraithe 9:03 am on January 26, 2017
    Yes, unfortunatly the DOM is what we need to work with, and Jon is correct, it is very important in order to be able to trust what is happening, or your moving even more away from WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.. A seperate model for storage is good for some things, but probably not for WordPress at this stage, not to mention the extra amount of work needed around that.
    I am sorry I could not attend the meeting, I monitored it through my phone, and had Andrew post the BLOCKBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Concept that I quickly worked up.
    http://fiddle.tinymce.com/block
    To explain a bit more, my idea would be that you could have the current UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. fairly intact, and simply “enable” block editing if the site/theme is setup for it. As you see in my example, when you start it, it has the default setup of a title and a richtext body, and you can imagine the “ADD BLOCK” feature not being there, if it isn’t needed. If your using it as a simple blog, you might not be interested in the block concept for creating long page content NYT-style, and we should not make it harder for those types of setup (trying to think about the millions of usecases here).
    The example is using the InLite theme in TinyMCE, but that’s optional, you could still have a top toolbar or similar if needed, and of even in the InLite theme, you can also configure the toolbars (insert & select).
    The danger with this, is that there is some redundancy, you can do the same things inside the richtext (adding images etc) that you can do with some blocks (and sometimes with more flexibility). Now, TinyMCE can be configured to only support certain features, so maybe that happens when you turn the block feature on, the richtext gets reconfigured only for “simple” content. You certainly need that for other things, like in the columns etc, you probably don’t want ppl to insert Youtube videos in them.
    I can also see a scenario with a completly custom block, that has settings attached to it, like when during the day it should be visible, showing different content depending on the actually time of day where the viewer is located. Maybe a seperate table/form wizard style interface etc etc etc.
- Joen Asmussen 8:08 am on January 26, 2017
  We would also need to discuss some edge cases for theme devs who’re probably using the editor’s content creatively. And how will metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box fit in the blocks model, I think s around it would also help make things clearer.
  Definitely and for sure!
  Some of the best feedback to come out of the comments on the previous post, were suggestions to think in flows of content and metadata. This can help provide us with a good sense of “what goes where”, when we get further down the line with regards to feature parity.
Drivingralle 12:41 pm on January 26, 2017
I remember two talks from Adrian Zumbrunnen about this topic. He also had developed some tool going into that direction.
I don’t know where the development of it went but something worse looking into.
http://wordpress.tv/2014/10/22/adrian-zumbrunnen-rethinking-content-creation/
http://wordpress.tv/2015/07/10/adrian-zumbrunnen-wysiwtf/
Mark Root-Wiley 5:05 pm on January 26, 2017
I think these mockups are awesome! The directions of these features are really exciting!
I have two thoughts I haven’t seen expressed much in this thread yet:
1. “Decisions Not Options” / Decision Fatigue / Interaction Cost / Don’t Make Me Think / Paradox of Choice
There is a ton of research—growing still—showing the dangers of too much choice. It goes by a lot of names and variations:
More options ≠ Better Interface! I think it’s easy to look at these mockups, get excited, and then forget that we’re proposing adding a ton of decisions to the writing/composing/posting process.
I think the interactions probably matter as much as the design here, but it’s important to call this out now and keep it in mind. Progressive disclosure is a thing we should be thinking about right now. There will still be lots of 5-paragraph + an image blog posts. There will never be as many blockquotes as paragraphs. Code will always be an edge-case posting use case.
It should be easy and quick to change insert a non-paragraph blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., but I don’t know that it should be prominent. The current screenshots feel right on the edge of that to me right now, but it’s admittedly hard to know without a live demo.
2. Floating?
This is an awfully linear interface and thinking about floated images (primarily) along with other things like pull quotes (a la Twenty Sixteen) is throwing me off a little. Are those little blocks inside other little blocks?
Those who know HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites./CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. know that floated elements don’t have to be technically nested, but they sure appear to me! How is this handled by the current proposal?
- Joen Asmussen 7:03 pm on January 26, 2017
  💫
  A user interface that is more mindful about users is absolutely the top priority. If done well, content blocks could be a way to drastically reduce and simplify the current user interface, which is… well… there’s a lot.
  To put it differently, by treating sections as rich items with contextual properties, we can keep only the interface that is necessary for the moment on the screen at one time. So that is, not taking away features or hiding them, but rather making sure they are in their right place. Everything has a right place. Progressive disclosure, as you suggest, fits right into this, like a 🎯
  With regards to floating, and a live demo — prototyping this stuff is next on the agenda! There’s nothing to learn us what works like trying this out in practice.
  (In a way we are testing the 2 linebreaks for P, 1 for BR every time we write a comment here!)
jhned 1:54 am on January 27, 2017
The feature that I want here more than anything else is the ability to register custom blocks that are more complex than standard typography like paragraphs, heading tags, lists, etc.
To that end, maybe the interaction panel could have a fuzzy search input that filters all blocks, and tabs underneath. The default tab would be “typography,” the next tab could be “media,” and then theme developers could register and add their own custom groups to go after that.
- Joen Asmussen 8:50 am on January 27, 2017
  The feature that I want here more than anything else is the ability to register custom blocks that are more complex than standard typography like paragraphs, heading tags, lists, etc.
  This absolutely has to happen.
  To that end, maybe the interaction panel could have a fuzzy search input that filters all blocks, and tabs underneath. The default tab would be “typography,” the next tab could be “media,” and then theme developers could register and add their own custom groups to go after that.
  That’s not a bad idea! 👍
  - FolioVision 12:01 pm on January 27, 2017
    Most publishers wouldn’t need many custom blocks but encouraging publishers to build two or three standard custom blocks which go in the same place could really improve workflow for advanced/high traffic publishers. Wonderful idea.
    I wonder what the best syntax would be to build these blocks as we’d like publishers to be able to build their own.
Anonymous User 10:56 am on January 27, 2017
hmmm a rather basic and fundamental question; I’ve read the article as well as browsed through the comments, trying to grasp the gist of the concept of blocks.
So are they some sort of “tagging” for paragraphs aka blocks of content inside the body field? But that is basically still one single semistructured blob of content and the reuse of one of its blocks rather cumbersome I am afraid. The concept of create once publish everywhere might be tough to accomplish that way. Wouldn’t it make more sense to integrate blocks with the Fields APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.? To be able to tag certain fields or fields groups with blocks for a certain CPT, where a user then is able to choose from that certain selection of blocks and enter his or her content into? Would be a more structured and controlled environment. In the present state things still sound like a big blob of content imho. Don’t want to be too negative and maybe I just understood the concept in the wrong way. Please correct me if that is the case.
- J.D. Grimes 2:56 pm on January 27, 2017
  The blocks, as in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. picker, do not represent the content itself at all, they are the type of content. So no, it isn’t a way of tagging content. It is a way of building a post from different types of content (paragraphs, images, blockquotes, etc.), just as we do now. However, in this case, when we want to insert an image next in the post, we make the next “block” in the post an image block, and select the image for it to contain. A block in the post, like a paragraph, doesn’t become a thing that we then insert into another post. The post is still one big blob of content, in terms of the way that it is stored (for now anyway) or displayed. But when constructing/editing the post, the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. treats it as if it was made up of different blocks. The content itself is not made reusable by this, though the block types are (semi-)universal.
  - Joen Asmussen 4:01 pm on January 27, 2017
    Excellently put! 🚀
Mel Choyce 7:37 pm on January 27, 2017
Random idea:
When a theme or pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party registers a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., they can choose which block section it lives in within the block picker. Each block section is given a default icon, so if the plugin/theme author doesn’t provide an icon, it still shows something.
- Joen Asmussen 7:53 pm on January 27, 2017
  ❤️
  — also (@folletto‘s idea): which other blocks it is compatible with, in case you want to convert from one blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to another.
  - Mel Choyce 8:17 pm on January 27, 2017
    +1.
    Also: what if some blocks were groups of other blocks? (Might be more relevant in a site building context)
  - Mark Root-Wiley 10:35 pm on January 27, 2017
    — also (@folletto‘s idea): which other blocks it is compatible with, in case you want to convert from one blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to another.
    Would be great if doing that would also allow for blocks to “fall back” to a CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block type if a theme one disappears. I’d hate for blocks to lead to bad theme lock-in, though I recognize that some is inevitable.
    At an extreme end, what if pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party/theme blocks are all extensions of core blocks?
    - Ian Stewart 10:41 pm on January 27, 2017
      At an extreme end, what if pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party/theme blocks are all extensions of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks?
      what if some blocks were groups of other blocks? (Might be more relevant in a site building context)
      I wonder if it would be helpful to list some blocks we think would be hard or impossible to build with a list of basic blocks, or that extended basic blocks.
    - Payton Swick 10:52 pm on January 27, 2017
      This is what makes me want to have all blocks registered by plugins rather than themes. The same risks still exist, but there’s less likelihood of blocks becoming unavailable. If a theme wanted to add blocks I’d prefer it if we allowed themes to specify pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party dependencies.
      That said, if we store blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. instances as htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. in the post content (as has been discussed), then any unfamiliar static block simply becomes an “html” block. It could still be viewed and modified, but the unique interface for that block would be missing.
      - Joy 1:21 am on January 28, 2017
        I keep thinking we need a better definition of the goal before we can tell what would be in a theme or pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Does a move to content blocks imply a change to the template hierarchy? Do themes get more leeway to create content than they have now, by being tied into the editor (for columns and spacing and defining blocks)? If content blocks are in the editor, where do plugins come in?
        And if I can’t look at the raw content of my post to add my own HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. or inline styles or javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., then the editor is less useful than it should be.
      - Davide 'Folletto' Casali 10:43 am on January 30, 2017
        This is what makes me want to have all blocks registered by plugins rather than themes.
        I’d lean to have blocks as plugins only too.
        Once the blocks APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. is defined I think that in theory themes “could” register blocks from a technical perspective… how could we avoid a theme to use the same API to register them?
    - Davide 'Folletto' Casali 10:58 am on January 30, 2017
      Would be great if doing that would also allow for blocks to “fall back” to a CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. type if a theme one disappears. I’d hate for blocks to lead to bad theme lock-in, though I recognize that some is inevitable.
      At an extreme end, what if pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party/theme blocks are all extensions of core blocks?
      Here’s how I’m currently visualizing this concept:
      1. Each block provides a one-line declaration somewhere that states: “Compatible-with: blockid;”.
      2. That statement is used in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. to provide groups of “instant switch” between blocks. I imagine for example that an advanced checklist block (i.e. a block plugin made by Asana or Wunderlist) could state “Compatible-with: list;” (which is Core’s ul/ol block) and that allows instant switching from a normal bullet list to their version of the list.
      3. The statement is also used as a fallback: if the advanced checklist plugin is then removed, the list will revert to Core’s implementation (here we need to understand how this is managed in terms of UI, but in general should work well).
      4. A block plugin that doesn’t declare anything will not be grouped in the “instant switch” UI, but will fall back to a basic “text” area if it gets removed.
      5. A block plugin can also declare “Compatible-with: asana-checklist;” which is a third party plugin, so custom blocks can have their own grouping without crowding standard blocks with fallbacks (fallback to text is still available and should still be proper).
      This logic should ensure two things:
      Graceful and controlled fallback.
      Proper grouping, without crowding too much core types if not proper.
      I wonder if it would be helpful to list some blocks we think would be hard or impossible to build with a list of basic blocks, or that extended basic blocks.
      @iandstewart One aspect I think it’s important to state about this idea is that it’s not about creating a logical structure of inheritance, but allowing fast switching between semantically appropriate units. So even if a block is in theory better suited to a blockquote but it would be meaningless for it to appear as an “instant-switch” for a blockquote, it should simply fallback to text.
      Then there are as you mention some things that probably don’t map at all. I can imagine belonging to this things like “PDF Embeds” or “3D Canvas” or “Unity Plugin”.
      I’d also note that if we build Core blocks too “as if they were plugin like any other” (even if of course not listed as plugins, but using the same system and logic) that would allow us to make sure the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. is proper, as well as future more granular management (i.e. I can imagine specific use cases that want to reduce functionality for any reason, or replace all core blocks).
      - Joen Asmussen 7:27 am on January 31, 2017
        🏅
simonrjones 2:34 pm on February 4, 2017
This all looks great, we’ve been using similar techniques with plugins in both WordPress and Drupal over the past year or so. The biggest issue is the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. with plugins (they can be pretty horrible for the end user) and the increased complexity makes this rather buggy (so it’s a pain to implement). CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality to achieve this would be fantastic.
You’re basically talking about a semantic HTML5 editor, something that has been talked about a lot over the past few years but never satisfactorily executed.
A few questions / observations:
1. It is critical to be able to extend these “blocks” with custom code. We use a component-led design approach at my agency (aka Brad Frost’s Atomic Design) and these components would ideally be blocks. E.g. carousel, gallery, collapsable area (think FAQ questions & answers). Ideally this would be defined in clean, OO PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.php., since this is really developer territory.
2. Any thoughts on what happens if a custom blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. changes it’s HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.? I wonder whether the user-input data needs to be tagged up somehow in the HTML so it can be extracted / re-ordered as necessary.
2. I think I saw some notes on hierarchy rules for blocks within blocks in the comments above. This seems very sensible. Presumably these should be based on the rules of HTML5 since that’s the output? E.g. you can’t stick a DIV inside a H2. Each block should have a container HTML element to help make these rules possible.
3. Has there been any thought to converting existing HTML content into blocks? E.g. convert an existing post body area into blocks. A parser would help with this, but it may be overly complex and a nice-to-have.
4. Is there a list of desired MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia functionality for this, or is this all in the experimentation / phase still?
5. On how it’s implemented the HTML comment seems nice, but if users can edit HTML then it’s still a little fragile. How about HTML5 data attributes?
A few ideas on how you may use data attributes for this (in the HTML), with an example of a complex custom component HTML we’ve used in a recent project. Using data attributes on base HTML elements may not be necessary if the editor is aware of these already and we know the entire content area supports “blocks.”
See https://gist..com/simonrjones/33541f7bf8599d56b60636b1d36ad7c0
(I couldn’t easily copy and paste into here)
- ChemicalSailor 8:37 pm on February 6, 2017
  Has there been any thought to converting existing HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. content into blocks?
  I think this is a really good point that maybe hasn’t been thought about. The editor needs to work just as well with pre-existing content as with new.
  I’m struggling to understand why we need HTML comments or data attributes to define blocks. What’s wrong with just using the HTML tags themselves?
  - simonrjones 10:37 pm on February 6, 2017
    I’m struggling to understand why we need HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. comments or data attributes to define blocks. What’s wrong with just using the HTML tags themselves?
    I’m no expert on the WP editor codebase, but I’d say because HTML is incredibly difficult to parse and adding metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data in some way makes this whole process a lot easier. Plus programatically we know that a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. of HTML is supposed to be blocks.
    Also, for complex blocks (such as my collapsable FAQ items example) you need to know what parts of the HTML represent user-editable data. And you can’t do that easily in pure HTML.
    - Joen Asmussen 8:41 am on February 7, 2017
      From what I gather, this is exactly right: speed.
      It’s also my impression that older posts don’t have to be “updated” to include these comments. If this is the path we go, it’s my understanding they can be added as the post is first loaded into the editor.
      - ChemicalSailor 8:30 pm on February 7, 2017
        This is what I was thinking, just thought that to add these comments or attributes would require parsing the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. anyway
        Matias Ventura 11:44 am on February 8, 2017
        Depends on how we deal with old posts—adding comments as you interact with content, adding them only for new blocks you add to old posts, or parsing it all in a single go. Parsing HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. is tough and not something we want to do every time you load a post. It also couples us with specific markup to identify blocks.
        Joy 3:15 pm on February 8, 2017
        Parsing HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. is not that hard. The browsers do it all the time, and this editor is used in a browser, so what’s the big deal?
        I still want to be able to edit the raw content and all kinds of plugins have filters on the_content(), so it better not be much different from how it is saved now or there will be collateral damage.
        Matias Ventura 3:25 pm on February 8, 2017
        Have a look at this post which goes over the technical requirements a bit more.
        Joy 3:27 pm on February 8, 2017
        Yes, I read that before.
        Matias Ventura 3:38 pm on February 8, 2017
        As we start adding richer content, one that is represented through embeds, shortcodes, etc, parsing becomes more complicated. To fulfil the requirement of having everything in the_content, we need to infer structure in a way that is fast and reliable.
        Joy 8:02 pm on February 8, 2017
        We already have that with shortcodes and embeds.
        FolioVision 3:33 pm on February 8, 2017
        Hi Joy,
        I don’t think you understand what we are up against. The goals are:
        to make WordPress a tool so complex that only a handful of hosts and consultants can maintain or use it properly.
        to make building and maintaining free plugins unsustainable (so that all the free and open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. competition for pro plugins just disappears).
        Most great free pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors have already thrown in the towel as the amount of maintenance required for a WordPress plugin is just not worth it. There’s not a single living CKeditor port for example (we brought our FCKedit-based editor back from the dead as a consequence). The best of the anti-spam plugin crew (Spam-Bee) have also had to give up. CleanTalk is out there but it’s paid. These are just a few examples. I’m sure others on this thread could contribute more examples of great free plugins crushed by the release schedule.
        Stability, security, backwards compatibility, low maintenance and open standards don’t hit the radar of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. salaried contingent anymore. I wrote a long post outlining how to really build a better editor without destroying the framework we already have.
        As the internal cabal at WordPress has already decided we are getting content blocks and destroying the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. editor, not one of them has even deemed to acknowledge my post which is going viral across the rest of the non-Automattic controlled internet. There is only the illusion of open collaboration.
        As someone who has devoted ten years of my life to build stable, secure and reliable software in and around WordPress, I cannot express fully my disappointment in this break everything direction so unfair to WordPress small business publishers and users.
        Based on the current censorship model at WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ (dissent is treason), you will probably not ever see my post. At some point soon, you may find yourself restricted from posting as well. Thank you for keeping up the good fight for sanity here.
- colomet 4:19 pm on February 8, 2017
  Too much work work codding for new functionalities i believe
Joy 10:01 pm on February 4, 2017
It seems that people want a WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editor. To get that, the theme needs to be involved in generating the preview, because the editor HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. structure and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is different from what the theme will output on the front end. The HTML affects the CSS, and the CSS affects how it looks. Then again, what you see in a RSS feedRSS Feed RSS is an acronym for Real Simple Syndication which is a type of web feed which allows users to access updates to online content in a standardized, computer-readable format. This is the feed. is different, and what you see on a small screen is different from a large screen.
When you create a content blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., do you position it as well (like a left-aligned image)? Can you specify 2 or 3 columns? Are we just talking about dynamic content (shortcodes)? Some of these things are pure CSS and others are HTML with or without javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. helpers.
Would it work to define the basics in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. with a specific structure so that themes can consistently provide CSS styling (like alignleft)? And then any additional would be added from plugins, as they are now (shortcodes).
colomet 4:05 pm on February 8, 2017
I believe that helps but we need to go further. We are creating pages in the same way we write hardcover books. Why? i believe a page must be dinamical and diferent for each reader upon the situation (maybe not always is necesary, but we need to allow such system).
Imagine a page about cars, if we need to update the page, to open and edit the posts is a bad approach. I believe is much more dynamical if instead of that, we create two
child posts
and then the site offer both posts together as one page, imagine somebody write post with just an infography, we could integrate the inforgraphy in our page or or to allow different people to write the same section in diferent child posts and then the people to choose the best options and create the perfect post by the community.
Blocks are cool but are not powerful enough if we whant to allow true oppenes in the content. Or maybe i´m missing something.
thanks
- Joy 8:00 pm on February 8, 2017
  Your example is definitely not what the majority would want. The way that web pages are like books is that it is written once and used for reference after that. If every user got a different version, how can people relate to it?
colomet 8:13 pm on February 8, 2017
the problem is to have dinamic pages, if you whant to have a static pages, can be easy to make a snapshot of the moment and use it for long time or forever.