Changes to LCP Gallery Meta

This commit is contained in:
Jeremy Rangel
2025-01-09 17:50:32 -08:00
parent ceb37fc5af
commit ae31fec647
14 changed files with 651 additions and 35 deletions

View File

@ -692,3 +692,476 @@ function lcp_register_custom_image_sizes() {
// Hook into WordPress to register custom sizes
add_action('after_setup_theme', 'lcp_register_custom_image_sizes');
/* CUSTOM POST TYPES */
// Register the post meta field for the gallery
function to_register_meta_fields() {
register_post_meta('post', 'lcp_post_gallery', [
'type' => 'array',
'description' => 'Custom post gallery',
'single' => true,
'show_in_rest' => true,
]);
}
add_action('init', 'to_register_meta_fields');
// Add meta box for the gallery
function add_lcp_gallery_meta_box() {
add_meta_box(
'lcp_gallery_meta_box',
__('Post Gallery', 'textdomain'),
'render_lcp_gallery_meta_box',
'post',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_lcp_gallery_meta_box');
// Render the meta box
function render_lcp_gallery_meta_box($post) {
// Add nonce for security
wp_nonce_field('lcp_gallery_meta_box', 'lcp_gallery_meta_box_nonce');
// Get existing gallery items
$gallery_items = get_post_meta($post->ID, 'lcp_gallery', true);
if (!is_array($gallery_items)) {
$gallery_items = array();
}
?>
<style>
#lcp-gallery-list li {
cursor: move;
padding: 10px;
margin-bottom: 10px;
background: #fff;
border: 1px solid #ddd;
position: relative;
}
#lcp-gallery-list li.dragging {
opacity: 0.5;
border: 2px dashed #999;
}
.drag-handle {
cursor: move;
padding: 5px;
margin-right: 10px;
color: #999;
}
#lcp-media-source-selector {
margin-bottom: 15px;
}
.gallery-item-fields {
margin-top: 10px;
}
.gallery-item-fields input[type="text"],
.gallery-item-fields textarea {
width: 100%;
margin-bottom: 5px;
}
.gallery-item-fields label {
display: block;
margin-top: 5px;
font-weight: bold;
}
.color-picker-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
}
.color-picker-wrapper input[type="color"] {
padding: 0;
width: 50px;
height: 30px;
}
</style>
<div id="lcp-gallery-container">
<div id="lcp-media-source-selector">
<select id="lcp-media-source">
<option value="media_library">Media Library</option>
<option value="youtube">YouTube</option>
<option value="vimeo">Vimeo</option>
</select>
<button type="button" class="button" id="add-to-gallery">Add Media</button>
</div>
<ul id="lcp-gallery-list">
<?php
foreach ($gallery_items as $item) {
$media_source = isset($item['media_source']) ? $item['media_source'] : '';
$media_id = isset($item['media_id']) ? $item['media_id'] : '';
$url = isset($item['url']) ? $item['url'] : '';
$title = isset($item['title']) ? $item['title'] : '';
$caption = isset($item['caption']) ? $item['caption'] : '';
$background_color = isset($item['background_color']) ? $item['background_color'] : '';
echo '<li draggable="true" style="background-color: ' . esc_attr($background_color) . ';">';
echo '<span class="drag-handle dashicons dashicons-menu"></span>';
echo '<input type="hidden" name="lcp_gallery[]" value="' . esc_attr(json_encode($item)) . '">';
if ($media_source === 'media_library' && $media_id) {
$image = wp_get_attachment_image_src($media_id, 'thumbnail');
if ($image) {
echo '<img src="' . esc_url($image[0]) . '" alt="" style="max-width: 150px; height: auto;">';
}
} elseif ($media_source === 'youtube' && $url) {
echo '<div class="youtube-thumbnail" style="width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">';
echo '<span class="dashicons dashicons-youtube"></span>';
echo '</div>';
}
// Add fields for title, caption, and background color
echo '<div class="gallery-item-fields">';
echo '<label>Title</label>';
echo '<input type="text" class="gallery-item-title" value="' . esc_attr($title) . '" placeholder="Enter title">';
echo '<label>Caption</label>';
echo '<textarea class="gallery-item-caption" rows="3" placeholder="Enter caption">' . esc_textarea($caption) . '</textarea>';
echo '<label>Background Color</label>';
echo '<div class="color-picker-wrapper">';
echo '<input type="color" class="gallery-item-bgcolor" value="' . esc_attr($background_color) . '">';
echo '<button type="button" class="button update-bgcolor">Update Background</button>';
echo '</div>';
echo '</div>';
echo '<button type="button" class="button remove-gallery-item">Remove</button>';
echo '</li>';
}
?>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize gallery items array from PHP
let galleryItems = <?php echo json_encode($gallery_items); ?>;
console.log('Initial gallery items:', galleryItems);
// Function to update hidden input values and maintain state
function updateHiddenInputs() {
const list = document.querySelector('#lcp-gallery-list');
list.innerHTML = ''; // Clear the list
console.log('Updating gallery items:', galleryItems);
// Rebuild the list with current items
galleryItems.forEach((item, index) => {
const li = document.createElement('li');
li.draggable = true;
if (item.background_color) {
li.style.backgroundColor = item.background_color;
}
// Add drag handle
const dragHandle = document.createElement('span');
dragHandle.className = 'drag-handle dashicons dashicons-menu';
li.appendChild(dragHandle);
// Add hidden input with item data
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'lcp_gallery[]';
input.value = JSON.stringify(item);
li.appendChild(input);
// Add thumbnail
if (item.media_source === 'media_library' && item.media_id) {
wp.media.attachment(item.media_id).fetch().then(function() {
const img = document.createElement('img');
img.src = wp.media.attachment(item.media_id).get('url');
img.style = 'max-width: 150px; height: auto;';
li.appendChild(img);
});
} else if (item.media_source === 'youtube' && item.url) {
const div = document.createElement('div');
div.className = 'youtube-thumbnail';
div.style = 'width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;';
div.innerHTML = '<span class="dashicons dashicons-youtube"></span>';
li.appendChild(div);
}
// Add fields container
const fields = document.createElement('div');
fields.className = 'gallery-item-fields';
// Title field
const titleLabel = document.createElement('label');
titleLabel.textContent = 'Title';
fields.appendChild(titleLabel);
const titleInput = document.createElement('input');
titleInput.type = 'text';
titleInput.className = 'gallery-item-title';
titleInput.value = item.title || '';
titleInput.placeholder = 'Enter title';
titleInput.addEventListener('input', () => {
item.title = titleInput.value;
updateItemData(index, item);
});
fields.appendChild(titleInput);
// Caption field
const captionLabel = document.createElement('label');
captionLabel.textContent = 'Caption';
fields.appendChild(captionLabel);
const captionInput = document.createElement('textarea');
captionInput.className = 'gallery-item-caption';
captionInput.rows = 3;
captionInput.value = item.caption || '';
captionInput.placeholder = 'Enter caption';
captionInput.addEventListener('input', () => {
item.caption = captionInput.value;
updateItemData(index, item);
});
fields.appendChild(captionInput);
// Background color field
const colorLabel = document.createElement('label');
colorLabel.textContent = 'Background Color';
fields.appendChild(colorLabel);
const colorWrapper = document.createElement('div');
colorWrapper.className = 'color-picker-wrapper';
const colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.className = 'gallery-item-bgcolor';
colorInput.value = item.background_color || '#ffffff';
const updateColorBtn = document.createElement('button');
updateColorBtn.type = 'button';
updateColorBtn.className = 'button update-bgcolor';
updateColorBtn.textContent = 'Update Background';
updateColorBtn.addEventListener('click', () => {
const newColor = colorInput.value;
item.background_color = newColor;
li.style.backgroundColor = newColor;
updateItemData(index, item);
console.log('Color updated for item', index, ':', item);
});
colorInput.addEventListener('input', () => {
// Preview the color as user picks
li.style.backgroundColor = colorInput.value;
});
colorWrapper.appendChild(colorInput);
colorWrapper.appendChild(updateColorBtn);
fields.appendChild(colorWrapper);
li.appendChild(fields);
// Add remove button
const removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'button remove-gallery-item';
removeBtn.textContent = 'Remove';
removeBtn.onclick = function() {
galleryItems.splice(index, 1);
console.log('Removed item at index', index, '. New gallery items:', galleryItems);
updateHiddenInputs();
};
li.appendChild(removeBtn);
// Add drag and drop event listeners
li.addEventListener('dragstart', handleDragStart);
li.addEventListener('dragend', handleDragEnd);
li.addEventListener('dragover', handleDragOver);
li.addEventListener('drop', handleDrop);
list.appendChild(li);
});
}
// Function to update a specific item's data
function updateItemData(index, item) {
galleryItems[index] = item;
const input = document.querySelector(`#lcp-gallery-list li:nth-child(${index + 1}) input[name^="lcp_gallery"]`);
if (input) {
input.value = JSON.stringify(item);
console.log('Updated item at index', index, ':', item);
console.log('Current gallery items:', galleryItems);
}
}
// Initialize the list with existing items
if (galleryItems.length > 0) {
console.log('Initializing gallery with existing items:', galleryItems);
updateHiddenInputs();
}
// Handle drag and drop
let draggedItem = null;
let draggedIndex = null;
function handleDragStart(e) {
draggedItem = this;
draggedIndex = Array.from(draggedItem.parentNode.children).indexOf(draggedItem);
this.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
console.log('Started dragging item at index:', draggedIndex);
}
function handleDragEnd(e) {
this.classList.remove('dragging');
draggedItem = null;
draggedIndex = null;
}
function handleDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
}
function handleDrop(e) {
e.preventDefault();
if (draggedItem === this) return;
const droppedIndex = Array.from(this.parentNode.children).indexOf(this);
console.log('Dropping item from index', draggedIndex, 'to index', droppedIndex);
// Reorder galleryItems array
const [movedItem] = galleryItems.splice(draggedIndex, 1);
galleryItems.splice(droppedIndex, 0, movedItem);
console.log('Reordered gallery items:', galleryItems);
updateHiddenInputs();
}
// Initialize the media frame
let mediaFrame;
document.getElementById('add-to-gallery').addEventListener('click', function(e) {
e.preventDefault();
const source = document.getElementById('lcp-media-source').value;
if (source === 'media_library') {
if (mediaFrame) {
mediaFrame.open();
return;
}
mediaFrame = wp.media({
title: 'Select Media',
button: {
text: 'Add to Gallery'
},
multiple: false
});
mediaFrame.on('select', function() {
const attachment = mediaFrame.state().get('selection').first().toJSON();
const item = {
media_source: 'media_library',
media_id: attachment.id,
title: '',
caption: '',
background_color: ''
};
galleryItems.push(item);
console.log('Added new media library item:', item);
console.log('Current gallery items:', galleryItems);
updateHiddenInputs();
});
mediaFrame.open();
} else {
const url = prompt('Enter ' + source + ' URL:');
if (url) {
const item = {
media_source: source,
url: url,
title: '',
caption: '',
background_color: ''
};
galleryItems.push(item);
console.log('Added new URL item:', item);
console.log('Current gallery items:', galleryItems);
updateHiddenInputs();
}
}
});
});
</script>
<?php
}
// Save the gallery meta data
function save_lcp_gallery_meta_box($post_id) {
// Check if our nonce is set
if (!isset($_POST['lcp_gallery_meta_box_nonce'])) {
return;
}
// Verify that the nonce is valid
if (!wp_verify_nonce($_POST['lcp_gallery_meta_box_nonce'], 'lcp_gallery_meta_box')) {
return;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
// Check the user's permissions
if (isset($_POST['post_type']) && 'page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id)) {
return;
}
} else {
if (!current_user_can('edit_post', $post_id)) {
return;
}
}
// Save the gallery data
if (isset($_POST['lcp_gallery'])) {
$gallery_items = array_map(function($item) {
return is_string($item) ? json_decode(wp_unslash($item), true) : $item;
}, $_POST['lcp_gallery']);
update_post_meta($post_id, 'lcp_gallery', $gallery_items);
} else {
delete_post_meta($post_id, 'lcp_gallery');
}
}
add_action('save_post', 'save_lcp_gallery_meta_box');
// Enqueue color picker
function lcp_gallery_admin_enqueue($hook) {
if ('post.php' != $hook && 'post-new.php' != $hook) {
return;
}
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('wp-color-picker');
}
add_action('admin_enqueue_scripts', 'lcp_gallery_admin_enqueue');
// Add AJAX handler for gallery updates
add_action('wp_ajax_update_gallery_meta', 'handle_gallery_meta_update');
add_action('wp_ajax_nopriv_update_gallery_meta', 'handle_gallery_meta_update');
function handle_gallery_meta_update() {
// Verify nonce for security
if (!current_user_can('edit_posts')) {
wp_send_json_error('Permission denied');
return;
}
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
$gallery_items = isset($_POST['gallery_items']) ? json_decode(stripslashes($_POST['gallery_items']), true) : array();
// Update the post meta
$updated = update_post_meta($post_id, 'lcp_gallery', $gallery_items);
if ($updated) {
wp_send_json_success(array('message' => 'Gallery updated successfully'));
} else {
wp_send_json_error(array('message' => 'Failed to update gallery'));
}
}

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '40a5279a7e8774abfe4c');
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '04e9c02e00cfeee61658');

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;right:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}

