Lord_Dantes

Смешались в кучу кони, люди, GSAP, React, Three.js... Стоит немного систематизировать инструменты хотя бы по задачам, которые они решают. Не привязываясь к конкретным фреймворкам из большой троицы, у нас есть несколько классов инструментов в теме креативных сайтов:

• Про готовые CSS-анимации - animate.css, Wow.js, и.т.д. Там много динозавров из времен jQuery. Такие штуки часто бывают не в тему дизайна, но стоит посмотреть и забыть. Хотя для сайтов в духе дизайнерской дичи, вроде той, что успешно делают в студии Артемия Лебедева - может быть и ок.
  
• Про интерполяцию всего и вся. Тут обычно выбирают между GSAP и Anime.js. Первый вариант - более замороченный, есть полезные плагины, второй - попроще, но тоже хорош, в некоторых кругах даже более популярен. Для совсем простых задач - можно свой инструмент написать.
  
• Про скролл, в основном в контексте CSS-анимаций. Тут Locomotive Scroll рулит.
  
• Про переходы между экранами. Грубо говоря прокаченный роутер. Самый популярный - Barba.js. Раньше еще был Highway.js, но в последне время что-то про него мало говорят.
  
• Про экспорт готовых анимаций из софта для анимаций. Тут нужно отталкиваться от софта. Обычно вопрос возникает в контексте AE и простых мультиков - тут Lottie, говорят, неплох. Но нужно дизайнера заранее консультировать по теме, чтобы лишнего не намалевал.
  
• Про визуализацию данных. Тут полезно знать про d3.js, в основном ради готовых примеров.
  
• Про трехмерный WebGL, чтобы не писать все руками. Самый популярный вариант - Three.js, в основном за счет экосистемы и горы готовых решений, но есть и альтернативы на любой кус и цвет. Для 2D -эффектов вообще ничего не нужно в большинстве случаев.
  
• Плюс не стоит забывать про всякие вспомогательные штуки вроде WebFontLoader, Hammer.js, LeaderLine, и.т.д. К анимациям они не относятся, но в работе могут быть полезны, чтобы не писать все самому.
  

Но самое интересное то, что эти инструменты не делают работу сами по себе. Они - лишь вспомогательные штуки, чтобы не писать самому некоторые шаблонные куски проектов. Очень часто можно заменить одно на другое в рамках конкретного класса задач и сложность конечной работы, которую нужно сделать, не изменится никак, потому что реальная сложность заключается в необычной верстке, где нужно сначала понять, что там вообще нужно сделать, а как именно - уже не важно, в хитрых математических расчетах, в адаптивности, где нужно впихнуть невпихуемое, в вопросах доступности в контексте конкретного дизайна, в производительности и способности предотвратить проблемы с ней еще на этапе дизайна, в исправлении проблем кроссбраузерности, которые появляются совершенно внезапно, и.т.д. Эти вещи не особо автоматизируются.

А вообще угадать весь стек на много проектов вперед с первого раза, не имея ни малейшего представления о том, что там будет нужно, а что нет, скорее всего все равно не получится, так что может быть стоит попробовать разное в разных проектах (тем более речь идет про некоммерческие проекты, можно себе позволить), и посмотреть на то, какие вообще варианты бывают в разных классах задач, и что они помогают делать, а что - нет.

Попробую расписать, потому что идти путем наименьшего сопротивления не совсем правильно.
Создаем новый тип записи documents, текстовый домен x_theme меняем на свой. почитать:
https://wp-kama.ru/function/register_post_type

