Wabi: lots of potential, but I need help with landing pages

  • Hi Rich,

    I started recently to work with FSE and Gutenberg and still learning the ropes. I have created some decent looking landing pages in Twenty-Twenty-Two
    [ redundant link removed ] and with a simple CSS tweak I was able to have the rows/groups one after the other without gaps.

    I added
    .wp-site-blocks .wp-block-group { margin-top: 0}
    and the issue was fixed.

    As I installed wabi on my staging site I can see the there are basically no margins most of the time, but sometimes some gaps between the blocks. Bit irregular and hard to figure out.

    I’ve started fixing this by adding spacers, but I would appreciate to:
    a. understand the different behavior between 2022 and wabi
    b. look for a more elegant fix

    On a similar vein another issue: I started customizing the colors based on my own palette but when I select my bright orange in the “rows” setting as a background the theme changes this to pink. Bit surprising that the user on some color hues loses control. For example the block starting with “Do you have a big presentation coming up” is set to orange but shows pink.

    Thank a lot for your input!

    Kind Regards,
    Matteo

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter matteoc

    (@matteoc)

    I’ve made some progress with alignments with simple CSS tweaks. Not happy with it, but it will have to do until I get some support here.

    But color management is quite a mystery. See the video below:

    https://www.dropbox.com/t/m6FO2iptoztIoLFU

    Thread Starter matteoc

    (@matteoc)

    I finally recruited the help of a brilliant front end developer and friend. He came up with the following CSS that solves a number of issues and inconsistencies with both Wabi and Gutenberg in general.

    
wp-site-blocks .wp-block-group { margin-top: 0 ; margin-bottom: 0;  padding-top: 15px; padding-bottom: 15px; }

.wp-block-column { margin-top: 0 ; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; }

ul {
  padding-left: 1rem;
}

//* ul > li + li {
  margin-top: 0.25rem;
} *//

.wp-block-post-content > .wp-block-group {
  padding: 2rem !important;
}

p {
  margin: 0 !important;
  
}

* + p {
  margin-top: 1rem !important;
}

header .wp-block-image {
  margin: 0;
  margin-top: -3px;
  margin-bottom: 3px;
} 

.wp-site-blocks > header + * {
  margin: 0;
}

.wp-block-columns:only-child {
  margin: 0;
}

.wp-block-column > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}

.wp-block-column > * + * {
  margin-top: 1.5rem !important;
  // line-height: normal;
}

.wp-block-column > h4 + p {
  margin-top: 0.5rem !important;
}

@media screen and (max-width: 768px) {
  .wp-block-columns {
    display: grid;
    grid-gap: 1rem;
  }
}

.is-not-stacked-on-mobile {
  display: flex;
}

.is-stacked-on-mobile > * {
  margin: 0;
}

.is-stacked-on-mobile > * + * {
  margin-top: 1.5rem;
}

.wp-block-media-text {
  display: grid;
  grid-gap: 2rem;
}

.wp-block-media-text__media,
.wp-block-media-text__content {
  padding: 0 !important;
  margin: 0 !important;
}

h2, h3, h4 {
  margin: 0;
}

h2 + *, h3 + *, h4 + * {
  margin-top: 1.5rem !important;
}

.wp-block-post-content .wp-block-group p + h2, body .wp-block-post-content .wp-block-group p + h3 {
  margin-top: 1.5rem !important;
}

.preshero-learn-more {
  display: grid;
  grid-gap: 1rem;
}

.preshero-learn-more > * {
  margin: 0 !important;
}

.preshero-learn-more > * .wp-block-button {
  width: 100%;
}

.preshero-learn-more > * .wp-block-button a {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .preshero-learn-more {
    grid-template-columns: repeat(4, 1fr);
  }

  .preshero-learn-more > * {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .preshero-learn-more > * .wp-block-buttons {
    margin-top: auto !important;
  }

  .preshero-learn-more > * .wp-block-buttons:before {
    content: " ";
    height: 0.5rem;
  }
}

.wp-container-9.wp-block-buttons {
  margin-top: auto !important;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Wabi: lots of potential, but I need help with landing pages’ is closed to new replies.