Как сверстать такой блок?

calc
либо фон отдельно псевдоэлементом, блок в потоке

Нужно ли выводить в wordpress контент для заказчика, который точно не будет меняться?

Спросите об этом заказчика.
Или уточните вопрос кому нужно, зачем нужно и т.д.

Как поставить блок под блоком?

Блок под блоком встает сам. Без доп.манипуляций.
Поэтому, нужно выложить код, чтобы показать нам, что же вы такое сделали, что они перестали так себя вести. И тогда мы скажем, что нужно сделать.

Возможно, задали родителю флекс или кому-то флоат. Дальше надо узнать зачем задали. И исходя из этого решать.

Как правильно организовать не простую обёртку для сайта (container, wrapper)?

qwekaqwe, если вы зададите всем блокам отступы, то придется компенсировать их отрицательными марджинами. Зачем двойную работу-то делать?
Логично задавать только нужные свойства.

Да и паддинг у блоков-центровщиков, а не у оберток, которые на всю ширину.

Как правильно организовать не простую обёртку для сайта (container, wrapper)?

Либо фон вставлять псевдоэлементом либо задавать доп.обертки вокруг нужных секций.

Как сделать плавное появление псевдоэлемента?

P.S. код я не смог выгрузить на кодпен из-за того что писал я его на SASS, а & CodePen не любит

Внезапно.
В любом случае вы можете выложить в песочницу скомпилированный CSS.

При наведении анимация изменения своей позиции происходит плавно, в то время как псевдоэлемент возникает и пропадает резкою

Вероятно, вы пытаетесь анимировать display, но display дискретен.
Замените на прозрачность или выезд или увеличение размера.

Проверить на ошибки БЭМа?

Не БЭМ:
1. div вокруг логотипа - лишний
2. span вокруг Menu - лишний (возможно оставить из соображений доступности, но тогда должен быть класс visually-hidden)
3. div вокруг списка со ссылками - лишний
4. header-menu__login-link вероятнее всего эта одинокая ссылка превратится во что-то большее, блок в котором будет написан логин, ссылка/кнопка на выход, ссылка на профиль и т.д. Это нужно узнать и предусмотреть в разметке.

Теперь можно будет перейти и к БЭМ
1. Основной блок это .header (не надо писать лишнего, если будут другие хедеры, там и назовете длиннее).
2. header-menu вероятнее, просто некая обертка, выполняющая роль центровщика, тогда ей достаточно только класса .container
3. Для меню нужен микс, это одновременно и элемент блока header и самостоятельный блок. Внутри него всё будет плясать от этого блока.
4. header__apadtive-menu-link зачем про адаптивность что-то говорить? Если есть варианты, то это модификатор. И, наверное, не link, а btn

Это не окончательный вариант с учётом всего вышесказанного. Да и макет вы видите, а я нет.

<header class="header">
  <div class="container">
    <a href="#" class="header__logo logo">
      <img class="logo__img" src="img/content/logo.png" alt="Логотип">
    </a>
    <div class="header__menu-btn btn btn--burger">
      <span class="visually-hidden">Menu</span>
    </div>
    <nav class="header__menu">  
        <ul class="header__menu-list menu">
          <li>
            <a class="menu__link" href="#">About</a>
          </li>
          <li>
            <a class="menu__link" href="#">Contact</a>
          </li>
          <li>
            <a class="menu__link" href="#">Catalog</a>
          </li>
          <li>
            <a class="menu__link" href="#">Blog</a>
          </li>
        </ul>

      <a class="header__login-link" href="#">Sign in</a>
    </nav>
  </div>
</header>

Что поменять в дизайне сайта?

Обратитесь к потребностям целевой аудитории.

Как при помощи flex сделать как на картинке?

Чтобы боковые маленькие эти окошка при уменьшении экрана до 300 px были расположены левое окошко на месте,а правое под тем,что выше подвала?

С помощью @media и свойства order. Ну и изменения ширины или flex-basis, что вам там удобнее.

А если одну и ту же задачу можно решить и с помощь Grid и Flex то какому способу прибегнуть?

А еще эту же задачу наверняка можно решить инлайн блоками, таблицами, флоатами, абсолютами и наверное, чем-нибудь еще.
Почему про них ничего не спрашиваете?

Что больше нравится, так и решайте.
Без указания задачи вопрос не очень корректный.

Как поменять цвет текста в текстовом поле?

придется обернуть в тег и выводить не в инпут, а в output или div.

Как установить высоту для строк таблицы?

John Johnson, так этот спан или любую другую обертку вам нужно добавлять самому, js'ом

Как установить высоту для строк таблицы?

irishmann, ну не из одной же строки у него будет таблица

Как установить высоту для строк таблицы?

John Johnson, тогда я написала ответ в первом комментарии, задавайте размеры спану.

Альтернатива: обрезать текст js'ом или сразу на бэке.

Как установить высоту для строк таблицы?

John Johnson,

как таблица с фиксированной высотой ячеек. Неужели это не явно понятно ?

Излишки текста-то куда деваться должны?
Скрываться или ширина таблицы должна увеличиваться (т.е. горизонтальная прокрутка у body или оборачивающего блока) или еще как-нибудь...

Фейл какой то просто

Со временем научитесь задавать вопросы чётче, фейлов будет меньше.

Как установить высоту для строк таблицы?

John Johnson, результат-то как должен выглядеть, ау?

Как установить высоту для строк таблицы?

Задайте размеры span'у и нужный overflow.
Но это не точно.
Потому что формулировка "чтобы не было простыни текста" не однозначна и самый напрашивающийся не имеющий отношения к высоте ответ: удалите эту простыню.

Как сделать такую сетку с помощью flexbox?

Последнему элементу задать ширину равную двум обычным + отступ.

Вёрстка, как использовать цветовые схемы?

1 или 2 зависит от того насколько много изменений в стилях.
Если это условных 1,5 строчки, то 1, если куча каких-то нюансов и перекрашиваний и перелопачивается чуть ли не вся тема, то 2.

Как выровнять блоки по высоте?

McThinker, можно наложить градиент, чтобы текст под ним исчезал. При наведении на карточку показывался полностью.