View File

@ -1 +1 @@
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}

View File

@ -65,10 +65,10 @@ if (!function_exists('lcp_random_string')) {
}
function render_lcp_container( $attributes, $content ) {
function render_lcp_dynamic_container( $attributes, $content ) {
// Debugging: Check the passed attributes
//var_dump($attributes);
// Generate a random class name (optional, could be customized)
$random_class = lcp_random_string(12,true);
@ -159,13 +159,39 @@ if (!function_exists('lcp_random_string')) {
if ( ! empty( $style ) ) {
$style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
}
// Set the post thumbnail
if ( has_post_thumbnail() ) {
// Get the post thumbnail URL for different sizes
$full_size_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
$medium_size_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
$large_size_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
// Generate the <picture> element with <source> and <img> tags for responsiveness
$post_thumb = '<picture class="lcp-background-image">';
// Add source for large image (for screens >= 1200px)
$post_thumb .= '<source media="(min-width: 1200px)" srcset="' . esc_url( $large_size_url ) . '">';
// Add source for medium image (for screens >= 768px)
$post_thumb .= '<source media="(min-width: 768px)" srcset="' . esc_url( $medium_size_url ) . '">';
// Add fallback image (for smaller screens or if no match for media queries)
$post_thumb .= '<img src="' . esc_url( $full_size_url ) . '" alt="Responsive Background Image" class="responsive-background">';
$post_thumb .= '</picture>';
}
$has_background_image = (2 + 2 == 4) ? 'lcp-has-background-image' : '';
// Output the content wrapped in the div with the random class and padding styles
return $style_tag . sprintf(
'<div class="lcp-container %s">%s</div>',
esc_attr( $random_class ),
$content
'<div class="lcp-dynamic-container %s %s">%s%s</div>',
esc_attr( $random_class ), // The random class
esc_attr( $has_background_image), // Conditionally add 'lcp-has-background-image' class
$post_thumb, // Add the $post_thumb (responsive image) here,
$content // Keep the original content
);
}

View File

@ -1,12 +1,4 @@
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function Save() {
// Block props
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
}
import { InnerBlocks } from '@wordpress/block-editor';
export default function save() {
return (<InnerBlocks.Content/>); // No content is saved in the database for dynamic blocks
}

View File

@ -10,3 +10,20 @@
color: #fff;
padding: 2px;
}
.lcp-dynamic-container.lcp-has-background-image {
position:relative;
width:100%;
}
.lcp-dynamic-container.lcp-has-background-image > .lcp-background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Cover the container like a background */
object-position: center center; /* Center the image */
}

