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

blocks/block.json

@@ -0,0 +1,15 @@
+{
+    "apiVersion": 2,
+    "name": "spotify-recent-oauth/recent-track",
+    "title": "Spotify Recent Track",
+    "category": "widgets",
+    "icon": "format-audio",
+    "description": "Visar din senast spelade låt från Spotify.",
+    "supports": {
+        "html": false
+    },
+    "editorScript": "sro-block-js",
+    "style": "sro-style",
+    "editorStyle": "sro-editor-style",
+    "render": "sro_render_recent_track"
+}

blocks/editor.css

@@ -0,0 +1,4 @@
+.sro-container {
+    border: 1px dashed #888;
+    padding: 10px;
+}

blocks/style.css

@@ -0,0 +1,23 @@
+.sro-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px;
+    background: #111;
+    color: #fff;
+    border-radius: 8px;
+}
+
+.sro-album img {
+    width: 300px;
+    height: 300px;
+    border-radius: 4px;
+}
+
+.sro-info {
+    line-height: 1.2;
+}
+
+.sro-track {
+    font-weight: bold;
+}

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>";
+        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 );
+    $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' );