2.0.0

jameelmoses · Aug 24, 2022 · 779fcca · 779fcca
1 parent 655ea87
commit 779fcca
Show file tree

Hide file tree

Showing 12 changed files with 586 additions and 594 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog ##
 
+## 2.0.0 - 24 Aug 2022
+
+#### Breaking Changes
+* Requires PHP >= 8.0
+* Requires WordPress >= 6.0
+
+#### Improvements
+
+* Solve for flexible content fields inside of repeaters and groups. Thanks @romanklabal!
+* CSS improvements (uses css grid instead of flexbox)
+
 ## 1.10.0 - 26 Aug 2021
 * Fixing issue with ACF version compare since it doesn't follow PHP version constraints
 

diff --git a/acf-flexible-content-extended.php b/acf-flexible-content-extended.php
@@ -1,13 +1,13 @@
 <?php
 /*
  Plugin Name: Flexible Content Extended for Advanced Custom Fields
- Version: 1.10.0
+ Version: 2.0.0
  Plugin URI: https://github.com/jameelmoses/acf-flexible-content-extended
  Description: Extends the ACF Flexible Content Field by transforming the layout list into a modal with image previews. Editing the fields layouts also happens in a modal for a better editing user experience.
  Author: Jameel Moses
  Author URI: https://github.com/jameelmoses
  Text Domain: acf-flexible-content-extended
- Contributors: Ben Voynick
+ Contributors: Ben Voynick, Roman Klabal
 
  ----
 
@@ -34,8 +34,8 @@
 }
 
 // Plugin constants
-define( 'ACF_FCE_VERSION', '1.10.0' );
-define( 'ACF_FCE_MIN_PHP_VERSION', '5.6' );
+define( 'ACF_FCE_VERSION', '2.0.0' );
+define( 'ACF_FCE_MIN_PHP_VERSION', '8.0' );
 
 // Plugin URL and PATH
 define( 'ACF_FCE_URL', plugin_dir_url( __FILE__ ) );

diff --git a/assets/css/acf-flexible-content-extended.css b/assets/css/acf-flexible-content-extended.css
@@ -191,36 +191,26 @@ body.acf-modal-open {
   margin: 0 !important;
 }
 .acf-fc-popup ul {
-  display: flex !important;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  display: grid !important;
+  grid-template-columns: 1fr;
+  grid-gap: 30px;
   position: relative;
   width: 100%;
   height: 100%;
   background: #f4f4f4;
-  padding: 15px !important;
+  padding: 30px !important;
   border: #ccc;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
   overflow-y: auto;
 }
-.acf-fc-popup ul::after {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 15px;
-}
-.acf-fc-popup ul li {
-  width: 100%;
-  padding: 15px;
-}
 @media only screen and (min-width: 600px) {
-  .acf-fc-popup ul li {
-    width: 50%;
+  .acf-fc-popup ul {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 @media only screen and (min-width: 1200px) {
-  .acf-fc-popup ul li {
-    width: calc(100% / 3);
+  .acf-fc-popup ul {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 .acf-fc-popup ul li a {
@@ -235,6 +225,10 @@ body.acf-modal-open {
 .acf-fc-popup ul li a:hover .acf-fc-popup-label, .acf-fc-popup ul li a:focus .acf-fc-popup-label, .acf-fc-popup ul li a:active .acf-fc-popup-label {
   background-color: #006799;
 }
+.acf-fc-popup ul li a.disabled {
+  opacity: 0.33;
+  cursor: not-allowed;
+}
 .acf-fc-popup ul li a .acf-fc-popup-label {
   position: relative;
   background-color: #0085ba;
@@ -249,7 +243,22 @@ body.acf-modal-open {
   transition: 0.2s ease-in-out;
   z-index: 2;
 }
+.acf-fc-popup ul li a .acf-fc-popup-label .badge {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: 1px;
+  background: #fff;
+  color: #d54e21;
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 16px;
+  text-shadow: none;
+}
 .acf-fc-popup ul li a .acf-fc-popup-image {
+  background-image: url("../images/default.jpg");
   background-position: center !important;
   background-repeat: round !important;
   background-size: cover !important;

diff --git a/assets/js/acf-flexible-content-extended.js b/assets/js/acf-flexible-content-extended.js
@@ -69,7 +69,7 @@
       // Add markup to links for easier styling
       $('body').on('click', 'a[data-name="add-layout"]', function() {
         $('.acf-fc-popup a').each(function() {
-          const html = '<div class="acf-fc-popup-label">' + $(this).text() + '</div><div class="acf-fc-popup-image"></div>';
+          const html = '<div class="acf-fc-popup-label">' + $(this).html() + '</div><div class="acf-fc-popup-image"></div>';
           $(this).html(html);
         });
       });

diff --git a/assets/src/acf-flexible-content-extended.js b/assets/src/acf-flexible-content-extended.js
@@ -69,7 +69,7 @@
       // Add markup to links for easier styling
       $('body').on('click', 'a[data-name="add-layout"]', function() {
         $('.acf-fc-popup a').each(function() {
-          const html = '<div class="acf-fc-popup-label">' + $(this).text() + '</div><div class="acf-fc-popup-image"></div>';
+          const html = '<div class="acf-fc-popup-label">' + $(this).html() + '</div><div class="acf-fc-popup-image"></div>';
           $(this).html(html);
         });
       });

diff --git a/assets/src/scss/_preview-modal.scss b/assets/src/scss/_preview-modal.scss
@@ -44,36 +44,27 @@
   }
 
   ul {
-    display: flex !important;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+    display: grid !important;
+    grid-template-columns: 1fr;
+    grid-gap: 30px;
     position: relative;
     width: 100%;
     height: 100%;
     background: #f4f4f4;
-    padding: 15px !important;
+    padding: 30px !important;
     border: #ccc;
     box-shadow: 0 0 8px rgba(#000, .5);
     overflow-y: auto;
 
-    &::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 15px;
+    @media only screen and (min-width: 600px) {
+      grid-template-columns: repeat(2, 1fr);
     }
 
-    li {
-      width: 100%;
-      padding: 15px;
-
-      @media only screen and (min-width: 600px) {
-        width: 50%;
-      }
+    @media only screen and (min-width: 1200px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
 
-      @media only screen and (min-width: 1200px) {
-        width: calc(100% / 3);
-      }
+    li {
 
       a {
         padding: 0;
@@ -91,6 +82,11 @@
           }
         }
 
+        &.disabled {
+          opacity: .33;
+          cursor: not-allowed;
+        }
+
         .acf-fc-popup-label {
           position: relative;
           background-color: #0085ba;
@@ -104,9 +100,25 @@
           box-shadow: 0 1px 0 #006799;
           transition: .2s ease-in-out;
           z-index: 2;
+
+          .badge {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            top: 1px;
+            background: #fff;
+            color: #d54e21;
+            font-size: 10px;
+            font-weight: 900;
+            line-height: 16px;
+            text-shadow: none;
+          }
         }
 
         .acf-fc-popup-image {
+          background-image: url('../images/default.jpg');
           background-position: center !important;
           background-repeat: round !important;
           background-size: cover !important;

diff --git a/classes/main.php b/classes/main.php
@@ -29,7 +29,9 @@ public function layouts_images_style() {
 		$css = "\n<style>";
 		$css .= "\n\t /** Flexible Content Extended for Advanced Custom Fields : dynamic images */";
 		foreach ( $images as $layout_key => $image_url ) {
-			$css .= sprintf( "\n\t .acf-fc-popup ul li a[data-layout=\"%s\"] .acf-fc-popup-image { background-image: url(\"%s\"); }", $layout_key, $image_url );
+      if ( isset( $image_url ) ) {
+        $css .= sprintf( "\n\t .acf-fc-popup ul li a[data-layout=\"%s\"] .acf-fc-popup-image { background-image: url(\"%s\"); }", $layout_key, $image_url );
+      }
 		}
 		$css .= "\n</style>\n";
 
