From cdef12ef185ab67634de24dee82fb1a06e2334ab Mon Sep 17 00:00:00 2001
From: crille <crille@crille.org>
Date: Fri, 3 Apr 2026 09:18:02 +0200
Subject: [PATCH] =?UTF-8?q?Skapade=20st=C3=B6d=20f=C3=B6r=20att=20kunna=20?=
 =?UTF-8?q?stil=20upp=20pluginet=20med=20en=20egen=20stilmalla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blocks/block.json  | 15 +++++++++++
 blocks/editor.css  |  4 +++
 blocks/style.css   | 23 ++++++++++++++++
 spotify-recent.php | 66 +++++++++++++++++++++++++++++++++++-----------
 4 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 blocks/block.json
 create mode 100644 blocks/editor.css
 create mode 100644 blocks/style.css

diff --git a/blocks/block.json b/blocks/block.json
new file mode 100644
index 0000000..4c4b520
--- /dev/null
+++ b/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"
+}
diff --git a/blocks/editor.css b/blocks/editor.css
new file mode 100644
index 0000000..526825c
--- /dev/null
+++ b/blocks/editor.css
@@ -0,0 +1,4 @@
+.sro-container {
+    border: 1px dashed #888;
+    padding: 10px;
+}
diff --git a/blocks/style.css b/blocks/style.css
new file mode 100644
index 0000000..96ad200
--- /dev/null
+++ b/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;
+}
diff --git a/spotify-recent.php b/spotify-recent.php
index 8861d12..82da91c 100644
--- a/spotify-recent.php
+++ b/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>
-    ";
-}
\ No newline at end of file
+        <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' );
\ No newline at end of file