The hybrid (HTML & JavaScript) approach has worked well enough to bring a rich editing experience to our users. The limitations of the web view has prevented us from giving those users the anything better than a 7 out of 10 experience. The only real solution for us to reach a full 10 out of 10 was to rethink the implementations to get closer to the metal. That means using APIs provided by Apple and Android to make text editing feel like something that was made for the platform.

The mobile team has been hard at work since July 2016 to improve the post editing experience for our users.

Our hope is the Aztec editor is seen as a component that can be used by many iOS and Android apps to provide a rich HTML editing experience. We feel that we could garner a bigger contributor base to the mobile apps simply because this component exists, is free & open, and is super awesome. We’re not biased at all, of course. 🙂

What Does Aztec Give Our Users?

• Accessibility – Using OS-provided text controls makes every piece of what you can see to be visible to technologies like VoiceOver. We can now properly support our users that require accessibility. Additionally we can now support dictation!
• Spell Check – Something as simple as spell check is a nightmare to get working properly in the current hybrid editor. No longer a problem with Aztec! This makes the editing experience feel safer for our users.
• Speed/Performance – Aztec is so much faster and memory efficient since we have control over the small things.
• Aztec Everywhere – We plan on using Aztec in more than just the editor view. Aztec is actually a text view implementation and lightweight enough to use in many places in the app. Think of being able to send rich text replies to comments and a more robust iOS sharing experience thanks to a fully custom UI.
• Contribution – We’re packaging Aztec as a component in its own GitHub repository (each platform has its own repo). This makes Aztec something outside users will want to incorporate into their own apps and contribute back to. Quite literally there is nothing like this out there – every editor we could find uses a web view or has very limited support for any HTML.
• Undo/redo – The Aztec editor supports undo/redo on both platforms. It’s temporarily disabled on iOS until we finalize some bug fixes.
• Unit Testing – We’re actually able to write unit tests for scenarios that come up and make sure they’re handled consistently. UI testing is also now possible!

What was so Hard?

Editors are hard. I think many of us here working on WordPress can attest to just how difficult dealing with HTML is sometimes. We had a number of technical hurdles to get over. Some of the challenges were:

• HTML Synchronization/Consistency – Switching between HTML and visual editing mode presents a ton of challenges keeping things in sync. HTML tags that don’t visually alter the rendering need to be retained – dropping that markup would dissatisfy users fairly quickly.
• Lists & Block Quotes – We’re still having struggles with getting the editing and rendering experience just right with lists and block quotes. They’re deceptively complex and have been one of the places we’re spending the most time on to get right.
• Amount of Work – There’s just a lot to do with an editor. Edge cases are so numerous that they really aren’t edges. Editors are more like spikey balls on chains.

Okay, I Want to Test it Out!

We wanted to ship Aztec quietly to limit the number of voices providing feedback. The projects aren’t 100% ready for feedback from the full community quite yet but we feel everyone reading this blog can get an early peek. We’d like you to keep some things in mind as Aztec isn’t completely finished on both platforms. We’re not rolling out Aztec to our public beta testers until we’re sure the editing is a beta or better experience.

1. Aztec is not quite ready for posts where losing formatting would ruin your life. We’re still working out bugs and HTML synchronization between what you see and what ends up on the server is one of the areas we need testing for.
2. Lists and Blocks aren’t fully finished. Nested lists on iOS aren’t supported yet.
3. Media support is limited to images. Videos aren’t supported quite yet and images may have some funk with how they’re presented on Android.
4. External keyboards are supported but not fully feature-enriched. Feel free to use your keyboard with your tablet. Things like the tab key may not be spot-on yet.
5. You can check out the open issues lists on GitHub to understand what’s left to work on.
   • iOS
     • Aztec Component: https://github.com/wordpress-mobile/WordPress-Aztec-iOS/issues
     • Aztec Integration: https://github.com/wordpress-mobile/WordPress-iOS/issues?utf8=✓&q=is%3Aissue%20is%3Aopen%20aztec
   • Android
     • Aztec Component: https://github.com/wordpress-mobile/WordPress-Aztec-Android/issues
     • Aztec Integration: https://github.com/wordpress-mobile/WordPress-android/issues?utf8=✓&q=is%3Aissue%20is%3Aopen%20aztec

Turning on Aztec in the WordPress Apps

You’ll want to become a beta tester for the WordPress app to get access to the newest changes. Join the iOS TestFlight program for Apple devices. Android users can join the beta from the Google Play Store on your device (under “Become a beta tester”).

The next step to using Aztec in the WordPress apps is to unlock it as it’s a hidden feature right now. In the web browser on your device, visit this URL:

wordpress://aztec?available=1&enabled=1

This unhides Aztec in settings and turns it on. You can turn the new editor on & off by following these steps:

iOS: To turn on Aztec in WP iOS 7.2 or newer, navigate to the Me tab, tap App Settings, turn on Visual Editor (which should be on already), then turn on Native Editor.

Android: Turn it on by navigating to the Me tab, tapping the App Settings option, tapping the Set editor type setting, and choosing either Legacy or Visual.

Using Aztec Directly

Each of the Aztec repos also contains a demonstration application to use the Aztec component without it being inside of the WordPress apps. If you want to start hacking away on the component itself, this is the best way to start looking at it.

iOS: https://github.com/wordpress-mobile/WordPress-Aztec-iOS
Android: https://github.com/wordpress-mobile/WordPress-Aztec-Android

What should I report?

• Discrepancies between what you saw in the editor and what actually got published – If you lost formatting or had other problems we really want to know.
• Crashes – any time you get the app to crash whilst in the editor, let us know.
• Content that freaks out the editor – if you found some HTML that the editors just do not like, let us know. We’re looking to bulk up our unit tests with examples that make things get wonky.
• Anything preventing you from publishing – specifically on iOS we rewrote the code around the entire editing experience. If you discover state issues that don’t let you tap publish (for example), let us know.

How should I report?

• GitHub – Report issues to the main WP Android or WP iOS repos. If you know for sure the issue lies with the Aztec component you can report it directly to the appropriate Aztec repo.
• Slack – We’re hanging out in WordPress.org Slack in #mobile.

What’s Next?

Here’s a list of the milestones we have in the project and approximate dates:

1. Alpha – Turned on for the development team & testers to dog food. We’re here now.
2. Closed Beta – When the editor is good enough to advertise to beta testers (turn on w/URL) and to get feedback from them. Starting with WPiOS 7.5 beta & WPAndroid 7.3 beta which equates to April 24th.
3. Open Beta – When the editor is good enough to unhide the option to be able to turn it on/off for everyone (advertise it to App Store users with the caveat of beta). Ideally shortly after closed beta; May 22nd would probably be the earliest.
4. Release Candidate – When the editor is good enough to turn Aztec on by default but allow it to be turned off. We’re estimating a month or more of beta time; June 19th+.
5. Full Release – When Aztec replaces all current editors and legacy code is removed. This is mid to late July or later depending a number of variables.

Closer to the open beta we’ll start focusing on improving documentation for contributors on the individual project repositories. You can also look forward to seeing posts here on technical discussions for both platforms.

Special Thanks!

None of this would have been possible without the hard work of: @0nko @diegoreymendez as technical leads,  @rachelmcr heading up our testing efforts, and @heckofanapp @hypest @klymyam @lanteanar @sergioestevao @mbiais @bummytime @folletto @aerych @koke working on the engineering and implementation.

#accessibility, #announcements, #aztec, #editing, #editor, #native