, inside one styled box. Static markup; the facade is swapped for the * embed by view.js, and only the scoped CSS is rendered here. */ class Block extends AtomicBlockBase { protected $block_name = 'atomic-player'; const MEDIA_FITS = [ 'contain', 'cover', 'fill' ]; /** * Block props `mediaFit` and `playIconColor`, per breakpoint and state. * Mirrors emitPlayerProps() in atomic-player/edit.js. */ protected function extra_css( $base, $attributes ) { $styles = isset( $attributes['styles'] ) && is_array( $attributes['styles'] ) ? $attributes['styles'] : []; return AtomicBlockProps::rules( $styles, $base, function ( $props ) { $fit = isset( $props['mediaFit'] ) ? (string) $props['mediaFit'] : ''; $color = AtomicBlockProps::scalar( $props, 'playIconColor' ); return [ ' .ablocks-atomic-player__media' => in_array( $fit, self::MEDIA_FITS, true ) ? 'object-fit:' . $fit . ';' : '', ' .ablocks-atomic-player__play' => '' !== $color ? 'background-color:' . $color . ';' : '', ]; } ); } }