with the atomic style system. * Static markup; only the scoped CSS is rendered here. */ class Block extends AtomicBlockBase { protected $block_name = 'atomic-divider'; /** Line styles the Style control offers; anything else is dropped. */ const LINE_STYLES = [ 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge' ]; /** * The line (block props `dividerStyle`, `dividerWeight`, `dividerColor`) * and the Alignment control (`boxAlign`), per breakpoint and state. The *

---

is drawn as its top border, so these style that border only. * Mirrors emitDividerProps() in atomic-divider/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 ) { $css = ''; $style = isset( $props['dividerStyle'] ) ? (string) $props['dividerStyle'] : ''; if ( in_array( $style, self::LINE_STYLES, true ) ) { $css .= 'border-top-style:' . $style . ';'; } $weight = AtomicBlockProps::range( isset( $props['dividerWeight'] ) ? $props['dividerWeight'] : '' ); if ( '' !== $weight ) { $css .= 'border-top-width:' . $weight . ';'; } $color = AtomicBlockProps::scalar( $props, 'dividerColor' ); if ( '' !== $color ) { $css .= 'border-top-color:' . $color . ';'; } $align = isset( $props['boxAlign'] ) ? (string) $props['boxAlign'] : ''; $css .= preg_replace( '/(margin-[a-z]+:[^;]+);/', '$1 !important;', AtomicBlockProps::align_css( $align ) ); return [ '' => $css ]; } ); } }