Tag Archives: core-editor

Cameron Voell 2:32 am on July 25, 2020
Tags: core-editor, gutenberg,   

Native Mobile Editor Moves to Core Gutenberg Repo

This post covers topics relevant to developers interested in the Gutenberg block editor and development efforts for extending the benefits of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ to native Android and iOSiOS The operating system used on iPhones and iPads. applications. For background information on the Gutenberg Mobile effort, see the following posts:

The main takeaway from this post is that you can now build, run, and test the native mobile 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. editor as a React Native Demo App on Android and iOS, right from the core Gutenberg GitHub repository, also used by Gutenberg web contributors.

  • Native Android Demo App
  • Native iOS Demo App

The new capabilities resulting from this change are significant because they empower developers working on Gutenberg coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to run continuous integration automated tests simultaneously on Web, Android, and iOS, as well as run the block editor on all three platforms for development and debugging purposes, all from a single code repository. 

Nothing special needed to run the Web, Android, and iOS tests together on CI, just open a PR against the Gutenberg repo and tests will run

The mobile block editor achieved this move closer to core Gutenberg development with this Pull Request which moved 7,234 commits(squashed) and 31,000 lines of codeLines of Code Lines of code. This is sometimes used as a poor metric for developer productivity, but can also have other uses. from gutenberg-mobile to the gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository. For instructions on running the mobile editor on iOS and Android see Getting Started for the React Native Based Mobile Gutenberg in the Block Editor Handbook. See a quick excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. on running the demo apps below:

nvm install --latest-npm; npm install
npm run native start

// With the packager running, open another terminal window 
// and use the following commands to compile and run the app:

npm run native android
npm run native ios

Looking forward, this multi-platform development repository setup reinforces the Gutenberg project goal of creating a cross-platform ecosystem where developers will be able to code Editor Blocks using JavaScript that will be usable by content creators on the Web, as well as in native Android and iOS applications.  While the “code an editor block once, run it anywhere” goal is not a reality yet, as native specific files are needed in most blocks today, this move to a web + native “monorepo” setup will help make that reality more achievable, from both a practical and organizational standpoint. 

For more information on native mobile Gutenberg and the new repository setup, see React Native Based Mobile Gutenberg under the Code Contributions section of the Block Editor Handbook. If you have any questions or want to get involved, feel free to discuss in the comments or find us in the #core-editor and #mobile rooms in WordPress.org Slack.

#core-editor, #gutenberg, #mobile
Jorge Bernal 10:13 am on February 26, 2019
Tags: core-editor,   

The block editor is coming to the mobile apps

I’m proud to announce that we’ll be shipping the first public version of 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. editor in the apps with their 11.9 release. This release will be available for betaBeta A pre-release 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. testers today (learn more about testing the apps), and the general public in March 11th.

What to expect

For this first version, our main focus was to build a pleasant writing experience with support for the most basic types of content.

Our data showed that 90%+ of the posts created on the mobile apps consisted of basic text and images, so we decided to focus on supporting the Paragraph, Image, and Heading blocks on this version.

Within those limits, we wanted this to be functional and usable as a replacement editor from the start, so we did a lot of work on making sure the little things that you would expect to work on an editor were there: pressing enter would create a new paragraph block, support for undoing and redoing edits, basic formatting,…

Known issues

  • On iOSiOS The operating system used on iPhones and iPads., using typing suggestions sometimes removes spaces between words.
  • On iOS, dictation doesn’t work at the moment.
  • On Android, when you insert a Heading block it initially shows no formatting.

How to test the block editor in the apps

Once you have version 11.9 of the apps, the block editor will be available, but not always used by default. When you edit an existing post, it will detect if it has block content and open it in the block editor, otherwise it will open in the classic editor. If you prefer to edit a post with blocks in the classic editor you can still do so by going to the editor menu (•••) and choosing “Switch to Classic Editor”.

When you create a new post, it will use the classic editor by default. To change that, you can go to Me > App Settings and enable the Use Block Editor option, and every new post will be created in the block editor.

What’s next

After the release, we will start working on some UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. improvements and visual refinements that didn’t make it in time, and any major bugs that comes up. Shortly after that we’ll also spend time adding support for the most common blocks and use cases.

Get involved

You can follow along on the Gutenberg and gutenberg-mobile GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repos, and if you have any questions or want to get involved, you can discuss here or find us in the #core-editor and #mobile rooms in WordPress.org Slack.

Jorge Bernal 1:35 pm on March 21, 2018
Tags: core-editor,   

Gutenberg on Mobile

The mobile team has been looking at GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ lately, and while it’s too soon to have a detailed plan, we thought we’d share an update on where we stand so far.

We want to support Gutenberg on the mobile apps. And for Gutenberg to be successful in the apps, we believe we must strive to support the full experience, and not a limited feature set. We believe Gutenberg and the concept of blocks has the potential to reshape the way people customize and extend WordPress, and the apps should be a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. part of that experience. Getting this right opens up a level of extensibility on mobile that we have never been able to support with the existing 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 infrastructure.

To make this a reality, we have been experimenting with ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native the past weeks, and we keep doing research on what we’re going to need to build this. Our plan is to adapt Gutenberg to make its primitives run both on web and native platforms, then have some platform-specific components, like Aztec for RichText, or our own Media pickers.

We are still in the process of discovering what changes will be necessary, but so far we know that:

  • Blocks will have to rely on a given set of known primitives that are implemented in all platforms if they are to be mobile compatible, instead of using plain 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..
  • We need to find a solution for styling. CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is a given on the web, but not on mobile.
  • Blocks should not access the DOM directly, since React Native doesn’t use the DOM. There might be other 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/. limitations.

Beyond technical limitations, Gutenberg and 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. developers will have to consider that their 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 run on different platforms and screen sizes, and use a design that works across all of them. We’ll hopefully provide a tool set to help block developers make their blocks mobile compatible.

There are still a lot of unknowns, but we are very excited about this project, and its potential to bring the apps closer to core and allow for much more customization than is possible today.

You can expect to see some discussion happening on the Gutenberg and gutenberg-mobile GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repos, and we’ll make another post here once we have a clearer roadmap. If you have any questions or want to get involved, you can discuss here or find us in the #core-editor and #mobile rooms in WordPress.org Slack.