BAM News
Bike-reviews
Ride-out
BAM members
Events
Club
Other news
Resources
-
This is an example list of resources available at IAM (please ensure you are logged into your IAM account before clicking on link):
-Masters Training -to find out more, click here
-Become a Fellow -to find out more about becoming a fellow, click here
/**
* Advanced Motorcycle Club - Gutenberg Block Editor Code
* File: resource-blocks.js
* Description: Custom Gutenberg blocks for the Resources page.
*/
import { registerBlockType } from '@wordpress/blocks';
import { RichText, URLInputButton, MediaUpload, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, Button, TextControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
// 1. Featured Authority Links Block
registerBlockType('amc/featured-links', {
title: 'Featured Authority Links',
icon: 'admin-links',
category: 'widgets',
attributes: {
items: { type: 'array', default: [
{ icon: '🏍️', title: 'IAM RoadSmart', url: 'https://www.iamroadsmart.com', description: 'Advanced riding techniques and coaching.' },
{ icon: '📋', title: 'DVSA', url: 'https://www.gov.uk/government/organisations/driver-and-vehicle-standards-agency', description: 'Official licensing and regulations.' },
{ icon: '🛡️', title: 'RoSPA', url: 'https://www.rospa.com', description: 'Safety training and accident prevention.' }
] },
},
edit({ attributes, setAttributes }) {
const { items } = attributes;
const updateItem = (value, index, field) => {
const newItems = items.map((item, i) => i === index ? { ...item, [field]: value } : item);
setAttributes({ items: newItems });
};
return (
<div className="amc-featured-links">
{items.map((item, index) => (
<div className="amc-link-card" key={index} style={{border: '1px solid #ddd', padding: '1em', marginBottom: '1em'}}>
<TextControl
label="Icon"
value={item.icon}
onChange={(val) => updateItem(val, index, 'icon')}
/>
<TextControl
label="Title"
value={item.title}
onChange={(val) => updateItem(val, index, 'title')}
/>
<RichText
tagName="p"
label="Description"
value={item.description}
onChange={(val) => updateItem(val, index, 'description')}
/>
<URLInputButton
url={item.url}
onChange={(url, post) => updateItem(url, index, 'url')}
/>
</div>
))}
</div>
);
},
save({ attributes }) {
const { items } = attributes;
return (
<div className="amc-featured-links grid grid-cols-3 gap-6">
{items.map((item, index) => (
<a href={item.url} className="amc-link-card" key={index}>
<div className="icon text-2xl">{item.icon}</div>
<h3 className="title font-bold">{item.title}</h3>
<p className="description">{item.description}</p>
<span className="arrow">→</span>
</a>
))}
</div>
);
},
});
// 2. Downloadables & Guides Block
registerBlockType('amc/downloadables', {
title: 'Downloadables & Guides',
icon: 'download',
category: 'widgets',
attributes: {
guides: { type: 'array', default: [
{ title: 'Advanced Rider Handbook', fileUrl: '', label: 'Download PDF' },
{ title: 'Motorcycle Roadcraft', fileUrl: '', label: 'Buy on Amazon' },
{ title: 'Biker Down! Kit', fileUrl: '', label: 'Download' }
] },
},
edit({ attributes, setAttributes }) {
const { guides } = attributes;
const updateGuide = (value, index, field) => {
const newGuides = guides.map((g, i) => i === index ? { ...g, [field]: value } : g);
setAttributes({ guides: newGuides });
};
return (
<div className="amc-downloadables two-column">
{guides.map((guide, index) => (
<div key={index} style={{border: '1px solid #ccc', padding: '1em', marginBottom: '1em'}}>
<TextControl
label="Title"
value={guide.title}
onChange={(val) => updateGuide(val, index, 'title')}
/>
<TextControl
label="Button Label"
value={guide.label}
onChange={(val) => updateGuide(val, index, 'label')}
/>
<URLInputButton
url={guide.fileUrl}
onChange={(url) => updateGuide(url, index, 'fileUrl')}
/>
</div>
))}
</div>
);
},
save({ attributes }) {
const { guides } = attributes;
return (
<div className="amc-downloadables grid grid-cols-2 gap-6">
{guides.map((guide, index) => (
<div key={index} className="guide-card">
<h4>{guide.title}</h4>
<a href={guide.fileUrl} className="button inline-block mt-2">{guide.label}</a>
</div>
))}
</div>
);
},
});
// More blocks (Training, Tools, Chapters) can follow a similar pattern...