What you see is what you really get. I stumbled upon this brilliant tip from Andrew Ozz today:
Things like typefaces, headings, image padding and borders, etc. can easily be set by the current theme making the visual editor… more WYSIWYG. All it takes is a stylesheet and a small function in the theme’s functions.php file.
Say what? I had no idea, so I decided I had to give this a try for 2010. The result?
Here’s the HTML Elements page from this site, as seen from within the visual editor:
You get a great sense of the way your text will interact with images when you’ve got a little bit of your theme right inside WordPress. Here’s the Image Alignment and Styles page:
Pretty cool, right? Using the visual editor with the 2010 theme now means getting a perfect replica of your blog’s theme when you’re writing. If you’re like me, constantly clicking “Preview” to check how text wraps around images or whether that size headline will work, you can finally break that addiction. Big thanks to Andrew Ozz for the helpful hint.
Twenty Ten 
That. Is. Awesome.
Any chance I can beta this heme?
It should be going into the repo verrrrry soon — everyone will have a chance to test it before it ships with 3.0. 🙂
I thought the 2010 was already included in the nightly-built, but it was not. However, to get the the point of the post, this is really a very cool feature – something anyone, advanced or rookie will like in my opinion.
Sounds like an amazing feature! 🙂
Would be nice if the text-box area in the backend has the same width of the container in the frontend, isn’t it?
(I hope you understand, sorry for my poor english 😉
You’re right — I think the WordPress admin is most useful in its current flexible width, though. I think if our theme started messing with things like that, it could be potentially controversial. 🙂
If you want you can do so by adding a width like this:
html .mceContentBody {
width:580px;
}
in editor-style.css
Though I do have to agree with Matt, i did set a width in the backend up for a client once so it would show exactly the same as on the frontend.
Edwin brings up a good point — I could keep the textarea a fluid width and set a max-width for the content within. I’m going to try that route.
that’s what i meant…
I just pulled twentyten from the trunk – looking good Matt!
How much change do you expect before release? That is to say, should I leave it untouched until closer to release, or can I commence playing now?
Visually I anticipate very few changes; functionally there may be some significant functionality still added, and the code is changing rapidly as developers far smarter than I have a look over the code. If you’re customizing mostly CSS you’ll be fine; if you’re doing some fundamental changes to how the theme works I’d just recommend being realistic about how difficult it may be to merge your changes with the final version of the theme (if you want to be able to do that).
Thanks Matt. Good to know. 🙂
How hard is it to keep those styles synced between the style.css, and the editor-style.css?
As far as I know, that has to be done manually. I suppose it’d be possible to put content styles in a single external stylesheet, like content.css, that was
@imported into both style.css and editor-style.css. If you decide to customize this theme that may be a good idea. Otherwise, I’d just suggest waiting to create editor-style.css until you considered your stylesheet finished (I don’t anticipate any changes being made to the way content is styled in 2010 before it launches).It’s awesome. Can’t wait for the final release of 3.0, IMO a big step-up for WordPress 🙂
This is how things work in Windows Live Writer, and I’ve been waiting for it to become a standard in Editors in the future. Glad that future is finally being realized.
Great tip!! I’ll be sure to test this out!
Cool template… can’t wait to use it!
awsome 😀
Pingback: Microsoft makes good stuff? » Absolute Geeky