Feature/styles (#37)

* change: editor error and warning styles

* finish: styles

* upgrade: package lock

Functions/SettingsPage.php

@@ -106,17 +106,29 @@ public function settingsPageLayout()
         echo '<h1>' . esc_html(get_admin_page_title()) . '</h1>' . "\n";
         echo '<form class="block-a11y-checks-settings-form" action="options.php" method="post">' . "\n";
 
-        echo '<div class="block-a11y-checks-settings-options">';
+        echo '<div class="block-a11y-checks-settings-grid">';
+
+        // Output the settings fields manually to avoid the table layout
         settings_fields('block_checks_settings_group');
-        do_settings_sections('block_checks_options');
-        submit_button();
-        echo '</div>';
 
-        echo '<div class="block-a11y-checks-settings-info">';
-        echo '<h2>' . esc_html__('About', 'block-accessibility-checks') . '</h2>';
-        echo '<p>' . esc_html__('This plugin checks the accessibility of the core blocks in the WordPress block editor. You can set the level of strictness for each block type.', 'block-accessibility-checks') . '</p>';
+        // Retrieve all the fields added dynamically in initSettings()
+        $blockConfig = BlockConfig::getInstance()->getBlockConfig();
+        $options = get_option('block_checks_options');
+
+        // Loop through each field and wrap in a custom div
+        foreach ($blockConfig as $block) {
+            $value = isset($options[$block['option_name']]) ? $options[$block['option_name']] : 'error';
+            $dynamicClass = esc_attr($value);
+
+            echo '<div class="block-a11y-checks-settings-field block-a11y-checks-settings-field--' . $dynamicClass . '">';
+            echo '<h2>' . esc_html($block['block_label']) . '</h2>';
+            call_user_func(array($this, $block['function_name']));
+            echo '</div>';
+        }
+
         echo '</div>';
 
+        submit_button();
         echo '</form>' . "\n";
         echo '</div>' . "\n";
     }

build/block-admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '9a0d563b6fd72d0d2a83');
+<?php return array('dependencies' => array(), 'version' => '8bf204609efefb27025d');

build/block-checks.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'a8ef3cd57d13f1ba602f');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'b408ac5230f941007a5c');

src/styles/error.scss

@@ -5,22 +5,24 @@
 	flex-direction: column;
 	gap: 18px;
 	width: 100%;
-	padding: 20px 24px;
-	margin-left: -24px;
+	padding: 50px;
+	margin-left: -50px;
 	background-color: #f7edec;
-	border: 3px dashed #8b3122;
+	border: 1px dashed #8b3122;
+	border-radius: 5px;
+	overflow: hidden;
 }
 
 .a11y-error-msg {
-	/* display: flex;
-  gap: 6px;
-  align-items: center; */
 	font-size: 16px;
 	line-height: 24px;
 	font-weight: 600;
+	text-align: center;
 	color: white;
 	background-color: #8b3122;
-	padding: 5px 10px;
+	border-radius: 5px;
+	padding: 15px 20px;
+	margin: -40px -40px 30px -40px;
 }
 
 /* Remove top spacing from block being wrapped */