add css from table block

matchplay.php

@@ -9,7 +9,7 @@
  * Author URI:        https://tcpinball.org/matchplay-plugin/
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
- * Text Domain:       matchplay
+ * Text Domain:       tcpinball
  *
  * @package           create-block
  */
@@ -22,7 +22,7 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function create_block_matchplay_block_init(): void {
-	register_block_type( __DIR__ . '/build' );
+	register_block_type_from_metadata( __DIR__ . '/build' );
 }
 
 add_action( 'init', 'create_block_matchplay_block_init' );

src/block.json

@@ -4,13 +4,13 @@
 	"name": "tcpinball/matchplay-results",
 	"version": "0.1.0",
 	"title": "Matchplay Results",
-	"category": "widgets",
+	"category": "embed",
 	"icon": "embed-generic",
 	"description": "Show results from a matchplay tournament.",
 	"supports": {
 		"html": false
 	},
-	"textdomain": "matchplay",
+	"textdomain": "tcpinball",
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",

src/edit.js

@@ -1,4 +1,3 @@
-import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { TextControl, PanelBody } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -35,7 +34,7 @@ export default function Edit( { attributes, setAttributes } ) {
 					<TextControl
 						label="Tournament ID"
 						value={ attributes.tournament_id }
-						onChange={ ( val ) => setAttributes( { tournament_id: val } ) }
+						onChange={ val => setAttributes( { tournament_id: val } ) }
 					/>
 				</PanelBody>
 			</InspectorControls>

src/index.js

@@ -26,14 +26,5 @@ import metadata from './block.json';
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
  */
-registerBlockType( metadata.name, {
-	/**
-	 * @see ./edit.js
-	 */
-	edit: Edit,
+registerBlockType( metadata.name, { edit: Edit, save } );
 
-	/**
-	 * @see ./save.js
-	 */
-	save,
-} );

src/style.scss

@@ -6,7 +6,159 @@
  */
 
 .wp-block-tcpinball-matchplay-results {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
+	$subtle-light-gray: #f3f4f5;
+	$subtle-pale-green: #e9fbe5;
+	$subtle-pale-blue: #e7f5fe;
+	$subtle-pale-pink: #fcf0ef;
+
+	overflow-x: auto;
+
+	table {
+		border-collapse: collapse;
+		width: 100%;
+	}
+
+	thead {
+		border-bottom: 3px solid;
+	}
+
+	tfoot {
+		border-top: 3px solid;
+	}
+
+	// Match default border style to default style in editor
+	td,
+	th {
+		border: 1px solid;
+		padding: 0.5em;
+	}
+
+	// Fixed layout toggle
+	.has-fixed-layout {
+		table-layout: fixed;
+		width: 100%;
+
+		td,
+		th {
+			word-break: break-word;
+		}
+	}
+
+	&.alignleft,
+	&.aligncenter,
+	&.alignright {
+		// Override default display property for align styles.
+		// The table element needs to be kept as display table
+		// for table features to work reliably.
+		display: table;
+		// Table cannot be 100% width if it is aligned, so set
+		// width as auto.
+		width: auto;
+
+		td,
+		th {
+			word-break: break-word;
+		}
+	}
+
+	.has-subtle-light-gray-background-color {
+		background-color: $subtle-light-gray;
+	}
+
+	.has-subtle-pale-green-background-color {
+		background-color: $subtle-pale-green;
+	}
+
+	.has-subtle-pale-blue-background-color {
+		background-color: $subtle-pale-blue;
+	}
+
+	.has-subtle-pale-pink-background-color {
+		background-color: $subtle-pale-pink;
+	}
+
+	// Border Styles
+	//
+	// Allow any custom border color, style or width selections to be inherited
+	// from the table element that receives the border support props.
+
+	.has-border-color {
+		> *,
+		tr,
+		th,
+		td {
+			border-color: inherit;
+		}
+	}
+
+	table[style*="border-top-color"] {
+		> *,
+		tr:first-child {
+			border-top-color: inherit;
+
+			th,
+			td {
+				border-top-color: inherit;
+			}
+		}
+
+		tr:not(:first-child) {
+			border-top-color: currentColor;
+		}
+	}
+	table[style*="border-right-color"] {
+		> *,
+		tr,
+		th,
+		td:last-child {
+			border-right-color: inherit;
+		}
+	}
+	table[style*="border-bottom-color"] {
+		> *,
+		tr:last-child {
+			border-bottom-color: inherit;
+
+			th,
+			td {
+				border-bottom-color: inherit;
+			}
+		}
+
+		// Border support classes and styles are applied on the table block
+		// itself. This means that without the rule below every table row would
+		// have a bottom border matching the color of the table's border.
+		// This style gives the best visual appearance and most expected result
+		// until we can control individual table rows or cells via inner blocks.
+		tr:not(:last-child) {
+			border-bottom-color: currentColor;
+		}
+	}
+	table[style*="border-left-color"] {
+		> *,
+		tr,
+		th,
+		td:first-child {
+			border-left-color: inherit;
+		}
+	}
+
+	table[style*="border-style"] {
+		> *,
+		tr,
+		th,
+		td {
+			border-style: inherit;
+		}
+	}
+
+	table[style*="border-width"] {
+		> *,
+		tr,
+		th,
+		td {
+			border-width: inherit;
+			border-style: inherit;
+		}
+	}
 }