@@ -44,12 +46,14 @@ public function layouts_images_style() {
 	public function retrieve_flexible_keys() {
 		$keys   = [];
 		$groups = acf_get_field_groups();
+
 		if ( empty( $groups ) ) {
 			return $keys;
 		}
 
 		foreach ( $groups as $group ) {
 			$fields = (array) acf_get_fields( $group );
+
 			if ( !empty( $fields ) ) {
 				$this->retrieve_flexible_keys_from_fields( $fields, $keys );
 			}
@@ -66,18 +70,32 @@ public function retrieve_flexible_keys() {
 	 */
 	protected function retrieve_flexible_keys_from_fields( $fields, &$keys ) {
 		foreach ( $fields as $field ) {
-			if ( 'flexible_content' === $field['type'] ) {
+
+      // Repeater and group fields
+      if (
+        'repeater' === $field['type'] ||
+        'group' === $field['type']
+      ) {
+        // If this is a repeater or group field, check to see if it
+        // contains any nested flexible content fields
+        $subFields = acf_get_fields( $field );
+        $this->retrieve_flexible_keys_from_fields( $subFields, $keys );
+
+        // Flexible content fields
+      } elseif ( 'flexible_content' === $field['type'] ) {
+
 				foreach ( $field['layouts'] as $layout_field ) {
-					// Prevent skipping layout fields with identical keys from 
-					// different fields by creating a unique identifier.
-					$field_identifier = $field['key'] . '-' . $layout_field['key'];
 
-					// Don't revisit keys we've recorded already
-					if ( ! empty( $keys[ $field_identifier ] ) ) {
-						continue;
-					}
+          // Prevent skipping layout fields with identical keys from
+  				// different fields by creating a unique identifier.
+  				$field_identifier = $field['key'] . '-' . $layout_field['key'];
+
+  				// Don't revisit keys we've recorded already
+  				if ( ! empty( $keys[ $field_identifier ] ) ) {
+  					continue;
+  				}
 
-					$keys[ $field_identifier ] = $layout_field['name'];
+  				$keys[ $field_identifier ] = $layout_field['name'];
 
 					// Flexible content has a potentially recursive structure. Each layout
 					// has its own sub-fields that could in turn be flexible content.
@@ -96,6 +114,7 @@ protected function retrieve_flexible_keys_from_fields( $fields, &$keys ) {
 	 */
 	public function get_layouts_images() {
 		$flexibles = $this->retrieve_flexible_keys();
+
 		if ( empty( $flexibles ) ) {
 			return [];
 		}
@@ -145,8 +164,6 @@ public function locate_image( $layout ) {
 		if ( is_file( $image_path ) ) {
 			return $image_uri;
 		}
-
-		return ACF_FCE_URL . 'assets/images/default.jpg';
 	}
 
 	/**

diff --git a/classes/requirements.php b/classes/requirements.php
@@ -12,16 +12,16 @@ class Requirements {
 	 * @return bool
 	 */
 	public function check_requirements() {
+
 		if ( ! function_exists( 'acf' ) ) {
 			$this->display_error( __( 'Advanced Custom Fields is a required plugin.', 'acf-flexible-content-extended' ) );
-
 			return false;
 		}
 
 		if ( $this->version_compare( '5.6.0', acf()->version, '>' ) ) {
-			$this->display_error( __( 'Advanced Custom Fields should be on version 5.6.0 or above.', 'acf-flexible-content-extended' ) );
+			$this->display_error( __( 'Advanced Custom Fields must be on version 5.6.0 or above.', 'acf-flexible-content-extended' ) );
 			return false;
-		};
+		}
 
 		return true;
 	}

diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
   "name": "jameelmoses/acf-flexible-content-extended",
-  "version": "1.10.0",
+  "version": "2.0.0",
   "description": "Extends the ACF Flexible Content Field by transforming the layout list into a modal with image previews. Editing the fields layouts also happens in a modal for a better editing user experience.",
   "keywords": [
     "WP",
@@ -20,6 +20,6 @@
   "minimum-stability": "stable",
   "license": "GPL-3.0+",
   "require": {
-    "php": ">=5.6.0"
+    "php": ">=8.0"
   }
 }
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "npx gulp"
   },
-  "version": "1.10.0",
+  "version": "2.0.0",
   "keywords": [
     "WP",
     "Advanced Custom Fields",