The text editor turned out to be a bigger project than planned, this was due to your feedback and us working hard to make sure we got it right. So today, I’m pleased to introduce the new typography component that works in conjunction with the new Typography area in the Theme Studio. You are now able to mix headings, paragraphs, and more in the same block of text, it’s pretty awesome!
And while this work isn’t quite finished, it is at a stage where we can demo it (and ship it in tomorrow’s beta), so you guys can give us some feedback on it.
Watch today’s video and see for yourself why this is a huge leap in WYSIWYG text editing.
Thanks as always!
We’re listening to all your feedback and working super hard to make Elements the perfect website builder.
How would you add buttons, dividers, images/svgs, embeds, or videos inline within an article (typography) element? Currently it looks like you’d have to create two (or more)<article> elements and place any buttons, images, videos, etc in-between them — which isn’t ideal from a semantic/SEO perspective. I could also see folks wanting to add containers, grids and flex elements in an article for things such as galleries, figures, tables (there’s also no table component yet), etc. Also, with regards to images and SVGs, there’s also the question of how to include them inline (spark lines, custom emoji, etc) as well as how to float them and wrap the text around them, beyond just placing them as a block.
Are there standard typography styles/settings that would be common to each theme, allowing you to quickly switch themes and keeping the typography largely intact, or would you have to go in an change each of the typography settings for each of the elements in your site every time you change the theme?
As for naming, ‘text’ and ‘typography’ are a little confusing. Perhaps something like ‘label (short text snippets)’ and ‘text (long form articles, etc)’ would be more familiar? I know you’re leaning on Tailwind’s Typography extension here, but while the text is being styled using the Typography extension, users will most likely still relate to it as text.
What an update once again. It looks very good with lots of possibilities. The only thing that isn’t clear to me is why there are two components: Text and Typography. If I understand the explanation in the video correctly, the Text component is for short pieces of text, including headings, and Typography is for longer pieces. But why wouldn’t you just use Typography for short pieces and headings as well? At first glance, the Text component seems a bit redundant. Maybe I’m wrong. That’s why I’m very curious about the update coming tomorrow.
Looks fantastic and I am looking forward to banging on the new beta tomorrow. I also agree with @bryanrieger & @Bartje with regard to naming convention. It is a bit confusing, (although one could get used to it). Also, the text element NEEDS A LINK CONTROL (unless of course I just didn’t see it - I did see the one for the Typography Element). I am also tending to think that maybe just the typography element is needed as it has all the needed controls. Name it Text and call it a day…
I am also VERY happy with defaults now able to be set for colors for at least some things.
This is 100% Excellent work! For me this is a game changer!
Yep, need this but maybe its coming.
I can see this for insuring a wrap container is named. <article> <div> etc (see below). Though I suspect a condition could be added, If you didn’t name a container it would simply default to not only unlabeled, but not even being used. I like the short name of text and typography, it won’t take long at all to know exactly what those mean and how to use them. But I agree, can the whole thing be simpler, just text?
If you’re doing a long-form article, you embedding at least images in it here and there, but as others pointed out, there may be more.
So while I very much like what you’ve done with Typography, it won’t work for what I need as is. I’ll be making a lot of Type/Typography blocks for a single article.
This is looking good, but I agree with all of the other comments that there are some unanswered questions about things like embedding images. This is where I see the Markdown support making sense as it is very easy to handle this with markdown. But maybe there is something in the Tailwind typography plugin that makes this simple to achieve. I certainly hope so as I would hate to have to break a chunk of longform text up in order to have images inline with the text.
That said this is a HUGE step forward from where we started with the text engine, so kudos to the team for moving the needle way further forward with text.
Wow, apart from embedding images, which I’m sure will come soon enough, this looks very promising and easy when it comes to adding and styling text content. Well done.
Will tomorrow’s beta update include V2 components already?
@dan This really was a major whet of my font and typography nerd appetite. Brilliant.
I did not see a control that would allow me to set line and paragraph spacing (might that have been under the Typography > Spacing twisty?) If it doesn’t exist, please include that functionality.
Re: what others have said about Text vs Typography, I agree: we only need the ‘Typography’ component (unless you have a use case for why we need both?)
How do i sign up to get access to the betas? Did that window close? Is it too close to public beta so best to wait? I’m building a relatively simple site for a new business I will be starting early in the new year and would love to see how Elements performs in that endeavor.
There’s a couple of differences, that become a lot clearer in practice when you start using theme. The Typography component has a wrapper around its content, it applies a “prose” tag so the various H1, H2, tags can be styled by the Typography plugin in Tailwind.
Yes, you can set, Alignment, Line Height, Letter Spacing, Weight, Font Family, Font Size and Colour.
Now that we have the V2 Components and new text engine in the beta we’re soon going to start adding more users, drop me an email (dan@realmacsoftware.com) and I can send you the details!
Most V1 components (and more( will be making a return. But, I’m not sure I know what the “image text” component is Can you share a few more details on what it did?
