add css from table block
This commit is contained in:
parent
fa0b31f4e5
commit
2b135c3d6f
|
@ -9,7 +9,7 @@
|
||||||
* Author URI: https://tcpinball.org/matchplay-plugin/
|
* Author URI: https://tcpinball.org/matchplay-plugin/
|
||||||
* License: GPL-2.0-or-later
|
* License: GPL-2.0-or-later
|
||||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
* Text Domain: matchplay
|
* Text Domain: tcpinball
|
||||||
*
|
*
|
||||||
* @package create-block
|
* @package create-block
|
||||||
*/
|
*/
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||||
*/
|
*/
|
||||||
function create_block_matchplay_block_init(): void {
|
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' );
|
add_action( 'init', 'create_block_matchplay_block_init' );
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -4,13 +4,13 @@
|
||||||
"name": "tcpinball/matchplay-results",
|
"name": "tcpinball/matchplay-results",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"title": "Matchplay Results",
|
"title": "Matchplay Results",
|
||||||
"category": "widgets",
|
"category": "embed",
|
||||||
"icon": "embed-generic",
|
"icon": "embed-generic",
|
||||||
"description": "Show results from a matchplay tournament.",
|
"description": "Show results from a matchplay tournament.",
|
||||||
"supports": {
|
"supports": {
|
||||||
"html": false
|
"html": false
|
||||||
},
|
},
|
||||||
"textdomain": "matchplay",
|
"textdomain": "tcpinball",
|
||||||
"editorScript": "file:./index.js",
|
"editorScript": "file:./index.js",
|
||||||
"editorStyle": "file:./index.css",
|
"editorStyle": "file:./index.css",
|
||||||
"style": "file:./style-index.css",
|
"style": "file:./style-index.css",
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { __ } from '@wordpress/i18n';
|
|
||||||
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
|
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
|
||||||
import { TextControl, PanelBody } from '@wordpress/components';
|
import { TextControl, PanelBody } from '@wordpress/components';
|
||||||
import { useState } from '@wordpress/element';
|
import { useState } from '@wordpress/element';
|
||||||
|
@ -35,7 +34,7 @@ export default function Edit( { attributes, setAttributes } ) {
|
||||||
<TextControl
|
<TextControl
|
||||||
label="Tournament ID"
|
label="Tournament ID"
|
||||||
value={ attributes.tournament_id }
|
value={ attributes.tournament_id }
|
||||||
onChange={ ( val ) => setAttributes( { tournament_id: val } ) }
|
onChange={ val => setAttributes( { tournament_id: val } ) }
|
||||||
/>
|
/>
|
||||||
</PanelBody>
|
</PanelBody>
|
||||||
</InspectorControls>
|
</InspectorControls>
|
||||||
|
|
11
src/index.js
11
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/
|
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||||
*/
|
*/
|
||||||
registerBlockType( metadata.name, {
|
registerBlockType( metadata.name, { edit: Edit, save } );
|
||||||
/**
|
|
||||||
* @see ./edit.js
|
|
||||||
*/
|
|
||||||
edit: Edit,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @see ./save.js
|
|
||||||
*/
|
|
||||||
save,
|
|
||||||
} );
|
|
||||||
|
|
158
src/style.scss
158
src/style.scss
|
@ -6,7 +6,159 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.wp-block-tcpinball-matchplay-results {
|
.wp-block-tcpinball-matchplay-results {
|
||||||
background-color: #21759b;
|
$subtle-light-gray: #f3f4f5;
|
||||||
color: #fff;
|
$subtle-pale-green: #e9fbe5;
|
||||||
padding: 2px;
|
$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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue