I am attempting to create a Gutenberg block to track exercise sets. I'm using a RichText component to allow users to edit default values in a table I pre-populate for them.
The block works well on the editor and, after saving, renders correctly in the post. However, when I reload the editor, I receive this error message: Block validation: Expected tag name 'thead', instead saw 'table'. It's almost like Gutenberg is stripping the table tag but leaving everything else.
Of course, that doesn't make sense, but I'm not sure what else it could be.
Here's my code, heavily edited for readability:
const { registerBlockType } = wp.blocks;
const { AlignmentToolbar, BlockAlignmentToolbar, BlockControls, RichText, useInnerBlockProps } = wp.blockEditor;
const { Component } = wp.element;
registerBlockType('bsd-strong-post/training-session', {
title: __('Strong Post', 'bsd-strong-post'),
description: __('Provides a short summary of a training session', 'bsd-strong-post'),
category: 'common',
icon: blockIcons.weight_lifting,
keywords: [
__('strength workout', 'bsd-strong-post'),
__('strong', 'bsd-strong-post'),
__('training', 'bsd-strong-post')
],
supports: {
html: true
},
attributes: {
/* ... */,
dayTemplateContent: {
type: 'string',
source: 'html',
selector: '.bsd-strong-post-training-template'
},
/* ... */
},
/* ... */
edit: class extends Component {
constructor(props) {
super(...arguments);
this.props = props;
/* ... */
this.dayTemplateHandler = this.dayTemplateHandler.bind(this);
this.onChangeBlockTemplate = this.onChangeBlockTemplate.bind(this);
}
/* ... */
dayTemplateHandler(new_val) {
const dayTemplateList = this.state.dayTemplateList;
let selectedDayTemplate = dayTemplateList.filter(item => {
return item.value == new_val;
})
if (selectedDayTemplate[0]['label']) {
this.props.setAttributes({
dayTemplateId: new_val,
dayTemplateName: selectedDayTemplate[0]['label']
});
}
this.getTemplate(new_val);
}
getTemplate(templateId) {
api.getDayTemplate(templateId)
.then((data) => {
if (!data.status || data.status == 0) {
return false;
};
if (!data.day_template) {
return false;
};
this.props.setAttributes({
dayTemplateContent: data.day_template.template_content
});
return data.day_template;
}).catch((err) => {
console.log('getTemplate caught error')
return false;
});
}
onChangeBlockTemplate(value) {
this.props.setAttributes({
dayTemplateContent: value
});
}
/* ... */
render() {
const { dayTemplateHandler, onChangeBlockTemplate, phaseControlHandler, programControlHandler, updateBlockAlignment, updateTextAlignment } = this;
const { block_alignment, dayTemplateId, dayTemplateName, dayTemplateContent, phaseId, phaseName, programAuthor, programId, programName, programPhases, text_alignment } = this.props.attributes;
/* ... */
return [
<InspectorControls>
<PanelBody title={ __('Basics', 'bsd-strong-post') }>
<SelectControl
label={ __('Day', 'bsd-strong-post') }
help={ __('The training session (e.g., Day One)', 'bsd-strong-post') }
value={ dayTemplateId }
options={ this.state.phaseTemplates }
onChange={ dayTemplateHandler }
/>
}
</PanelBody>
</InspectorControls>,
<div className='bsd-strong-post-block-editor'>
<div className={ this.props.className }>
<RichText
placeholder={ __('Log your lifts here') }
value={ dayTemplateContent }
multiline={ false }
onChange={ onChangeBlockTemplate }
className='bsd-strong-post-training-log'
/>
</div>
</div>
];
}
},
save: (props) => {
return (
<div className={ `align${props.attributes.block_alignment}` }>
<ul className='list-unstyled'style={{ textAlign: props.attributes.text_alignment }}>
<li>
<strong>{ __('Program', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-program'>{ props.attributes.programName }</span>
</li>
<li>
<strong>{ __('Phase', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-phase-ph'>{ props.attributes.phaseName }</span>
</li>
<li>
<strong>{ __('Day', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-day-ph'>{ props.attributes.dayTemplateName }</span>
</li>
<li>
<strong>{ __('Author', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-author-ph'>{ props.attributes.programAuthor }</span>
</li>
</ul>
<RichText.Content
value={ props.attributes.dayTemplateContent }
className='bsd-strong-post-training-log'
/>
</div>
)
}
});
Here's the console output on reload:
Content generated by 'save' function:
<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul>
<thead>
<tr>
<th scope="col">Exercise</th>
<th scope="col">Set 1</th>
<th scope="col">Set 2</th>
</tr>
</thead>
<tbody>
<tr class="bsd-strong-post-exercise-one">
<td class="bsd-strong-post-exercise-name">Squat</td>
<td class="bsd-strong-post-set-1">95 x 5</td>
<td class="bsd-strong-post-set-2">135 x 5</td>
</tr>
</tbody>
</div>
Content retrieved from post body:
<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul><table class='bsd-strong-post-training-template'>
<thead>
<tr>
<th scope='col'>Exercise</th>
<th scope='col'>Set 1</th>
<th scope='col'>Set 2</th>
</tr>
</thead>
<tbody>
<tr class='bsd-strong-post-exercise-one'>
<td class='bsd-strong-post-exercise-name'>Squat</td>
<td class='bsd-strong-post-set-1'>95 x 5</td>
<td class='bsd-strong-post-set-2'>135 x 5</td>
</tr>
</tbody>
</table></div>
I can see that the content displayed below Content generated by 'save' function: is missing the <table> and </table> tags. I've tried to work around this by adding tagName='table' in the RichText.Content properties inside the save function, but then the console shows duplicate <table> and </table> tags.
EDIT: The table is populated when a user makes a change to the Select control in InspectorControls. This action calls dayTemplateHandler, which among other things, calls getTemplate, a function that gets the content of the table from the database. Here's an example of that output (data.day_template.template_content):
<table class='bsd-strong-post-training-template'>
<thead>
<tr>
<th scope='col'>Exercise</th>
<th scope='col'>Set 1</th>
<th scope='col'>Set 2</th>
</tr>
</thead>
<tbody>
<tr class='bsd-strong-post-exercise-one'>
<td class='bsd-strong-post-exercise-name'>Squat</td>
<td class='bsd-strong-post-set-1'>95 x 5</td>
<td class='bsd-strong-post-set-2'>135 x 5</td>
</tr>
</tbody>
</table>
On reviewing the table template and considering the error, I suspect the issue is the selector of the dayTemplateContent attribute, .bsd-strong-post-training-template
The first time the content is saved, it successfully loads the template data from database and saves the complete table structure. When the content is reloaded, the block validator fails as the selector of dayTemplateContent reads in the child nodes of the table's css selector (which is thead) and doesn't match expected content. Ref: HTML example of blockquote/paragraphs
Try wrapping the <table> template with a <div class="bsd-strong-post-training-template"> or changing the selector.
I have a material ui table and I would like to colour the different cells according to what value is displayed in them. The cells are populated with json data using map. For example if a cell has the value 1, I would like the colour to be yellow.
{
Name: "A Person",
Attendence: [
{
date: "2019/12/01",
attendence: 1
},
{
date: "2019/12/02",
attendence: 1
},
{
date: "2019/12/03",
attendence: 0
}
]
}
];
return (
<Fragment>
{attendence.map(person => {
return (
<Table>
<thead>
<tr>
<th>Name</th>
{person.Attendence.map(personAttendendance => {
return <th>{personAttendendance.date}</th>;
})}
</tr>
</thead>
<tbody>
<tr>
<td>{person.Name}</td>
{person.Attendence.map(personAttendendance => {
return <td>{personAttendendance.attendence}</td>;
})}
</tr>
</tbody>
</Table>
);
})}
</Fragment>
);
}
export default Test;
That is what the table looks like. I tried
if(value === 1){
return(
<TableCell style={{ background: "red" }}>{value}</TableCell>
)
} else {
return(
<TableCell style={{ background: "red" }}>{value}</TableCell>
)
}
}
But that did not work . It just read the else and made everything red.
Change your tbody in test.js to:
<tbody>
<tr>
<td>{person.Name}</td>
{person.Attendence.map(personAttendendance => {
if(personAttendendance.attendence === 1){
return <td style={{background: "red" }}>{personAttendendance.attendence}</td>;
} else {
return <td style={{background: "blue" }}>{personAttendendance.attendence}</td>;
}
})}
</tr>
</tbody>
or
<tbody>
<tr>
<td>{person.Name}</td>
{person.Attendence.map(personAttendendance => {
return <td style={{background: personAttendendance.attendence === 1 ? "red" : "blue"}}>{personAttendendance.attendence}</td>;
})}
</tr>
</tbody>
Which ever suits you best.
Link to fork here. (using the second example)
I am fetching data with ajax in PHP. my table td width is not fixing to table th width. How can I manage td width in CSS.
This is the script
HTML
<table id="example" class="table">
<thead>
<tr>
<th>Category</th>
<th width="20%">Name</th>
<th width="20%">Father Name</th>
<th width="60%">Notes</th>
</tr>
</thead>
</table>
JS
var mainTable = $('#example').DataTable({
'ajax': 'fetch.php',
'order': []
});
PHP
<?php
require_once("config.php");
$query = "SELECT name, fname, notes FROM lab_examinations";
$stmt = $db->prepare($query);
$stmt->execute();
$result = array('data' => array());
while($row = $stmt->fetch(PDO:: FETCH_OBJ) ) {
$name = $row->name;
$fname = $row->fname;
$notes = $row->notes;
$result['data'][] = array($name, $fname, $notes);
}
echo json_encode($result);
You can do it with CSS like this
CSS
table tbody tr{
width: auto;
}
I use Bootstrap 3, just to know. I cannot get rid of 3 blank pages after the first one. Don t know what is causing this problem.
HTML:
<table class="table table-bordered table-hover text-center" id="post_accesorii">
<thead>
<tr>
<th>Cod</th>
<th>Denumire</th>
<th>Cantitate</th>
<th>U.M.</th>
</tr>
</thead>
<tbody>
<form method="post" action="" autocomplete="off">
<?php
while($rowD = mysqli_fetch_assoc($query)) {
foreach ($rowD as $col => $val) {
if($val != "" && $val != "0" && $col != "nr_fisa" && $col != "id") {
$findum = mysqli_query($mysqli, "SELECT * FROM `stocuri` WHERE `cod` = '$col' AND `post1` = 'Accesorii'") or die(mysqli_error($mysqli));
$rowum = mysqli_fetch_array($findum);
echo "<tr class='piesa_folosita'>";
if($col == $rowum['cod'])
{
echo "<td>" . $col . "</td>";
echo "<td>" . $rowum['denumire'] . "</td>";
echo "<td>" . $val . "</td>";
echo "<td>" . $rowum['um'] . "</td>";
}
echo "</tr>";
} else {
}
}
}
?>
</tbody>
<tfoot>
<tr>
<th>Cod</th>
<th>Denumire</th>
<th>Cantitate</th>
<th>U.M.</th>
<tr>
</tfoot>
</table>
PRINT
print.css:
#media print {
html, body {
visibility: hidden;
height: 99% !important;
}
#post_accesorii, #post_accesorii * {
visibility: visible;
height: 99% !important;
}
#post_accesorii+#post_accesorii {
page-break-before: always;
}
}
In print preview, I have 3 blank pages after the first page with my table. I tried several solutions to remove them but none worked.
What can be the problem?
Your height: 99% !important; might be the problem, because the <body/> does not have parent
Your last print rule implies that there is more than one element that has the ID #post_accesorii . This should not be the case and is invalid HTML: IDs must only appear once in a page. So maybe that's the reason for your problems (I don't know what is around the code you posted, so that's all I can say).
To avoid that, make it a class instead of an ID: .post_accesorii and assign that to the HTML table tag/s via <table class="post_accesorii">
Currently i'm working on attendance report generation but now i face this problem i try every css print property but nothing works for me below the css code that i use
#printdata h1,h2,h3,h4,h5,h6{
text-align: center;
line-height: 0.1em;
text-transform: uppercase;
}
#printdata p{
font-size: 20px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#printdata table {
margin-top: 10px;
page-break-after:auto;
width:100%
}
#printdata tr{
page-break-inside: avoid;
-webkit-region-break-inside: avoid;
}
#printdata td{
page-break-inside:avoid;
page-break-after:auto;
padding: 16px 0px;
font-size: 12pt;
}
thead{
display:table-header-group;
}
tfoot{
display:table-footer-group;
}
Here my php code where i use rowspan on column 1 and 2
<tbody>
<?
if(count($this->employees) > 0)
{
$x = 0;
foreach ($this->employees as $key=>$employee)
{
?>
<tr>
<td rowspan="2"><? echo ++$x; ?></td>
<td rowspan="2" align="center"><? echo $employee->ticket_no; ?></td>
<td colspan="2"><? echo $employee->employee_name; ?></td>
<?
for($i=1;$i<=$days_in_month;$i++)
{
?>
<td align="center">
<?
if($employee->in_time[$i] == "" && $employee->out_time[$i] == "" && $employee->minutes_late[$i] == "" && $employee->gate_pass[$i] == "" && $employee->idle_booking[$i] == "" && $employee->minutes_early[$i] == "" && $employee->second_half_cl[$i] == "")
{
echo $employee->attendance[$i];
}
else
{
echo $employee->in_time[$i];
echo ($employee->out_time[$i] != "" ? $employee->out_time[$i] : "");
//echo ($employee->attendance[$i] != "" ? $employee->attendance[$i] : "");
echo ($employee->minutes_late[$i] != "" ? $employee->minutes_late[$i] : "");
echo ($employee->gate_pass[$i] != "" ? ($employee->minutes_late[$i] != "" ? " + " : "") . $employee->gate_pass[$i] : "");
echo ($employee->idle_booking[$i] != "" ? $employee->idle_booking[$i] : "");
echo ($employee->minutes_early[$i] != "" ? $employee->minutes_early[$i] : "");
echo ($employee->second_half_cl[$i] != "" ? $employee->second_half_cl[$i] : "");
//echo ($this->leaves[$i] != "" ? $employee->second_half_cl[$i] : "");
}
?>
</td>
<?
}
?>
<td colspan="2" align="center">A</td>
<td align="center">B</td>
<td colspan="2" align="center">C</td>
</tr>
<tr>
<td><? echo $employee->section; ?></td>
<td><? echo $employee->trade; ?></td>
<?
for($i=1;$i<=$days_in_month;$i++)
{
echo "<td align='center'>";
echo $i;
echo "</td>";
}
?>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<?
}
}
?
</tbody>
This is the result basically i get i just want to forcefully stop spliting rowspan in new page it would be great is its avoid split and print the whole row in new page
For better understanding check below image and any help would be appriciated
https://i.stack.imgur.com/tvkF5.png
Can you see if this works?
printdata table { page-break-inside:auto }
printdata table tr { page-break-inside:avoid;
page-break-after:auto }