Using ACF add a text area field to pages, post, or post type. Then to add the styles to the HTML with the following code.
This could be useful if you are copying block patterns from somewhere like the Gutenberg block hub https://gutenberghub.com/ or if you just want to have page/post specific styles.
In functions:
<?php require get_template_directory() . '/components/additional-styles/additional-styles.php';
In component
<?php
/**
* Add additional styles to a page or post
*/
function gomo_additional_styles () {
if (get_field('additional_styles')) {
?>
<style>
<?php the_field('additional_styles'); ?>
</style>
<?php
}
}
add_action( 'wp_head', 'gomo_additional_styles', 1 );
/**
* Add the below to add the ACF field
*/
if( function_exists('acf_add_local_field_group') ):
acf_add_local_field_group(array(
'key' => 'group_5ea16a305ada8',
'title' => 'Additional: CSS on the fly',
'fields' => array(
array(
'key' => 'field_5ea16a3077c91',
'label' => 'additional styles',
'name' => 'additional_styles',
'type' => 'textarea',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'maxlength' => '',
'rows' => '',
'new_lines' => '',
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'post',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
));
endif;
?>