View File

@ -9,9 +9,16 @@
"description": "A dynamic or static gallery based on the Lightgallery javascript plugin",
"example": {},
"supports": {
"html": false
"html": false,
"color": {
"background": true,
"text": false
}
},
"attributes": {
"backgroundColor": {
"type": "string"
},
"parseElementForItems": {
"type": "boolean",
"default": false

View File

@ -125,6 +125,30 @@ function validate_media_ids($input) {
// Return an array of Media IDs
function get_media_ids($attributes) {
// If post_gallery meta field
if (!$attributes['sources'] == "postGallery") {
$post_id = get_the_ID();
$lcp_post_gallery = get_post_meta( $post_id, 'lcp_gallery', true );
// Check if the meta field is not empty and unserialize the value
if ( ! empty( $lcp_post_gallery ) ) {
// Unserialize the meta field value to convert it into an array
$gallery_array = $lcp_post_gallery;
// Initialize an empty array to hold the media IDs
$media_ids = array();
// Loop through the gallery array and extract the media_id values
foreach ( $gallery_array as $item ) {
// Check if the 'media_id' key exists
if ( isset( $item['media_id'] ) ) {
$media_ids[] = $item['media_id']; // Add the media_id to the array
}
}
}
return $media_ids;
}
// Manual Source
if ($attributes['source'] == "manual" && isset($attributes['galleryItems'])) {
// Extract 'id' from each item in the 'galleryItems' array

View File

@ -2,7 +2,10 @@ import { __ } from '@wordpress/i18n';
import {
InspectorControls,
MediaUpload,
MediaUploadCheck
MediaUploadCheck,
useBlockProps,
withColors,
PanelColorSettings
} from '@wordpress/block-editor';
import { useState,
useEffect,
@ -65,9 +68,6 @@ const galleryElements = [
]
// Aspect ratio options
const aspectRatioOptions = [
{ value: '1-1', label: __('1:1', metadata.textdomain) },
@ -125,8 +125,8 @@ const MultiMediaUpload = ({ onSelect }) => {
);
};
export default function Edit(props) {
const { attributes, setAttributes } = props;
function Edit(props) {
const { attributes, setAttributes, backgroundColor, setBackgroundColor } = props;
const {
galleryItems = [],
source,
@ -314,11 +314,17 @@ const { isTemplate, postType, postId } = useSelect((select) => {
togglePlugin('lgZoom', value); // Add/Remove lgZoom plugin based on toggle value
};
const blockProps = useBlockProps({
style: {
backgroundColor: backgroundColor?.color,
},
});
return (
<>
{/* The Gallery */}
<LightGallery {...attributes.lgSettings} />
<LcpGallery {...attributes.lgSettings} />
<InspectorControls>
{/* Settings and Style Tabs */}
@ -717,6 +723,16 @@ const { isTemplate, postType, postId } = useSelect((select) => {
if (name === 'style') {
return (
<PanelBody title={__('Style Settings')}>
<PanelColorSettings
title={__('Color settings', 'lcp')}
colorSettings={[
{
value: backgroundColor?.color,
onChange: setBackgroundColor,
label: __('Background color', 'lcp'),
},
]}
/>
{initialLayout === 'inline' && (
<>
<UnitControl
@ -857,3 +873,4 @@ const { isTemplate, postType, postId } = useSelect((select) => {
);
}
export default withColors('backgroundColor')(Edit);

View File

@ -82,4 +82,31 @@ function lcp_after_setup_theme() {
lcp_register_custom_image_sizes();
}
add_action('after_setup_theme', 'lcp_after_setup_theme');
add_action('after_setup_theme', 'lcp_after_setup_theme');
function lcp_init_hooks() {
lcp_register_pattern_categories();
lcp_register_patterns();
}
add_action('init', 'lcp_init_hooks');
// Register pattern categories
function lcp_register_pattern_categories() {
register_block_pattern_category( 'lcp/customss', array(
'label' => __( 'Theme Name: Local Content Pro', 'lcp' ),
'description' => __( 'Custom patterns for Local Content Pro.', 'lcp' )
) );
}
// Register block pattern
function lcp_register_patterns() {
register_block_pattern(
'lcp/post-content', // Unique slug
array(
'title' => __( 'Post Content', 'lcp' ),
'description' => __( 'A pattern for displaying post content', 'lcp' ),
'content' => file_get_contents( get_template_directory() . '/patterns/post-content.php' ),
)
);
}

27
patterns/post-content.php Normal file
View File

@ -0,0 +1,27 @@
<?php
/**
* Title: Post Content
* Slug: twentytwentyfive/banner-about-book
* Categories: banner
* Description: Banner with book description and accompanying image for promotion.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:comment-author-name {"fontSize":"small"} /-->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
<!-- wp:comment-date {"fontSize":"small"} /-->
<!-- wp:comment-edit-link {"fontSize":"small"} /-->
</div>
<!-- /wp:group -->
<!-- wp:comment-content /-->
<!-- wp:comment-reply-link {"fontSize":"small"} /-->

View File

@ -44,18 +44,23 @@
},
{
"color": "#00E080",
"name": "Accent",
"slug": "accent"
"name": "Accent - 1",
"slug": "accent-1"
},
{
"color": "#00FC90",
"name": "Accent 2",
"slug": "accent-2"
"name": "Accent Light - 1",
"slug": "accent-light-1"
},
{
"color": "#232323",
"name": "Font 1",
"slug": "font-color-1"
},
{
"color": "#a0a0a0",
"name": "Font Light 1",
"slug": "font-light-1"
}
]
},
@ -201,6 +206,7 @@
"useRootPaddingAwareAlignments": true
},
"styles": {
"color": {
"background": "var:preset|color|base",
"text": "var:preset|color|contrast"
@ -214,7 +220,7 @@
},
"typography": {
"fontFamily": "var:preset|font-family|manrope",
"fontSize": "var:preset|font-size|large",
"fontSize": "var:preset|font-size|medium",
"fontWeight": "300",
"letterSpacing": "-0.1px",
"lineHeight": "1.4"