diff --git a/scripts/block.js b/scripts/block.js index 633f8ab..b8ddacd 100644 --- a/scripts/block.js +++ b/scripts/block.js @@ -92,26 +92,41 @@ tickers: select( 'scliveticker/ticker' ).receiveTickers(), }; } )( function( props ) { + var label = [ + el( + wp.components.Dashicon, + { icon: 'rss' } + ), + __( 'Liveticker', 'stklcode-liveticker' ), + ]; var content; if ( null === props.tickers ) { // Tickers not yet loaded. - content = el( wp.components.Spinner ); - } else if ( 0 === props.length ) { + content = [ + el( + 'span', + { className: 'components-base-control label' }, + label + ), + el( wp.components.Spinner ), + ]; + } else if ( 0 === props.tickers.length ) { // No tickers available. - content = el( 'p', null, 'No tickers available' ); + content = [ + el( + 'span', + { className: 'components-base-control label' }, + label + ), + el( 'span', null, __( 'No tickers available', 'stklcode-liveticker' ) ), + ]; } else { // Tickers loaded and available. content = [ el( wp.components.SelectControl, { - label: [ - el( - wp.components.Dashicon, - { icon: 'rss' } - ), - __( 'Liveticker', 'stklcode-liveticker' ), - ], + label: label, value: props.attributes.ticker, options: props.tickers.map( function( t ) { return { diff --git a/styles/block.css b/styles/block.css index 16ec33a..bb1f374 100644 --- a/styles/block.css +++ b/styles/block.css @@ -1,7 +1,9 @@ -div.wp-block-scliveticker-ticker div.components-base-control:first-child label { +div.wp-block-scliveticker-ticker div.components-base-control:first-child label, +div.wp-block-scliveticker-ticker .label { font-weight: 600; } +div.wp-block-scliveticker-ticker .label > .dashicon, div.wp-block-scliveticker-ticker div.components-base-control:first-child label > .dashicon { margin-right: 8px; }