Update for v5?

Started working on a fix myself, but just started learning ACF so this could take a while…

The main file was easy to upgrade:

<?php
/*
Plugin Name: Advanced Custom Fields: Code Area
Plugin URI: https://github.com/taylormsj/acf-code_area-field
Description: Adds a 'Code Area' textarea editor to the Advanced Custom Fields WordPress plugin.
Version: 1.0.1
Author: Taylor Mitchell-St.Joseph
Author URI: https://taylormitchellstjoseph.co.uk
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

class acf_field_code_area_plugin {

	function __construct() {
		// version 5
		add_action('acf/include_field_types', array($this, 'include_field_types'));

		// version 4
		add_action('acf/register_fields', array($this, 'register_fields'));

	}

	// version 4
    function register_fields() {
		include_once('acf_code_area-v4.php');
	}

	// version 5
	function include_field_types( $version ) {
		include_once('acf_code_area-v5.php');
	}

}

new acf_field_code_area_plugin();

?>

Second I created a new file in the main plugin directory named acf_code_area-v5.php. I then copied over code from v4 file.

After reading over the V5 changes (very end of the page), I saw that acf/create_field needs o be changed to acf/render_field.

Also, here is the template for how a field class is suppose to be created in V5.

This plugin author followed the v4 format exactly how it was suppose to be done, so it shouldn’t be too difficult to figure out how to transfer the code over. I’ll do my best, but if anyone else who has worked with ACF before they will probably be able to figure it out a lot faster.

Does anyone have any news on this?

I managed to get the Code Area Field to work on ACF v5!

I upgraded the main file like codecandid did (LOL). Then I created a file named acf_code_area-v5.php. After that, I copied the code from textarea.php from the main ACF folder and tried to copy-and-paste stuff from acf_code_area-v4.php.

After some errors, I finally did it. Well, there are some issues:

– the default value doesn’t appear right away when you’re using tabs, like https://cloudup.com/c-TXAWUEALB . But if you click on the fields and press enter, the values will appear, like https://cloudup.com/cCOdBHIfmOi .

Beyond that, it’s working perfectly. Without further ado, here’s the code:

<?php

if( ! class_exists('acf_field_code_area') ) :

class acf_field_code_area extends acf_field {

	function __construct() {

		// vars
		$this->name = 'code_area';
		$this->label = __('Code Area');
		$this->defaults = array(
			'new_lines'		=> '',
			'maxlength'	=> '',
			'placeholder'	=> '',
			'readonly'		=> 0,
			'disabled'		=> 0,
			'rows'			=> ''
		);

		$this->settings = array(
			'path' => plugin_dir_path( __FILE__ ),
			'dir' => plugin_dir_url( __FILE__ ),
			'version' => '1.0.0'
		);

		// do not delete!
    	parent::__construct();
	}

	function input_admin_enqueue_scripts()
	{

		// register acf scripts
		wp_register_script( 'acf-input-code_area-code_mirror_js', $this->settings['dir'] . 'js/codemirror.js', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_js', $this->settings['dir'] . 'js/mode/javascript.js', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_css', $this->settings['dir'] . 'js/mode/css.js', array('acf-input'), $this->settings['version'] );
		wp_register_style( 'acf-input-code_area-code_mirror_css', $this->settings['dir'] . 'css/codemirror.css', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_html', $this->settings['dir'] . 'js/mode/htmlmixed.js', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_xml', $this->settings['dir'] . 'js/mode/xml.js', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_php', $this->settings['dir'] . 'js/mode/php.js', array('acf-input'), $this->settings['version'] );
		wp_register_script( 'acf-input-code_area-code_mirror_mode_clike', $this->settings['dir'] . 'js/mode/clike.js', array('acf-input'), $this->settings['version'] );

		// scripts
		wp_enqueue_script(array(
			'acf-input-code_area-code_mirror_js',
			'acf-input-code_area-code_mirror_mode_js',
			'acf-input-code_area-code_mirror_mode_css',
			'acf-input-code_area-code_mirror_mode_html',
			'acf-input-code_area-code_mirror_mode_xml',
			'acf-input-code_area-code_mirror_mode_php',
			'acf-input-code_area-code_mirror_mode_clike',
		));

		// styles
		wp_enqueue_style(array(
			'acf-input-code_area-code_mirror_css',
		));		

	}

	function render_field( $field ) {

		// vars
		$o = array( 'id', 'class', 'name', 'rows' );
		$e = '';

		// maxlength
		if( $field['maxlength'] !== '' ) { $o[] = 'maxlength'; }

		// rows
		if( empty($field['rows']) ) { $field['rows'] = 8; }

		// populate atts
		$atts = array();
		foreach( $o as $k ) {
			$atts[ $k ] = $field[ $k ];
		}

		$e .= '<textarea ' . acf_esc_attr( $atts ) . ' >';
		$e .= $field["value"];
		$e .= '</textarea>';
		$e .= '<link rel="stylesheet" href="'.$this->settings['dir'].'/css/theme/'.$field["code_theme"].'.css" />';
		$e .= '<script>';
		$e .= 'jQuery(document).ready(function($){';
		$e .= 'var editor_'.str_replace('-', '_', $field['id']).' = CodeMirror.fromTextArea(document.getElementById(\''.$field['id'].'\'), {';
		$e .= 'lineNumbers: true,';
		$e .= "tabmode: 'indent',";
		$e .= 'mode: \''.$field["code_language"].'\',';
		$e .= 'theme: \''.$field["code_theme"].'\'';
		$e .= ' });';
		$e .= ' });';
		$e .= '</script>';

		// return
		echo $e;

	}

	function render_field_settings( $field ) {

		// ACF4 migration
		if( empty($field['ID']) ) {

			$field['new_lines'] = 'wpautop';

		}

		// default_value
		acf_render_field_setting( $field, array(
			'label'			=> __('Default Value','acf'),
			'instructions'	=> __('Appears when creating a new post','acf'),
			'type'			=> 'textarea',
			'name'			=> 'default_value',
		));

		// maxlength
		acf_render_field_setting( $field, array(
			'label'			=> __('Character Limit','acf'),
			'instructions'	=> __('Leave blank for no limit','acf'),
			'type'			=> 'number',
			'name'			=> 'maxlength',
		));

		// rows
		acf_render_field_setting( $field, array(
			'label'			=> __('Rows','acf'),
			'instructions'	=> __('Sets the textarea height','acf'),
			'type'			=> 'number',
			'name'			=> 'rows',
			'placeholder'	=> 8
		));

		// language
		acf_render_field_setting( $field, array(
			'label'			=> __('Language','acf'),
			'instructions'	=> __('Controls how new lines are rendered','acf'),
			'type'			=> 'radio',
			'name'			=> 'code_language',
			'choices'	=> array(
				'css'	=>	__("CSS",'acf'),
				'javascript'	=>	__("Javascript",'acf'),
				'htmlmixed'	=>	__("HTML",'acf'),
				'php'	=>	__("PHP",'acf'),
			)
		));

		// theme
		acf_render_field_setting( $field, array(
			'label'			=> __('Themes','acf'),
			'instructions'	=> __("Set a theme for the editor (<a href=\"https://codemirror.net/demo/theme.html\" target=\"_blank\">Preview Here</a>) ",'acf'),
			'type'	=>	'select',
			'name'			=> 'code_theme',
			'choices' => array(
						'default'	=>	__("Default",'acf'),
						'ambiance'	=>	__("Ambiance",'acf'),
						'blackboard'	=>	__("Blackboard",'acf'),
						'cobalt'	=>	__("Cobalt",'acf'),
						'eclipse'	=>	__("Eclipse",'acf'),
						'elegant'	=>	__("Elegant",'acf'),
						'erlang-dark'	=>	__("Erlang Dark",'acf'),
						'lesser-dark'	=>	__("Lesser Dark",'acf'),
						'midnight'	=>	__("Midnight",'acf'),
						'monokai'	=>	__("Monokai",'acf'),
						'neat'	=>	__("Neat",'acf'),
						'night'	=>	__("Night",'acf'),
						'rubyblue'	=>	__("Rubyblue",'acf'),
						'solarized'	=>	__("Solarized",'acf'),
						'twilight'	=>	__("Twilight",'acf'),
						'vibrant-ink'	=>	__("Vibrant Ink",'acf'),
						'xq-dark'	=>	__("XQ Dark",'acf'),
						'xq-light'	=>	__("XQ Light",'acf'),
					)
		));

	}

	function format_value( $value, $post_id, $field ) {

		switch($field["code_language"]){
			case 'css':
				return '<style>'.$value.'</style>';
				break;
			case 'javascript':
				return '<script>'.$value.'</script>';
				break;
			case 'htmlmixed':
				return nl2br($value);
				break;
			case 'php':
				return eval($value);
				break;
			default:
				return $value;
		}

		return $value;

	}

}

new acf_field_code_area();

endif;

?>

I’ve almost got this working but not quite. Code area is showing up in ACF as an option but it’s saying under the ‘type’ title on the field ‘Error Field type does not exist’.

What acf code did you use to reference this code field in your page? i.e. This is the code I’m using for a standard acf field:

<?php the_field(‘blog_field_id’); ?>

So what would I use to reference a code area?

Hope this makes some kind of sense.

@ashbryant your fix works great. However, I’m using this field inside of a flexible content field. For whatever reason, it’s rendering first instead of the order of where I put it. Any thoughts?

@jonnixon I’m running into the same issue. Did you figure out a solution for the code field rendering at the top of the page?

I’ve figured out a work-around for the code to be displayed correctly when using flexible content fields. You’ll need to make a small change to acf_code_area-v5.php:

case 'php':
 return eval($value);

Changes to:

case 'php':
 return '?>'.$value;

And when you call this field in your markup it should looks something like this:
eval(get_sub_field('your_field_name'));

Hi Guys, Thanks for the fixes here, it has helped a lot.
I forgot to click ‘Notify me of follow-up posts via email’ ??