[4.1][Feature][Proposal] Gutenberg field type

[tabacitu]

It might actually be possible: https://github.com/VanOns/laraberg/blob/master/README.md

Maybe baby?

[dannypritchard]

I managed to implement laraberg (the repo mentioned above) pretty quickly today with the following blade file:

<div @include('crud::inc.field_wrapper_attributes') >

    <label>{!! $field['label'] !!}</label>

    @include('crud::inc.field_translatable_icon')

    <pre>{{ $field['value'] ?? '' }}</pre>

    <textarea id="guttenberg-{{ $field['name'] }}" name="{{ $field['name'] }}" hidden>
        {{ $field['value'] ?? '' }}
    </textarea>

    {{-- HINT --}}
    @if (isset($field['hint']))

        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif

</div>

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->checkIfFieldIsFirstOfItsType($field))

    {{-- FIELD CSS - will be loaded in the after_styles section --}}
    @push('crud_fields_styles')
        <link rel="stylesheet" href="{{asset('vendor/laraberg/css/laraberg.css')}}">
    @endpush

    {{-- FIELD JS - will be loaded in the after_scripts section --}}
    @push('crud_fields_scripts')

        <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/[email protected]/min/moment.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

        <script src="{{ asset('vendor/laraberg/js/laraberg.js') }}"></script>

    @endpush

@endif

@push('crud_fields_scripts')

    <script>

        jQuery(window).on('load', function () {
            Laraberg.init('guttenberg-{{ $field['name'] }}');
        });

    </script>

@endpush
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}

I'm probably not following a lot of the internal coding choices with this but it might be a basis for something.

The issue here would be that the file upload functionality (which is a huge part of gutenberg) is done with the laravel-filemanager package and not elfinder on the laraberg example above. So either there would need to be elfinder integration done on the backpack-crud side somehow or there would need to be a think about being able to use laravel-filemanager instead of elfinder throughout the backpack-crud package.

[tabacitu]

Thanks a lot for sharing your code @DannyRevenant !

I'll give it a go and let you know - but right now it looks like a very cool feature for 4.0, or at least a package that can be easily installed on top of Backpack.

I don't think the fact that it uses laravel-filemanager instead of elFinder is a big downside - both can be pointed at the same folder.