_debug.scss

/**
 * Debugging
 *
 * @param str $block name of block
 * @param str $block name of option
 *
 * @return config option value
 *
 **/
@mixin debug($block) {
  /**
   * If debug is true
   **/
  @if map_get(map_get($wp-blocks-options, debug), enabled) == true {
    /**
     * Enable outline if global setting is true
     **/
    @if
      map_get(map_get(map_get(
        $wp-blocks-options, debug), settings),outlineEnabled) == true
      and
      map_get(map_get(map_get(
          $wp-blocks-options, blocks), $block), debug) == true {
      @include debugOutline();
    }
  }

  /**
   * Debug console
   **/
  @if
    map_get(map_get(map_get($wp-blocks-options, debug), settings), console) == true {
    @debug ();
  }
}

@mixin debugGrid() {
  /**
  * Enable grid if global setting is true
  **/
  @if
    map_get(map_get(map_get($wp-blocks-options, debug), settings), gridEnabled) == true {
    > main {
      background:
        transparent
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==)
        repeat
        top
        left !important;
    }
  }
}

@mixin debugElements() {
  /**
  * Enable element borders if global setting is true
  **/
  @if
    map_get(map_get(map_get($wp-blocks-options, debug), settings), elementEnabled) == true {
    body {
      outline: 1px solid #2980b9 !important;
    }

    article {
      outline: 1px solid #3498db !important;
    }

    nav {
      outline: 1px solid #0088c3 !important;
    }

    aside {
      outline: 1px solid #33a0ce !important;
    }

    section {
      outline: 1px solid #66b8da !important;
    }

    header {
      outline: 1px solid #99cfe7 !important;
    }

    footer {
      outline: 1px solid #cce7f3 !important;
    }

    h1 {
      outline: 1px solid #162544 !important;
    }

    h2 {
      outline: 1px solid #314e6e !important;
    }

    h3 {
      outline: 1px solid #3e5e85 !important;
    }

    h4 {
      outline: 1px solid #449baf !important;
    }

    h5 {
      outline: 1px solid #c7d1cb !important;
    }

    h6 {
      outline: 1px solid #4371d0 !important;
    }

    main {
      outline: 1px solid #2f4f90 !important;
    }

    address {
      outline: 1px solid #1a2c51 !important;
    }

    div {
      outline: 1px solid #036cdb !important;
    }

    p {
      outline: 1px solid #ac050b !important;
    }

    hr {
      outline: 1px solid #ff063f !important;
    }

    pre {
      outline: 1px solid #850440 !important;
    }

    blockquote {
      outline: 1px solid #f1b8e7 !important;
    }

    ol {
      outline: 1px solid #ff050c !important;
    }

    ul {
      outline: 1px solid #d90416 !important;
    }

    li {
      outline: 1px solid #d90416 !important;
    }

    dl {
      outline: 1px solid #fd3427 !important;
    }

    dt {
      outline: 1px solid #ff0043 !important;
    }

    dd {
      outline: 1px solid #e80174 !important;
    }

    figure {
      outline: 1px solid #f0b !important;
    }

    figcaption {
      outline: 1px solid #bf0032 !important;
    }

    table {
      outline: 1px solid #0c9 !important;
    }

    caption {
      outline: 1px solid #37ffc4 !important;
    }

    thead {
      outline: 1px solid #98daca !important;
    }

    tbody {
      outline: 1px solid #64a7a0 !important;
    }

    tfoot {
      outline: 1px solid #22746b !important;
    }

    tr {
      outline: 1px solid #86c0b2 !important;
    }

    th {
      outline: 1px solid #a1e7d6 !important;
    }

    td {
      outline: 1px solid #3f5a54 !important;
    }

    col {
      outline: 1px solid #6c9a8f !important;
    }

    colgroup {
      outline: 1px solid #6c9a9d !important;
    }

    button {
      outline: 1px solid #da8301 !important;
    }

    datalist {
      outline: 1px solid #c06000 !important;
    }

    fieldset {
      outline: 1px solid #d95100 !important;
    }

    form {
      outline: 1px solid #d23600 !important;
    }

    input {
      outline: 1px solid #fca600 !important;
    }

    keygen {
      outline: 1px solid #b31e00 !important;
    }

    label {
      outline: 1px solid #ee8900 !important;
    }

    legend {
      outline: 1px solid #de6d00 !important;
    }

    meter {
      outline: 1px solid #e8630c !important;
    }

    optgroup {
      outline: 1px solid #b33600 !important;
    }

    option {
      outline: 1px solid #ff8a00 !important;
    }

    output {
      outline: 1px solid #ff9619 !important;
    }

    progress {
      outline: 1px solid #e57c00 !important;
    }

    select {
      outline: 1px solid #e26e0f !important;
    }

    textarea {
      outline: 1px solid #cc5400 !important;
    }

    details {
      outline: 1px solid #33848f !important;
    }

    summary {
      outline: 1px solid #60a1a6 !important;
    }

    menu {
      outline: 1px solid #449da6 !important;
    }

    del {
      outline: 1px solid #bf0000 !important;
    }

    ins {
      outline: 1px solid #400000 !important;
    }

    img {
      outline: 1px solid #22746b !important;
    }

    iframe {
      outline: 1px solid #64a7a0 !important;
    }

    embed {
      outline: 1px solid #98daca !important;
    }

    object {
      outline: 1px solid #0c9 !important;
    }

    param {
      outline: 1px solid #37ffc4 !important;
    }

    video {
      outline: 1px solid #6ee866 !important;
    }

    audio {
      outline: 1px solid #027353 !important;
    }

    source {
      outline: 1px solid #012426 !important;
    }

    canvas {
      outline: 1px solid #a2f570 !important;
    }

    track {
      outline: 1px solid #59a600 !important;
    }

    map {
      outline: 1px solid #7be500 !important;
    }

    area {
      outline: 1px solid #305900 !important;
    }

    a {
      outline: 1px solid #ff62ab !important;
    }

    em {
      outline: 1px solid #800b41 !important;
    }

    strong {
      outline: 1px solid #ff1583 !important;
    }

    i {
      outline: 1px solid #803156 !important;
    }

    b {
      outline: 1px solid #cc1169 !important;
    }

    u {
      outline: 1px solid #ff0430 !important;
    }

    s {
      outline: 1px solid #f805e3 !important;
    }

    small {
      outline: 1px solid #d107b2 !important;
    }

    abbr {
      outline: 1px solid #4a0263 !important;
    }

    q {
      outline: 1px solid #240018 !important;
    }

    cite {
      outline: 1px solid #64003c !important;
    }

    dfn {
      outline: 1px solid #b4005a !important;
    }

    sub {
      outline: 1px solid #dba0c8 !important;
    }

    sup {
      outline: 1px solid #cc0256 !important;
    }

    time {
      outline: 1px solid #d6606d !important;
    }

    code {
      outline: 1px solid #e04251 !important;
    }

    kbd {
      outline: 1px solid #5e001f !important;
    }

    samp {
      outline: 1px solid #9c0033 !important;
    }

    var {
      outline: 1px solid #d90047 !important;
    }

    mark {
      outline: 1px solid #ff0053 !important;
    }

    bdi {
      outline: 1px solid #bf3668 !important;
    }

    bdo {
      outline: 1px solid #6f1400 !important;
    }

    ruby {
      outline: 1px solid #ff7b93 !important;
    }

    rt {
      outline: 1px solid #ff2f54 !important;
    }

    rp {
      outline: 1px solid #803e49 !important;
    }

    span {
      outline: 1px solid #cc2643 !important;
    }

    br {
      outline: 1px solid #db687d !important;
    }

    wbr {
      outline: 1px solid #db175b !important;
    }
  }
}

@mixin debugOutline() {
  color: hsla(210, 100%, 100%, 1) !important;
  background:
    map_get(
      map_get(
        map_get($wp-blocks-options, debug),
        settings
      ),
      outlineColor
    ) !important;
  outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

  * {
    color: hsla(210, 100%, 100%, 1) !important;
    background:
      map_get(
        map_get(
          map_get($wp-blocks-options, debug),
          settings
        ),
        outlineColor
      ) !important;
    outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
  }
}