{"id":9693,"date":"2021-06-15T14:18:51","date_gmt":"2021-06-15T14:18:51","guid":{"rendered":"https:\/\/make.wordpress.org\/design\/?p=9693"},"modified":"2021-06-15T14:18:51","modified_gmt":"2021-06-15T14:18:51","slug":"a-walk-around-the-table-block","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/","title":{"rendered":"A Walk Around\u2026 The Table Block"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In this post I\u2019d like to talk about the Table <span tabindex='0' class='glossary-item-container'>Block<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Block<\/span> <span class='glossary-item-description'>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.<\/span><\/span><\/span> and propose several improvements and enhancements. Many of these changes require implementing one important feature: multi-cell selection. Others, like improving the initial placeholder state, could be addressed independently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to check out all the designs mentioned in this post, here\u2019s the <a href=\"https:\/\/www.figma.com\/file\/Lac6TBUSZjbv3KyR26xiIi\/Table-Block?node-id=281%3A1140&amp;viewport=781%2C479%2C1.2193548679351807\">Figma file<\/a> that contains all the designs covered below, along with some explorations and references. I\u2019ve also opened <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/32400\" data-type=\"URL\" data-id=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/32400\">a tracking issue on GitHub<\/a> to organize the work around this block. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ve centered my work around these five main areas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#placeholder\">The placeholder state<\/a><\/li><li><a href=\"#multicell\">Multi-cell selection<\/a><\/li><li><a href=\"#sidebar\">The sidebar<\/a><\/li><li><a href=\"#toolbar\">The toolbar<\/a><\/li><li><a href=\"#icons\">Icon improvement<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"placeholder\">Placeholder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The current placeholder state is simple: users can set the number of columns and rows they want their table to have.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"322\" data-attachment-id=\"9702\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/placeholder\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?fit=1200%2C498&amp;ssl=1\" data-orig-size=\"1200,498\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Placeholder\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?fit=776%2C322&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?resize=776%2C322&#038;ssl=1\" alt=\"\" class=\"wp-image-9702\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?resize=1024%2C425&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?resize=300%2C125&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?resize=768%2C319&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Placeholder.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But these two numbers don\u2019t give a clear picture of the kind of table the user is about to create, and since we don\u2019t have a quick way to add new columns or rows (more on that later), creating the right table from the start is really important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To solve this problem, we could offer an automatic preview that reflects the information entered by the user so that they can immediately see what the shape of their table will be.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example of how this interface could look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"580\" data-attachment-id=\"9705\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/proposal\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?fit=1756%2C1312&amp;ssl=1\" data-orig-size=\"1756,1312\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Proposal\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?fit=776%2C580&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?resize=776%2C580&#038;ssl=1\" alt=\"\" class=\"wp-image-9705\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?resize=1024%2C765&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?resize=300%2C224&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?resize=768%2C574&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?resize=1536%2C1148&amp;ssl=1 1536w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Proposal.png?w=1756&amp;ssl=1 1756w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>The table in the preview gets updated whenever the user adds or removes rows and columns.<\/li><li>The height of the preview window is fixed, so the input elements below won\u2019t move.<\/li><li>If the user creates a large table, we can show an ellipsis implying that the table contains rows or columns that are not being shown.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Another idea based on this <span tabindex='0' class='glossary-item-container'>UI<span class='glossary-item-hidden-content'><span class='glossary-item-header'>UI<\/span> <span class='glossary-item-description'>UI is an acronym for User Interface - the layout of the page the user interacts with. Think \u2018how are they doing that\u2019 and less about what they are doing.<\/span><\/span><\/span> is the possibility to resize the table using the preview interface itself: if the user hovers the cells and then clicks one of them, the table gets resized automatically.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"864\" data-attachment-id=\"9704\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/idea\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?fit=1200%2C1336&amp;ssl=1\" data-orig-size=\"1200,1336\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Idea\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?fit=776%2C864&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?resize=776%2C864&#038;ssl=1\" alt=\"\" class=\"wp-image-9704\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?resize=920%2C1024&amp;ssl=1 920w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?resize=269%2C300&amp;ssl=1 269w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?resize=768%2C855&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Idea.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Related<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Related issue: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/16355\">#16355 Consider bringing in layout options to table block<\/a><\/li><li><a href=\"https:\/\/www.figma.com\/file\/Lac6TBUSZjbv3KyR26xiIi\/?node-id=367%3A513\">Placeholder page in Figma<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"multicell\">Multi-cell selection<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is the biggest change in the Table block and would allow creating more complex designs than the ones that are possible right now.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding this feature would require refactoring the block and use inner blocks, so that cell is a block of its own. There\u2019s been some talk around this topic in <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/18768\">this issue<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To illustrate how this feature could work, here\u2019s how <strong>Google Docs<\/strong> and <strong>TinyMCE<\/strong> do multi-cell selection.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Google Docs<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The nice thing about multi-cell selection in <strong>Google Docs<\/strong> is that it\u2019s possible to select one single cell. However, it\u2019s not possible to select the entire table in an easy way (except, obviously, by highlighting all the cells with the mouse cursor).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"235\" data-attachment-id=\"9695\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?fit=1296%2C392&amp;ssl=1\" data-orig-size=\"1296,392\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?fit=776%2C235&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62-1024x310.gif?resize=776%2C235&#038;ssl=1\" alt=\"\" class=\"wp-image-9695\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?resize=1024%2C310&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?resize=300%2C91&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459165-38c7de00-c398-11eb-9e31-e1dc322fdc62.gif?resize=768%2C232&amp;ssl=1 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">TinyMCE<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In contrast, in the <strong>TinyMCE<\/strong> editor it\u2019s possible to select the whole table by clicking on it. Strangely, you can\u2019t select just one single cell.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"122\" data-attachment-id=\"9696\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?fit=1480%2C232&amp;ssl=1\" data-orig-size=\"1480,232\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?fit=776%2C122&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?resize=776%2C122&#038;ssl=1\" alt=\"\" class=\"wp-image-9696\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?resize=1024%2C161&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?resize=300%2C47&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/120459149-35cced80-c398-11eb-8a6a-8f62dfb8bc73.gif?resize=768%2C120&amp;ssl=1 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I believe our tables should support these two basic use cases: single-cell selection and the highlighting of the whole table. That would make the styling process much easier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two other handy features we could offer would be: merging and splitting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Merging<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Some apps like <strong>Google Spreadsheets <\/strong>offer several types of merging: horizontal, vertical, or full merge, depending on the direction in which the cells get merged.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I think we could start by offering the full merge (which combines a group of cells into one single element), as shown in the example below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/user-images.githubusercontent.com\/4933\/120459422-7b89b600-c398-11eb-8fa3-a500ec558d5f.png?w=776&#038;ssl=1\" alt=\"image\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Google Spreadsheets<\/strong> also offers the option of \u201cunmerging\u201d a previously merged group of cells, which is a way to reconstruct the previous structure of a table. This is an advanced use case that we don\u2019t probably need to cover, at least initially.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Splitting<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Microsoft PowerPoint<\/strong> also allows to <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/merge-split-or-delete-table-cells-d58e60ea-8994-4356-b1ef-5437ea59fd9b\">customize the splitting of cells<\/a>. In our case, we could offer two options for splitting: horizontal or vertical. The reason to offer two ways and not automatically divide rows horizontally and columns vertically is to support the case where a user just want to split a single cell. In that case, it makes sense to give them the option to pick the method they prefer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/user-images.githubusercontent.com\/4933\/120459438-7f1d3d00-c398-11eb-96a3-2e2338c31b03.png?w=776&#038;ssl=1\" alt=\"image\"><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Related<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.figma.com\/file\/Lac6TBUSZjbv3KyR26xiIi\/?node-id=375%3A2631\">Multi-cell page in Figma<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sidebar\"><span tabindex='0' class='glossary-item-container'>Sidebar<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Sidebar<\/span> <span class='glossary-item-description'>A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.<\/span><\/span><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Right now is only possible to change the text and background colors of all the cells at the same time. If we had mulit-cell selection in place, users would be able to customize their tables in many different and interesting ways.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These are the sections I think we should include in the sidebar:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#styles\">Styles<\/a><\/li><li><a href=\"#table\">Table Settings<\/a><\/li><li><a href=\"#border\">Border Settings<\/a><\/li><li><a href=\"#color\">Color Settings<\/a><\/li><li><a href=\"#typography\">Typography Settings<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let me review them:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"styles\">Styles<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"467\" data-attachment-id=\"9706\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/styles-2\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?fit=1201%2C722&amp;ssl=1\" data-orig-size=\"1201,722\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Styles\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?fit=776%2C467&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?resize=776%2C467&#038;ssl=1\" alt=\"\" class=\"wp-image-9706\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?resize=1024%2C616&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?resize=300%2C180&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?resize=768%2C462&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Styles.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This section could show four several common table styles. Instead of using gray to color the cells, we could use the default main color defined by the current theme (which means that those previews should be generated using code).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These styles set and combine basic elements like stripes, and the presence of <span tabindex='0' class='glossary-item-container'>header<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Header<\/span> <span class='glossary-item-description'>The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor\u2019s opinion about your content and you\/ your organization\u2019s brand. It may also look different on different screen sizes.<\/span><\/span><\/span>, and footer rows. In the case of the last one (\u2018Left column\u2019), it also sets the background color of a group of cells.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"table\">Table settings<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"443\" data-attachment-id=\"9710\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/table-settings\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?fit=1201%2C686&amp;ssl=1\" data-orig-size=\"1201,686\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Table-settings\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?fit=776%2C443&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?resize=776%2C443&#038;ssl=1\" alt=\"\" class=\"wp-image-9710\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?resize=1024%2C585&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?resize=300%2C171&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?resize=768%2C439&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Table-settings.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In this section, I would add a controller to modify the dimensions of the table, since the only way to do this at the moment is using the toolbar (and that requires two clicks to add or remove a column or row of cells), which makes the process of modifying the dimension of a table a bit tedious.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besides this section, another handy way to add more rows to a table could just be pressing the tab key in the last cell, as other apps do. I would also allow using the Tab key to traverse the cells.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"border\">Border Settings<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"663\" data-attachment-id=\"9707\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/border-settings\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?fit=1201%2C1026&amp;ssl=1\" data-orig-size=\"1201,1026\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Border-settings\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?fit=776%2C663&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?resize=776%2C663&#038;ssl=1\" alt=\"\" class=\"wp-image-9707\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?resize=1024%2C875&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?resize=300%2C256&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?resize=768%2C656&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Border-settings.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This section would allow users to change the border settings for each cell or if it\u2019s selected, the whole table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With the idea to allowing to style tables in many different ways, we could also offer a special control (similar to the padding one) that would allow setting the width of each of the selection borders independently.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"color\">Color settings<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"948\" data-attachment-id=\"9708\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/color-settings\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?fit=1201%2C1468&amp;ssl=1\" data-orig-size=\"1201,1468\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Color-settings\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?fit=776%2C948&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?resize=776%2C948&#038;ssl=1\" alt=\"\" class=\"wp-image-9708\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?resize=838%2C1024&amp;ssl=1 838w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?resize=245%2C300&amp;ssl=1 245w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?resize=768%2C939&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Color-settings.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of changing the color settings of the whole table, this section would only affect the selected cells. This section would also offer the possibility to create a zebra-striped table (important thing though: the user could still overwrite the stripe color setting the background color with the control above).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"typography\">Typography<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"474\" data-attachment-id=\"9709\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/typography-2\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?fit=1201%2C734&amp;ssl=1\" data-orig-size=\"1201,734\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Typography\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?fit=776%2C474&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?resize=776%2C474&#038;ssl=1\" alt=\"\" class=\"wp-image-9709\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?resize=1024%2C626&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?resize=300%2C183&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?resize=768%2C469&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Typography.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nothing shocking or revolutionary here: we should allow changing the style of the text for each cell and the table caption.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Related<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.figma.com\/file\/Lac6TBUSZjbv3KyR26xiIi\/?node-id=398%3A950\">Sidebar page in Figma<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toolbar\">The toolbar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If we were to implement all these changes we would end up having at least 10 actions that could go in the toolbar. Instead of having one single option that gives access to all the available actions, we could group them by <span tabindex='0' class='glossary-item-container'>category<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Category<\/span> <span class='glossary-item-description'>The 'category' taxonomy lets you group posts \/ content together that share a common bond. Categories are pre-defined and broad ranging.<\/span><\/span><\/span>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We could have three categories: insert, remove, and cell operations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"225\" data-attachment-id=\"9712\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/toolbar\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?fit=1201%2C348&amp;ssl=1\" data-orig-size=\"1201,348\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Toolbar\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?fit=776%2C225&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?resize=776%2C225&#038;ssl=1\" alt=\"\" class=\"wp-image-9712\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?resize=1024%2C297&amp;ssl=1 1024w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?resize=300%2C87&amp;ssl=1 300w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?resize=768%2C223&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Toolbar.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Insert<\/strong> would give access to all the additive operations: insert row before, insert row after, insert column before, and insert column after.<\/li><li><strong>Delete<\/strong> would give access to all the destructive operations: delete row, delete column, and delete selected cells.<\/li><li><strong>Cell operations<\/strong> would give access to merge, and split horizontally &amp; vertically.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"1024\" data-attachment-id=\"9714\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/operations-1\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?fit=1200%2C1828&amp;ssl=1\" data-orig-size=\"1200,1828\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Operations-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?fit=672%2C1024&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?resize=672%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-9714\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?resize=672%2C1024&amp;ssl=1 672w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?resize=197%2C300&amp;ssl=1 197w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?resize=768%2C1170&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?resize=1008%2C1536&amp;ssl=1 1008w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Operations-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\"><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icons\">Icons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019m also proposing to update several icons to make them faster to read and use the same kind of design language (i.e.: border radius, line widths, etc.) as other current icons. Here\u2019s a first exploration:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"788\" data-attachment-id=\"9719\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/before-after-1\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?fit=1200%2C1218&amp;ssl=1\" data-orig-size=\"1200,1218\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Before-After-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?fit=776%2C788&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?resize=776%2C788&#038;ssl=1\" alt=\"\" class=\"wp-image-9719\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?resize=1009%2C1024&amp;ssl=1 1009w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?resize=296%2C300&amp;ssl=1 296w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?resize=768%2C780&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Before-After-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\"><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Notice that, in the case of the four insert icons, the weight of the elements indicates the direction (before or after) in which the action will take place, while the current icons use the plus symbol instead. This is a delicate distinction that probably requires some careful consideration. Please, share your opinion and ideas in the comments of this post or <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/32556\">in this GitHub issue<\/a>.<br><br>And here\u2019s the full set of icons (again, an initial exploration) that also include the Split, Merge, and Remove cells icons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"1024\" data-attachment-id=\"9715\" data-permalink=\"https:\/\/make.wordpress.org\/design\/2021\/06\/15\/a-walk-around-the-table-block\/icons\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?fit=1201%2C1952&amp;ssl=1\" data-orig-size=\"1201,1952\" data-comments-opened=\"1\" data-image-meta='{\"aperture\":\"0\",\"credit\":\"\",\"camera\":\"\",\"caption\":\"\",\"created_timestamp\":\"0\",\"copyright\":\"\",\"focal_length\":\"0\",\"iso\":\"0\",\"shutter_speed\":\"0\",\"title\":\"\",\"orientation\":\"0\"}' data-image-title=\"Icons\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?fit=630%2C1024&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?resize=630%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-9715\" srcset=\"https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?resize=630%2C1024&amp;ssl=1 630w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?resize=185%2C300&amp;ssl=1 185w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?resize=768%2C1248&amp;ssl=1 768w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?resize=945%2C1536&amp;ssl=1 945w, https:\/\/i0.wp.com\/make.wordpress.org\/design\/files\/2021\/06\/Icons.png?w=1201&amp;ssl=1 1201w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\"><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Related<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.figma.com\/file\/Lac6TBUSZjbv3KyR26xiIi\/?node-id=398%3A3\">Icons page in Figma<\/a><\/li><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/32556\">Related issue for the icons<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ll continue working to improve this block. If you have any thoughts or feedback, please drop a comment below. Thank you!<\/p>\n<p class=\"o2-appended-tags\"><a href=\"https:\/\/make.wordpress.org\/design\/tag\/blocks\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>blocks<\/a>, <a href=\"https:\/\/make.wordpress.org\/design\/tag\/design\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>design<\/a>, <a href=\"https:\/\/make.wordpress.org\/design\/tag\/gutenberg\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>gutenberg<\/a><\/p><nav class='o2-post-footer-actions'><ul class='o2-post-footer-action-row'><\/ul><div class='o2-post-footer-action-likes'><\/div><ul class='o2-post-footer-action-row'><\/ul><\/nav>","protected":false},"excerpt":{"rendered":"<p>In this post I\u2019d like to talk about the Table 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 [&hellip;]<\/p>\n","protected":false},"author":18635852,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[678],"tags":[628,30,523],"class_list":["post-9693","post","type-post","status-publish","format-standard","hentry","category-design-team","tag-blocks","tag-design","tag-gutenberg","author-javiarce"],"revision_note":"","jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/posts\/9693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/users\/18635852"}],"replies":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/comments?post=9693"}],"version-history":[{"count":13,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/posts\/9693\/revisions"}],"predecessor-version":[{"id":9725,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/posts\/9693\/revisions\/9725"}],"wp:attachment":[{"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/media?parent=9693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/categories?post=9693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/make.wordpress.org\/design\/wp-json\/wp\/v2\/tags?post=9693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}