// Register Custom Post Type
function custom_post_type() {

	$labels = array(
		'name'                  => _x( 'Documents', 'Post Type General Name', 'x_theme' ),
		'singular_name'         => _x( 'Document', 'Post Type Singular Name', 'x_theme' ),
		'menu_name'             => __( 'Documents', 'x_theme' ),
		'name_admin_bar'        => __( 'Documents', 'x_theme' ),
		'archives'              => __( 'Documents Archives', 'x_theme' ),
		'attributes'            => __( 'Item Attributes', 'x_theme' ),
		'parent_item_colon'     => __( 'Parent Item:', 'x_theme' ),
		'all_items'             => __( 'All Items', 'x_theme' ),
		'add_new_item'          => __( 'Add New Item', 'x_theme' ),
		'add_new'               => __( 'Add New', 'x_theme' ),
		'new_item'              => __( 'New Item', 'x_theme' ),
		'edit_item'             => __( 'Edit Item', 'x_theme' ),
		'update_item'           => __( 'Update Item', 'x_theme' ),
		'view_item'             => __( 'View Item', 'x_theme' ),
		'view_items'            => __( 'View Items', 'x_theme' ),
		'search_items'          => __( 'Search Item', 'x_theme' ),
		'not_found'             => __( 'Not found', 'x_theme' ),
		'not_found_in_trash'    => __( 'Not found in Trash', 'x_theme' ),
		'featured_image'        => __( 'Featured Image', 'x_theme' ),
		'set_featured_image'    => __( 'Set featured image', 'x_theme' ),
		'remove_featured_image' => __( 'Remove featured image', 'x_theme' ),
		'use_featured_image'    => __( 'Use as featured image', 'x_theme' ),
		'insert_into_item'      => __( 'Insert into item', 'x_theme' ),
		'uploaded_to_this_item' => __( 'Uploaded to this item', 'x_theme' ),
		'items_list'            => __( 'Items list', 'x_theme' ),
		'items_list_navigation' => __( 'Items list navigation', 'x_theme' ),
		'filter_items_list'     => __( 'Filter items list', 'x_theme' ),
	);
	$args = array(
		'label'                 => __( 'Documents', 'x_theme' ),
		'description'           => __( 'Post Type Description', 'x_theme' ),
		'labels'                => $labels,
		'supports'              => array( 'title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields', 'page-attributes', 'post-formats' ),
		'taxonomies'            => array( 'documents_cat', 'documents_tag' ),
		'hierarchical'          => false,
		'public'                => true,
		'show_ui'               => true,
		'show_in_menu'          => true,
		'menu_position'         => 25,
		'menu_icon'             => 'dashicons-text-page',
		'show_in_admin_bar'     => true,
		'show_in_nav_menus'     => true,
		'can_export'            => true,
		'has_archive'           => true,
		'exclude_from_search'   => false,
		'publicly_queryable'    => true,
		'capability_type'       => 'post',
		'show_in_rest'          => false,
	);
	register_post_type( 'documents', $args );

}
add_action( 'init', 'custom_post_type', 0 );

после создания пересохраняем постоянные ссылки, просто нажимаем сохранить в постоянных ссылках.

Теперь нам доступны некие стандартные шаблоны, для архивной страницы можно создать archive-documents.php, для одиночной страницы single-documents.php вторая в вашем случае обязательна. На обоих используется стандартный цикл, без всяких wp_query, так как он уже работает под ваш пост тайп. Это значит, что скопировав стандартное содержимое archive.php и оформив в виде карточек вы получите на выходе как раз ваш тип записи.
Если же хотите использовать на другой странице, то порядок примерно такой. Создаете шаблон страницы, например page-documents.php. В нем комментарием определяем что это шаблон для наших документов

/*
Template Name: Documents page
Template Post Type: documents
*/

В админке создаем страницу, в атрибутах выбираем именно этот шаблон.
в шаблоне запускаем кастомный цикл для вывода карточек

<?php
	$_posts = new WP_Query( array(
		'post_type'         => 'documents',
		'posts_per_page'    => -1,
	));
?>

