import { __ } from '@wordpress/i18n';
|
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
import { PanelBody, TextControl, ToggleControl, SelectControl, CheckboxControl } from '@wordpress/components';
|
import { useEffect, useState } from '@wordpress/element';
|
import apiFetch from '@wordpress/api-fetch';
|
import './editor.scss';
|
|
export default function Edit({ attributes, setAttributes }) {
|
const blockProps = useBlockProps();
|
const [availableTypes, setAvailableTypes] = useState({});
|
|
useEffect(() => {
|
apiFetch({ path: '/jvb/v1/types' }).then(types => {
|
setAvailableTypes(JSON.parse(types));
|
});
|
}, []);
|
|
return (
|
<>
|
<InspectorControls>
|
<PanelBody title={__('Feed Settings', 'jvb')}>
|
<TextControl
|
label={__('Title', 'jvb')}
|
value={attributes.title}
|
onChange={(title) => setAttributes({ title })}
|
/>
|
|
<ToggleControl
|
label={__('Inherit Current Query', 'jvb')}
|
help={__('Inherit filters from the current archive or taxonomy query', 'jvb')}
|
checked={attributes.inheritQuery}
|
onChange={(inheritQuery) => setAttributes({ inheritQuery })}
|
/>
|
|
{!attributes.inheritQuery && (
|
<div className="feed-content-types">
|
<p className="components-base-control__label">
|
{__('Content Types', 'jvb')}
|
</p>
|
<div className="checkbox-list">
|
{Object.entries(availableTypes).map(([id, label]) => (
|
<CheckboxControl
|
key={id}
|
label={label}
|
checked={attributes.contentTypes.includes(id)}
|
onChange={(isChecked) => {
|
const newTypes = isChecked
|
? [...attributes.contentTypes, id]
|
: attributes.contentTypes.filter(t => t !== id);
|
setAttributes({contentTypes: newTypes});
|
}}
|
/>
|
))}
|
</div>
|
<div className="select-all-wrapper">
|
<CheckboxControl
|
label={__('Select All', 'jvb')}
|
checked={attributes.contentTypes.length === Object.keys(availableTypes).length}
|
onChange={(isChecked) => {
|
setAttributes({
|
contentTypes: isChecked ? Object.keys(availableTypes) : []
|
});
|
}}
|
/>
|
</div>
|
</div>
|
)}
|
|
<SelectControl
|
label={__('Items Per Page', 'jvb')}
|
value={attributes.itemsPerPage}
|
options={[
|
{label: '12', value: 12},
|
{label: '24', value: 24},
|
{label: '36', value: 36}
|
]}
|
onChange={(itemsPerPage) => setAttributes({itemsPerPage: parseInt(itemsPerPage)})}
|
/>
|
|
<SelectControl
|
label={__('Default Order', 'jvb')}
|
value={attributes.defaultOrder}
|
options={[
|
{label: __('Newest First', 'jvb'), value: 'date_desc' },
|
{ label: __('Oldest First', 'jvb'), value: 'date_asc' },
|
{ label: __('Random', 'jvb'), value: 'random' }
|
]}
|
onChange={(defaultOrder) => setAttributes({ defaultOrder })}
|
/>
|
</PanelBody>
|
</InspectorControls>
|
|
<div {...blockProps}>
|
<div className="feed-block-preview">
|
<h2>{attributes.title}</h2>
|
<div className="feed-filters">
|
<div className="filter-preview">
|
{attributes.contentTypes.map(type => (
|
<span key={type} className="content-type-badge">
|
{availableTypes[type]}
|
</span>
|
))}
|
</div>
|
</div>
|
<div className="feed-grid-placeholder">
|
{[...Array(6)].map((_, i) => (
|
<div key={i} className="grid-item-placeholder" />
|
))}
|
</div>
|
</div>
|
</div>
|
</>
|
);
|
}
|
