Skapade stöd för att kunna stil upp pluginet med en egen stilmalla

spotify-recent.php

@@ -78,28 +78,64 @@ function sro_fetch_recent_track() {
     return $data['items'][0];
 }
 
-
 /*
  * Render the Gutenberg block
  */
 function sro_render_block() {
     $item = sro_fetch_recent_track();
-    if (!$item) {
-        return "<p>Spotify not connected or no recent activity.</p>";
+    if ( ! $item ) {
+        return "<p>Spotify är inte anslutet eller så finns ingen nyligen spelad låt.</p>";
     }
 
-    $track = $item['track']['name'];
-    $artist = $item['track']['artists'][0]['name'];
-    $img = $item['track']['album']['images'][0]['url'];
+    $track  = esc_html( $item['track']['name'] );
+    $artist = esc_html( $item['track']['artists'][0]['name'] );
+    $img    = esc_url( $item['track']['album']['images'][0]['url'] );
 
-    $played = strtotime($item['played_at']);
-    $mins = floor((time() - $played) / 60);
+    $played = strtotime( $item['played_at'] );
+    $mins   = floor( ( time() - $played ) / 60 );
+    $mins   = intval( $mins );
 
-    return "
-        <div class='sro-block'>
-            <img src='$img' width='150'>
-            <p><strong>$artist – $track</strong></p>
-            <p>Spelades för $mins minuter sedan</p>
+    ob_start();
+    ?>
+    <div class="sro-container">
+        <div class="sro-album">
+            <img src="<?php echo $img; ?>" alt="Albumomslag">
         </div>
-    ";
-}
+        <div class="sro-info">
+            <div class="sro-track"><?php echo $track; ?></div>
+            <div class="sro-artist"><?php echo $artist; ?></div>
+            <div class="sro-time">Spelades för <?php echo $mins; ?> minuter sedan</div>
+        </div>
+    </div>
+    <?php
+    return ob_get_clean();
+}
+
+function sro_register_block() {
+
+    // Registrera blockets resurser
+    wp_register_script(
+        'sro-block-js',
+        plugins_url( 'blocks/block.js', __FILE__ ),
+        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
+        filemtime( plugin_dir_path(__FILE__) . 'blocks/block.js' )
+    );
+
+    wp_register_style(
+        'sro-style',
+        plugins_url( 'blocks/style.css', __FILE__ ),
+        array(),
+        filemtime( plugin_dir_path(__FILE__) . 'blocks/style.css' )
+    );
+
+    wp_register_style(
+        'sro-editor-style',
+        plugins_url( 'blocks/editor.css', __FILE__ ),
+        array(),
+        filemtime( plugin_dir_path(__FILE__) . 'blocks/editor.css' )
+    );
+
+    // Registrera blocket (block.json sköter allt)
+    register_block_type( __DIR__ . '/blocks' );
+}
+add_action( 'init', 'sro_register_block' );