<?php if( $_posts->have_posts() ) : ?>
	<div class="dicuments">
	<?php while ( $_posts->have_posts() ) : $_posts->the_post(); ?>
	// тут получаем произвольные поля
	// тут вывод карточки включая стандартные теги и произвольные поля
		<div class="document">
			<h3><?php the_title() ?></h3>
			<?php if ( has_post_thumbnail() ) : ?>
				<div class="img-wrapper">
					<?php the_post_thumbnail() ?>
				</div>
			<?php endif; ?>
			<?php the_excerpt() ?>
			<a href="<?php the_permalink() ?>">readmore</a>
		</div>
	<?php endwhile; ?>
	</div>
<?php endif; wp_reset_postdata(); ?>

почитать про кастомные циклы
https://wp-kama.ru/function/wp_query
В сингл-документс, копируем код из стандартного сингл и добиваем его до нужного состояния.
Внутри цикла пользуемся ACF как привыкли, за пределами цикла нужно чуть погуглить, особенно на странице архива. Для просто страницы как обычно

computed: {
  model() {
    return new Proxy(Object.fromEntries(this.obj2.map(n => [ n.model, null ])), {
      get: (target, prop) => typeof prop === 'string'
        ? prop.split('.').reduce((p, c) => p?.[c], this.obj)
        : target[prop],
      set: (target, prop, value) => {
        const keys = prop.split('.');
        const key = keys.pop();
        const obj = keys.reduce((p, c) => (!p.hasOwnProperty(c) && this.$set(p, c, {}), p[c]), this.obj);
        this.$set(obj, key, value);
        return true;
      },
    });
  },
},

<div v-for="(v, k) in model">
  <input v-model="model[k]">
</div>

https://jsfiddle.net/34brtvok/

Или, если несуществующие пути не должны обрабатываться, можно сделать попроще:

computed: {
  model() {
    return this.obj2.map(n => {
      const keys = n.model.split('.');
      const key = keys.pop();
      const obj = keys.reduce((p, c) => p?.[c], this.obj);

      return obj && { obj, key };
    }).filter(Boolean);
  },
},

<div v-for="n in model">
  <input v-model="n.obj[n.key]">
</div>

https://jsfiddle.net/34brtvok/1/

Потому что экземпляр компонента заново не создаётся при смене значений параметров. За ними надо следить:

watch: {
  '$route.params.slug': {
    immediate: true,
    handler() {
      // сюда переносите код из created
    },
  },
},

sarcasm_on
Да, в статье 99 Трудового кодекса так и написано

2)... бэк енд должен самостоятельно сделать админку при разработке бэк енд

8)... бэк енд разработчик должен сам понять и не утруждая заказчика сделать админку

sarcasm_off

Автор, проснись! Что за глупые вопросы? Какой «должен»? Как договоришься, так и будет. Конечно, заказчик хочет навалить на исполнителя побольше за те же деньги.

Поставь себе задачу сверстать что-то нетривиальное и пользуйся https://www.w3schools.com/

Если посмотреть исходный код страницы, то видно, что в диве с id="popup" находится форма <form action="/#wpcf7-f431-o3">.
А после загрузки страницы в том же диве уже другая форма <form action="/#wpcf7-f431-o4">, которая, скорее всего, была скопирована с помощью JS из дива с id="popupDefault".
Таким образом JS код плагина CF7 уже не обрабатывает динамически добавленную форму и страница перезагружается.

Рекурсия есть:

const getPrimitives = data =>
  data instanceof Object
    ? Object.values(data).flatMap(getPrimitives)
    : [ data ];

Рекурсии нет:

function getPrimitives(data) {
  const result = [];
  const stack = [];

  for (let i = 0, arr = [ data ]; i < arr.length || stack.length; i++) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else if (arr[i] instanceof Object) {
      stack.push([ i, arr ]);
      [ i, arr ] = [ -1, Object.values(arr[i]) ];
    } else {
      result.push(arr[i]);
    }
  }

  return result;
}

// или

function getPrimitives(data) {
  const result = [];

  for (const stack = [ data ]; stack.length; ) {
    const n = stack.pop();
    if (n instanceof Object) {
      stack.push(...Object.values(n).reverse());
    } else {
      result.push(n);
    }
  }

  return result;
}

Вот так вроде