Code Monkey home page Code Monkey logo

acf-typography's Introduction

Advanced Custom Fields: Typography Field

A Typography Add-on for the Advanced Custom Fields Plugin.

  • Requires at least: WP 3.5.0
  • Tested up to: WP 6.4.3
  • Stable: 3.2.3
  • Latest: 3.2.3

Description

Typography field type for "Advanced Custom Fields" plugin that lets you add different text properties e.g. Font Size, Font Family, Font Color etc.

Supported Subfields

  • Font Size
  • Font Family
  • Font Weight
  • Font Style
  • Font Variant
  • Font Stretch
  • Line Height
  • Letter Spacing
  • Text Align
  • Text Color
  • Text Decoration
  • Text Transform

Other Features

  • Supports Google Fonts. The selected Google Fonts are automatically enqueued on front-end of posts/pages. Google Fonts also work with ACF Options.
  • Supports Gutenberg Blocks created with ACF.
  • Option to show/hide each subfield individually
  • Option to make each subfield required individually
  • Color Picker for Text Color subfield

Screenshots

Typography Field Screenshot Typography Field Screenshot Typography Field Screenshot

Documentation

// Returns the value of a specific property
get_typography_field( $selector, $property, [$post_id], [$format_value] );

// Displays the value of a specific property
the_typography_field( $selector, $property, [$post_id], [$format_value] );

// Returns the value of a specific property from a sub field.
get_typography_sub_field( $selector, $property, [$format_value] );

// Displays the value of a specific property from a sub field.
the_typography_sub_field( $selector, $property, [$format_value] );

Shortcode

[acf_typography field="field-name" property="font_size" post_id="123" format_value="1"]

Compatibility

This ACF field type is compatible with:

  • Free and paid versions of the ACF plugin

Installation

  • Download the plugin from WordPress Repository or use the latest release from this repository.
  • Google API Key is required for Google Fonts. Please add one by going to WordPress Admin Dashboard > Settings > ACF Typography Settings

Changelog

See changelog on CHANGELOG.md file.

acf-typography's People

Contributors

muhammadfaizanhaidar avatar mujahidi avatar nikolap994 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

acf-typography's Issues

get font values from global options page

Hi @mujahidi,
your plugin looks very good. How can I get the font from options page?

To get a field from options page I can use the following as default (pls see https://www.advancedcustomfields.com/add-ons/options-page/):
<p><?php the_field('field_name', 'option'); ?></p>

This should return the value of a specific property:
<?php get_typography_field( $selector, $property, [$post_id], [$format_value] ); ?>

I'm not sure how to is it in my case. For example, I have a custom field called 'typofont', how can I get the font-family or size of 'typofont' from options page?

Do I need post_id in this case? $property should be 'font_family' or 'font_size'? Can you please explain how to get the values from 'typofont'?
<?php get_typography_field( $typofont, $property, [$post_id], [$format_value] ); ?>

Thank you and best regards
Robin

Introduce a plugin function for properties

A function to get and display individual typography properties.

the_field() displays all the available properties in a single line and user has to use get_field() to get the array of the properties.

Function examples:
acf_typography( $property, $post_id )
get_acf_typography( $property, $post_id )

Could become part of next major release 3.0?

after installation error

Warning: include_once(fields/acf-Typography-v5.php): failed to open stream: No such file or directory in /nfs//html/wp-content/plugins/acf-typography-master/acf-typography.php on line 77

Warning: include_once(): Failed opening 'fields/acf-Typography-v5.php' for inclusion (include_path='.:/acf-typography-master/acf-typography.php on line 77

No Google Fonts

Hi,

I installed the plugin from wordpress.org (v3.0.0) and added a Google Fonts API-key to the settings. But I am not able to see Google-fonts in the 'Font Family' option. Do I need to do anything else to make the plugin work with Google Fonts?

I only see this:
Schermafbeelding 2020-07-14 om 11 22 46

Bug with array_merge_recursive

We found that on posts that did not have ACF fields specified, fonts were appearing incorrectly. After review, we found that array_merge_recursive was returning a blank array. So this plugin will not work on any post that does not have ACF fields.

To address, we commented out array_merge_recursive and added the following:
if(is_array($all_post_fields) and is_array($all_option_fields)) { $all_fields = array_merge_recursive( $all_post_fields, $all_option_fields ); } elseif(is_array($all_post_fields) ) { $all_fields = $all_post_fields ; } elseif(is_array($all_option_fields)) { $all_fields = $all_option_fields ; }

Can this be addressed in a future version?

Empty display fields while creating typography field results in Fatal error: Uncaught TypeError

Error occurs in plugin/fields/acf-Typography-v5.php/line:383.
There should be a check to see if $field['display_properties'] is not empty.
Like this if( ! empty( $field['display_properties'] ) && sizeof($field['display_properties']) > 0){}
If a user selects no field to display in the typography metabox then it should not break.
I wanted to contribute but I was not able to play with branches.

Feature Request: Make font name field optional

Is it possible to have the Font Name field be optional? We are creating CSS styles so we don't want the font to be set. Would it be possible to add Null or Initial or No Font etc as the first value, and in code we can check for the value and adjust the code accordingly?

Get_typography_field on options page doesn't work

Hello
I created a field who name is 'font1'. I show this field on Options page
I set a font-family on this field.
On index.php in my folder theme I had
$title = get_typography_field('font1', 'font-family', 'option); var_dump($title);
The var_dump return String(0)""

How to do this ?
Thanks

Fonts defined in Gutenberg blocks not enqueued

When we have a page with just gutenberg blocks, then the font(s) defined in the blocks are NOT enqueued. This is because the code looks just for fields in the post and global options. It does not look for fields in the blocks.

Font family

How to add more font family? I see only a few fonts family there.

PHP Warning - Google API Key 400 Bad Request

I've been testing my last pull request today by throwing a bunch of junk data at the plugin to see how it handles it. Found an issue affecting every "file_get_contents" function call. Here's an example when a bad API Key string is supplied:

file_get_contents (wp-content/plugins/acf-typography-field/includes/functions.php => 45)
file_get_contents(https://www.googleapis.com/webfonts/v1/webfonts?key=BAD_API_KEY_STRING): failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request

I'm already patching this. PR will also include this patch.

In admin_settings.php:
It will now check the key against the Google API Key URL. If it encounters any errors, a message will be displayed showing the response header error message.

In functions.php:
Every "file_get_contents" function will suppress displaying error messages publicly and only process the output if there was no error message.

Idea / Enhancement - Possibly add a debug log and an "enable/disable debugging" admin setting to capture file and URL read/write errors?

Admin Settings - Default Values for New ACFT Fields

Tag with Idea / Enhancement

What about adding selectable default values for all typography fields to the ACF Typography Settings in Admin > Settings?

Whatever is set there is automatically applied to all acft fields by default whenever a new one is added to any ACF field_group. Of course they can be overridden when setting up an ACF field_group, but the INITIAL values before customizing are taken from the defined defaults in Admin > Settings > ACF Typography Settings any time a new one is added.

Perhaps even include a a new field within ACF to "reset to defaults" which will clear any customized settings and revert it to the Admin > Settings defined defaults.

Just a thought

Preview Text feature

Preview Text feature on the edit post/page where the user selects properties.

Issue with ACF blocks without ACF fields

If I make a custom ACF Block, but don't have any ACF fields with data then the plugin generates a warning.
The warning references line 93 in the file includes/functions.php

This is caused by the fact that the data array key doesn't exist in block['attrs']['data']. Adding a check in front of it would solve this issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.