framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic article block backend working

Browse Source
This commit is contained in:
Steve Ross
2026-01-03 10:31:24 +00:00
parent 0576d05dfb
commit 8d8ccedbf2
7 changed files with 89 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/js/lib/blocks/AttachmentImage.jsx
View File

@@ -1,46 +0,0 @@
import { useSelect } from '@wordpress/data';
/**
* AttachmentImage
*
* This component is used to display an image from the media library.
* It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
*
* @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
*
* @param {object} props
* @param {number} props.imageId The ID of the image to display.
* @param {string} props.size The size of the image to display. Defaults to 'full'.
* @returns {*} React JSX
*/
export default function AttachmentImage({ imageId, size = 'full' }) {
const { image } = useSelect((select) => ({
image: select('core').getEntityRecord('postType', 'attachment', imageId),
}));
const imageAttributes = () =>{
let attributes = {
src: image.source_url,
alt: image.alt_text,
className: `attachment-${size} size-${size}`,
width: image.media_details.width,
height: image.media_details.height,
};
if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
attributes.src = image.media_details.sizes[size].source_url;
attributes.width = image.media_details.sizes[size].width;
attributes.height = image.media_details.sizes[size].height;
}
return attributes;
};
return (
<>
{image && (
<img {...imageAttributes()} />
)}
</>
)
}

43
resources/js/lib/blocks/BlockSettings.jsx
View File

@@ -1,43 +0,0 @@
import { useSelect } from '@wordpress/data';
/**
* BlockSettings
*
* Bundles the <InspectorControls> used for several blocks
* *
* @param {object} props
* @param {number} props.imageId The ID of the image to display.
* @param {string} props.size The size of the image to display. Defaults to 'full'.
* @returns {*} React JSX
*/
export default function BlockSettings({ imageId, size = 'full' }) {
const { image } = useSelect((select) => ({
image: select('core').getEntityRecord('postType', 'attachment', imageId),
}));
const imageAttributes = () =>{
let attributes = {
src: image.source_url,
alt: image.alt_text,
className: `attachment-${size} size-${size}`,
width: image.media_details.width,
height: image.media_details.height,
};
if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
attributes.src = image.media_details.sizes[size].source_url;
attributes.width = image.media_details.sizes[size].width;
attributes.height = image.media_details.sizes[size].height;
}
return attributes;
};
return (
<>
{image && (
<img {...imageAttributes()} />
)}
</>
)
}

55
resources/js/lib/blocks/classNames.js
View File

@@ -1,55 +0,0 @@
export function containerClassNames(attributes, bgProps)
{
let classNames = [
'container',
];
if('container_width' in attributes)
classNames.push(`container-${attributes.container_width}`);
if('alignment' in attributes)
classNames.push(`align-${attributes.alignment}`);
return classNames;
}
export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
{
defaultClasses = defaultClasses.split(' ');
let classNames = [
'section',
];
if('padding_top'in attributes && !attributes.padding_top)
classNames.push('section-zero-top');
if('padding_bottom'in attributes && !attributes.padding_bottom)
classNames.push('section-zero-bottom');
if('background_colour' in attributes && attributes.background_colour) {
let bg = `bg-${ attributes.background_colour }`;
if(
'background_tint' in attributes &&
attributes.background_tint != 0 &&
!['white', 'black'].includes(attributes.background_colour)
) {
bg += `-${ attributes.background_tint }`;
}
classNames.push(bg);
}
if('background_image'in attributes && attributes.background_image != '0')
classNames.push('has-bg-image');
// combine arrays
classNames = classNames.concat(defaultClasses).concat(extraClasses);
// remove duplicate items
classNames = [ ...new Set(classNames) ];
return classNames;
}