diff --git a/src/scss/abstract/_f-context-align.scss b/src/scss/abstract/_f-context-align.scss
new file mode 100644
index 00000000..503d2ca7
--- /dev/null
+++ b/src/scss/abstract/_f-context-align.scss
@@ -0,0 +1,38 @@
+/**
+ * Align
+ *
+ * exemples :
+ *
+ *      #{ context-align("wide") } .block#{ context-align() } {
+ *          ... your css
+ *      }
+ *
+  *      return for style.scss :
+ *          .block.alignwide {
+ *              ... your css
+ *          }
+ *
+ *      return for editor-style.scss :
+ *          [data-align="wide"] > .block {
+ *              ... your css
+ *          }
+ *
+ */
+
+$function-context-align-last-value: "";
+
+@function context-align($value: null, $suffix: " > ") {
+    @if ($value == null) {
+        @if ($entry-file-name == "style") {
+            @return ".align" + $function-context-align-last-value;
+        }
+    } @else {
+        $function-context-align-last-value: $value !global;
+
+        @if ($entry-file-name == "editor-style") {
+            @return "[data-align=\"" + $value + "\"]" + $suffix;
+        }
+    }
+
+    @return "";
+}
diff --git a/src/scss/abstract/_index.scss b/src/scss/abstract/_index.scss
index a990c7a1..fb7dd0f0 100644
--- a/src/scss/abstract/_index.scss
+++ b/src/scss/abstract/_index.scss
@@ -8,6 +8,7 @@
 
 @import "./f-assign-inputs";
 @import "./f-column";
+@import "./f-context-align";
 @import "./f-context-selector";
 @import "./f-easings";
 @import "./f-em";