{"id":30564,"date":"2020-05-04T12:03:22","date_gmt":"2020-05-04T12:03:22","guid":{"rendered":"https:\/\/www.designbombs.com\/?p=30564"},"modified":"2020-05-04T00:04:33","modified_gmt":"2020-05-04T00:04:33","slug":"exposing-wordpress-site-data-for-mobile-apps","status":"publish","type":"post","link":"https:\/\/www.designbombs.com\/exposing-wordpress-site-data-for-mobile-apps\/","title":{"rendered":"Exposing WordPress site data for mobile apps"},"content":{"rendered":"

WordPress<\/a> is a terrific Content Management System<\/a>. It is a great choice for managing online content, not just for our website, but also for other channels such as newsletters<\/a> and mobile apps.<\/p>\n

There is a problem though: the WordPress editor works with HTML, which is not always the most appropriate language to use for mobile apps. For instance, an app can provide a better user experience by playing a YouTube video in a native component for mobile, instead of parsing the embedded YouTube video from the HTML code.<\/p>\n

This issue can be dealt with by transforming the HTML content to metadata: given a post, extract all of its important pieces of information (all the text in its paragraphs, all the sources of its images, all the URLs of its YouTube videos, etc) and make these available to the mobile app.<\/p>\n

Luckily for us, Gutenberg<\/a> (the not so new anymore editor for WordPress) simplifies this task, because it already organizes all the post content into blocks, which contain their own data. Then, extracting the content from the post becomes equivalent to extracting the data from each of the blocks contained in the post, which is not difficult to do.<\/p>\n

Extracting block metadata<\/h2>\n

WordPress provides function parse_blocks<\/code><\/a> which receives the content from a post, and returns an array of the data contained in all the blocks within its content. Given a post, then, we can easily extract its metadata like this:<\/p>\n

\/**\r\n * Return the block information from the post\r\n *\/\r\nfunction get_post_block_metadata($post)\r\n{\r\n  return parse_blocks($post->post_content);\r\n}\r\n<\/code><\/pre>\n
We can manipulate the data too, such as extracting all the YouTube videos from the content. To achieve this, we iterate all the blocks in the post, filter those of type \"core-embed\/youtube\"<\/code>, and finally extract the \"url\"<\/code> property from them:<\/p>\n
\/**\r\n * Extract all the YouTube video URLs from all Embed YouTube video blocks inside the post\r\n *\/\r\nfunction get_youtube_videos($post)\r\n{\r\n  \/\/ Obtain the blocks from the content\r\n  $blocks = parse_blocks($post->post_content);\r\n\r\n  \/\/ Filter the Embed YouTube video blocks\r\n  $youtubeVideoBlocks = array_filter(\r\n    $blocks,\r\n    function($block) {\r\n      return $block['blockName'] == \"core-embed\/youtube\";\r\n    }\r\n  );\r\n  \r\n  \/\/ Extract the YouTube video URLs\r\n  return array_map(\r\n    function($block) {\r\n      return $block['attrs']['url'];\r\n    },\r\n    $youtubeVideoBlocks\r\n  );\r\n}\r\n<\/code><\/pre>\n
Exposing the data for external consumption<\/h2>\n
Starting from version 4.7, WordPress can be considered a headless Content Management System, where “headless” means that the rendering of the website and its data are decoupled. WordPress was historically rendered in the server as HTML content, but since the addition of the WP REST API we can access the website’s data as a JSON object, and render this data through the tool of our choice (such as JavaScript libraries Vue and React, and others).<\/p>\n
Now, instead of dealing with pure HTML content, like this:<\/p>\n
<html>\r\n<title>My blog post<\/title>\r\n<body>\r\n  <p>Hello world!<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
We can access the data through a JSON object, like this:<\/p>\n
{\r\n  \"title\": {\r\n    \"rendered\": \"My blog post\"\r\n  },\r\n  \"content\": {\r\n    \"rendered\": \"<p>Hello world!<\/p>\"\r\n  }\r\n}\r\n<\/code><\/pre>\n
Through REST, we publish endpoints (i.e. pre-defined URLs) which expose a certain content. Unless disabled, every website running WordPress 4.7 and above will have several default endpoints available, exposing common data, such as the following ones:<\/p>\n