Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/**
* Block dependencies
*/
import icon from './icon';
import SelectTeam from '../select-team';
//import './style.scss';
import './editor.scss';
/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const {
InspectorControls,
registerBlockType,
blockEditRender,
Spinner
} = wp.blocks; // Import registerBlockType() from wp.blocks
//this is where block control componants go! a-ha!
const { ToggleControl, SelectControl } = InspectorControls;
registerBlockType(
'sportsbench/team', {
title: __('Sports Bench Team Page'),
icon: icon,
category: 'widgets',
keywords: [ __( 'Sports' ), __( 'Bench' ), __( 'team' ) ],
attributes: {
getTeam: {
type: 'boolean',
default: true,
},
hasTeam: {
type: 'boolean',
default: false,
},
team_id: {
type: 'int',
},
team_string: {
type: 'string',
},
teams: {
type: 'array',
}
},
edit( { attributes, setAttributes, focus, setFocus, className } ) {
const { getTeam, hasTeam, team_id, team_string, teams } = attributes;
function onSelectTeam( option ){
console.log('change team');
if( option === null ){
console.log(null);
getTeams().then( function( options ) {
console.log(options);
setAttributes({
team_id: "",
team_string: "",
getTeam: false,
teams: options
});
});
} else {
console.log('There is an option');
getTeams().then( function( options ) {
console.log(options);
setAttributes({
team_id: option.value,
team_string: option.label,
getTeam: true,
teams: options
});
});
}
}
function getTeams(){
console.log('get team');
var url = '/wp-json/sportsbench/teams/';
return fetch( url, {
credentials: 'same-origin',
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-WP-Nonce': sportsbench_globals.nonce
}})
.then( handleFetchErrors )
.then( ( response ) => response.json() )
.then( ( json ) => {
console.log(json);
var options = json.map( function(opt, i){
return {value: opt.team_id, label: opt.team_name}
})
return options;
})
.catch(function(e) {
console.log(e);
});
}
function handleFetchErrors( response ) {
if (!response.ok) {
console.log('fetch error, status: ' + response.statusText);
}
return response;
}
var selectTeamValue = { value: team_id, label: team_string }
const selectTeam = (
<SelectTeam
onChange={ onSelectTeam }
restUrl="/wp-json/sportsbench/teams/?team_name="
initial_value={ selectTeamValue }
nonce={ sportsbench_globals.nonce }
/>
);
const controls = focus && (
<InspectorControls key="inspector">
<div class="blocks-base-control">
<label class="blocks-base-control_label">{__('Select a Team')}</label>
{ selectTeam }
</div>
</InspectorControls>
);
return [
controls,
<div className={className}>
<h2>{__('Sports Bench Team Page')}</h2>
<p>{__('The team page block isn\'t editable. You can select the team to show in the block attributes in the right-hand column.')}</p>
</div>
];
},
save() {
// Rendering in PHP
return null;
},
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment