=Timeline fields in feedroutes.php

Jake Vanderwerf

2026-01-01 de699440ff94e9c0d8e8b5201ee93179c085bf60

 src/video/edit.js

@@ -4,31 +4,63 @@
   InspectorControls,
   MediaUpload,
   MediaUploadCheck,
   InnerBlocks
   InnerBlocks,
   useInnerBlocksProps
} from '@wordpress/block-editor';
import {
   PanelBody,
   Button,
   ToggleControl,
   BaseControl
   BaseControl,
   RangeControl,
   SelectControl
} from '@wordpress/components';
import './editor.scss';

const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/ogv'];

const INNER_BLOCKS_TEMPLATE = [
   ['core/heading', {
      level: 1,
      placeholder: 'Add heading...',
      textAlign: 'center'
   }],
   ['core/paragraph', {
      placeholder: 'Add description...',
      align: 'center'
   }],
   ['core/buttons', {
      layout: { type: 'flex', justifyContent: 'center' }
   }]
];

export default function Edit({ attributes, setAttributes }) {
   const {
      posterId,
      posterUrl,
      videoSources,
      mobileSources,
      fadeEffect
      fadeEffect,
      overlayOpacity,
      contentAlignment,
      minHeight
   } = attributes;

   const blockProps = useBlockProps({
      className: 'video-cover-editor'
      className: 'video-cover-editor',
      style: {
         minHeight: minHeight ? `${minHeight}px` : undefined
      }
   });

   const innerBlocksProps = useInnerBlocksProps(
      { className: 'video-cover-content' },
      {
         template: INNER_BLOCKS_TEMPLATE,
         templateLock: false
      }
   );

   const onSelectPoster = (media) => {
      setAttributes({
         posterId: media.id,
@@ -147,6 +179,7 @@
                  {renderVideoSourceList(videoSources, false)}
                  <MediaUploadCheck>
                     <MediaUpload
                        multiple={ true }
                        onSelect={(media) => onSelectVideo(media, false)}
                        allowedTypes={ALLOWED_VIDEO_TYPES}
                        render={({ open }) => (
@@ -168,6 +201,7 @@
                  {renderVideoSourceList(mobileSources, true)}
                  <MediaUploadCheck>
                     <MediaUpload
                        multiple={ true }
                        onSelect={(media) => onSelectVideo(media, true)}
                        allowedTypes={ALLOWED_VIDEO_TYPES}
                        render={({ open }) => (
@@ -189,13 +223,65 @@
                  onChange={(value) => setAttributes({ fadeEffect: value })}
               />
            </PanelBody>

            <PanelBody title={__('Overlay Settings', 'jvb')} initialOpen={true}>
               <RangeControl
                  label={__('Overlay Opacity', 'jvb')}
                  help={__('Darken video for better text readability', 'jvb')}
                  value={overlayOpacity}
                  onChange={(value) => setAttributes({ overlayOpacity: value })}
                  min={0}
                  max={100}
                  step={5}
               />

               <SelectControl
                  label={__('Content Alignment', 'jvb')}
                  value={contentAlignment}
                  options={[
                     { label: __('Top Left', 'jvb'), value: 'top-left' },
                     { label: __('Top Center', 'jvb'), value: 'top-center' },
                     { label: __('Top Right', 'jvb'), value: 'top-right' },
                     { label: __('Center Left', 'jvb'), value: 'center-left' },
                     { label: __('Center', 'jvb'), value: 'center' },
                     { label: __('Center Right', 'jvb'), value: 'center-right' },
                     { label: __('Bottom Left', 'jvb'), value: 'bottom-left' },
                     { label: __('Bottom Center', 'jvb'), value: 'bottom-center' },
                     { label: __('Bottom Right', 'jvb'), value: 'bottom-right' }
                  ]}
                  onChange={(value) => setAttributes({ contentAlignment: value })}
               />

               <RangeControl
                  label={__('Minimum Height', 'jvb')}
                  help={__('Minimum height in pixels (leave 0 for auto)', 'jvb')}
                  value={minHeight}
                  onChange={(value) => setAttributes({ minHeight: value })}
                  min={0}
                  max={1000}
                  step={50}
               />
            </PanelBody>
         </InspectorControls>

         <div {...blockProps}>
            {posterUrl ? (
            {posterUrl || videoSources.length > 0 ? (
               <div className="video-cover-preview">
                  <img src={posterUrl} alt={__('Video poster', 'jvb')} />
                  <div className="video-overlay">
                  {posterUrl && (
                     <>
                        <img src={posterUrl} alt={__('Video poster', 'jvb')} />
                        {overlayOpacity > 0 && (
                           <div
                              className="video-overlay-preview"
                              style={{ opacity: overlayOpacity / 100 }}
                           />
                        )}
                     </>
                  )}
                  <div className={`video-cover-content-preview align-${contentAlignment}`}>
                     <div {...innerBlocksProps} />
                  </div>
                  <div className="video-info">
                     <p>
                        {videoSources.length} {__('desktop source(s)', 'jvb')}
                        {mobileSources.length > 0 &&
@@ -210,9 +296,6 @@
               </div>
            )}
         </div>
         <div className="inner-blocks">
            <InnerBlocks />
         </div>
      </>
   );
}