Merge pull request #19 from MuluhGodson/custom_padding

Custom Margin and Paddign Settings

custom-block-settings.js

@@ -0,0 +1,39 @@
+// Enable spacing control on the following blocks
+const enableSpacingControlOnBlocks = [
+    'core/columns',
+    'core/column',
+    'core/group',
+];
+
+/**
+ * Add spacing control attribute to block.
+ *
+ * @param {object} settings Current block settings.
+ * @param {string} name Name of block.
+ *
+ * @returns {object} Modified block settings.
+ */
+ const addSpacingControlAttribute = ( settings, name ) => {
+    // Do nothing if it's another block than our defined ones.
+    if ( ! enableSpacingControlOnBlocks.includes( name ) ) {
+        return settings;
+    }
+
+    // Use Lodash's assign to gracefully handle if attributes are undefined
+    settings = lodash.assign( settings, {
+        supports: {
+            spacing: {
+                blockGap: true,
+                margin: true,  
+                padding: true, 
+            }
+        }
+    } );
+    return settings;
+};
+
+wp.hooks.addFilter(
+    'blocks.registerBlockType',
+    'custom-spacing',
+    addSpacingControlAttribute
+);

functions.php

@@ -54,9 +54,16 @@ public function add_global_menu($parent_menus) {
 	public function actions_manager() {
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
 		add_filter( 'cc_theme_base_menus', array( $this, 'add_global_menu') );
+		add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
 	}
+
+	public function admin_enqueue_scripts() {
+		wp_enqueue_script( 'custom-block-settings', THEME_LOCAL_URI . '/custom-block-settings.js', '', self::theme_ver, true );
+	}
+
 	public function enqueue_styles() {
 		wp_enqueue_style( 'cc_current_style', THEME_LOCAL_URI . '/style.css', self::theme_ver );
+
 	}
 }
 

style.css

@@ -8,81 +8,5 @@ Template: creativecommons-base
 Version: 2020.07.1
 License: GPL2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
-
 This theme, like WordPress, is licensed under the GPL.
-*/
-
-/* styles for single blog post*/
-.cc-category {
-	position: absolute;
-	left: 0;
-	top: -3.5rem;
-	background-color: #c74200;
-	padding: 1rem;
-	z-index: 4;
-}
-
-.cc-category a {
-	color: #ffffff;
-	font-weight: bolder;
-}
-
-.cc-post-heading {
-	position: absolute;
-	top: 45%;
-	left: 55%;
-	width: auto;
-	background-color: #ffffff;
-	z-index: 3;
-	padding: 3rem;
-}
-
-.cc-post-image {
-	position: relative;
-	top: 0;
-	left: 0;
-	width: 50rem;
-	z-index: 2;
-}
-
-.cc-post-parent {
-	position: relative;
-    width: 100%;
-	margin-top: 5rem;
-	z-index: 1;
-}
-
-@media (max-width: 1023px) {
-	.cc-category {
-		position: relative;
-		top: auto;
-		left: auto;
-        width: fit-content;
-		background-color: #c74200;
-		padding: 1rem;
-	}
-
-    .cc-post-heading {
-		position: relative;
-		top: auto;
-		left: auto;
-		background-color: transparent;
-		width: 100%;
-		display: block;
-		padding: 1rem;
-	}
-
-	.cc-post-image {
-		position: relative;
-		top: auto;
-		left: auto;
-		width: 100%;
-		display: block;
-	}
-
-    .cc-post-parent {
-		position: relative;
-		margin-top: 1rem;
-		width: 100%;
-	}
-}
+*/

theme.json

@@ -0,0 +1,11 @@
+{
+	"version": 1,
+	"settings": {
+		"spacing": {
+			"blockGap": true,
+			"customPadding": true,
+			"customMargin": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ]
+		}
+	}
+}